/* =========================================================================
   우리가 하는 일 — 영상 섹션과 모달
   =========================================================================

   /what-we-do 에서만 읽는다. 다른 페이지는 이 파일을 내려받지 않는다.

   썸네일 위에는 재생 버튼 하나만 둔다. 문구나 장식은 얹지 않는다.
   ========================================================================= */

.ts-vsec {
  background: #fff;
  padding: 96px 0 88px;
}

.ts-vsec-in {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 52px;
  box-sizing: border-box;
}

/* 카드 — 16:9 를 유지하고 모서리를 살짝 둥글린다. */
.ts-vsec-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1020;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.16);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-vsec-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(16, 24, 40, 0.22); }
.ts-vsec-card:focus-visible { outline: 3px solid #1b2f6b; outline-offset: 4px; }

.ts-vsec-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-vsec-card:hover .ts-vsec-thumb { transform: scale(1.03); }

.ts-vsec-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #101f4d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.ts-vsec-play svg { width: 42px; height: 42px; margin-left: 3px; }

.ts-vsec-card:hover .ts-vsec-play { transform: translate(-50%, -50%) scale(1.07); background: #fff; }

/* ------------------------------------------------------------------ 모달 */

.ts-vmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;              /* 헤더·햄버거보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(6, 9, 20, 0.82);
  opacity: 0;
  transition: opacity 0.28s ease;
  box-sizing: border-box;
}

.ts-vmodal.is-on { opacity: 1; }

.ts-vmodal-stage {
  position: relative;
  width: 100%;
  max-width: 1120px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.ts-vmodal.is-on .ts-vmodal-stage { transform: scale(1); }

.ts-vmodal-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 닫기 — X 하나만 둔다.
   무대(.ts-vmodal-stage)가 아니라 모달을 기준으로 놓는다. 무대는
   overflow:hidden 이라 그 안에 두면 좁은 화면에서 잘린다. */
.ts-vmodal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease;
}

.ts-vmodal-close:hover { background: rgba(255, 255, 255, 0.26); }
.ts-vmodal-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ts-vsec-card,
  .ts-vsec-thumb,
  .ts-vsec-play,
  .ts-vmodal,
  .ts-vmodal-stage { transition: none; }
}

/* --------------------------------------------------------------- 태블릿 */

@media (max-width: 900px) {
  .ts-vsec { padding: 64px 0 60px; }
  .ts-vsec-in { padding: 0 32px; }
  .ts-vsec-play { width: 68px; height: 68px; }
  .ts-vsec-play svg { width: 34px; height: 34px; }
}

/* --------------------------------------------------------------- 모바일 */

@media (max-width: 640px) {
  .ts-vsec { padding: 48px 0 44px; }
  .ts-vsec-in { padding: 0 20px; }
  .ts-vsec-card { border-radius: 10px; }
  .ts-vsec-play { width: 56px; height: 56px; }
  .ts-vsec-play svg { width: 28px; height: 28px; }

  .ts-vmodal { padding: 14px; }
  .ts-vmodal-stage { border-radius: 8px; }
  .ts-vmodal-close { top: 12px; right: 12px; width: 42px; height: 42px; }
}