/* RECOVERIC 매거진 · 좌우 넘기기 줄 공용 부품 (2026-11-05 · docs/20261104_디자이너브랜드_플랫폼_기획.md 13-2 · assets/js/slide-row.js)
   구조: section.sr[data-sr] > .sr-head(번호 · 영문 · 한글 제목 | 전체 보기 → · 원형 외곽선 화살표 2개) + .sr-track[data-sr-track] > .sr-cell
   - 화살표는 챕터 머리 오른쪽에만 둔다(사진 위에 얹지 않음) · 지름 44px · 1px 선 · 끝에서 흐리게(aria-disabled)
   - 한 줄에 PC 4장 반 · 휴대폰 1.6장(다음 장이 살짝 보여 넘길 수 있음을 알린다) · scroll-snap · 스크롤 막대 없음
   - .sr-1 = 한 장씩(표지) · .sr-4 = PC 4장 꼭 맞게(Brand Focus 대표 의류 4건)
   - 흰 바탕 하나(챕터마다 색을 바꾸지 않는다) · 모든 글 keep-all */
.sr{--sr-gap:24px;--sr-per:4.5;--sr-gaps:4;position:relative;word-break:keep-all}
.sr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid #111111}
.sr-ttl{min-width:0}
.sr-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;margin:0;font:500 11px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#5A5A5A}
.sr-no{font-family:'Bodoni Moda',serif;font-size:15px;font-weight:500;letter-spacing:.04em;color:#1B2438;-webkit-text-stroke:.3px #1B2438}
.sr-en{font-family:'Bodoni Moda',serif;font-size:12px;font-weight:500;letter-spacing:.28em;color:#111111}
.sr-s{font:400 9.5px/1 'Bodoni Moda',serif;letter-spacing:.22em;text-transform:uppercase;color:#6B6B6B}
.sr-h{margin:12px 0 0;font-family:'Noto Serif KR',serif;font-size:30px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:#111111}
.sr-side{display:flex;align-items:center;gap:22px;flex:none}
.sr-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1 'Noto Sans KR',sans-serif;letter-spacing:.06em;color:#111111;text-decoration:none;white-space:nowrap}
.sr-more:hover{text-decoration:underline;text-underline-offset:5px}
.sr-more:focus-visible{outline:2px solid #1B2438;outline-offset:3px}
.sr-more-ar{font-family:'Bodoni Moda',serif;font-size:15px}
.sr-cnt{display:flex;align-items:baseline;gap:6px;margin:0;font-size:14px;color:#111111;white-space:nowrap}
.sr-cnt .bod{font-size:15px;letter-spacing:.04em;-webkit-text-stroke:.25px #111111}
.sr-of{color:#6B6B6B}
.sr-ctl{display:flex;gap:10px}
.sr-ar{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #111111;border-radius:50%;background:#FFFFFF;color:#111111;cursor:pointer;transition:opacity .25s ease,background .2s ease,color .2s ease,border-color .2s ease}
.sr-ar:hover:not([aria-disabled="true"]){background:#1B2438;border-color:#1B2438;color:#FFFFFF}
.sr-ar:focus-visible{outline:2px solid #1B2438;outline-offset:3px}
.sr-ar[aria-disabled="true"]{opacity:.22;cursor:default}
.sr-ar svg{display:block}
.sr-track{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--sr-gap) * var(--sr-gaps)) / var(--sr-per));column-gap:var(--sr-gap);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sr-track::-webkit-scrollbar{display:none}
.sr-track:focus{outline:none}
.sr-track:focus-visible{outline:2px solid #1B2438;outline-offset:6px}
.sr-cell{min-width:0;scroll-snap-align:start}
.sr-1{--sr-per:1;--sr-gaps:0;--sr-gap:0px}
.sr-4{--sr-per:4;--sr-gaps:3}
@media (prefers-reduced-motion:reduce){.sr-ar{transition:none}}
@container mg (max-width:960px){
  .sr{--sr-gap:14px;--sr-per:1.6;--sr-gaps:1}
  .sr-1{--sr-per:1;--sr-gaps:0;--sr-gap:0px}
  .sr-4{--sr-per:1.6;--sr-gaps:1}
  .sr-head{align-items:flex-end;gap:12px;padding-bottom:14px}
  .sr-h{margin-top:10px;font-size:23px}
  .sr-meta{gap:0 10px;letter-spacing:.24em}
  .sr-side{gap:10px}
  .sr-ctl{gap:8px}
  .sr-ar{width:44px;height:44px}
  .sr-more{font-size:12.5px;letter-spacing:.02em}
  .sr-cnt{display:none}
  .sr-track{margin-top:22px;margin-right:-20px}   /* 휴대폰: 줄만 화면 오른쪽 끝까지(다음 장이 화면 끝에서 잘려 보이게) */
  .sr-1 .sr-track{margin-right:0}
}
@container mg (max-width:420px){
  .sr-head{flex-wrap:wrap}
  .sr-side{flex:1 1 100%;justify-content:space-between;margin-top:2px}
  .sr-more{margin-left:-2px}
  .sr-side:not(:has(.sr-more)){justify-content:flex-end}
}