/* ==========================================================================
   반응형 (≤1100 태블릿 / ≤860 / ≤640 모바일) — 상간소송 피고 랜딩페이지 (법무법인 정서)
   ========================================================================== */
/* ---------- 반응형 (태블릿·모바일은 PC 확정 후 디테일) ---------- */
@media (max-width:1100px){
  .header .wrap{--hx:24px} /* 태블릿: 히어로 패널·콘텐츠 가장자리(24px)와 맞춤 */
  .hero__in{padding:0 40px}
  .hero__panel{background-position:66% 20%}
  .hero__panel::before{background:linear-gradient(rgba(22,20,26,.28),rgba(22,20,26,.28)),linear-gradient(0deg,rgba(30,26,32,.92) 0%,rgba(30,26,32,.82) 42%,rgba(30,26,32,.2) 66%,rgba(30,26,32,0) 80%)}
  .hero__copy{align-self:end;padding-block:0 48px}
  .hero__name{right:24px;top:24px;bottom:auto}
  .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__no{font-size:26px}
  .sitem h3{font-size:22px}
  /* 태블릿 세로(≤860)부터 1단 */
  .dont .wrap,.ll{grid-template-columns:1fr;gap:48px}
  .ll__fig{max-width:520px;width:100%;margin:0 auto}
  .versus,.vgroup{flex-direction:column}
  .versus{--ring:min(340px,82vw)}
  .vgroup .vring+.vring{margin-left:0;margin-top:calc(var(--ring)*-.13)}
  .varrow{flex:0 0 auto;width:24px;height:55px;margin:22px 0}
  .varrow svg{transform:rotate(90deg);width:55px;height:24px;margin:15.5px -15.5px}
  .band__in{flex-direction:column;text-align:center;--bx:24px;padding-block:56px}
  .header__tel{display:none}
  .header .btn{white-space:nowrap}
  .team__grid{grid-template-columns:repeat(5,minmax(0,1fr));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}
  .goals__grid,.start__grid{grid-template-columns:1fr}
  .start__item+.start__item{border-left:0;border-top:1px solid #c4c4ca}
  .start__grid{border-top:0}
  .start__item{padding:40px 24px}
  .cases__page{grid-template-columns:1fr}
}
@media (max-width:640px){
  .start__ic{width:59px;height:59px}
  .start__ic svg{width:24px;height:24px}
  .sgrid{grid-template-columns:1fr;gap:14px;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:24px}
  .sitem h3{margin-top:12px;font-size:20px}
  .sitem p{font-size:14.5px}
  .lead{line-height:1.4}
  .m-br{display:inline}
  .pc-br{display:none}
  /* 제목 ↔ 콘텐츠 간격 절반 */
  :root{--tgap:32px}
  .band h2{font-size:26px}
  .myth .no{margin-top:36px}
  .myth__close{font-size:21px}
  .versus{margin-top:56px}
  .team{margin-top:60px}
  .team__h{margin-bottom:18px}
  .dont .wrap{gap:var(--tgap)}
  .dont .wrap>div:first-child{text-align:center}
  .dont__foot{margin-top:16px}
  .dont__foot+.btn{margin-top:20px}
  .dont__btn--pc{display:none!important}
  .dont__btn--mo{display:block;text-align:center;margin-top:calc(28px - var(--tgap))}
  /* 반복 박스 세로 간격 16px */
  .cases__page,.goals__grid,.dont__list,.myth .quotes{row-gap:16px}
  .team__grid{gap:16px!important}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .final{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .band__in{--bx:16px}
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .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(--ink)}
  .team__more[hidden]{display:none}
  .lcard__cap{flex-direction:row;align-items:baseline;gap:6px;padding:40px 16px 14px}
  body{font-size:16px}
  .header .btn,.header__tel small{display:none}
  .logo{gap:10px}
  .logo span{font-size:15px;padding:4px 0 4px 10px}
  .header__tel{width:42px;height:42px;border-radius:50%;justify-content:center;background:var(--plum);color:#fff;flex:0 0 auto}
  .header__tel span{display:none}
  .header__telic{display:block}
  :root{--hh:64px}
  .header .wrap{--hx:16px}
  .header__tel{display:none!important}
  .logo__svg{height:28px}
  .hero{--hgap:0px;padding:0}
  .hero__panel{border-radius:0;min-height:520px}
  /* 모바일 히어로: 위 제목 → 가운데 사진(500건 얹음) → 사진 아래 끝에 걸친 버튼 → 안내문 */
  .hero__panel{background:#26222a;--pb:84px}
  .hero__panel::before{display:none}
  .hero__photo{display:block;position:absolute;left:0;right:0;top:132px;bottom:var(--pb);background:url(../assets/images/hero-bg.webp) 66% 22%/cover no-repeat}
  .hero__photo::after{content:"";position:absolute;inset:-2px 0;background:linear-gradient(180deg,#26222a 0%,rgba(38,34,42,.94) 5%,rgba(38,34,42,.8) 10%,rgba(38,34,42,.6) 15%,rgba(38,34,42,.38) 20%,rgba(38,34,42,.2) 25%,rgba(38,34,42,.08) 30%,rgba(38,34,42,0) 36%,rgba(38,34,42,0) 52%,rgba(38,34,42,.1) 60%,rgba(38,34,42,.28) 68%,rgba(38,34,42,.5) 77%,rgba(38,34,42,.72) 86%,rgba(38,34,42,.9) 94%,#26222a 100%),linear-gradient(rgba(22,20,26,.32),rgba(22,20,26,.32))}
  .hero__in{padding:0 16px}
  .hero__copy{align-self:stretch;display:flex;flex-direction:column;padding-block:22px 18px;min-height:100%}
  .hero__copy .tag{font-size:13px;margin-bottom:12px}
  .hero h1{font-size:clamp(28px,8vw,34px);text-shadow:0 2px 12px rgba(0,0,0,.35)}
  .hero h1 b{white-space:normal}
  .hero__stat{margin-top:auto;margin-bottom:20px;justify-content:center;gap:14px}
  .hero__stat strong{font-size:40px}
  .hero__stat strong small{font-size:17px}
  .hero__stat p{font-size:14px;padding-left:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .hero__cta{margin-top:0;flex-direction:column;align-items:stretch;gap:14px}
  .hero__cta .btn{width:100%;justify-content:center}
  .hero__cta p{font-size:13px;text-align:center;padding-left:0}
  .hero__cta p br{display:none}
  .hero--form .hero__in{height:auto}
  .hero--form .hero__copy{padding-block:22px 18px;min-height:0}
  .hero__name{display:none}
  .myth .quotes p{font-size:16px;padding:14px 20px;border-radius:22px;max-width:86%;text-align:center}
  .myth .quotes p:nth-child(1){border-bottom-left-radius:8px}
  .myth .quotes p:nth-child(2){border-bottom-right-radius:8px}
  .versus,.vgroup{flex-direction:column}
  .versus{--ring:min(320px,82vw)}
  .vgroup .vring+.vring{margin-left:0;margin-top:calc(var(--ring)*-.13)}
  .varrow{flex-basis:auto;width:24px;height:55px;margin:22px 0}
  .varrow svg{transform:rotate(90deg);width:55px;height:24px;margin:15.5px -15.5px}
  .vring__ic svg{width:32px;height:32px}
  .vring__en{margin-top:16px;font-size:15px}
  .vring h3{font-size:25px}
  .vring p{font-size:14px}
  .cases__page{grid-template-columns:1fr}

  .situ__foot{font-size:20px;margin-top:36px}
  .vcard{grid-template-columns:1fr;min-height:0}
  .vcard__doc{padding:20px 20px 18px}
  .vcard__doc img{max-height:260px}
  .vcard__body{padding:20px 20px 18px}
  .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ll__head{grid-template-columns:minmax(0,1fr) 120px;gap:16px}
  .ll__en{font-size:28px;white-space:normal}
  .ll__box .ll__q{font-size:21px}
  .ll__box{margin-top:32px;padding-top:28px}
  .team__h{flex-direction:column;align-items:flex-start;gap:8px}
  .band__acts{flex-wrap:wrap;justify-content:center}
  .band__act{width:96px;height:96px}
  .dont__item{grid-template-columns:44px minmax(0,1fr);padding:11px 22px}
  .dont__x{width:40px;height:40px}
  .faq__q{grid-template-columns:30px minmax(0,1fr) 24px}
  .faq__q span{font-size:17px}
  .faq__a{grid-template-columns:1fr}.faq__a>div{grid-column:1}
  .areas{padding:4px 20px}
  .areas dl{grid-template-columns:1fr;gap:2px}
  .areas dd{margin-bottom:10px}
  .footer .wrap{grid-template-columns:1fr;gap:20px}
  .btn{height:56px;padding:0 26px;font-size:16px}
}
@media (max-width:640px) and (max-height:720px){.hero__name{display:none}}
@media (max-width:420px){.logo__svg{height:26px}.logo{gap:10px}.logo span{font-size:15px;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}}