/* ============================================================
   스크린샷 캐러셀 (.hx-carousel) — 공용
   ============================================================
   /<lang>/harmonyos/xshell/ 의 "Key features" 캐러셀에서 2026-10-07 에 추출했다.
   HarmonyOS Xftp·Xmanager 소개 페이지에서 같은 마크업으로 재사용하기 위한 것이고,
   추출 시점의 선언·순서를 그대로 옮겨 화면 변화는 없다.

   쓰는 법: `../carousel.css` + `../carousel.js` 를 걸고(빌드가 절대경로로 바꾼다)
   아래 구조를 그대로 쓴다. 동작·접근성 설명은 carousel.js 머리말에.

     <section class="hx-carousel"><div class="container">
       <div class="hx-head"><h2>…</h2></div>
       <div class="hx-stage">
         <button class="hx-arrow" data-dir="-1" aria-controls="hx-track">…</button>
         <button class="hx-arrow" data-dir="1"  aria-controls="hx-track">…</button>
         <div class="hx-viewport" aria-roledescription="carousel">
           <ul class="hx-track" id="hx-track">
             <li class="hx-slide" role="group" aria-roledescription="slide">…<img>…</li>
           </ul>
         </div>
       </div>
       <div class="hx-dots"><button class="hx-dot" data-go="0">…</button>…</div>
       <span class="hx-count" id="hx-count">1 / 6</span>
       <p class="hx-zoomhint">…</p>
     </div></section>

   강조색은 `--hx-coral` 을 쓰되 없으면 `--accent` 로 떨어진다 — 페이지가 자체 테마색을
   정의하지 않아도 동작한다. (Xshell HarmonyOS 페이지는 `.hx { --hx-coral: … }` 를 둔다.)
   ============================================================ */

/* ── 가운데 슬라이드를 크게, 양옆을 살짝 보이게(2026-09-26 알렌님 요청 이미지) ── */
.hx-carousel { padding: 56px 0 8px; }
.hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.hx-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.02em; color: var(--fg);
}
.hx-stage { position: relative; }
.hx-viewport { overflow: hidden; padding: 6px 0 10px; }
.hx-track {
  display: flex; gap: 22px; margin: 0; padding: 0; list-style: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hx-slide {
  flex: 0 0 70%; border-radius: var(--radius-xl); overflow: hidden;
  transform: scale(0.92); opacity: 0.4; cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s;
}
.hx-slide.is-active { transform: scale(1); opacity: 1; cursor: zoom-in; }
/* 자리를 미리 잡아 지연 로딩 이미지가 들어올 때 아래 내용이 밀리지 않게 한다 (16:9 원본) */
.hx-slide img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .hx-slide { flex-basis: 88%; } .hx-track { gap: 14px; } }

.hx-nav { display: flex; gap: 8px; flex-shrink: 0; }
.hx-arrow {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 17px; line-height: 1;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.hx-arrow:hover { background: var(--bg-elev); }
/* 화살표를 무대 좌우에 겹쳐 놓는다(요청 이미지와 같은 배치) */
.hx-stage .hx-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.hx-stage .hx-arrow[data-dir="-1"] { left: 10px; }
.hx-stage .hx-arrow[data-dir="1"] { right: 10px; }

.hx-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hx-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
  background: var(--border); cursor: pointer; transition: width 0.2s, background 0.2s;
}
.hx-dot[aria-current="true"] { width: 24px; background: var(--hx-coral, var(--accent)); }

/* 모바일: 슬라이드가 너무 작다는 지적(2026-09-26 알렌님) →
   캐러셀만 좌우 여백을 없애 화면 폭을 다 쓰고, 옆 슬라이드 미리보기는 접는다.
   ⚠️ margin-inline: -32px 은 .container 의 좌우 패딩 32px 을 상쇄하는 값이다. */
@media (max-width: 700px) {
  .hx-stage { margin-inline: -32px; }
  /* 이 폭에서는 세로 이미지로 바뀐다(<source media="(max-width: 700px)">) — 비율도 맞춘다 */
  .hx-slide img { aspect-ratio: 1200 / 2133; }
  .hx-slide { flex-basis: 90%; transform: none; opacity: 1; }
  .hx-slide:not(.is-active) { opacity: 0.45; }
  .hx-track { gap: 10px; touch-action: pan-y; }
  .hx-viewport { padding: 0; }
  .hx-stage .hx-arrow { width: 40px; height: 40px; }
  .hx-stage .hx-arrow[data-dir="-1"] { left: 6px; }
  .hx-stage .hx-arrow[data-dir="1"] { right: 6px; }
}
.hx-zoomhint {
  margin: 12px 0 0; text-align: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-subtle);
}
/* 모바일은 세로판을 띄우므로 확대 화면도 기본(폭·높이 맞춤) 그대로 둔다. */

.hx-count {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--fg-muted); font-variant-numeric: tabular-nums; margin-left: 6px;
}

/* ⚠️ 아래 블록은 위 700px 블록보다 **뒤에** 와야 한다 — 같은 특이도라 순서가 결과를 정한다
   (.hx-stage .hx-arrow 가 위에서 40px, 여기서 display:none). 추출 전 페이지의 순서 그대로다. */
@media (max-width: 700px) {
  .hx-carousel { padding: 40px 0 4px; }
  .hx-head { margin-bottom: 16px; }
  .hx-stage .hx-arrow { display: none; }   /* 세로 이미지를 가리지 않게 — 스와이프와 점으로 넘긴다 */
  .hx-dots { margin-top: 14px; }
  .hx-zoomhint { margin-top: 10px; font-size: 12px; }
}