/* 30-home — 메인(홈) 전용 (3번 소유). 범위: .vis*, .h-*  */

/* ── 히어로 슬라이드: figure.vis-s + figcaption (D22) ── */
.vis-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1600ms linear}
.vis-s.on{opacity:1}
.vis-slides .vis-s img{opacity:1;object-position:var(--op,50% 50%);transform:scale(1.04);transition:transform 7600ms linear}
.vis-s.on img{transform:scale(1)}
.vis-s figcaption{position:absolute;z-index:3;top:20px;right:var(--mar);max-width:min(440px,calc(100% - 2 * var(--mar) - 56px));padding:7px 12px;background:rgba(0,0,0,.66);color:#fff;font-size:13.5px;font-weight:500;line-height:1.5}
/* 데스크톱 오버레이: 왼쪽 글자 영역 + 아래 수치 띠만 어둡게, 오른쪽 장비는 밝게 */
.vis::after{background:linear-gradient(90deg,rgba(8,16,24,.74) 0%,rgba(8,16,24,.58) 42%,rgba(8,16,24,.18) 70%,rgba(8,16,24,0) 88%),linear-gradient(180deg,rgba(8,16,24,.2) 0%,rgba(8,16,24,0) 30%,rgba(8,16,24,.3) 64%,rgba(8,16,24,.86) 100%)}
.vis .kicker{justify-self:start}
.vis .btn-w::after{content:"→"}
.vis .btn-o::after{content:"↓"}
.vis-btn a{min-height:48px;justify-content:center}
.vis-ctl{grid-column:11/13;justify-self:end;display:flex;align-items:center;gap:16px}
.vis-ctl .vis-no{grid-column:auto}
.vis-pause{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.vis-pause::before{content:"";width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.vis-pause[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.vis-pause:hover{background:rgba(0,0,0,.6)}

@media (max-width:1024px){
  .vis-ctl{grid-column:auto}
}
@media (max-width:760px){
  /* 사진을 위쪽 400px 안에 넣어 덜 잘리게(장비가 보이게), 아래로 배경색에 스며듦 */
  .vis-s{bottom:auto;height:min(400px,72%);-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
  .vis-slides .vis-s img{object-position:var(--op-m,50% 50%)}
  /* 위 사진 노출 영역(약 130px)은 오버레이 ≤.2, 글자 블록 아래만 어둡게 */
  .vis::after{background:linear-gradient(180deg,rgba(8,16,24,.08) 0,rgba(8,16,24,.2) 108px,rgba(8,16,24,.74) 136px,rgba(8,16,24,.8) 60%,rgba(8,16,24,.9) 100%)}
  .vis-s figcaption{top:12px;left:var(--mar);right:auto;max-width:calc(100% - 2 * var(--mar) - 56px);padding:5px 10px}
  .vis-in{padding-top:132px}
  .vis .kicker{text-transform:none;letter-spacing:0;gap:8px;margin-bottom:12px;white-space:nowrap}
  .vis .kicker::before{width:12px}
  .vis .lead{margin-top:14px;font-size:16px;line-height:1.65}
  .vis-btn{margin-top:20px;gap:8px;flex-wrap:nowrap}
  .vis-btn a{flex:1 1 0;padding:12px 10px;font-size:15px}
  .vis .vis-ft{position:static;margin-top:24px;padding-top:16px!important;padding-bottom:18px!important}
  .vis-facts{position:relative;z-index:2;row-gap:12px}
  .vis-facts b{font-size:20px}
  .vis-facts li>span{display:block;font-size:13.5px;font-weight:500;line-height:1.4;margin-top:3px}
  .vis-ctl{position:absolute;z-index:3;top:12px;right:var(--mar)}
}
@media (max-width:339px){.vis-btn{flex-wrap:wrap}.vis-btn a{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.vis-s,.vis-slides .vis-s img{transition:none;transform:none}}

/* ── 원형 사진 링크 (cmsco 스타일): 가운데 제목 + 원형 사진 + 파란 제목 ── */
.cir-sec{--secpad:clamp(56px,7vw,112px)}
.cir-h{grid-column:1/13;text-align:center;margin-bottom:clamp(40px,5vw,72px)}
.cir-k{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:.04em;color:#2a8296}
.cir-h h2{margin-top:8px;font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.25;color:#0e2854}
.cir-h>p:last-child{max-width:640px;margin:16px auto 0;font-size:16px;line-height:1.7;color:var(--t3)}
.cir{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px var(--gut);text-align:center}
.cir-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cir a{display:block;color:var(--ink)}
.cir figure{width:min(240px,100%);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;overflow:hidden;background:var(--gray);box-shadow:0 14px 30px -18px rgba(14,40,84,.5)}
.cir img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.cir a:hover img{transform:scale(1.08)}
.cir-tag{display:inline-block;margin-bottom:8px;padding:2px 10px;border:1px solid #2a8296;border-radius:20px;font-size:13px;font-weight:600;color:#2a8296}
.cir h3{font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.4;color:#0e2854;transition:color 200ms linear}
.cir a:hover h3{color:#2a8296}
.cir p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--t3)}
.cir-idx{grid-column:2/12;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.cir-idx a{display:block;height:100%;padding:28px 28px 24px;background:#fff;border-top:3px solid #0e2854;color:var(--ink)}
.cir-idx b{display:block;font-size:19px;color:#0e2854}
.cir-idx b::after{content:" →";font-weight:400}
.cir-idx span{display:block;margin-top:8px;font-size:15px;line-height:1.6;color:var(--t3)}
.cir-idx a:hover b{color:#2a8296}
@media (max-width:1024px){.cir-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cir-idx{grid-column:1/13}}
@media (max-width:760px){
  .cir,.cir-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .cir figure{width:min(150px,100%);margin-bottom:14px}
  .cir h3{font-size:16px}.cir p{font-size:13.5px}
  .cir-idx{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cir img{transition:none}.cir a:hover img{transform:none}}
/* 보정1(QA8): ≤400px 캡션을 사진 띠 아래쪽 한 줄로 — 정지 버튼(위 오른쪽)과 분리해 장비가 보이게 */
@media (max-width:400px){
  /* 보정2(QA7·8): 13.5px 하한, 넘치면 2줄 허용 — 정지 버튼(아래끝 56px) 아래에서 시작해 2줄이어도 kicker(132px) 위에서 끝남 */
  .vis-s figcaption{top:62px;max-width:calc(100% - 2 * var(--mar));padding:4px 8px;font-size:13.5px;line-height:1.4}
}