: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: top-right under header
================================= */

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

/* =========================================================
   POPUP IMAGE FIT (no crop)
========================================================= */

.yc-popup-card{
  overflow: hidden;
  width: 540px;
  max-width: calc(100vw - 32px);   /* 모바일에서 좌우 여백 확보 */
}

/* ✅ 이미지 전체가 보이도록 */
.yc-popup-img{
  display:block;
  width:100%;
  height:auto;          /* 핵심 */
  max-height:none;
  object-fit:contain;   /* 혹시 height가 잡혀도 잘림 방지 */
}

.yc-popup-html img{
  max-width: 100%;
  height: auto;
}

/* 혹시 어딘가에서 고정 높이가 걸린 경우 대비 */
#ycPopupCarousel .carousel-item{
  height:auto;
}
#ycPopupCarousel .carousel-inner{
  height:auto !important; /* JS로 높이 고정하던 것 무력화 */
}

#ycPopupCarousel .carousel-control-prev,
#ycPopupCarousel .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;
}

#ycPopupCarousel .carousel-control-prev:hover,
#ycPopupCarousel .carousel-control-next:hover {
  background: rgba(0,0,0,.55);
}

#ycPopupCarousel .carousel-control-prev-icon,
#ycPopupCarousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 576px){
  .yc-popup-layer{
    right:10px;
    top: calc(var(--yc-header-h) + 8px);
  }
}

.yc-popup-nums {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 5px;
}

.yc-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;
}

.yc-pnum:hover {
  color: #3b82f6;
  background: rgba(59,130,246,.08);
}

.yc-pnum.active {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 8px rgba(37,99,235,.4);
  transform: scale(1.08);
}