/* Static horizontal fallback remains available before JS enhancement. */
.service-page .service-works-carousel { visibility: visible; min-width: 0; width: calc(100% + var(--content-inset) * 2); margin-inline: calc(var(--content-inset) * -1); scroll-margin-top: 105px; }
.service-works-carousel > :is(.works-toolbar, .works-browser) { margin-inline: var(--content-inset); }
.service-works-carousel .works-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 24px 0; border-top: 1px solid var(--ink); }
.works-toolbar strong { display: flex; align-items: baseline; gap: 14px; font: 400 48px/1.2 var(--display); }
.works-toolbar strong span { font: 500 16px/1.7 var(--body); }
.service-page .works-toolbar p { margin: 10px 0 0; font-size: 14px; }
.works-controls { display: flex; align-items: center; gap: 24px; }
.works-controls[hidden], .works-jump[hidden] { display: none; }
.works-position { min-width: 68px; font: 400 18px/1.5 var(--display); letter-spacing: .08em; }
.service-works-carousel .splide__arrows { display: flex; gap: 10px; }
.service-works-carousel .splide__arrow { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.service-works-carousel .splide__arrow:not(:disabled):hover { background: var(--accent-panel); color: #fff; border-color: var(--accent-panel); }
.service-works-carousel .splide__arrow:disabled { opacity: .3; cursor: default; }
.works-browser { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin: 0 0 28px; }
.service-page .works-browser > p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.9; color: #585855; }
.works-jump { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; }
.works-jump select { width: 300px; max-width: 100%; min-height: 48px; padding: 10px 32px 10px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font: 400 16px/1.6 var(--body); }
.service-works-carousel .splide__track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
.service-works-carousel .splide__list { display: flex; align-items: stretch; height: auto; margin: 0; padding: 0; }
.service-works-carousel:not(.is-initialized) .splide__list { gap: 28px; }
.service-works-carousel:not(.is-initialized) .splide__slide { flex: 0 0 46%; scroll-snap-align: start; }
.service-works-carousel.is-initialized .splide__track { overflow: hidden; scroll-snap-type: none; }
.service-works-carousel .splide__slide { height: auto; min-width: 0; }
.service-work-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); background: #fff; }
.service-work-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--paper); }
.service-work-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 26px; }
.service-work-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--accent-panel); }
.service-work-status { padding: 3px 8px; border: 1px solid currentColor; font-size: 14px; }
.service-work-body h3 { margin: 22px 0 16px; font-size: 26px; font-weight: 600; overflow-wrap: anywhere; }
.service-page .service-work-body p { margin: 0 0 24px; font-size: 16px; line-height: 2; }
.service-work-body a { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding: 18px 0 2px; border-top: 1px solid var(--line); font-size: 16px; text-underline-offset: 5px; }
.service-work-body a:hover { color: var(--accent-panel); }
.service-works-carousel :is(button, select, a):focus-visible { outline: 3px solid var(--accent-panel); outline-offset: -3px; }
@media (max-width: 700px) {
  .works-toolbar strong { font-size: 40px; }
  .works-controls { justify-content: space-between; width: 100%; gap: 16px; }
  .works-browser { gap: 16px; }
  .works-jump { display: grid; width: 100%; gap: 8px; }
  .works-jump select { width: 100%; }
  .service-work-body { padding: 20px; }
  .service-work-body h3 { font-size: 22px; }
  .service-works-carousel:not(.is-initialized) .splide__slide { flex-basis: 88%; }
}