/* ---------- tokens ---------- */
:root{
  --ink:#141820;
  --ink-soft:#232a35;
  --line:#e3ded6;
  --line-dark:rgba(255,255,255,.14);
  --paper:#ffffff;
  --cream:#f7f5f1;
  --gold:#9c7f4a;
  --gold-lite:#c4a668;
  --body:#4b5261;
  --body-dim:#7b8394;
  --sans:"Noto Sans KR","Pretendard",-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo",Batang,serif;
  --wrap:1120px;
  --pad:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:66px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.8;
  letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0;font-weight:600;line-height:1.45;letter-spacing:-.02em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 20px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold);flex:none}
section{padding:clamp(72px,10vw,124px) 0;scroll-margin-top:66px}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;height:66px;
  display:flex;align-items:center;
  transition:background .35s ease,box-shadow .35s ease,height .35s ease;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;text-decoration:none;letter-spacing:.02em;white-space:nowrap;transition:color .35s}
.brand span{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.16em;color:var(--gold-lite);margin-left:10px}
.menu{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);list-style:none;margin:0;padding:0}
.menu a{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;
  padding:6px 0;position:relative;transition:color .25s;white-space:nowrap;
}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-lite);transition:width .3s}
.menu a:hover{color:#fff}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.active{color:#fff}
.nav.solid .menu a.active{color:var(--ink)}
.nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.solid .brand{color:var(--ink)}
.nav.solid .brand span{color:var(--gold)}
.nav.solid .menu a{color:var(--body)}
.nav.solid .menu a:hover{color:var(--ink)}

/* 햄버거 버튼 — 720px 이하에서만 보임 */
.navtoggle{
  display:none;width:42px;height:42px;margin-right:-10px;padding:0;
  background:none;border:0;cursor:pointer;position:relative;
}
.navtoggle span{
  position:absolute;left:11px;width:20px;height:1.5px;background:#fff;
  transition:transform .3s,opacity .2s,background .35s;
}
.navtoggle span:nth-child(1){top:14px}
.navtoggle span:nth-child(2){top:20px}
.navtoggle span:nth-child(3){top:26px}
.nav.solid .navtoggle span{background:var(--ink)}
.nav.open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .navtoggle span:nth-child(2){opacity:0}
.nav.open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav.open .navtoggle span{background:#fff}

@media (max-width:720px){
  .navtoggle{display:block}
  .menu{
    position:fixed;left:0;right:0;top:66px;z-index:49;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-top:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .35s ease,visibility .35s;
  }
  .nav.open .menu{max-height:420px;visibility:visible}
  .menu li+li{border-top:1px solid var(--line-dark)}
  /* 스크롤 중이면 .solid 가 함께 붙어 있어 활성 항목이 어두워지므로 여기서 되돌림 */
  .menu a,.nav.solid .menu a,.nav.solid .menu a.active{
    display:block;padding:15px var(--pad);color:rgba(255,255,255,.85);font-size:15px;
  }
  .menu a.active,.nav.solid .menu a.active{color:var(--gold-lite)}
  .menu a::after{display:none}
  .nav.open{background:var(--ink);box-shadow:none}
  .nav.open .brand,.nav.open .menu a{color:#fff}
  .nav.open .brand span{color:var(--gold-lite)}
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:calc(66px + clamp(56px,9vw,96px)) 0 clamp(56px,9vw,96px);
}
.hero::after{
  content:"";position:absolute;right:-14%;top:-24%;width:62vw;height:62vw;border-radius:50%;
  background:radial-gradient(circle,rgba(196,166,104,.13),transparent 62%);pointer-events:none;
}
.hero .wrap{
  position:relative;z-index:1;display:grid;gap:clamp(32px,3.2vw,40px);
  grid-template-columns:1fr .68fr;align-items:center;
}
.hero h1{color:#fff;font-size:clamp(32px,5.4vw,58px);line-height:1.28;margin:0 0 26px}
.hero h1 em{font-style:normal;color:var(--gold-lite)}
.hero .lead{font-size:clamp(15px,1.6vw,18px);line-height:1.9;color:rgba(255,255,255,.72);max-width:34em;margin:0 0 14px}
.hero .role{
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.18em;
  color:var(--gold-lite);margin:0 0 24px;display:inline-flex;align-items:center;gap:13px;
}
.hero .role::after{content:"";width:44px;height:1px;background:rgba(196,166,104,.5)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 34px;padding:0;list-style:none}
.hero-tags li{
  font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.78);
  border:1px solid var(--line-dark);border-radius:999px;padding:6px 15px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  padding:15px 30px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lite);border-color:var(--gold-lite);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-soft);transform:translateY(-2px)}

.hero-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line-dark);
}
.hero-links li{position:relative;display:flex;align-items:center}
.hero-links li+li::before{
  content:"";position:absolute;left:-10px;width:1px;height:11px;background:rgba(255,255,255,.2);
}
.hero-links a{
  font-size:13.5px;color:rgba(255,255,255,.6);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.hero-links a:hover{color:var(--gold-lite);border-bottom-color:var(--gold-lite)}
.hero-links a::after{content:" ↗";font-size:11px;opacity:.65}
/* 좁은 화면에서는 줄이 바뀌면서 구분선이 줄 맨 앞에 남는다 → 구분선을 없애고 간격만 둠 */
@media (max-width:720px){
  .hero-links{gap:12px 20px}
  .hero-links li+li::before{display:none}
}

/* 원본 비율(2:3) 그대로 노출 — 잘라내지 않음 */
.portrait{position:relative;justify-self:end;width:100%;max-width:400px}
.portrait img{width:100%;height:auto;filter:grayscale(.18) contrast(1.04)}
.portrait::before{
  content:"";position:absolute;inset:auto -16px -16px auto;width:62%;height:62%;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);z-index:-1;
}
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{order:-1;max-width:290px;justify-self:start}
  .portrait::before{inset:auto -12px -12px auto}
}

/* ---------- about ---------- */
.about .wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(38px,5vw,64px);align-items:center}
.about-photo{position:relative;justify-self:center;width:100%;max-width:360px}
.about-photo img{width:100%;height:auto;filter:grayscale(.1)}
.about h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:24px;line-height:1.5}
/* 줄바꿈은 브라우저에 맡기고(모든 줄이 꽉 참) 문단을 짧게 끊어 가독성을 확보 */
.about p{margin:0 0 20px;max-width:33em;text-align:justify;word-break:keep-all}
.about .closing{
  margin:30px 0 0;padding:16px 0 16px 22px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:17.5px;line-height:1.75;color:var(--ink);font-weight:500;
  /* 직접 줄을 나눈 문장이라 양쪽정렬을 하면 좁은 화면에서 글자 사이가 벌어짐 */
  text-align:left;
}
@media (max-width:880px){
  .about .wrap{grid-template-columns:1fr}
  .about-photo{max-width:360px}
}

/* ---------- value cards ---------- */
.values{background:var(--ink);color:#fff}
.values h2{color:#fff;font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.values .sub{color:rgba(255,255,255,.6);margin:0 0 clamp(38px,5vw,58px);max-width:40em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.card{background:var(--ink);padding:clamp(28px,3.4vw,40px);transition:background .3s}
.card:hover{background:var(--ink-soft)}
.card .num{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold-lite);display:block;margin-bottom:20px}
.card h3{color:#fff;font-size:19px;margin:0 0 14px;line-height:1.6}
.card p{margin:0;font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.66)}
@media (max-width:880px){.cards{grid-template-columns:1fr}}

/* ---------- practice areas ---------- */
.areas{background:var(--cream)}
.areas h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.areas .sub{margin:0 0 clamp(34px,4.5vw,54px);max-width:42em}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area{
  background:var(--paper);border:1px solid var(--line);padding:24px 20px 26px;
  display:flex;flex-direction:column;
  transition:border-color .28s,transform .28s,box-shadow .28s;
}
.area:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,24,32,.07)}
.area .no{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px}
/* 제목은 1줄이든 2줄이든 항상 2줄 높이를 차지 → 카드끼리 본문 시작 라인이 정렬됨 */
.area h3{font-size:17px;line-height:1.5;margin:0 0 4px;min-height:3em;text-wrap:balance}
.area p{margin:0;font-size:13.5px;line-height:1.85;color:var(--body-dim);text-wrap:pretty}
@media (max-width:1000px){
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .area h3{min-height:0}
}
@media (max-width:600px){
  .area-grid{grid-template-columns:1fr}
}

/* ---------- profile: career + credentials ---------- */
.profile{background:var(--paper)}
.profile .cols{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(38px,5vw,72px);
  align-items:start;
}
.blk-title{
  font-size:17px;letter-spacing:.02em;padding-bottom:13px;
  border-bottom:1px solid var(--gold);margin:0 0 20px;
}
.blk-title + .blk-title,.creds-blk + .creds-blk{margin-top:38px}
@media (max-width:880px){.profile .cols{grid-template-columns:1fr}}

/* 경력 · 학력 · 자격을 같은 표기로 통일 */
.plist{list-style:none;margin:0;padding:0}
.plist li{
  position:relative;padding:9px 0 9px 20px;font-size:15px;color:var(--ink);line-height:1.75;
  border-bottom:1px dashed rgba(0,0,0,.09);
}
.plist li:last-child{border-bottom:0}
.plist li::before{
  content:"";position:absolute;left:2px;top:18px;width:5px;height:5px;
  border:1px solid var(--gold);transform:rotate(45deg);
}
.plist li small{display:block;font-size:13px;color:var(--body-dim);margin-top:2px}
/* 주요 경력 — 성격별 소그룹 */
.pgroup + .pgroup{margin-top:30px}
.pgroup .grp{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  color:var(--gold);margin:0 0 5px;
}
/* 현재 활동 중인 경력 표시 */
.plist .now{
  display:inline-block;margin-left:9px;padding:1px 9px 2px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  color:var(--gold);border:1px solid var(--gold);border-radius:999px;
  vertical-align:2px;white-space:nowrap;
}

/* ---------- links ---------- */
.links{background:var(--cream)}
.links h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.links .sub{margin:0 0 clamp(34px,4.5vw,52px);max-width:40em}
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.link-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px 28px;border:1px solid var(--line);text-decoration:none;background:var(--paper);
  transition:border-color .28s,transform .28s,box-shadow .28s;
}
.link-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,24,32,.07)}
.link-card .t{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);margin:0 0 5px}
.link-card .d{display:block;font-size:13.5px;color:var(--body-dim);margin:0;line-height:1.6}
.link-card .arw{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--gold);font-size:14px;
  transition:background .28s,border-color .28s,color .28s;
}
.link-card:hover .arw{background:var(--gold);border-color:var(--gold);color:#fff}
@media (max-width:760px){.link-grid{grid-template-columns:1fr}}

/* ---------- 홈 · 최근 법률 칼럼 (2026-08-08) ----------
   목록 자체는 /columns/ 의 .col-list 를 그대로 쓴다. 새 색·새 모양을 만들지 않는다.
   앞뒤가 모두 흰 배경(profile · faq)이라 위쪽에 실선을 둬서 구획만 나눈다. */
.homecol{background:var(--paper);border-top:1px solid var(--line)}
/* 제목과 목록이 같은 선에서 시작하도록 섹션 폭을 /columns/ 의 .col-wrap 과 맞춘다 */
.homecol .wrap{max-width:760px}
.homecol h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.homecol .sub{margin:0 0 clamp(34px,4.5vw,52px);max-width:40em}
/* 홈에서는 섹션 제목이 h2 이므로 글 제목을 h3 으로 내렸다 (.col-list h2 와 같은 모양) */
.homecol .col-list h3{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(18px,2.4vw,22px);line-height:1.55;margin:0 0 9px;transition:color .2s;
}
.homecol .col-list a:hover h3{color:var(--gold)}
.homecol-all{margin:26px 0 0;text-align:right}
.homecol-all a{
  font-size:14px;font-weight:600;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(156,127,74,.35);padding-bottom:2px;transition:border-color .2s;
}
.homecol-all a:hover{border-bottom-color:var(--gold)}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:#fff;text-align:center}
.contact h2{color:#fff;font-size:clamp(26px,4vw,42px);line-height:1.5;margin-bottom:18px}
.contact .sub{color:rgba(255,255,255,.66);margin:0 auto clamp(36px,5vw,52px);max-width:32em}
.contact-rows{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark);max-width:760px;margin:0 auto clamp(34px,4.5vw,46px);
}
.contact-rows a{
  background:var(--ink);padding:30px 20px;text-decoration:none;display:block;transition:background .3s;
}
.contact-rows a:hover{background:var(--ink-soft)}
.contact-rows .k{display:block;font-size:11.5px;letter-spacing:.2em;color:var(--gold-lite);margin-bottom:10px}
.contact-rows .v{display:block;font-family:var(--serif);font-size:clamp(16px,2.2vw,21px);color:#fff;word-break:break-all}
.signature{
  margin:clamp(44px,6vw,64px) auto 0;padding-top:clamp(34px,4.5vw,44px);
  max-width:760px;border-top:1px solid var(--line-dark);
}
.signature .name{
  font-family:var(--serif);font-size:clamp(22px,3vw,28px);font-weight:600;
  color:#fff;margin:0;letter-spacing:.06em;
}
.signature .tag{
  font-size:13px;letter-spacing:.16em;color:var(--gold-lite);margin:12px 0 0;
}
.contact .note{font-size:13.5px;color:rgba(255,255,255,.45);margin:26px 0 0;line-height:1.9}
@media (max-width:640px){.contact-rows{grid-template-columns:1fr}}

/* ---------- 상담 신청 폼 ---------- */
.cform{
  max-width:760px;margin:clamp(40px,5.5vw,58px) auto 0;
  padding-top:clamp(34px,4.5vw,44px);border-top:1px solid var(--line-dark);text-align:left;
}
.cform h3{color:#fff;font-size:19px;text-align:center;margin:0 0 10px}
.cform .fsub{
  font-size:14px;color:rgba(255,255,255,.6);text-align:center;margin:0 0 30px;line-height:1.85;
}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{
  font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--gold-lite);
}
.field label .req{color:#d98b7a;margin-left:4px}
.agree .req{color:#d98b7a;margin-right:2px}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;line-height:1.7;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:2px;
  padding:13px 14px;width:100%;transition:border-color .25s,background .25s;
}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.07);
}
/* select 화살표 및 옵션 목록(윈도우에서 흰 배경이 되는 것 방지) */
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-lite) 50%),linear-gradient(135deg,var(--gold-lite) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:var(--ink);color:#fff}
.agree{
  grid-column:1 / -1;display:flex;align-items:flex-start;gap:11px;
  font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.62);margin-top:2px;cursor:pointer;
}
.agree input{flex:none;width:17px;height:17px;margin:4px 0 0;accent-color:var(--gold)}
.agree a{color:rgba(255,255,255,.8);text-underline-offset:3px}
.fsend{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.fsend .btn{padding:15px 34px}
.fmsg{font-size:13.5px;line-height:1.7;color:var(--gold-lite);margin:0}
.fmsg.err{color:#e79b8b}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .fsend .btn{width:100%}
}

/* ---------- footer ---------- */
footer{background:#0e1116;color:rgba(255,255,255,.42);padding:34px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
footer strong{font-family:var(--serif);color:rgba(255,255,255,.72);font-weight:600}

/* 광고 규정 표기 블록 — 「변호사 광고에 관한 규정」 제3조 제2항 (전 페이지 고정) */
.adnotice{
  flex:0 0 100%;border-top:1px solid rgba(255,255,255,.10);
  margin-top:8px;padding-top:20px;font-size:12.5px;line-height:1.95;
  color:rgba(255,255,255,.46);
}
.adnotice p{margin:0}
.adnotice strong{font-family:inherit;color:rgba(255,255,255,.66);font-weight:600}
.adnotice .nap{margin-top:6px;color:rgba(255,255,255,.36)}

/* ---------- mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid var(--line-dark);
}
.callbar a{
  padding:15px 8px;text-align:center;text-decoration:none;color:#fff;font-size:14px;font-weight:500;
}
.callbar a+a{background:var(--gold);border-left:1px solid var(--line-dark)}
@media (max-width:720px){
  .callbar{display:grid}
  body{padding-bottom:52px}
}

/* ---------- faq ---------- */
.faq{background:var(--paper)}
.faq h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.faq .sub{margin:0 0 clamp(30px,4vw,46px);max-width:42em}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;display:block;position:relative;
  padding:21px 46px 21px 0;
  font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--ink);
  line-height:1.6;letter-spacing:-.02em;transition:color .22s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:var(--gold)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.faq-item summary::after{
  content:"";position:absolute;right:10px;top:calc(50% - 8px);
  width:10px;height:10px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:transform .28s ease;
}
.faq-item[open] summary::after{transform:rotate(225deg);top:calc(50% - 4px)}
.faq-item[open] summary{color:var(--gold)}
.faq-a{
  margin:0;padding:2px 46px 26px 0;
  font-size:15px;line-height:1.95;color:var(--body);text-align:justify;
}
.faq-a strong{color:var(--ink);font-weight:500}
.faq-ul{margin:12px 0 18px;padding:0 46px 0 0;list-style:none}
.faq-ul li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.9;color:var(--body)}
.faq-ul li+li{margin-top:5px}
.faq-ul li::before{content:"";position:absolute;left:2px;top:.82em;width:4px;height:4px;background:var(--gold);transform:rotate(45deg)}
.faq-ul strong{color:var(--ink);font-weight:500}
.faq-src{display:block;margin-top:2px;font-size:12.5px;color:var(--body-dim)}
.faq-a+.faq-a{padding-top:0;margin-top:-14px}
.faq-note{
  margin:clamp(28px,3.6vw,40px) 0 0;padding-left:16px;
  border-left:2px solid var(--gold);
  font-size:13.5px;line-height:1.85;color:var(--body-dim);
}
@media (max-width:720px){
  .faq-item summary{font-size:15.5px;padding-right:38px}
  .faq-a{font-size:14.5px;padding-right:0;text-align:left}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================
   법률 칼럼 (11ty 도입, 2026-07-31)
   - 홈의 토큰(:root)을 그대로 쓴다. 새 색을 만들지 않는다.
   ============================================================ */

.col-main{padding-top:clamp(96px,12vw,132px);padding-bottom:clamp(72px,10vw,110px);background:var(--paper)}
.col-wrap{width:100%;max-width:760px;margin-inline:auto;padding-inline:var(--pad)}

/* ---- 경로(빵부스러기) ---- */
.crumb{font-size:13px;color:var(--body-dim);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumb a{color:var(--body-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.crumb span[aria-hidden]{opacity:.45}

/* ---- 제목 ---- */
.col-head{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:32px}
.col-head h1{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(26px,4.2vw,40px);line-height:1.42;margin:0 0 14px;text-wrap:balance;
}
.col-meta{margin:0;font-size:13.5px;color:var(--body-dim);letter-spacing:.01em}

/* ---- 한 줄 답 (AI·검색이 가장 먼저 읽는 블록) ---- */
.col-answer{
  background:var(--cream);border-left:3px solid var(--gold);
  padding:22px 24px;margin:0 0 34px;
}
.col-answer-label{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;
}
.col-answer p:last-child{margin:0;font-size:16.5px;line-height:1.8;color:var(--ink);font-weight:500}

/* ---- 본문 ---- */
.col-body{font-size:16px;line-height:1.95;color:var(--body)}
/* 문단 사이 */
.col-body>p{margin:0 0 21px}
.col-body h2{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(20px,2.8vw,26px);line-height:1.5;
  margin:clamp(42px,4.8vw,56px) 0 16px;padding-top:2px;
}
.col-body h3{
  font-size:17px;font-weight:700;color:var(--ink);
  margin:32px 0 12px;line-height:1.6;
}
.col-body p{margin:0 0 18px}
.col-body strong{color:var(--ink);font-weight:700}
.col-body a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(156,127,74,.35)}
.col-body a:hover{border-bottom-color:var(--gold)}
.col-body ul,.col-body ol{margin:0 0 20px;padding-left:1.25em}
.col-body li{margin:0 0 11px}
.col-body li::marker{color:var(--gold)}
.col-body blockquote{
  margin:24px 0;padding:16px 20px;border-left:3px solid var(--line);
  background:var(--cream);color:var(--ink);font-size:15.5px;
}
.col-body blockquote p:last-child{margin:0}
.col-body hr{border:0;border-top:1px solid var(--line);margin:clamp(28px,3.6vw,40px) 0}
.col-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--cream);padding:2px 6px;border-radius:3px;color:var(--ink);
}

/* 표 — 처벌·기준 글에는 표가 필수다 */
.col-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px}
.col-body thead th{
  background:var(--ink);color:#fff;font-weight:600;text-align:left;
  padding:11px 14px;border:1px solid var(--ink);
}
.col-body td,.col-body tbody th{padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.col-body tbody th{background:var(--cream);color:var(--ink);text-align:left;font-weight:600}
.col-body tbody tr:nth-child(even) td{background:#fbfaf8}
/* 좁은 화면에서 표가 페이지를 밀지 않도록 가로 스크롤 */
.col-body .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px}
.col-body .tablewrap table{margin:0;min-width:520px}

/* 세부분야 처벌수위 표 — .col-body 밖이라 위 규칙이 안 닿는다 (2026-08-31) */
.ptable{width:100%;border-collapse:collapse;margin:0;font-size:14.5px}
.ptable thead th{
  background:var(--ink);color:#fff;font-weight:600;text-align:left;
  padding:11px 14px;border:1px solid var(--ink);
}
.ptable td{padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.ptable tbody tr:nth-child(even) td{background:#fbfaf8}
.field-sec .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
.field-sec .tablewrap .ptable{min-width:520px}
.field-card h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold)}
.field-card h3 a:hover{color:var(--gold)}

/* ---- FAQ ---- */
.col-faq{margin-top:clamp(40px,4.6vw,54px);border-top:1px solid var(--line);padding-top:30px}
.col-faq h2{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:22px;margin:0 0 18px}
.col-faq details{border-bottom:1px solid var(--line)}
.col-faq summary{
  cursor:pointer;list-style:none;padding:17px 30px 17px 0;position:relative;
  font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.6;
}
.col-faq summary::-webkit-details-marker{display:none}
.col-faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:19px;font-weight:400;transition:transform .22s;
}
.col-faq details[open] summary::after{content:"−"}
.col-faq .faq-a{padding:0 30px 20px 0;margin:0;font-size:15px;line-height:1.85;color:var(--body)}
.col-faq .faq-a strong{color:var(--ink)}

/* ---- 근거 법령 · 관련 글 ---- */
.col-refs,.col-related{margin-top:34px}
.col-refs h2,.col-related h2{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.col-refs p{margin:0;font-size:14.5px;line-height:1.85;color:var(--body-dim)}
.col-related ul{margin:0;padding:0;list-style:none}
.col-related li{border-bottom:1px solid var(--line)}
.col-related li:first-child{border-top:1px solid var(--line)}
.col-related a{
  display:block;padding:14px 0;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:500;transition:color .2s,padding-left .2s;
}
.col-related a:hover{color:var(--gold);padding-left:6px}

/* ---- 작성자 · 면책 · 상담 유도 ---- */
.col-author{
  margin-top:clamp(36px,4.4vw,50px);padding:28px 28px;
  background:var(--cream);border-top:2px solid var(--gold);
}
.col-author-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin:0 0 12px;line-height:1.6;padding-top:2px}
.col-author-desc{margin:0 0 20px;font-size:14.5px;line-height:1.85;color:var(--body)}
.col-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.btn-line{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-line:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}
.col-disc{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.8;color:var(--body-dim)}

/* ---- 칼럼 목록 ---- */
.col-listhead{margin-bottom:clamp(36px,5vw,52px)}
.col-listhead h1{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(28px,4.4vw,42px);margin:14px 0 14px;
}
.col-listhead .sub{margin:0;max-width:40em;font-size:15.5px;line-height:1.9;color:var(--body)}
.col-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.col-list li{border-bottom:1px solid var(--line)}
.col-list a{display:block;padding:26px 0;text-decoration:none;transition:padding-left .22s}
.col-list a:hover{padding-left:8px}
.col-list-meta{margin:0 0 8px;font-size:12.5px;color:var(--body-dim);letter-spacing:.02em}
.col-list h2{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(18px,2.4vw,22px);line-height:1.55;margin:0 0 9px;transition:color .2s;
}
.col-list a:hover h2{color:var(--gold)}
.col-list-desc{margin:0 0 12px;font-size:14.5px;line-height:1.8;color:var(--body-dim)}
.col-list-more{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.02em}
.col-empty{padding:60px 0;text-align:center;color:var(--body-dim)}

@media (max-width:600px){
  .col-body{font-size:15.5px}
  .col-answer{padding:18px 18px}
  .col-author{padding:24px 20px}
  .col-cta .btn{width:100%}
}
/* ============================================================
   칼럼·분야 페이지 추가 블록 (2026-07-31)
   - 한눈에 보기 / 대응 단계 / 관련 법령 / 이전·다음 / 분야 페이지
   ============================================================ */

/* ---- 한눈에 보기 ---- */
.col-summary{
  background:var(--ink);color:rgba(255,255,255,.82);
  padding:26px 30px 28px;margin:0 0 34px;
}
.col-summary-title{
  margin:0 0 14px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--gold-lite);
}
.col-summary ul{margin:0;padding:0;list-style:none}
.col-summary li{
  position:relative;padding-left:24px;margin:0 0 13px;
  font-size:15.5px;line-height:1.85;
}
.col-summary li:last-child{margin-bottom:0}
.col-summary li::before{
  /* 15.5px x 1.85 = 28.7px 줄상자의 광학 중앙에 맞춘다.
     em 기준으로 두면 줄 위쪽에 떠 보인다. */
  content:"";position:absolute;left:0;top:14px;
  width:9px;height:1.5px;background:var(--gold-lite);
}
.col-summary strong{color:#fff;font-weight:600}

/* ---- 대응 단계 ---- */
.col-steps{margin-top:clamp(40px,4.6vw,54px);border-top:1px solid var(--line);padding-top:30px}
.col-steps h2,.field-sec h2{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(20px,2.8vw,26px);line-height:1.5;margin:0 0 20px;
}
.col-steps ol,.col-steps-list{margin:0;padding:0;list-style:none;counter-reset:step}
.col-steps li,.col-steps-list li{
  counter-increment:step;position:relative;
  padding:0 0 18px 46px;margin:0 0 18px;border-bottom:1px solid var(--line);
}
.col-steps li:last-child,.col-steps-list li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.col-steps li::before,.col-steps-list li::before{
  content:counter(step);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--gold);
}
.step-t{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.6}
.step-d{margin:0;font-size:14.8px;line-height:1.85;color:var(--body)}

/* ---- 관련 법령 ---- */
.col-laws{margin-top:clamp(40px,4.6vw,54px);border-top:1px solid var(--line);padding-top:30px}
.col-laws h2{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(20px,2.8vw,26px);margin:0 0 20px;
}
.law{background:var(--cream);border-left:3px solid var(--ink);padding:19px 22px;margin:0 0 12px}
.law-t{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.law-d{font-size:12px;font-weight:400;color:var(--body-dim);margin-left:6px}
.law-c{margin:0;font-size:14.5px;line-height:1.85;color:var(--body)}
.law-l{margin:10px 0 0}
.law-l a{font-size:13px;color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(156,127,74,.35)}
.law-l a:hover{border-bottom-color:var(--gold)}
.law-note{margin:14px 0 0;font-size:12.5px;line-height:1.8;color:var(--body-dim)}

/* ---- 이전 글 / 다음 글 ---- */
/* 이전 글만 있거나 다음 글만 있을 때 빈 칸이 남지 않도록 flex 로 둔다.
   (grid + 빈 <span> 으로 자리를 채우던 방식은 markup 이 지저분하고 한쪽만 있을 때 어색했다) */
.col-nav{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:clamp(28px,3.4vw,40px);
}
.col-nav a{
  flex:1 1 calc(50% - 7px);min-width:200px;
  display:block;padding:18px 20px;border:1px solid var(--line);
  text-decoration:none;transition:border-color .22s,transform .22s;
}
.col-nav a:hover{border-color:var(--gold);transform:translateY(-2px)}
.col-nav .next{text-align:right;margin-left:auto}
.col-nav-l{display:block;font-size:12px;color:var(--gold);font-weight:600;margin-bottom:6px}
.col-nav-t{display:block;font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.6}

/* ============================================================
   업무분야 상세 페이지
   ============================================================ */
.field-wrap{max-width:860px}
.field-lead{margin:14px 0 0;font-size:16.5px;line-height:1.9;color:var(--body)}
.field-main .col-head{border-bottom:0;padding-bottom:0;margin-bottom:28px}
.field-main .col-head h1{margin-top:12px}

/* 빠른 이동 */
.field-jump{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:16px 0 0;margin:0 0 clamp(38px,5vw,54px);
  border-top:1px solid var(--line);
}
.field-jump a{
  font-size:13px;color:var(--body-dim);text-decoration:none;
  padding:6px 13px;border:1px solid var(--line);border-radius:100px;
  transition:color .2s,border-color .2s,background .2s;
}
.field-jump a:hover{color:var(--gold);border-color:var(--gold);background:var(--cream)}

.field-sec{margin:0 0 clamp(42px,4.8vw,58px);scroll-margin-top:80px}

/* 세부분야 카드 */
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field-card{background:var(--paper);border:1px solid var(--line);padding:20px 20px 22px}
.field-card h3{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.55}
.field-card p{margin:0;font-size:14.2px;line-height:1.8;color:var(--body-dim)}

/* 주요 쟁점 */
.field-issues{margin:0;padding:0;list-style:none;counter-reset:iss}
.field-issues li{
  counter-increment:iss;position:relative;padding:0 0 20px;margin:0 0 20px;
  border-bottom:1px solid var(--line);
}
.field-issues li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.field-issues li::before{
  /* writing-mode:vertical-rl 로 세로로 눕혀 두었더니 숫자가 어색하게 붙어 보였다.
     .flow-when 과 같은 가로 라벨로 통일한다. (2026-07-31) */
  content:"쟁점 " counter(iss);display:block;margin:0 0 7px;
  font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:.08em;
}
.issue-t{margin:0 0 7px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.6}
.issue-d{margin:0;font-size:14.8px;line-height:1.85;color:var(--body)}

/* 분야 페이지의 관련 칼럼 */
.field-cols h3{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:17px;line-height:1.55;margin:0 0 8px;transition:color .2s;
}
.field-cols a:hover h3{color:var(--gold)}

@media (max-width:720px){
  .field-grid{grid-template-columns:1fr}
  .col-nav .next{text-align:left;margin-left:0}
}
@media (max-width:600px){
  .col-steps li,.col-steps-list li{padding-left:38px}
}
/* ---- 하위 페이지(칼럼·분야·목록)의 상단 메뉴 ----
   홈은 첫 화면이 어두워서 흰 글씨가 맞지만, 하위 페이지는 배경이 흰색이라
   흰 글씨가 그대로면 메뉴가 통째로 안 보인다. 처음부터 진한 상태로 고정한다. */
body.sub .nav{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body.sub .brand{color:var(--ink)}
body.sub .brand span{color:var(--gold)}
body.sub .menu a{color:var(--body)}
body.sub .menu a:hover{color:var(--ink)}
body.sub .menu a.active{color:var(--ink)}
body.sub .navtoggle span{background:var(--ink)}
@media (max-width:720px){
  /* 모바일에서 메뉴는 어두운 드롭다운이므로 글씨는 다시 흰색 */
  body.sub .menu a{color:rgba(255,255,255,.85)}
  body.sub .nav.open .brand{color:#fff}
  body.sub .nav.open .brand span{color:var(--gold-lite)}
  body.sub .nav.open .navtoggle span{background:#fff}
}
/* 업무분야 목록 카드 (링크형) */
.field-card-link{display:block;text-decoration:none;transition:border-color .22s,transform .22s}
.field-card-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.field-card-link h3{transition:color .2s}
.field-card-link:hover h3{color:var(--gold)}
.field-card-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--gold)}
/* 업무분야 카드 중 상세 페이지가 있는 것 (링크형) */
.area-link{text-decoration:none;color:inherit}
.area-link:hover{border-color:var(--gold)}
.area-link h3{transition:color .2s}
.area-link:hover h3{color:var(--gold)}
.area-more{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;color:var(--gold);letter-spacing:.01em}
/* ============================================================
   절차 흐름 (.flow) — 2026-07-31
   ASCII 다이어그램을 대체한다. 코드블록으로 그린 흐름도는
   본문 안에서 저품질로 읽히고 좁은 화면에서 깨진다.
   ============================================================ */
ol.flow{
  list-style:none;margin:26px 0 0;padding:0;position:relative;
  counter-reset:flowstep;
}
ol.flow::before{
  content:"";position:absolute;left:8px;top:9px;bottom:9px;width:1px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--line) 22%,var(--line) 78%,var(--gold) 100%);
}
ol.flow>li{position:relative;padding:0 0 24px 38px;margin:0}
ol.flow>li:last-child{padding-bottom:0}
ol.flow>li::before{
  content:"";position:absolute;left:2px;top:5px;
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--gold);box-sizing:border-box;
}
/* 마지막 단계·결말 노드는 채운 점 */
ol.flow>li.end::before{background:var(--gold)}
/* 분기(석방 등)로 빠지는 노드는 네이비 */
ol.flow>li.out::before{border-color:var(--ink);background:var(--ink)}

p.flow-when{
  margin:0 0 5px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;color:var(--gold);
}
p.flow-what{
  margin:0;font-family:var(--serif);font-size:17.5px;font-weight:600;
  color:var(--ink);line-height:1.5;
}
p.flow-note{margin:7px 0 0;font-size:14px;line-height:1.8;color:var(--body-dim)}
.flow-note strong{color:var(--ink);font-weight:600}

/* 그 단계에서 갈라지는 결과 */
.flow-out{
  margin:11px 0 0;padding:10px 14px;
  background:var(--cream);border-left:2px solid var(--gold);
  font-size:13.5px;line-height:1.75;color:var(--body);
}
.flow-out strong{color:var(--ink);font-weight:600}
.flow-out .k{
  display:inline-block;min-width:52px;font-weight:700;color:var(--gold);
  font-size:12.5px;margin-right:6px;
}

/* 나란히 두 갈래로 갈리는 구간 */
.flow-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:11px 0 0}
.flow-split>div{
  padding:13px 15px;border:1px solid var(--line);background:var(--paper);
}
p.flow-split-st,.flow-split .st{
  margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--gold);
}
.flow-split p:last-child{margin:0;font-size:13.5px;line-height:1.75;color:var(--body)}

@media (max-width:600px){
  ol.flow>li{padding-left:32px}
  .flow-split{grid-template-columns:1fr}
}
/* ============================================================
   ⚠️ 글 페이지의 section 여백 리셋 (2026-07-31)
   홈 전용 규칙  section{padding:clamp(72px,10vw,124px) 0}  이
   칼럼·업무분야 페이지의 모든 <section> 에도 걸려서
   블록 사이에 위아래 최대 124px 씩 빈 공간이 생기고 있었다.
   글 안에서는 그 여백이 과하므로 각 블록이 자기 여백만 갖게 한다.
   ============================================================ */
/* 홈 전용 규칙은  section{padding:clamp(72px,10vw,124px) 0}  이다.
   좌우는 이미 0 이므로 위아래만 리셋하면 된다.
   ⚠️ 좌우까지 0 으로 눌렀더니 .col-summary·.col-author 의 안쪽 여백까지 죽어
      글자가 박스 가장자리에 붙어 "잘려 보이는" 문제가 났다. (2026-07-31) */
.col-main section{padding-top:0;padding-bottom:0}

/* ⚠️ .col-main section 은 (클래스1+요소1) 이라 .col-summary (클래스1) 보다 세다.
      순서를 뒤로 미뤄도 이기지 못하므로, 자기 여백을 갖는 박스는
      클래스를 둘 겹쳐 특이도를 올린다. */
.col-main .col-summary{padding:26px 30px 28px}
.col-main .col-author{padding:28px 30px}
.col-main .col-steps,
.col-main .col-laws,
.col-main .col-faq{padding-top:30px}
@media (max-width:600px){
  .col-main .col-summary{padding:20px 20px 22px}
  .col-main .col-author{padding:24px 20px}
}
/* ---------- fieldbar (히어로 아래 분야 바) ---------- */
.fieldbar{
  padding:0;background:var(--ink-soft);border-bottom:1px solid var(--line-dark);
  scroll-margin-top:0;
}
.fieldbar ul{
  display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.4vw,30px);
  margin:0;padding:14px 0;list-style:none;
}
.fieldbar li{position:relative;display:flex;align-items:center}
.fieldbar li+li::before{
  content:"";position:absolute;left:calc(clamp(14px,2.4vw,30px)/-2);top:50%;
  width:1px;height:11px;transform:translateY(-50%);background:rgba(255,255,255,.18);
}
.fieldbar a,.fieldbar span{
  display:block;padding:5px 0;font-size:14px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;color:rgba(255,255,255,.74);transition:color .18s;
}
.fieldbar a:hover,.fieldbar a:focus-visible{color:var(--gold-lite)}
.fieldbar span{color:rgba(255,255,255,.38)}
@media (max-width:720px){
  .fieldbar ul{gap:0 16px;padding:11px 0}
  .fieldbar a,.fieldbar span{font-size:13px}
}

/* ---------- midcta (본문 중간 상담 유도) ---------- */
.midcta{
  margin:clamp(34px,5vw,52px) 0;padding:clamp(22px,3.2vw,30px);
  background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);
}
.midcta-t{
  margin:0 0 16px;font-family:var(--serif);font-size:clamp(16px,1.9vw,19px);
  font-weight:600;color:var(--ink);line-height:1.6;
}
.midcta .col-cta{margin:0}

/* ---------- verify (근거 확인 기록) ---------- */
.verify{
  margin:clamp(30px,4vw,44px) 0 0;padding:clamp(18px,2.6vw,24px);
  background:var(--paper);border:1px solid var(--line);
}
.verify-title{
  margin:0 0 12px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.verify ul{margin:0;padding:0;list-style:none}
.verify li{
  font-size:14px;line-height:1.85;color:var(--body);
  padding-left:14px;position:relative;
}
.verify li::before{
  content:"";position:absolute;left:0;top:.82em;width:5px;height:1px;background:var(--gold);
}
.verify li b{color:var(--ink);font-weight:600;margin-right:6px}
.verify-note{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--body-dim)}