/* 404 */
.error404 .container{text-align:center; padding-top:80px; padding-bottom:80px}
.error404 .inner{max-width:400px; margin-left:auto; margin-right:auto}
.error404 .inner > *{text-align:center}
.error404 .img-404{width:140px}
.error404 h1{font-size:20px; font-weight:600; margin-top:8px}
.error404 .btn-group{margin-top:32px}
.error404 .btn-group .btn{min-width:132px}
@media(min-width:1070px){
  .error404 .container{padding-top:160px; padding-bottom:160px}
  .error404 .inner{max-width:inherit}
  .error404 h1{font-size:28px; margin-top:32px}
  .error404 p{font-size:17px}
}


/* 공통 컴포넌트 (ver2) ---------- */
/* 모바일 퍼스트: 기본(모바일) → min-width 768px → min-width 1070px
   레거시 클래스(.btn, .hd00, .p1 …)나 페이지 css(css/intro.css 등)에 기대지 않고 이 파일만으로 모양이 유지되게 작성 */

/* 버튼: Figma btn (fill default) — 기존 공통 .btn과 겹치지 않게 wds- 접두어 */
.wds-btn{display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:38px; min-height:38px; padding:10px 16px; border-radius:8px; background-color:rgba(0,0,0,0.04); font-size:13px; font-weight:500; line-height:1.4; color:rgba(0,0,0,0.85); text-decoration:none; transition:background-color 0.2s ease}
.wds-btn::after{content:''; flex-shrink:0; width:12px; height:12px; background:url('../images/ico/ico_arrow_right.svg') no-repeat center / 100%}
.wds-btn:hover{background-color:rgba(0,0,0,0.08); color:rgba(0,0,0,0.85); text-decoration:none}

/* 섹션 타이틀: Figma section-title (가운데 정렬 카테고리 · 제목 · 설명) */
.wds-section-title{display:flex; flex-direction:column; gap:12px; width:100%; max-width:740px; margin-left:auto; margin-right:auto; padding:0 20px; box-sizing:border-box; word-break:keep-all}
.wds-section-title > *{margin:0; text-align:center}
.wds-section-title-cate{font-size:14px; font-weight:500; line-height:1.45; color:rgba(0,0,0,0.6)}
.wds-section-title-h2{font-size:21px; font-weight:700; line-height:1.3; letter-spacing:-0.42px; color:rgba(0,0,0,0.85)}
.wds-section-title-desc{font-size:15px; line-height:1.5; color:rgba(0,0,0,0.6)}
.wds-section-title-desc > br{display:inline} /* 레거시 style.css가 768px 미만 p > br을 숨김 */

/* 섹션 헤딩: Figma heading-section (카테고리 · 제목 · 설명 · 버튼, 왼쪽 정렬) */
.heading-section{display:flex; flex-direction:column; align-items:flex-start; gap:8px; box-sizing:border-box; word-break:keep-all} /* 간격은 gap으로 (페이지 css의 margin 초기화에 영향받지 않게) */
.heading-section > *{margin:0; text-align:left}
.heading-section-cate,
.heading-section-title{max-width:600px} /* Figma texts: 카테고리 · 제목 · 설명 모두 600px (heading-section 자체는 700px) */
.heading-section-cate{font-size:14px; line-height:1.5; color:rgba(0,0,0,0.6)}
.heading-section-title{font-size:26px; font-weight:700; line-height:1.35; color:rgba(0,0,0,0.85)}
.heading-section-desc{max-width:600px; font-size:16px; line-height:1.55; color:rgba(0,0,0,0.85)}
.heading-section .wds-btn{margin-top:8px} /* 설명 → 버튼 16px (gap 8 + 8) */

/* 콘텐츠 카드: Figma content-card2 (사진 + 카테고리 · 제목 · 설명) */
.wds-card{display:block}
.wds-card-thum{height:240px; overflow:hidden; background-color:#EEE}
.wds-card-thum img{display:block; width:100%; height:100%; object-fit:cover}
.wds-card-info{display:flex; flex-direction:column; gap:4px; max-width:700px; margin:20px auto 0; text-align:left}
.wds-card-info > *{margin:0; text-align:left}
.wds-card-cate{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; font-size:12px; line-height:1.4; color:rgba(0,0,0,0.6)}
.wds-card-cate .sub{display:inline-flex; align-items:center; gap:4px}
.wds-card-cate .sub::before{content:''; width:3px; height:3px; border-radius:999px; background-color:rgba(0,0,0,0.1)}
.wds-card-title{margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:600; line-height:1.35; color:rgba(0,0,0,0.85)} /* 카테고리→제목 6px (gap 4 + 2) */
.wds-card-title a{color:inherit; text-decoration:none}
.wds-card-title a:hover{color:inherit; text-decoration:underline; text-underline-offset:3px}
.wds-card-desc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:1.4; color:rgba(0,0,0,0.45)}

@media(min-width:768px){
  .wds-section-title{gap:16px}
  .wds-section-title-cate{font-size:17px}
  .wds-section-title-h2{font-size:32px; letter-spacing:-0.64px}
  .wds-section-title-desc{font-size:16px}

  .heading-section{gap:16px}
  .heading-section .wds-btn{margin-top:8px} /* 24px (gap 16 + 8) */

  .wds-card-thum{height:auto; aspect-ratio:3 / 2}
  .wds-card-info{gap:6px; margin-top:24px}
  .wds-card-title{margin-top:0; font-size:16px}
}


/* 숨김 텍스트 (스크린리더용) : 레거시 .blind 대신 */
.wds-blind{position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); white-space:nowrap}


/* 푸터 (footer.php) ---------- */
/* Figma 메인 3157:51932 / 서브 4108:48288 / 모바일 3683:37261
   모바일 퍼스트: 기본(모바일) → min-width 768px → min-width 1070px (PC 서브 = Figma 서브)
   .is-main(PC 홈)만 사이트맵 노출 + 로고·슬로건·간격 크게
   레거시 클래스(.site-footer, .container, .menu, .sns-share, .kakaotalk, .blind)에 기대지 않음 */
.wds-footer{position:relative; padding:32px 20px; background-color:#FFF; color:rgba(0,0,0,0.86); letter-spacing:0; word-break:keep-all}
.wds-footer :where(p, ul, li){margin:0; padding:0; list-style:none}
.wds-footer-inner{display:flex; flex-direction:column; gap:20px; max-width:1600px; margin:0 auto}

/* 로고 + 슬로건 */
.wds-footer-logo{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.wds-footer-symbol{display:block; width:48px; height:48px}
.wds-footer-slogan{display:grid; max-width:600px; font-size:20px; font-weight:500; line-height:1.3; color:rgba(0,0,0,0.34); text-align:left}
.wds-footer-slogan b{font-weight:inherit; color:rgba(0,0,0,0.86)} /* 번역 문자열의 <b> = 진한 색 (줄바꿈은 <br>) */
html:lang(ko) .wds-footer-slogan{font-weight:600} /* 한국어만 슬로건 전체 굵게 */

/* 슬로건 롤링: 문장을 한 칸(grid)에 겹쳐 가장 긴 문장 높이로 고정 → 언어별 2~3줄이어도 푸터가 흔들리지 않음
   줄(.wds-footer-slogan-line)이 마스크, 안쪽 span이 아래에서 올라왔다가 다시 아래로 내려감 → 다음 문장이 그 자리에서 올라옴. --i = 줄 순서(시차) */
.wds-footer-slogan-item{grid-area:1 / 1; visibility:hidden}
.wds-footer-slogan-item.is-active,
.wds-footer-slogan-item.is-leaving{visibility:visible}
.wds-footer-slogan-line{display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em} /* 아래 여백 = 글자 꼬리 잘림 방지 */
.wds-footer-slogan-line > span{display:block; opacity:0; transform:translate3d(0, 105%, 0)}
.wds-footer-slogan-item.is-active .wds-footer-slogan-line > span{opacity:1; transform:none; transition:transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay:calc(1.1s + var(--i) * 0.2s)} /* 이전 문장이 내려간 뒤 등장, 줄마다 페이드인하며 천천히 */
.wds-footer-slogan-item.is-leaving .wds-footer-slogan-line > span{opacity:0; transform:translate3d(0, 105%, 0); transition:transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1); transition-delay:calc(var(--i) * 0.08s)} /* 퇴장: 줄마다 다시 아래로 */
.wds-footer-slogan.is-intro .wds-footer-slogan-item.is-active .wds-footer-slogan-line > span{transition-delay:calc(var(--i) * 0.2s)} /* 첫 등장: 앞 문장이 없으니 대기 없이 */
@media(prefers-reduced-motion:reduce){
  .wds-footer-slogan-line > span,
  .wds-footer-slogan-item.is-leaving .wds-footer-slogan-line > span{transform:none}
  .wds-footer-slogan-item.is-active .wds-footer-slogan-line > span,
  .wds-footer-slogan-item.is-leaving .wds-footer-slogan-line > span{transition:opacity 0.6s ease; transition-delay:0s}
}

/* 사이트맵 (메인만 출력): 1단 메뉴 = 열, 2·3단은 아래로 나열. 3단이 있는 열(활동)은 2단 메뉴별로 옆으로 나눔 */
.wds-footer-sitemap{padding-top:40px; border-top:1px solid rgba(0,0,0,0.08)}
.wds-footer-sitemap-list{display:flex; flex-wrap:wrap; gap:32px 16px}
.wds-footer-sitemap-list > li:not(.menu-item-has-children),
.wds-footer-sitemap-list > .wpml-ls-item{display:none} /* 외부 링크(WAPLE · 영상 · 회원) · 언어 선택은 제외 */
.wds-footer-sitemap-list > li{display:flex; flex:1 0 0; flex-direction:column; gap:8px; min-width:210px}
.wds-footer-sitemap-list > li:has(.sub-menu .sub-menu){flex:0 0 auto; min-width:380px}
.wds-footer-sitemap-list > li > a{font-size:14px; font-weight:600; line-height:1.4; color:rgba(0,0,0,0.86); text-decoration:none}
.wds-footer-sitemap-list .sub-menu{display:flex; flex-direction:column; gap:8px}
.wds-footer-sitemap-list .sub-menu > li{display:flex; flex-direction:column; gap:8px}
.wds-footer-sitemap-list > li:has(.sub-menu .sub-menu) > .sub-menu{flex-direction:row; gap:32px}
.wds-footer-sitemap-list .sub-menu a{font-size:12px; line-height:1.4; color:rgba(0,0,0,0.47); text-decoration:none; white-space:nowrap}
.wds-footer-sitemap-list a:hover{color:rgba(0,0,0,0.86); text-decoration:underline; text-underline-offset:3px}
.wds-footer-sitemap-list .sub-menu a[target="_blank"]::after{content:''; display:inline-block; width:10px; height:10px; vertical-align:middle; background:url('../images/ico/ico_external_link_sm.svg') no-repeat center / 100%; margin-left:2px}

/* 주소 · 저작권 + 버튼 (모바일은 세로, 768px 이상은 왼쪽 정보 · 오른쪽 버튼) */
.wds-footer-bottom{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.wds-footer-info{display:flex; flex-direction:column; gap:8px; font-size:11px; line-height:1.3; color:rgba(0,0,0,0.34)}
.wds-footer-info > p{font-size:inherit; line-height:inherit; text-align:left} /* 서브페이지 레거시 p 글자 크기 · 줄간격 차단 */
.wds-footer-address > span{display:block}
.wds-footer-copy a{color:inherit; text-decoration:none}
.wds-footer-copy a:hover{color:rgba(0,0,0,0.6); text-decoration:underline}

.wds-footer-btns{display:flex; flex-shrink:0; align-items:center; gap:6px}
.wds-footer-links{display:flex; gap:6px}
.wds-footer-links a,
.wds-footer-share-btn{display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; border:0; border-radius:8px; background-color:rgba(0,0,0,0.04); font-size:13px; font-weight:500; line-height:1.4; color:rgba(0,0,0,0.86); text-decoration:none; cursor:pointer; transition:background-color 0.2s ease}
.wds-footer-links a{padding:10px 16px}
.wds-footer-links a:hover,
.wds-footer-share-btn:hover{background-color:rgba(0,0,0,0.08); color:rgba(0,0,0,0.86); text-decoration:none}
.wds-footer-share-btn{width:38px; height:38px; padding:0; background-image:url('../images/ico/ico_share.svg'); background-repeat:no-repeat; background-position:center; background-size:18px}

/* 맨 위로: #gotop 은 레거시 style.css에 id 규칙이 있어 id까지 붙여 덮어씀
   TTS 플러그인이 있는 페이지는 플러그인 스크립트가 .tts-top 을 화면 오른쪽 아래 고정 영역(.fixed-wrap)으로 옮김 → 그 자리 그대로
   플러그인이 없어 푸터 안에 남아 있으면 Figma처럼 푸터 오른쪽 아래 */
#gotop.wds-footer-top{width:38px; height:38px; padding:0; border:1px solid rgba(0,0,0,0.1); border-radius:4px; box-shadow:none; background:#FFF url('../images/ico/ico_top.svg') no-repeat center / 25px; cursor:pointer}
#gotop.wds-footer-top:hover{background-color:#F5F5F5}
.wds-footer > #gotop.wds-footer-top{position:absolute; right:19px; bottom:16px}

@media(min-width:768px){
  .wds-footer{padding:48px 40px}
  .wds-footer-inner{gap:32px}
  .wds-footer-symbol{width:56px; height:56px}
  .wds-footer-bottom{flex-direction:row; align-items:flex-end}
  .wds-footer-info{flex:1 0 0; min-width:0; font-size:12px}
}

@media(min-width:1070px){
  .wds-footer{padding:64px 40px}

  /* 메인: 로고 64 · 슬로건 26 · 블록 간격 48 · 아래 여백 48, 주소 위 40 (사이트맵 구분) */
  .wds-footer.is-main{padding-bottom:48px}
  .wds-footer.is-main .wds-footer-inner{gap:48px}
  .wds-footer.is-main .wds-footer-symbol{width:64px; height:64px}
  .wds-footer.is-main .wds-footer-slogan{font-size:26px; letter-spacing:-0.26px}
  .wds-footer.is-main .wds-footer-bottom{padding-top:40px}
}


/* 공유하기 레이어 (modal-share.php) ---------- */
/* 기존 css/single.css 에서 그대로 옮김 : 푸터 공유 버튼(.btn-share)이 전 페이지에서 열기 때문. 열고 닫기는 plugin/common.js */
/* Modal share */
.modal-share{position:fixed; display:flex; display:none; justify-content:center; align-items:center; top:0; right:0; bottom:0; left:0; z-index:100; background-color:rgba(0,0,0,0.5)}
.modal-share.on{display:flex}
.modal-contents{width:290px; border-radius:14px; padding:20px 20px 15px 20px; background-color:#FFF; z-index:101; position:relative}
.modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:15px}
.modal-title{font-size:18px; font-weight:600}
.modal-close{display:inline-block; width:15px; height:15px; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_close.svg'); background-size:100%; background-repeat:no-repeat; cursor:pointer}
/* .kakaotalk{display:inline-block; width:20px; height:20px; margin-right:15px; background-image:url('/wp-content/themes/watv/images/sns/kakaotalk.png'); background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; cursor:pointer}
.kakaotalk:hover{opacity:0.8} */

:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode{display:inline}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list{display:flex; flex-wrap:wrap}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a,
:where(.news-info-sub, .modal-share) .sns-share .kakaotalk{display:flex; flex-direction:column; align-items:center; width:25%; height:auto; padding-bottom:10px; margin:0; opacity:1; border-radius:14px; overflow:hidden; position:relative; background-image:inherit}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a::before,
:where(.news-info-sub, .modal-share) .sns-share .kakaotalk::before{content:''; position:relative; display:block; width:40px; height:40px; border-radius:14px; top:0; right:0; bottom:0; left:0; background-position:center; background-repeat:no-repeat; box-shadow:0px 0px 0px 1px rgb(0 0 0 / 7%) inset}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_facebook::before {background-color:#3F5594; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_facebook.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_twitter::before  {background-color:#1B97F0; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_twitter.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_email::before    {background-color:#7D7D7D; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_mail.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_line::before     {background-color:#21CD5B; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_line.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_kakao::before    {background-color:#FDBF00; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_story.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_sms::before      {background-color:#4F67ED; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_sms.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_copy_link::before{background-color:#FFFFFF; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_link.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_x::before{background-color:#000000; background-image:url('/wp-content/themes/watv/images/sns/ico_share_x.svg')}
:where(.news-info-sub, .modal-share) .sns-share .kakaotalk::before {background-color:#FFE300; background-image:url('/wp-content/themes/watv/images/mobile/ico_share_kakaotalk.svg')}
.modal-share .sns-share .addtoany_shortcode .addtoany_list a.a2a_button_x::before{background-color:#000000; background-image:url('/wp-content/themes/watv/images/sns/ico_share_x.svg')}
:where(.news-info-sub, .modal-share) .sns-share .addtoany_shortcode .addtoany_list > a:after,
:where(.news-info-sub, .modal-share) .sns-share .kakaotalk:after{content:attr(title); position:relative; display:block; text-align:center; font-size:12px; color:#333; margin-top:2px}