:root{
  --yc-header-h: 72px;
  --yc-max: 1400px;
}

/* ✅ content container 1400px */
.yc-container{
  max-width:var(--yc-max);
  margin:0 auto;
  padding:0;
}

/* =========================================================
  /assets/css/header.css
  - Header + Mega Menu
  - Popup layer
========================================================= */

/* logo */
.yc-logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#1e88e5,#68b3ff);
  display:inline-block;
}

/* header */
.yc-header .yc-navbar{height:var(--yc-header-h)}
.yc-search .form-control{min-width:220px}

/* ✅ header inner 폭(=로고~검색/햄버거 영역) */
.yc-header-inner{
  max-width:var(--yc-max);
  margin:0 auto;
  position:relative;
}

/* ===============================
   Mega Menu (100% background + inner 1400)
================================= */

/* ✅ mega menu: header 바로 아래 100% 배경 */
.yc-mega{
  position:absolute;
  left:0;
  right:0;
  top:var(--yc-header-h);
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 30px rgba(0,0,0,.06);
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:all .18s ease;
  z-index:1050;
  border-radius:0;
}
.yc-mega.is-open{
  opacity:1; visibility:visible;
  transform:translateY(0);
}

/* [MOD] inner: 1000px 중앙정렬 + 여백 */
.yc-mega-inner{
  max-width:1000px;
  margin:0 auto;
  padding:28px 0;
}

/* 내부 컨테이너(1400) */
.yc-mega .yc-container{background:transparent;}

/* [ADD] lg 이상에서 컬럼 구분선/여백/hover */
@media (min-width:992px){
  .yc-mega .row.g-4 > [class^="col"]{
    padding-left:26px;
    padding-right:26px;
    transition:background .15s ease;
  }

  .yc-mega .row.g-4 > [class^="col"] + [class^="col"]{
    border-left:1px solid rgba(0,0,0,.08);
  }

  .yc-mega .row.g-4 > [class^="col"]:hover{
    background:#f8fafc;
  }
}

/* [ADD] 타이틀 섹션화(하단 라인) */
.yc-mega-title{
  padding-bottom:10px;
  border-bottom:2px solid rgba(30,136,229,.18);
}

/* active 스타일 */
.yc-gnb-item.is-active .yc-gnb-link{
  color:#1e88e5 !important;
  position:relative;
}
.yc-gnb-item.is-active .yc-gnb-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-10px;
  height:2px; background:#1e88e5;
}
.yc-mega-col.is-active .yc-mega-title{color:#1e88e5}

/* 링크 스타일 */
.yc-mega-link{
  display:block;
  padding:7px 10px;
  border-radius:10px;
  color:#222;
}
.yc-mega-link:hover{
  background:#f2f6ff;
  color:#1e88e5;
}

/* dim (전체 화면) */
.yc-mega-dim{
  position:fixed; left:0; right:0; top:var(--yc-header-h); bottom:0;
  background:rgba(0,0,0,.10);
  opacity:0; visibility:hidden;
  transition:all .18s ease;
  z-index:1049;
}
.yc-mega-dim.is-open{opacity:1; visibility:visible}

/* hamburger always visible */
.yc-hamburger{display:inline-flex}

/* ===============================
   Popup layer
================================= */
.popup-layer {
  position: fixed;
  right: 16px;
  top: calc(var(--yc-header-h, 72px) + 10px);
  z-index: 2000;
}

/* =========================================================
   POPUP CARD
========================================================= */
.popup-card {
  overflow: hidden;
  width: 360px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
}

/* 세로 전용 팝업 */
.popup-portrait {
  width: 216px !important;
  max-width: 216px !important;
}

/* =========================================================
   POPUP IMAGE FIT
========================================================= */
.popup-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.popup-html img {
  max-width: 100%;
  height: auto;
}

/* 캐러셀 높이 auto */
#PopupCarousel .carousel-item  { height: auto; }
#PopupCarousel .carousel-inner { height: auto !important; }

/* 좌우 컨트롤 버튼 */
#PopupCarousel .carousel-control-prev,
#PopupCarousel .carousel-control-next {
  width: 36px;
  height: 36px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  background: rgba(0,0,0,.35);
  border-radius: 50%;
  opacity: 1;
  margin: 0 8px;
}
#PopupCarousel .carousel-control-prev:hover,
#PopupCarousel .carousel-control-next:hover {
  background: rgba(0,0,0,.55);
}
#PopupCarousel .carousel-control-prev-icon,
#PopupCarousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
}

/* =========================================================
   POPUP 인디케이터
========================================================= */
.popup-nums {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 5px;
}
.pnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all .25s ease;
  line-height: 1;
  position: relative;
}
.pnum:hover {
  color: #3b82f6;
  background: rgba(59,130,246,.08);
}
.pnum.active {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 8px rgba(37,99,235,.4);
  transform: scale(1.08);
}

/* =========================================================
   반응형
========================================================= */
@media (max-width: 576px) {
  .popup-layer {
    right: 10px;
    top: calc(var(--yc-header-h, 72px) + 8px);
  }
  .popup-card    { width: 300px; }
  .popup-portrait{ width: 180px !important; max-width: 180px !important; }
}

/* portrait 유튜브 — padding-bottom 비율 대신 고정 높이 */
.popup-yt-portrait {
  padding-bottom: 0 !important;
  height: 380px !important;
}

@media (max-width: 576px) {
  .popup-yt-portrait {
    height: 300px !important;
  }
}