/* 전체 레이아웃 기본값 */
* {box-sizing: border-box; margin: 0; padding: 0;}

html, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, form, fieldset, table, th, td, legend, label, button {
font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", "Malgun Gothic","맑은 고딕", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
font-size-adjust: 0.5; font-size:16px; letter-spacing:-.05em; font-display: swap;
}
body {font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background-color:#f4f4f6;color:#222;line-height:1.5;}
a {color:inherit;text-decoration:none;}
.page-wrapper {max-width:1920px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}

/* 헤더 영역 */
header{padding:2rem 1rem;}

@media (max-width: 900px){
  header{padding:2rem 1rem 1rem;}
}

.header-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;}
.logo span{display:none;}
.logo-mark{width:100px;}
.logo-mark img{width:100%;height:auto;}
.logo-mark span{display:none;}

/* 메인 컨테이너 */
main{flex:1;padding:0 1rem;}
.main-inner{max-width:1280px;margin:0 auto;background:#ffffff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,0.04);padding:2rem;margin-bottom:3rem;}
.main-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:2rem;}
.title-wrap{width:100%;}
.main-title{font-size:24px;font-weight:700;padding-bottom:4px;}
.main-subtitle{font-size:1rem;color:#666;max-width:480px;}

/* 힌트 텍스트 */
.interaction-hints{font-size:0.8rem;color:#333;margin-top:12px;background-color:#f7f7f7;border-radius:8px;padding:1rem;}
.interaction-hints h3 {padding-bottom:8px;font-size:1.25rem;}
.interaction-hints p {position:relative; display:flex;align-items:center;gap:5px;}
.cf-banner .interaction-hints {margin-bottom:2rem}

@media (max-width: 900px){
  .interaction-hints p{font-size:3.5vw;}
}

.interaction-hints .feather{display:block;width:16px;height:16px;fill:transparent;color:#999;stroke-width:2px;}
.hint-desktop{display:inline;}
.hint-mobile {display: none;}

.video-section {display:flex; flex-direction:column; gap:32px; }

.video-group-title {position: relative; font-size:1.75rem; font-weight:700; margin-bottom:12px; color:#333; }

.cg-art-wrap, .text-art-wrap  {margin-bottom:0; border: 1px solid #e9e9e9; border-radius: 10px; padding: 2rem; }
@media (max-width: 900px) {
  .cg-art-wrap, .text-art-wrap {padding:1rem}
}

/* 비디오 그리드 */
.video-grid {display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 20px;}
.cf-banner .video-grid  {grid-template-columns: repeat(4, 1fr);}

@media (max-width: 1200px) {
  .video-grid  {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 900px) {
  .video-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
  .video-grid {grid-template-columns: 1fr;}
}
.video-card{background:#fafafa;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #eee;}
.video-wrapper{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#000;cursor:pointer;}
.video-wrapper video{width:100%;height:100%;object-fit:cover;display:block;}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(to top, rgba(0,0,0,0.45), transparent);color:#fff;font-size:12px;opacity:1;transition:opacity 0.2s ease;pointer-events:none;}
.video-wrapper.playing .video-overlay {opacity:0;}
.play-icon{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;font-size:18px;}
.hint-label{padding:4px 8px;border-radius:999px;background:rgba(0,0,0,0.35);font-size:11px;}

.video-info{padding:12px 12px 14px;}
.video-title{font-size:1.25rem;font-weight:600;margin-bottom:6px;}


.video-desc {display:flex; flex-direction: column; font-size: 0.9rem; color: #666; padding-top: 8px; border-top: 1px solid #dbdbdb; margin-top:8px ; gap: 8px;}
.video-desc span {font-weight:500}

.video-desc-wrap p {display: flex; align-items: center; gap:5px; color: #555; font-size: 14px;}
.video-desc-wrap .feather {display:block; width:16px; height:16px; fill:transparent; color: #3363ff; stroke-width: 2px;}

/* 푸터 */
footer {background: #0d0d0d; margin-top: auto; padding: 4rem 0;  border-top: 1px solid #e0e0e0; }

@media (max-width: 900px) {
  footer {padding:4rem 2rem}
  footer .footer-info span {font-size:3vw; color:#dbdbdb}
}

.footer-inner {max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: #777;}
.footer-logo {display: flex; align-items: center; gap: 10px; font-weight: 600;}

.footer-logo .logo-mark {width: 100px;}

.footer-info {display: flex; flex-direction: column; gap: 4px; color:#fff}

.footer-info p {display: flex; gap:1.5rem}
@media (max-width: 900px) {
  .footer-info p {gap:1rem}
  .footer-info span {font-size:3vw;}
}

.footer-info span {display: block; line-height: 2;}

@media (max-width: 768px) {
  .main-inner {padding: 16px;}
  .main-title {font-size: 20px;}
  .main-subtitle {font-size: 13px;}

  /* 모바일에서 힌트 텍스트 바꾸기 */
  .hint-desktop {display: none;}
  .hint-mobile {display: inline;}
}


/* ===========================================================================
✅ 확대/전체화면 버튼 + 모달
=========================================================================== */
.video-action-btn{
  position:absolute; top:10px; right:10px;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
}
.video-action-btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.video-action-btn:active{transform:scale(.98);}

/* PC(991px~): 확대 버튼 노출 / MO(990px~): 전체화면 버튼 노출 */
@media (min-width: 991px){
  .video-action-btn[data-action="fullscreen"]{display:none;}
}
@media (max-width: 990px){
  .video-action-btn[data-action="zoom"]{display:none;}
}

/* ✅ 모달 */
.video-modal{
  position:fixed; inset:0;
  display:none;
  z-index:9999;
}
.video-modal.open{display:block; cursor: pointer;}
.video-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.78);
}
.video-modal-dialog{
  position:relative;
  width:min(1200px, calc(100vw - 48px));
  margin:24px auto;
  top:50%;
  transform:translateY(-50%);
}
.video-modal-video{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.video-modal-video video{width:100%;height:100%;object-fit:contain;display:block;}

/* ✅ 닫기(X) - 오른쪽 상단 */
.video-modal-close{
  position:absolute; top:-14px; right:-14px;
  width:44px; height:44px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.65);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index: 1;
}
.video-modal-close svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;}

/* 모달 열릴 때 스크롤 잠금 */
body.modal-open{overflow:hidden;}