/* 전체 레이아웃 기본값 */
* {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{display:flex;align-items:center;gap:5px;}

@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(4, 1fr);  gap: 20px;}

@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;}
}