/* ==========================================================================
   반응형 (≤1100 태블릿 / ≤860 / ≤640 모바일) — 상간소송 원고 랜딩페이지 (법무법인 정서)
   ========================================================================== */
/* ---------- 반응형 (≤1100 태블릿 / ≤860 / ≤640 모바일) ---------- */
@media (max-width:1100px){
  .fcard__ko{font-size:18px}
  .fcard__body li{font-size:14.5px}
  .hero__in{padding-left:40px;padding-right:40px}
  .hero__copy{max-width:56%}
  .hero h1{white-space:normal}
  .hero h1 b{white-space:normal}
  .hero__person{right:-20px}
  .header .wrap{--hx:24px}
  .quick{display:none}
}
@media (max-width:860px){
  .sgrid{grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:70px}
  .sitem:nth-child(3n+2){transform:none}
  .sitem:nth-child(even){transform:translateY(70px)}
  .js .sitem:nth-child(n){transition-delay:0s}
  .js .sitem:nth-child(even){transition-delay:.14s}
  .sitem{padding:28px 26px 30px}
  .sitem h3{font-size:22px}
  .dont .wrap,.ll{grid-template-columns:1fr;gap:48px}
  .ll__fig{max-width:520px;width:100%;margin:0 auto}
  .band__in{flex-direction:column;text-align:center;--bx:24px;padding-block:56px}
  .header__tel{display:none}
  .team__grid{gap:12px}
  .lcard__cap{flex-direction:column;align-items:flex-start;gap:0;padding:28px 12px 12px}
  .lcard__cap b{font-size:16px}.lcard__cap span{font-size:12px}
  .paths__in,.start__grid,.partners{grid-template-columns:1fr}
  .start__item+.start__item{border-left:0;border-top:1px solid rgba(218,194,163,.45)}
  .path{padding:48px 28px 40px}
  .path+.path::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:rgba(255,255,255,.12)}
  .start__item{padding:56px 24px 52px}
  .cases__page{grid-template-columns:1fr}
  .partners{margin-top:36px;gap:40px}
}
@media (max-width:640px){
  /* 원스톱: 모바일은 탭 줄 숨기고 카드를 가로로 밀어 보기 */
  .flow .wrap{padding-left:0;padding-right:0}
  .flow__tabs{display:flex;gap:12px;overflow:hidden;padding:0 16px}
  .flow__tab,.flow__tab.on{flex:0 0 72%;height:48px;color:var(--gold)}
  .flow__tab::after,.flow__tab.on::after{transform:scaleX(1);transition:none}
  .flow__cards{margin-top:16px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 16px 4px}
  .fcard,.fcard.on{opacity:1;background:var(--card-2)}
  .flow__cards::-webkit-scrollbar{display:none}
  .fcard{flex:0 0 72%;scroll-snap-align:center}
  /* 모바일 히어로: 제목 → 인물(아래 페이드) → 500건(사진에 걸침) → 버튼 → 안내문 */
  .hero{height:auto;min-height:0;overflow:visible;background:radial-gradient(420px 380px at 50% 400px,var(--brown-a),transparent 70%)}
  .hero__in{height:auto;display:flex;flex-direction:column;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .hero__copy{display:contents}
  .hero__tag{order:1;margin:28px 0 12px;font-size:13px;text-align:center}
  .hero h1{order:2;margin-top:32px;text-align:center;white-space:normal;font-size:clamp(28px,8vw,34px)}
  .hero h1 b{white-space:normal}
  .hero__person{order:3;position:relative;right:auto;bottom:auto;height:auto;width:min(70%,300px);margin:28px auto 0}
  /* 모바일: 검정 덧칠 대신 사진 자체를 투명하게 흐려서 뒤 배경빛·버튼과 경계가 생기지 않게 */
  .hero__glow{width:150%;background:radial-gradient(circle,rgba(227,201,170,.30) 0%,rgba(218,194,163,.16) 30%,rgba(218,194,163,.05) 52%,transparent 70%)}
  .hero__person img{-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 96%);mask-image:linear-gradient(180deg,#000 58%,transparent 96%)}
  .hero__stat{order:4;margin-top:-72px;justify-content:center;gap:14px;position:relative;z-index:3}
  .hero__stat strong{font-size:40px}
  .hero__stat strong small{font-size:17px}
  .hero__stat p{font-size:14px;padding-left:14px;color:var(--tx)}
  .hero .form-slot{order:5;margin-bottom:8px}
  .hero--form .hero__copy{padding-block:0}
  .hero__cta{order:5;margin:24px 0 8px;align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .hero__cta p{font-size:13px;text-align:center;padding-left:0}
  .hero__note{display:block}
  .hero__note span:first-child{margin-right:.3em}
  .hero__name{display:none}
  :root{--tgap:32px;--hh:64px}
  .cases__pager{display:flex}
  .sec{padding-block:64px}
  body{font-size:16px}
  .m-br{display:inline}
  .pc-br{display:none}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .en{font-size:15px;letter-spacing:.26em;margin-bottom:16px}
  .lead{font-size:16px;line-height:1.6}
  .header .wrap{--hx:16px}
  .header .btn,.header__tel{display:none!important}
  .logo{gap:10px}
  .logo__svg{height:28px}
  .logo span{font-size:15px;padding:4px 0 4px 10px}
  .sgrid{grid-template-columns:1fr;gap:16px;padding-bottom:0}
  .sitem:nth-child(n){transform:none}
  .js .sitem:nth-child(n){transition-delay:0s}
  .sitem{aspect-ratio:4/3.3;padding:24px;border-radius:20px}
  .sitem__no{font-size:30px}
  .sitem h3{margin-top:12px;font-size:20px}
  .sitem p{font-size:14.5px}
  .situ__foot{font-size:21px;margin-top:40px}
  .vcard{grid-template-columns:1fr;min-height:0}
  .vcard h3,.partner h3{font-size:18px}
  .vcard__doc{padding:20px 20px 18px}
  .vcard__doc img{max-height:260px}
  .vcard__body{padding:20px 20px 18px}
  .vcard__res span{font-size:26px}
  .vcard__res svg{flex-basis:24px;width:24px;height:24px}
  .cases__page{row-gap:16px}
  .ll__head{grid-template-columns:minmax(0,1fr) 120px;gap:16px}
  .ll__en{font-size:28px;white-space:normal}
  .ll__name b{font-size:32px}
  .ll__q{font-size:21px}
  .ll__box{margin-top:32px;padding-top:28px}
  .team{margin-top:60px}
  .team__h{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important}
  .team__more{display:flex;justify-content:center;margin-top:-6px;position:relative}
  .team__more .btn{border:0;background:none;height:auto;padding:10px 14px;color:var(--tx)}
  .lcard__cap{flex-direction:row;align-items:baseline;gap:6px;padding:40px 16px 14px}
  .paths{border-radius:24px}
  .band__in{--bx:16px}
  .band h2{font-size:24px}
  .band__acts{flex-wrap:wrap;justify-content:center}
  .band__act{width:96px;height:96px}
  .dont .wrap{gap:var(--tgap)}
  .dont .wrap>div:first-child{text-align:center}
  .dont__btn--pc{display:none!important}
  .dont__btn--mo{display:block;text-align:center;margin-top:calc(28px - var(--tgap))}
  .dont__item{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:14px 20px}
  .dont__x{width:40px;height:40px}
  .dont__item h3{font-size:18px}
  .dont__item p{font-size:14.5px}
  .one__close{font-size:22px;margin-top:72px}
  .start__item h3{font-size:20px;margin-top:28px}
  .start__item p{font-size:14.5px}
  .faq__q{grid-template-columns:30px minmax(0,1fr) 24px;padding:22px 4px}
  .faq__q span{font-size:17px}
  .faq__a{grid-template-columns:1fr}.faq__a>div{grid-column:1}
  .faq__a p{padding:18px 20px;font-size:15.5px}
  .areas{padding:4px 20px}
  .areas dl{grid-template-columns:1fr;gap:2px}
  .areas dd{margin-bottom:10px}
  .final{padding:0 max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .final__in{padding:84px 20px 76px;border-radius:24px}
  .footer .wrap{grid-template-columns:1fr;gap:20px}
  .footer .links{margin-top:4px;padding-top:18px}
  .footer dl{grid-template-columns:1fr;gap:0}
  .footer dd{margin-bottom:8px}
  .btn{height:56px;padding:0 26px;font-size:16px}
}
@media (max-width:420px){.logo__svg{height:26px}.logo span{font-size:14px;padding-left:10px}}
@media (max-width:340px){.logo__svg{height:22px}.logo span{font-size:13px;padding-left:8px}.logo{gap:8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}