/* =====================================================================
   solution_detail.css — 솔루션 상세 "이미지 포함 설명" 섹션
   ---------------------------------------------------------------------
   · preview_sub.css 뒤에 로드된다. 색상/반경/그림자 토큰은 preview_sub.css 의
     :root 변수를 그대로 사용한다.
   · 구버전(views/solution/*.php)의 화면 캡처 설명을 리뉴얼 디자인으로 옮기기 위한
     델타 스타일. 클래스 접두사는 sd- (solution detail).
   ===================================================================== */

/* ── 기능 그룹 헤더 ── */
.sd-group{ margin-bottom:72px; }
.sd-group:last-child{ margin-bottom:0; }

/* 이미지 1장짜리 그룹 2개를 한 줄에 나란히 (예: lms 수료증 · 문제은행) */
.sd-group-row{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:32px; margin-bottom:72px;
}
.sd-group-row:last-child{ margin-bottom:0; }
.sd-group-row .sd-group{ margin-bottom:0; }
.sd-group-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:32px;
  border-bottom:1.5px solid var(--border);
}
.sd-group-ico{
  width:40px; height:40px; flex-shrink:0; border-radius:var(--r-md);
  background:var(--accent-glow); color:var(--accent);   /* preview_sub.css 에는 --accent-soft 가 없다 */
  display:flex; align-items:center; justify-content:center;
}
.sd-group-ico svg{ width:20px; height:20px; }
.sd-group-title{
  font-family:var(--font-h); font-size:var(--t-lg); font-weight:900;
  letter-spacing:-.03em; color:var(--text);
}
.sd-group-note{ font-size:var(--t-sm); color:var(--text-sub); margin-left:auto; }

/* 그룹 설명 문단 */
.sd-group-desc{
  font-size:var(--t-base); color:var(--text-sub); line-height:1.8;
  margin-bottom:28px; word-break:keep-all;
}

/* 사양 목록(DID 설치 방식 등) */
.sd-spec{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:8px; }
.sd-spec li{
  position:relative; padding-left:18px;
  font-size:var(--t-sm); color:var(--text-sub); line-height:1.6; word-break:keep-all;
}
.sd-spec li::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.sd-spec li strong{
  color:var(--text); font-weight:700; margin-right:6px;
}

/* 같은 그룹 안에서 캡처 세트가 이어질 때의 간격 */
.sd-shots-gap{ margin-top:24px; }

/* 섹션 하단 보조 문단(뷰 인라인 스타일 대체) */
.sd-note-gap{ margin-top:24px; }

/* ── 화면 캡처 그리드 ──
   원본 캡처가 1폰(564px)·2폰(1164px) 두 종류라 3열 그리드에서
   2폰 이미지는 2칸을 차지하게 해 원본 비율을 유지한다. */
.sd-shots{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; align-items:start;
}
/* 캡처 비율에 따라 열 수를 바꾼다. 가로로 매우 긴 캡처(예: DID 2820x1062)를
   3열에 넣으면 내용이 읽히지 않는다. */
.sd-shots.cols-1{ grid-template-columns:1fr; }
.sd-shots.cols-2{ grid-template-columns:repeat(2,1fr); }
.sd-shot{ display:flex; flex-direction:column; gap:14px; }
.sd-shot.is-wide{ grid-column:span 2; }

.sd-shot-img{

  min-height:300px;                 /* 가로로 짧은 캡처에서 카드가 납작해지는 것 방지 */

}
.sd-shot-img img{ display:block; width:100%; height:auto; }
.img-m{max-width: 500px;margin: 0 auto;}
/* ── 캡처 높이 통일(.is-eq) ──
   rev 처럼 원본 세로 길이가 같은 세트(전부 1169px)에 사용한다.
   폭을 100% 로 두면 1폰(564px)과 2폰(1164px) 캡처가 서로 다른 배율로 늘어나 높이가
   어긋난다. 반대로 높이를 고정하고 폭을 auto 로 두면 두 캡처의 기기 배율까지 같아진다. */
.sd-shots.is-eq .sd-shot-img{
  height:600px; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.sd-shots.is-eq .sd-shot-img img{
  width:auto; height:100%; max-width:100%; object-fit:contain;
}

/* 설명을 이미지 위로 배치.
   마크업 순서(이미지 → 설명)는 유지한 채 order 로만 뒤집는다. .sd-shot 을
   column-reverse 로 바꾸지 않는 이유는, 나중에 자식이 하나 더 늘면 그 항목까지
   순서가 뒤집혀 의도치 않게 동작하기 때문. */
.sd-shot-cap{ order:-1; display:flex; align-items:center; gap:8px; }
.sd-shot-no{
  font-family:var(--font-h); font-size:var(--t-lg); font-weight:900;
  color:var(--accent); flex-shrink:0; line-height:1.6;
}
.sd-shot-txt{
  font-size:var(--t-base); color:var(--text-sub); line-height:1.6; word-break:keep-all;
}

/* ── 완성 영상(자막 합성 결과 등) ──
   세로형 캡처 그리드 아래에 가로형 완성 영상을 폭 제한해 가운데 배치 */
.sd-result{
  margin-top:32px; max-width:720px; margin-left:auto; margin-right:auto;
  display:flex; flex-direction:column; gap:14px;
}
.sd-result-video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;  /* 원본 1920x1080 — 로드 전 레이아웃 고정 */
  border:1.5px solid var(--border); border-radius:12px;
  background:#000; box-shadow:var(--shadow-sm); object-fit:contain;
}
/* 설명은 영상 위에 배치 */
.sd-result-cap{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:0;
}

/* ── 배너 이미지 ── */
.sd-banner{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:block;
}

/* ── 단일 화면 이미지(캡처가 배너 1장뿐인 타입: message · email · meeting · webhosting) ──
   세로로 긴 이미지가 많아 전체 폭으로 두면 화면을 과하게 차지한다. 폭을 제한하고 가운데 정렬. */
.sd-visual{
  max-width:720px; margin:0 auto;
  border:1.5px solid var(--border); border-radius:12px; overflow:hidden;
  background-color:var(--bg-sub); box-shadow:var(--shadow-sm);
}
.sd-visual img{ display:block; width:100%; height:auto; }
.sd-visual-cap{
  padding:14px 18px; border-top:1px solid var(--border);
  font-size:var(--t-sm); color:var(--text-sub); line-height:1.6; word-break:keep-all;
}

/* ── CTA 버튼 행(뷰 인라인 스타일 대체) ── */
.sd-cta-btns{
  display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1;
}

/* ── 반응형 ── */
@media(max-width:1024px){
  /* 2열: 2폰 캡처는 전체 폭 */
  .sd-shots{ grid-template-columns:repeat(2,1fr); }
  .sd-shot.is-wide{ grid-column:span 2; }
  .sd-shots.cols-1{ grid-template-columns:1fr; }
  .sd-shots.is-eq .sd-shot-img{ height:520px; }
}
@media(max-width:768px){
  .sd-group{ margin-bottom:clamp(48px,9.4vw,72px); }
  /* 좁은 폭에서는 한 줄 배치를 풀어 세로로 쌓는다 */
  .sd-group-row{ grid-template-columns:1fr; gap:clamp(48px,9.4vw,72px); margin-bottom:clamp(48px,9.4vw,72px); }
  .sd-group-row .sd-group{ margin-bottom:0; }
  .sd-group-head{ padding-bottom:clamp(11px,2.1vw,16px); margin-bottom:clamp(22px,4.2vw,32px); }
  .sd-group-ico{ width:clamp(30px,5.2vw,40px); height:clamp(30px,5.2vw,40px); }
  .sd-group-note{ display:none; }              /* 좁은 폭에서 제목과 겹침 방지 */
  .sd-group-desc{ margin-bottom:clamp(19px,3.6vw,28px); }
  .sd-spec{ margin-bottom:clamp(19px,3.6vw,28px); gap:clamp(6px,1vw,8px); }
  .sd-shots-gap{ margin-top:clamp(17px,3.1vw,24px); }
  .sd-visual-cap{ padding:clamp(10px,1.8vw,14px) clamp(13px,2.3vw,18px); }
  .sd-shots{ grid-template-columns:1fr; gap:clamp(17px,3.1vw,24px); }
  .sd-shot.is-wide{ grid-column:span 1; }
  .sd-shot{ gap:clamp(10px,1.8vw,14px); }
  /* 1열이 되면 이미지가 전체 폭이라 자연 높이가 충분하다.
     min-height 를 유지하면 짧은 캡처 아래로 빈 여백이 남으므로 해제. */
  .sd-shot-img{ min-height:0; }
  .sd-shots.is-eq .sd-shot-img{ height:clamp(320px,62.5vw,480px); }
  .sd-result{ margin-top:clamp(22px,4.2vw,32px); }
  .sd-cta-btns{ gap:clamp(8px,1.6vw,12px); }
}