/* ===== 호버 효과 v1 — 청유(淸流): 선이 왼쪽에서 흘러 채워지는 하나의 모티프로 통일 ===== */
:root{--cy-ease:cubic-bezier(.22,.61,.36,1);--cy-flow:linear-gradient(var(--brass,#A5814B),var(--brass,#A5814B));--cy-flow-soft:linear-gradient(var(--brass-soft,#CBB287),var(--brass-soft,#CBB287))}

/* 키보드 이동 시에도 위치가 보이도록 */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass,#A5814B);outline-offset:3px}

/* 1) 텍스트 링크: 밑줄이 왼쪽에서 흘러 들어옴 */
.gnb a:not(.cur),.ft-nav a,.ft-link a,.bc a{background:var(--cy-flow) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--cy-ease),color .35s ease,opacity .3s ease}
.ft-nav a,.ft-link a{background-image:var(--cy-flow-soft)}

/* 2) 목록 행: 아래 선이 금색으로 채워지고 내용이 살짝 흘러감 */
.svc-item,.office-aside li,.doc-item,.faq details,.sidebar .card-aside li{background:var(--cy-flow) 0 100%/0 1px no-repeat;transition:background-size .7s var(--cy-ease)}
.kakao-steps li,.case{background:var(--cy-flow-soft) 0 100%/0 1px no-repeat;transition:background-size .7s var(--cy-ease)}
.svc-item>div,.office-aside li b,.kakao-steps li b,.doc-item>div:first-child,.faq summary b,.case-dt,.sidebar .card-aside li span{transition:transform .5s var(--cy-ease),color .35s ease}
.svc-item i,.office-aside li i,.kakao-steps li i,.faq summary i,.case>i{transition:color .35s ease,letter-spacing .5s var(--cy-ease)}
.faq summary b{display:block}
.faq summary svg{transition:transform .45s var(--cy-ease),opacity .3s ease,color .3s ease}

/* 3) 카드: 테두리가 또렷해지고 목록 앞 짧은 선이 길어짐 */
.flow-cardA,.flow-cardB,.proc-card{transition:border-color .4s ease,box-shadow .5s var(--cy-ease)}
.flow-cardA li::before,.flow-cardB li::before{transition:width .45s var(--cy-ease)}
.flow-cardA li,.flow-cardB li{transition:padding-left .45s var(--cy-ease)}

/* 4) 사진: 채도가 살아나며 은은하게 밝아짐(크기 변화 없음) */
.svc-visual img,.office-visual img,.kakao-img img{transition:filter .9s var(--cy-ease)}
.story-thumb img{transition:transform 1.1s var(--cy-ease)}

/* 5) 계산기 */
.tabs button{transition:color .3s ease,border-color .35s ease}
.f input,.f select{transition:border-color .3s ease,background .3s ease}
#refTable tbody tr td{transition:background .3s ease}

@media (hover:hover) and (pointer:fine){
  .gnb a:not(.cur):hover,.ft-nav a:hover,.ft-link a:hover,.bc a:hover{background-size:100% 1px}
  .logo em{transition:letter-spacing .6s var(--cy-ease)}
  .logo:hover em{letter-spacing:.34em}

  .svc-item:hover,.office-aside li:hover,.doc-item:hover,.faq details:hover,.sidebar .card-aside li:hover,
  .kakao-steps li:hover,.case:hover{background-size:100% 1px}
  .svc-item:hover i,.office-aside li:hover i,.faq summary:hover i{color:var(--brass-h,#8F6F3E);letter-spacing:.12em}
  .kakao-steps li:hover i,.case:hover>i{color:#F4F1EA;letter-spacing:.12em}
  .faq summary:hover svg{opacity:1;color:var(--brass,#A5814B)}
  .doc-item:hover .doc-name{color:var(--brass-h,#8F6F3E)}

  .flow-cardA:hover,.flow-cardB:hover,.proc-card:hover{border-color:var(--line-strong,rgba(22,33,31,.55));box-shadow:0 14px 34px rgba(9,15,14,.07)}
  .flow-cardA:hover li::before,.flow-cardB:hover li::before{width:11px}
  .flow-cardA:hover li,.flow-cardB:hover li{padding-left:18px}

  .svc-visual:hover img,.office-visual:hover img,.kakao-img:hover img{filter:saturate(1) contrast(1) brightness(1.04)}
  .story-card:hover .story-thumb img{transform:scale(1.035)}

  .tabs button:not(.on):hover{color:var(--ink,#16211F);border-bottom-color:var(--line-strong,rgba(22,33,31,.55))}
  .f input:hover:not(:focus),.f select:hover:not(:focus){border-color:var(--line-strong,rgba(22,33,31,.55))}
  #refTable tbody tr:hover td{background:var(--vellum,#EFEAE2)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .svc-item:hover>div,.office-aside li:hover b,.kakao-steps li:hover b,.doc-item:hover>div:first-child,.faq summary:hover b,.case:hover .case-dt,.sidebar .card-aside li:hover span{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){
  .story-thumb img,.flow-cardA li,.flow-cardB li,.flow-cardA li::before,.flow-cardB li::before{transition:none}
}

/* 첫 화면(어두운 헤더)에서 전화 버튼이 묻히던 문제 보정 */
.hd.solid-inverse .hd-tel{color:#F4F1EA;border-color:rgba(244,241,234,.42)}
.hd.solid-inverse .hd-tel:hover{color:var(--brass-soft,#CBB287);border-color:var(--brass-soft,#CBB287)}

/* 챗봇 하단 '카카오톡 상담' 버튼에 본문 카카오 안내 구역(.kakao) 스타일이 섞여 커지던 문제 보정 */
.chat-foot .ct.kakao{display:flex;margin:0;padding:0 8px;gap:0;grid-template-columns:none;height:44px;align-self:stretch}

/* 상단 전화 버튼: '회생파산센터 다이렉트 콜' + 번호 2줄 */
.hd-tel{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:7px 18px 8px;line-height:1.15}
.hd-tel small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--brass,#A5814B);transition:color .4s ease}
.hd-tel b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hd.solid-inverse .hd-tel small{color:var(--brass-soft,#CBB287)}
.hd-tel b{white-space:nowrap}
@media(max-width:760px){.hd-tel small{display:none}.hd-tel{padding:7px 10px;flex-shrink:0}.hd-tel b{font-size:12.5px;letter-spacing:0}}