/*==========================================================================
  Kangnam Times — Global Redesign (전역 로드)
  헤더 / 메가메뉴 / 카테고리 라벨 / 공통 타이포 / 카드 공통 / 사이드바 / 푸터
==========================================================================*/

/* ===================== 1. HEADER (네이비 바) ===================== */
.header{ background-color:var(--np-navy) !important; border-bottom:3px solid var(--np-point); }
.header .container{ position:relative; }
.gnb-wrap .menu li a{ color:#fff !important; font-weight:500; }
.gnb-wrap .menu li:hover a{ color:var(--np-point) !important; }
.gnb-wrap .menu li.current-menu-item a,
.gnb-wrap .menu li.current-post-parent a,
.gnb-wrap .menu li:checked a{ color:var(--np-point) !important; font-weight:700; }
.gnb-wrap .menu li.current-menu-item::before,
.gnb-wrap .menu li.current-post-parent::before,
.gnb-wrap .menu li:checked::before{ background-color:var(--np-point) !important; }
.header .search-wrap .icon-btn i.icon-search{ filter:invert(1) brightness(2); }
.header .search-form input{ color:#111; }
.header .search-form input::placeholder{ color:#999; }

/* ===================== 2. MEGA MENU ===================== */
.gnb-wrap .menu li{ position:relative; }
.gnb-wrap .menu li .mega-panel{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:1102px; max-width:96vw; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:22px 26px; z-index:9998; border-top:3px solid var(--np-point); }
.gnb-wrap .menu li:hover .mega-panel{ display:flex; gap:26px; }
.mega-panel .mega-cats{ width:180px; flex:0 0 180px; border-right:1px solid var(--np-line); padding-right:18px; }
.mega-panel .mega-cats a{ display:block; color:#222 !important; font-size:1.5rem; font-weight:500; padding:7px 0; }
.mega-panel .mega-cats a:hover{ color:var(--np-navy) !important; }
.mega-panel .mega-posts{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mega-panel .mega-post a{ display:block; color:inherit !important; }
.mega-panel .mega-post .thumb{ width:100%; aspect-ratio:16/10; overflow:hidden; background:#eee; }
.mega-panel .mega-post .thumb img{ width:100%; height:100%; object-fit:cover; }
.mega-panel .mega-post .cat-label{ margin:8px 0 4px; }
.mega-panel .mega-post .m-title{ font-size:1.45rem; font-weight:700; line-height:1.35; color:#111;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ===================== 3. 카테고리 라벨 컴포넌트 ===================== */
.cat-label{ display:inline-block; font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  color:var(--np-navy); text-transform:uppercase; }
.cat-label.pill{ background:var(--np-point); color:#fff; padding:2px 8px; border-radius:2px; }
.cat-label.on-img{ position:absolute; top:10px; left:10px; background:var(--np-point); color:#fff;
  padding:3px 8px; z-index:2; }

/* ===================== 4. 공통 타이포 ===================== */
.card .title, .card-type1 .title, .up-down-card .title, .side-card .title{
  font-weight:700; color:#141414; letter-spacing:-0.01em; }
h2{ font-size:2rem; font-weight:900; color:var(--np-navy); position:relative; }
.card-type3 > h2, .card-type4 > h2{
  border-bottom:2px solid var(--np-navy); padding-bottom:8px; margin-bottom:16px; display:block; }
.card-type3 > h2::after, .card-type4 > h2::after{
  content:""; position:absolute; left:0; bottom:-2px; width:60px; height:2px; background:var(--np-point); }

/* ===================== 5. 카드 공통 (홈 등) ===================== */
.card-type1 .album-big .title-box.big{ background:linear-gradient(transparent, rgba(0,0,0,.85)); }
.card-type1 .album-big .title.ft-white{ font-size:2.2rem; font-weight:900; line-height:1.3; }
/* hover: transform은 기존 테마의 중앙정렬(translate)을 깨므로 밝기만 변경 */
.card .img-box img{ transition:filter .3s ease; }
.card:hover .img-box img{ filter:brightness(1.06); }
.up-down-card .title{ font-size:1.55rem; line-height:1.4; }
.up-down-card .date, .side-card .date, .card .date{ color:var(--np-gray); font-size:1.15rem; }
.side-card .title{ font-size:1.4rem; line-height:1.4; }

/* ===================== 6. SIDEBAR 랭킹 ===================== */
.right-sticky-wrap h2{ font-size:1.8rem; font-weight:900; color:var(--np-navy);
  border-bottom:2px solid var(--np-navy); padding-bottom:8px; margin-bottom:12px; }
.news-rank li span, .comments-rank ul li span.rank-num{ color:var(--np-point) !important;
  -webkit-text-stroke:0.4px var(--np-navy); font-weight:900; }
.comments-rank ul li a.title{ font-weight:500; }

/* ===================== 7. FOOTER ===================== */
.footer {background: #17181c;}
.footer .footer-color {background:#17181c; border-top:3px solid var(--np-point); color:#c7ccd6; min-height:330px; display:flex; align-items:center;}
.footer .footer-inner {display:flex; gap:56px; align-items:flex-start; padding:44px 0; width:100%;}
.footer .footer-col {min-width:0;}
.footer .footer-brand {flex:0 0 300px;}
.footer .footer-about {flex:1 1 auto;}
.footer .footer-menu-col {flex:0 0 220px;}

/* Logo */
.footer .footer-logo{ margin-bottom:0; }
.footer .footer-logo img{ height:75px; width:auto; filter:grayscale(100%) brightness(100); }

/* SNS Icons */
.footer .footer-icons{display: flex; gap: 10px; margin-bottom: 22px;}
.footer .footer-icons a {width:36px; height:36px; border-radius:2px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); color:#c7ccd6; transition:all .2s;}
.footer .footer-icons a svg {width:22px; height:22px;}
.footer .footer-icons a:hover {background:var(--np-point); border-color:var(--np-point); color:#fff;}
.footer .footer-icons a img {width: 12px; height: 12px;}

/* Copyright */
.footer .footer-copy-txt{ font-size:1.2rem; line-height:1.7; color:#8f96a6; margin:0; }

/* Column Title */
.footer .footer-h{ font-size:2.4rem; font-weight:700; color:#fff; margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.15); position:relative; }
.footer .footer-h::after{ content:""; position:absolute; left:0; bottom:-1px; width:40px; height:2px; background:var(--np-point); }

/* Company Introduction */
.footer .footer-desc{ font-size:1.35rem; line-height:1.5; color:#b7bdca; margin:0 0 14px; max-width:600px; }
.footer .footer-mail{ display:inline-block; font-size:1.35rem; font-weight:300; color:#b7bdca; text-decoration:none; }
.footer .footer-mail:hover{ color:var(--np-point); }

/* Policy Menu */
.footer .footer-menu{ display:block; list-style:none; margin:0; padding:0; }
.footer .footer-menu li{ display:block; float:none; width:auto; margin:0 0 12px; padding:0; }
.footer .footer-menu li::before{ content:none !important; }
.footer .footer-menu li a{ display:inline; font-size:1.35rem; color:#b7bdca; text-decoration:none; transition:color .2s; }
.footer .footer-menu li a:hover{ color:var(--np-point); }

@media screen and (max-width:840px) {
	.footer .footer-inner {flex-direction:column; gap: 34px; padding:36px 0 32px;}
	.footer .footer-brand, .footer .footer-about, .footer .footer-menu-col {flex:none; width:100%;}
}

/* ===================== 11. 컨테이너 폭 (데모 기준 1392px) ===================== */
@media screen and (min-width:840px){
  .container{ width:1392px !important; max-width:calc(100% - 32px); }
}

/* ===================== 12. HEADER 보강 (상단바·로고·아이콘·검색·메가패널) ===================== */

/* 상단 바: 날씨 + 날짜 — .header 처럼 flex-center 로 컨테이너 정렬 */
.header-top{ display:flex; justify-content:center; background:#f4f5f7; border-bottom:1px solid var(--np-line); font-size:1.2rem; }
.header-top .header-top-inner{ display:flex; align-items:center; height:36px; }
.header-top .ht-left{ display:flex; align-items:center; gap:16px; color:#555; }
.header-top .ht-weather{ display:flex; align-items:center; gap:6px; }
.header-top .ht-ico{ display:inline-flex; width:16px; height:16px; color:var(--np-point); }
.header-top .ht-ico svg{ width:16px; height:16px; }
.header-top .ht-temp{ font-weight:700; color:#333; }
.header-top .ht-unit{ font-weight:400; }
.header-top .ht-city{ color:#333; font-weight:700; }
.header-top .ht-date{ color:#555; font-weight:600; position:relative; padding-left:16px; }
.header-top .ht-date::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:11px; background:var(--np-line); }

/* 헤더 레이아웃: 좌측부터 채우고, 피드/MSN 만 맨 우측 */
.header .container{ justify-content:flex-start; }
.header .menu-group{ width:auto; }
.header .gnb-wrap{ width:auto; }

/* 로고 크게 + 우측 여백 */
.header .logo-default{ max-width:none !important; min-width:0 !important; max-height:none !important; width:auto; height:auto; margin:0 48px 0 0; }
.header .logo-default a{ display:inline-block; line-height:0; }
.header .logo-default img{ height:50px; width:auto; }

/* 검색: 메뉴 옆 · 기본 아이콘만, 클릭 시 인풋 드롭다운 (dist translateY 제거로 세로 정렬) */
.header .search-wrap{ position:relative; width:auto; display:flex; align-items:center; margin-left:8px; }
.header .search-wrap .icon-btn{ position:static; top:auto; transform:none; }
.header .search-wrap .icon-btn.mobile-back{ display:none; }
.header .search-wrap .search-btn.m-var{ display:none; }
.header .search-wrap .search-btn.pc-var{ position:static; top:auto; transform:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; }
.header .search-wrap .search-btn.pc-var i.icon-search{ position:static; display:block; width:34px; height:34px; filter:invert(1) brightness(2); }
.header .search-wrap .search-form{ display:none; }
.header .search-wrap.active .search-form{ display:block; position:absolute; top:calc(100% + 16px); right:0; z-index:9999;
  background:#fff; padding:8px; box-shadow:0 12px 26px rgba(0,0,0,.2); border-top:3px solid var(--np-point); }
.header .search-wrap.active .search-form input{ display:block; width:260px; height:40px; }

/* 피드/MSN 아이콘 (맨 우측) */
.header .header-links{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.header .header-links a{ width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  color:#fff; border:1px solid rgba(255,255,255,.32); border-radius:2px; transition:all .2s; }
.header .header-links a svg {width: 22px; height: 22px;}
.header .header-links a:hover{ background:var(--np-point); border-color:var(--np-point); }
.header .header-links a img {width: 12px; height: 12px;}

/* 메가패널: li(static) → 컨테이너 기준 풀폭 · 헤더 오렌지라인 아래로 flush · 넘침 방지 */
.header .gnb-wrap .menu li{ position:static; }
.header .gnb-wrap .menu li::before{ display:none !important; }
.header .gnb-wrap .menu li > a{ position:relative; }
.header .gnb-wrap .menu li.current-menu-item > a::after,
.header .gnb-wrap .menu li.current-post-parent > a::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; background:var(--np-point); }
.gnb-wrap .menu li .mega-panel{ left:0; right:0; width:auto; max-width:none; transform:none; top:calc(100% + 15px); border-top:none; box-sizing:border-box; padding:22px 26px; }
.mega-panel .mega-posts{ min-width:0; }
.mega-panel .mega-post{ min-width:0; }

/* 좌측 서브카테고리: 네이비 배경(데모처럼) · 컴팩트 간격 */
.mega-panel .mega-cats{ flex:0 0 210px; width:210px; background:var(--np-navy); border-right:none;
  align-self:stretch; margin:-22px 0 -22px -26px; padding:14px 0; }
.mega-panel .mega-cats a{ display:block; color:#fff !important; font-size:1.45rem; font-weight:500; padding:7px 22px; line-height:1.3; }
.mega-panel .mega-cats a:hover{ color:var(--np-point) !important; background:rgba(255,255,255,.06); }

@media screen and (max-width:840px){
  .header-top{ display:none; }
  .header .header-links{ display:none; }
  .header .logo-default img{ height:38px; }
  .header .logo-default{ margin-right:0; }
}

/* ===================== 12b. 메가 서브카테고리 보정 + hover 브리지 ===================== */
/* dist의 .gnb-wrap .menu li a(padding:20px 0) 를 이기도록 우선순위 상향 */
.header .gnb-wrap .menu li .mega-panel .mega-cats a{ padding:6px 24px !important; font-size:1.45rem !important; font-weight:500 !important; line-height:1.25; color:#fff !important; }
.header .gnb-wrap .menu li .mega-panel .mega-cats a:hover{ color:var(--np-point) !important; background:rgba(255,255,255,.06); }
.mega-panel .mega-cats{ padding:12px 0; }
/* hover 시 li↔패널 사이 15px 갭을 브리지(투명)해 마우스 이동 중 hover 유지 */
.gnb-wrap .menu li .mega-panel::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:24px; background:transparent; }