/* ============================================================
   루미인 장비 지면 (clinic_equipment single)
   패키지 기본(arc) 레이아웃과 별개 구조.
   - 효과·원리: 소제목 아래 도판을 지면 폭 전체로 두고, 설명은 그 아래
   - 효과 목록: 데스크탑 2열
   - FAQ: 아코디언 (한 번에 하나만 열림 — 동작은 clinic-skin.js)
   single-clinic_equipment.php 는 마크업 순서가 이미 도판 → 본문이라
   레이아웃 전환은 CSS 만으로 끝난다.
============================================================ */

/* ---- 도판을 우측 칼럼에서 빼내 소제목 바로 아래 전폭으로 ---- */
.arc-eq__media-grid.has-image{
  display: block;
}
.arc-eq__media-fig{
  margin: 0 0 clamp(22px, 3vw, 34px);
  background: var(--mist);
}
.arc-eq__media-fig img{
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 효과 목록 — 데스크탑 2열, 좁은 화면 1열 ----
   기본 스킨에는 `.arc-eq__media-grid.has-image .arc-eq__effects-body ul{1fr}`
   규칙(명시도 0,3,0)이 있다. 도판이 우측 칼럼에 있을 때 목록을 1열로 눌러 두는
   규칙인데, 루미인은 도판을 위로 올려 목록이 지면 폭을 다 쓰므로 2열로 되돌린다.
   같은 명시도로 맞춰야 이긴다. */
.arc-eq__media-grid.has-image .arc-eq__effects-body ul,
.arc-eq__effects-body ul{
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
@media (max-width: 760px){
  .arc-eq__media-grid.has-image .arc-eq__effects-body ul,
  .arc-eq__effects-body ul{ grid-template-columns: 1fr; }
}

/* ---- 원리 설명 — 도판 아래 전체 폭 ---- */
.arc-eq__principle .arc-eq__body{
  max-width: none;
}

/* ---- FAQ 아코디언 ---- */
.arc-eq__faqbody--accordion details{
  border-top: 1px solid var(--line);
}
.arc-eq__faqbody--accordion details:last-child{
  border-bottom: 1px solid var(--line);
}
.arc-eq__faqbody--accordion summary{
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 20px 48px 20px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  transition: color .2s;
}
.arc-eq__faqbody--accordion summary::-webkit-details-marker{ display: none; }
.arc-eq__faqbody--accordion summary:hover{ color: var(--brand); }
.arc-eq__faqbody--accordion summary::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.8px solid var(--soft);
  border-bottom: 1.8px solid var(--soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease, border-color .2s;
}
.arc-eq__faqbody--accordion details[open] summary::after{
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--brand);
}
.arc-eq__faqbody--accordion details[open] summary{ color: var(--brand); }
.arc-eq__faqbody--accordion details > div{
  padding: 0 0 22px;
  color: #5d554f;
  font-size: 15px;
  line-height: 1.85;
}
.arc-eq__faqbody--accordion details > div > *:first-child{ margin-top: 0; }
.arc-eq__faqbody--accordion details > div > * + *{ margin-top: .8em; }

/* ---- 히어로 장비컷 — 세로로 긴 원본(400x800)이 잘리지 않게 ----
   기본 스킨은 정사각 프레임(aspect-ratio:1/1)에 object-fit:cover 라
   위아래가 잘린다. 루미인은 프레임이 이미지 비율을 따라가게 두어
   장비 전체가 다 보이도록 한다. 폭을 묶어 히어로가 과하게 길어지지 않게 했다. */
.arc-eq__hero-fig{
  aspect-ratio: auto;
  display: block;
  overflow: visible;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  background: transparent;
}
.arc-eq__hero-fig img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 760px){
  .arc-eq__hero-fig{ max-width: 300px; margin-left: 0; }
}