/* v221: one mobile service scene and a tighter editorial accordion. */
@media (max-width:1180px){
  /* The cover-sized studio image was visible behind the smaller moving video,
     producing two different crops of WooGi at once. The still is now only a
     loading fallback, and the moving frame replaces it in the same aperture. */
  .s03-services-area.is-mobile-service-flow .svc-psd-media{
    background:#081451;
  }
  /* The 75svh scene needs one edge-to-edge frame. v220's .78 scale and
     feathered mask exposed the blue backing around both poster and video. */
  .s03-services-area.is-mobile-service-flow :is(.svc-psd-photo,.svc-psd-video){
    transform:none;
    -webkit-mask-image:none;
    mask-image:none;
    object-fit:cover;
    object-position:59% top;
  }
  .s03-services-area.is-mobile-service-flow .svc-psd-media.is-video-playing .svc-psd-photo{
    opacity:0;
  }
  .s03-services-area.is-mobile-service-flow .svc-psd-cutout{
    display:none;
  }
  .s03-services-area.is-mobile-service-flow .svc217-list{
    padding-top:clamp(32px,5svh,48px);
  }
  .s03-services-area.is-mobile-service-flow .svc220-headrow{
    align-items:flex-start;
    gap:8px;
    min-height:clamp(68px,9svh,88px);
  }
  .s03-services-area.is-mobile-service-flow .svc220-heading{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    min-height:44px;
    padding:9px 0 12px;
    align-self:flex-start;
  }
  .s03-services-area.is-mobile-service-flow .svc220-label{
    display:block;
    width:90.9%;
    font-family:"Pretendard Variable","Malgun Gothic",sans-serif;
    transform:scaleX(1.1);
    transform-origin:left top;
  }
  .s03-services-area.is-mobile-service-flow .svc220-action{
    align-self:flex-start;
    min-width:44px;
    margin-top:6px;
  }
}
@media (max-width:360px){
  .s03-services-area.is-mobile-service-flow .svc220-headrow{min-height:64px}
}