/* v234: keep the mobile accordion toggle and project link as separate controls. */
@media (max-width: 1180px) {
  .s03-services-area.is-mobile-service-flow .svc220-item .svc220-action,
  .s03-services-area.is-mobile-service-flow .svc220-item.is-open .svc220-action {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    font-size: 0;
    transform: translateY(-4px);
    animation: none;
    opacity: 1;
  }
  .s03-services-area.is-mobile-service-flow .svc234-plus {
    --plus-size: clamp(24px, 6.4vw, 28.8px);
    position: relative;
    display: block;
    flex: none;
    width: var(--plus-size);
    height: var(--plus-size);
    transform: rotate(0deg);
    transition: transform 240ms cubic-bezier(.23, 1, .32, 1);
  }
  .s03-services-area.is-mobile-service-flow .svc234-plus::before,
  .s03-services-area.is-mobile-service-flow .svc234-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
  }
  .s03-services-area.is-mobile-service-flow .svc234-plus::before {
    width: var(--plus-size);
    height: 1px;
  }
  .s03-services-area.is-mobile-service-flow .svc234-plus::after {
    width: 1px;
    height: var(--plus-size);
  }
  .s03-services-area.is-mobile-service-flow .svc220-item.is-open .svc234-plus {
    transform: rotate(45deg);
  }
  .s03-services-area.is-mobile-service-flow .svc220-details {
    transition: grid-template-rows 300ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease-out;
  }
  .s03-services-area.is-mobile-service-flow .svc234-details-inner {
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(8px, 2vw, 16px);
    padding-bottom: 0;
    transition: padding-bottom 300ms cubic-bezier(.23, 1, .32, 1);
  }
  .s03-services-area.is-mobile-service-flow .svc220-item.is-open .svc234-details-inner {
    padding-bottom: clamp(20px, 3svh, 34px);
  }
  .s03-services-area.is-mobile-service-flow .svc220-body {
    grid-column: 1;
    min-width: 0;
  }
  .s03-services-area.is-mobile-service-flow .svc225-body-inner { padding-bottom: 0; }
  .s03-services-area.is-mobile-service-flow .svc234-project {
    box-sizing: border-box;
    display: flex;
    grid-column: 2;
    align-items: flex-end;
    justify-content: flex-end;
    justify-self: end;
    align-self: end;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .s03-services-area.is-mobile-service-flow .svc234-project-visual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    background: #111;
    color: #fff;
    font: 700 clamp(10px, 2.8vw, 12px)/1 "Pretendard Variable", "Malgun Gothic", sans-serif;
    white-space: nowrap;
    animation: svc227-pulse .8s ease-in-out infinite;
  }
  .s03-services-area.is-mobile-service-flow .svc234-project .svc228-arrow {
    display: block;
    flex: none;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }
  .s03-services-area.is-mobile-service-flow .svc234-project:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .s03-services-area.is-mobile-service-flow .svc234-plus,
  .s03-services-area.is-mobile-service-flow .svc234-details-inner,
  .s03-services-area.is-mobile-service-flow .svc220-details { transition: none; }
  .s03-services-area.is-mobile-service-flow .svc234-project-visual { animation: none; opacity: 1; }
}