/* /assets/css/site.css
   - PC: 좌/중/우 = 3:2:1 정확 비율 (50% / 33.333% / 16.667%)
   - PC: 좌블럭/우블럭 고정, 배경은 한 장 이미지가 좌/우로 이어짐(bgLayer)
   - Center(중블럭)는 배경 위에 올라오는 오버레이(검정) 구조
   - Mobile: 중블럭만 + 중블럭 위 햄버거 탑바 + 드로어 메뉴
   - Pretendard 전역 적용
   - border-radius 자제(전반 0)
*/

/* ===== Reset ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0;font-size: 16px; /* 기준값 */ }
body{
  font-size: 1rem;      /* 16px */
  line-height: 1.6;
  color: #111;
  font-family: "Open Sans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Apple SD Gothic Neo","Malgun Gothic", Arial, sans-serif;
  overflow-x: hidden;
}

.m-br{ display:none; }
@media (max-width:768px){
  .m-br{ display:inline; }
}

/* ===== Background Layer (한 장짜리 배경 이미지) ===== */
.bg-layer{
  position: fixed;
  inset: 0;
  z-index: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
}
#bgLayerA{ opacity: 1; }

/* ===== Vars ===== */
:root{
  --left-p: 45%;
  --center-p: 40%;
  --right-p: 15%;
  --m-topbar-h: 56px;
}

/* =========================
   Mobile Topbar / Drawer
   ========================= */
.m-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--m-topbar-h);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #002f1bf0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  z-index: 30;
}
.m-ci{
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
}
.m-ham{
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.m-ham span{
  display:block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: rgba(255,255,255,.92);
}

/* 모바일 드로어 */
.m-drawer{
  position: fixed;
  top: var(--m-topbar-h);
  right: 0;
  width: 78%;
  max-width: 320px;
  height: calc(100vh - var(--m-topbar-h));
  background: rgba(0,0,0,.70);
  transform: translateX(100%);
  transition: transform 240ms ease;
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
}
.m-link{
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  padding: 12px 10px;
}
.m-link:hover{ background: rgba(255,255,255,.10); }

.m-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 35;
}

body.m-open .m-drawer{ transform: translateX(0); }
body.m-open .m-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Mobile Drawer Active
========================= */
@media (max-width: 900px){
  .m-drawer .m-link{
    color: #fff;
    transition: color .2s ease;
  }
  .m-drawer .m-link.is-active{
    color: #f6b000;
    font-weight: 800;
  }
}

/* =========================
   PC Left / Right (Fixed)
   ========================= */
.left{
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  padding: 26px 30px;
  z-index: 10;
  color: #fff;
  background: transparent;
}
.right{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  padding: 26px 22px;
  z-index: 10;
  color: #fff;
  background: transparent;
}

/* 공통 CI */
.ci{
  display: inline-block;
  margin-bottom: 16px;
}
.ci img{ width:105px; }

/* =========================================================
   PC 네비 (기본: 가로)
========================================================= */
.nav {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
            margin-bottom: 30px;
}

/* =========================================================
   메뉴 기본
========================================================= */
.nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  padding: 0px 20px 10px 0;
  color: #fff;
  font-weight: 700;
  transition: color .2s ease;
  font-size: 1.1rem;
}

/* =========================================================
   밑줄은 span 기준 (글자폭)
========================================================= */
.nav-link span{
  position: relative;
  display: inline-block;
  transition: transform .2s ease;
}
.nav-link span::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: transparent;
  border-radius: 2px;
  transition: background .2s ease;
}

/* Hover/Active (기본: 노랑) */
.nav-link:hover{ color: #f6b000; }
.nav-link:hover span::after{ background: rgba(246,176,0,.5); }

.nav-link.is-active{
  color: #f6b000;
  background: transparent !important;
  border: 0 !important;
  font-size: 1.2rem;
  font-weight: 800;
}
.nav-link.is-active span{ transform: scale(1.06); }
.nav-link.is-active span::after{ background: #f6b000; }

/* =========================
   sec2(brandkey) 영역일 때 hover 색 변경
========================= */
.nav:has(.nav-link.is-active[data-target="sec2"]) .nav-link:hover{ color: #002f1b; }
.nav:has(.nav-link.is-active[data-target="sec2"]) .nav-link:hover span::after{ background: rgba(0,47,27,.55); }

/* ✅ sec2 active */
.nav-link.is-active[data-target="sec2"]{ color: #002f1b; }
.nav-link.is-active[data-target="sec2"] span::after{ background: #002f1b; }

/* =========================================================
   좌측 패널 + 컨테이너 쿼리
========================================================= */
.left{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;

  display: flex;
  flex-direction: column;
  container-type: inline-size;
}



/* left-foot을 아래로 밀기 */
.left-foot{
  margin-top: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-bottom: 20px;
}
.left-foot .event_title img{
  display: block;
  max-width: 85%;
  height: auto;
}
.left-foot .event_text{
  font-size: clamp(15px, 1.5vw, 24px);
  font-weight: 700;
  margin-bottom: 80px;
}
.left-foot .sns{
  display: flex;
  gap: 10px;
  align-items: center;
}
.left-foot .sns a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  transition: color .2s ease, opacity .2s ease;
  text-decoration: none !important;
}
.left-foot .sns a i{ font-size: 16px; }
.left-foot .sns a svg{
  width: 16px;
  height: 16px;
  fill: rgba(255,255,255,.55);
  transition: fill .2s ease;
}
.left-foot .sns a:hover{ color: #fff; }
.left-foot .sns a:hover svg{ fill: #fff; }

/* =========================
   Center (Middle Block)
   ========================= */
.center{
  position: relative;
  z-index: 2;
  background: var(--center-bg);
  min-height: 100vh;

  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}

/* 섹션 단위 */
.sec{
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: flex-start;
  padding: 0 0px;
  padding-top: 0px;
  background: transparent;
}
.sec-inner{
  width: 100%;
  padding: 45px;
  color: #fff;
  background: transparent;
  border: 0;
}
.sec-inner h1{
  margin: 0 0 10px;
  font-size: 35px;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 1.2;
  word-break: keep-all;
  padding-bottom:20px;
  font-weight:800;
}

.sec-inner h2{
  letter-spacing: -0.5px;
  line-height: 1.3;
  word-break: keep-all;
  padding-bottom:0px;
}
.sec-inner p{
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.5;
  opacity: .92;
  word-break: keep-all;
}


@media (max-width: 768px){

.sec-inner{
  padding: 25px;
}
 .sec-inner h1{ font-size: 30px;
}

.sec-inner h2{
  letter-spacing: -0.5px;
  line-height: 1.3;
  word-break: keep-all;
  padding-bottom:0px;
}
.sec-inner p{
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: .92;
  word-break: keep-all;
}


}


/* ✅ PC Layout: 3:2:1 */
@media (min-width: 901px){
  .left{ width: var(--left-p); }
  .right{ width: var(--right-p); }

  .center{
    width: var(--center-p);
    margin-left: var(--left-p);
    margin-right: var(--right-p);
  }
}

/* Mobile: middle only + topbar */
@media (max-width: 900px){
  .left, .right{ display:none; }
  .m-topbar{ display:flex; }
  .m-drawer{ display:flex; }

  .center{
    width: 100%;
    margin: 0;
    background: #000;
    border-left: 0;
    border-right: 0;
  }

  .sec{
    padding: 0 14px;
    padding-top: calc(14px + var(--m-topbar-h));
  }
  .sec-inner h1{ font-size: 28px; }
}

@media (max-width: 900px){
  #mTopbar.m-topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--m-topbar-h, 56px);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;
  }

  #mTopbar .m-ci{
    display: flex;
    align-items: center;
  }
  #mTopbar .m-ci img{
    display: block;
    height: 28px;
    width: auto;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .bg-layer{ z-index: 0; }
}

@media (max-width: 900px){
  :root{ --m-topbar-h: 100px; }

  #mTopbar.m-topbar{
    height: var(--m-topbar-h);
    padding: 0 16px;
  }

  #mTopbar .m-ci img{
    height: 60px;
    width: auto;
  }

  /* 햄버거 버튼 */
  @media (max-width: 900px){
    #mTopbar .m-ham{
      all: unset;
      position: relative;
      width: 52px;
      height: 52px;
      cursor: pointer;
      display: grid;
      place-items: center;
      -webkit-tap-highlight-color: transparent;
    }

    #mTopbar .m-ham::before,
    #mTopbar .m-ham::after,
    #mTopbar .m-ham::marker{ content: ""; }

    #mTopbar .m-ham::before,
    #mTopbar .m-ham::after{
      content: "";
      position: absolute;
      left: 50%;
      width: 24px;
      height: 1px;
      background: #fff;

      transform: translateX(-50%);
      transition: transform .1s ease, top .1s ease, bottom .1s ease, opacity .2s ease;
    }

    #mTopbar .m-ham::before{ top: 18px; }
    #mTopbar .m-ham::after { bottom: 17px; }

    #mTopbar .m-ham{ background: none; }
    #mTopbar .m-ham i{ display:none; }

    /* 가운데 줄: box-shadow */
    #mTopbar .m-ham::before{
      box-shadow: 0 8px 0 #fff;
    }

    /* OPEN → X */
    #mTopbar .m-ham[aria-expanded="true"]::before{
      top: 50%;
      box-shadow: none;
      transform: translateX(-50%) rotate(45deg);
    }
    #mTopbar .m-ham[aria-expanded="true"]::after{
      bottom: 47%;
      transform: translateX(-50%) rotate(-45deg);
    }
  }
}


/* =========================================================
   Board Embed (sec5)
   ========================================================= */
.notice-sec5-root,
.notice-sec5-root *{
  max-width: 100%;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Apple SD Gothic Neo","Malgun Gothic", Arial, sans-serif !important;
}
.notice-sec5-root,
.notice-sec5-root .board-wrap,
.notice-sec5-root .board-table{
  overflow-x: hidden !important;
}
.notice-sec5-root .tbl{
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}
.notice-sec5-root .board-list-only .tbl td{
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.notice-sec5-root .board-list-only .ttl{
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  overflow: hidden;
}
.notice-sec5-root .board-list-only .ttl:hover{
  background: rgba(255,255,255,.06);
}
.notice-sec5-root .board_ttl{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  line-height: 1.35;
}
.notice-sec5-root .board_date{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .7;
  white-space: nowrap;
}
.notice-sec5-root .empty{
  padding: 16px 0;
  text-align: center;
  opacity: .85;
}
.notice-sec5-root .paging-ajax{
  margin-top: 14px;
  text-align: center;
}
.notice-sec5-root .pg-btn{
  display: inline-block;
  margin: 0 3px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  cursor: pointer;
}
.notice-sec5-root .pg-btn:hover{ background: rgba(255,255,255,.12); }
.notice-sec5-root .pg-btn[disabled]{ opacity: .35; cursor: default; }
.notice-sec5-root .pg-btn.is-active{ background: rgba(255,255,255,.16); }

.notice-sec5-root .view-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 8px;
}
.notice-sec5-root .view-date{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 12px;
}
.notice-sec5-root .view-content{
  font-size: 14px;
  line-height: 1.7;
  opacity: .95;
  overflow-wrap: anywhere;
}
.notice-sec5-root .view-content,
.notice-sec5-root .view-content *{ color: #ffffff !important; }
.notice-sec5-root .view-content a{
  color: #ffffff !important;
  text-decoration: underline;
}
.notice-sec5-root .view-content span,
.notice-sec5-root .view-content div,
.notice-sec5-root .view-content p{
  background: transparent !important;
}
.notice-sec5-root .view-actions{
  margin-top: 14px;
  text-align: center;
}
.notice-sec5-root .btn-back{
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}
.notice-sec5-root .btn-back:hover{ background: rgba(255,255,255,.12); }

/* ===== sec0 YouTube background ===== */
#sec0{
  position: relative;
  overflow: hidden;
}
#sec0 .ytbg,
#sec0 .ytbg-dim{
  position: absolute;
  inset: 0;
  z-index: 0;
}
#sec0 .ytbg{ overflow: hidden; }
#sec0 .ytbg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
#sec0 .ytbg-dim{ background: rgba(0,0,0,.45); }
#sec0 .sec-inner{
  position: relative;
  z-index: 1;
}
@media (max-width: 900px){
  #sec0 .ytbg iframe{
    width: 100vw;
    height: calc(100vw * 9 / 16);
    min-height: 100vh;
    min-width: calc(100vh * 16 / 9);
  }
}

/* secR */
#secR.sec{
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 40px !important;
  align-items: stretch !important;
}
#secR{ background: transparent !important; }
#secR .sec-inner{
  max-height: none !important;
  overflow: visible !important;
  padding: 25px;
}

/* 모달 */
.rsv2-help-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  opacity: 0;
  pointer-events: none;
}
.rsv2-help-modal.is-open{
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.rsv2-help-dim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rsv2FadeIn .18s ease-out both;
}
.rsv2-help-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(560px, calc(100% - 28px));
  max-height: calc(100% - 28px);

  background: rgba(255,255,255,.92);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 26px 60px rgba(0,0,0,.28),
    0 2px 0 rgba(255,255,255,.35) inset;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  animation: rsv2PopUp .22s cubic-bezier(.2,.9,.2,1) both;
}
.rsv2-help-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 16px 16px 14px;
  color: #fff;

  background: linear-gradient(135deg, #002f1c, #0b4a2e);
}
.rsv2-help-head:after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: rgba(255,255,255,.28);
}
.rsv2-help-head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
}
.rsv2-help-close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rsv2-help-close:hover{ background: rgba(0,0,0,.26); }

.rsv2-help-body{
  padding: 16px 16px;
  overflow: auto;
  color: #111;
  font-size: 14px;
  line-height: 1.65;
}
.rsv2-help-body strong{ font-weight: 900; }
.rsv2-help-list{
  margin: 0;
  padding-left: 18px;
}
.rsv2-help-list li{ margin: 8px 0; }

.rsv2-help-foot{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.rsv2-help-ok{
  border: 1px solid rgba(0,0,0,.10);
  background: #002f1c;
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,47,28,.18);
}
.rsv2-help-ok:hover{ filter: brightness(1.05); }

@media (max-width: 420px){
  .rsv2-help-panel{
    width: calc(100% - 20px);
    border-radius: 16px;
  }
  .rsv2-help-body{ padding: 14px 14px; }
}

@keyframes rsv2FadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes rsv2PopUp{
  from{ opacity: 0; transform: translate(-50%, -42%) scale(.98); }
  to{ opacity: 1; transform: translate(-50%, -46%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .rsv2-help-dim,
  .rsv2-help-panel{ animation: none !important; }
}

/* secR 최소 한 화면 */
#secR.sec{
  min-height: 100vh !important;
  height: auto !important;
  padding-bottom: 40px !important;
  align-items: center !important;
}
@supports (min-height: 100dvh){
  #secR.sec{ min-height: 100dvh !important; }
}
#secR.sec{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 가운데 블럭 유리 효과 */
:root{
  --center-bg: rgba(0,0,0,.38) !important;
}
main#center.center{
  background: var(--center-bg) !important;

  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);

  border-left: 1px solid rgba(255,255,255,.12) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.12) inset;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  main#center.center{ background: rgba(0,0,0,.65) !important; }
}

/* 더보기 버튼 */
.board-more{ margin:14px 0 6px; text-align:center; }
.btn-more{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  color:#fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  cursor:pointer;
}
.btn-more:disabled{ opacity:.65; cursor:default; }
.btn-more:hover{ filter: brightness(1.05); }

.board-wrap.board-ajax {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#sec5,
#sec5 .sec-inner,
#notice-sec5-root {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html, body {
  height: auto;
  overflow-y: auto;
}

/* secR D-day */
#secR .dday-wrap{
  display:flex;
  justify-content:center;
  padding: 40px 0;
  margin-top: 8vh;
}
#secR .dday-card{
  width:94%;
  max-width:560px;
  border-radius:20px;
  padding:26px 22px;
  text-align:center;
}
#secR .dday-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background: #fff;
  color:#0f5132;
  font-weight:700;
  font-size:16px;
  margin-bottom:50px;
}
#secR .dday-title{
  margin:0 0 10px;
  font-size:20px;
  font-weight:900;
}
#secR .dday-counter{ margin-top: 10px; }
#secR .dday-day{
  font-size: 90px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-family: "Roboto", sans-serif;
}
#secR .dday-time{
  font-size: 20px;
  font-weight: 300;
  opacity: .85;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
}

/* 카드형 라디오 버튼 */
.rsv2-row input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.rsv2-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  align-items:flex-start;
}
.rsv2-row > label:has(input[type="radio"]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1.5px solid #d0d5d8;
  background:#fff;
  color:#555;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}
.rsv2-row > label:has(input[type="radio"]):hover{ border-color:#0f5132; }
.rsv2-row > label:has(input[type="radio"]:checked){
  background:#0f5132;
  border-color:#0f5132;
  color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.rsv2-row > label:has(input[type="radio"]):active{ transform:translateY(1px); }

.rsv2-row > label.rsv2-l{
  flex:0 0 100%;
  width:100%;
  margin:4px 0 2px;
  font-weight:800;
  color:#111;
  min-width:auto;
  height:auto;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
  cursor:default;
}
.rsv2-row > label.rsv2-l + label{ margin-top:2px; }

/* sec0 중앙 정렬 */
#sec0{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
#sec0 .sec-inner{
  width: 100%;
  display: flex;
  justify-content: center;
}
#sec0 .main_logo{
  display: flex;
  z-index: 2;
  flex-direction: column;
}
#sec0 .main_logo img.y_logo{
  max-width: 110px;
  margin-bottom: 24px;
}
#sec0 .main_logo img.y_title{ margin-bottom: 24px; }
#sec0 .main_logo .y_text{
  font-weight: 600;
  font-size:1rem;
  line-height: 1.3;
}
@media (max-width: 768px){
  #sec0 .main_logo .y_text{
    font-size:0.8rem;
    line-height: 1.4;
  }
}
#sec0 .main_logo h1,
#sec0 .main_logo h2{ margin: 0; }

#sec0 .ytbg-dim{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
#sec0 .ytbg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
#sec0 .ytbg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.7777778vh;
  height: 100vh;
  min-width: 100vw;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* sec1 */


.center #sec1{
   height: 100vh;
  display: flex;
  align-items: center;
   background: url("/2026/assets/img/bg_bcli2.jpg") no-repeat center bottom;
  position:relative;
  overflow: visible;
    background-size: cover;
  pointer-events: none;
}
.center #sec1 .sec-inner{
  position:relative;
  z-index:2;

}



.center #sec1 h1 img{
  display: block;
  width: 60%;
  max-width: 220px;
  margin: 0 auto;
  padding:25px 0px;
}

.center #sec1 img.flogo{
  display: block;
  width: 80%;
  max-width: 260px;
  margin: 0 auto;
  padding:50px 0px;
}



.center #sec1 p{
  display: block;
  color:#fff;
  text-align: center;
  font-size:1.1rem;
  line-height: 1.6;
  font-weight:500;
  word-break: keep-all;
}


@media (min-width: 769px){
  .center #sec1 h1 img{ width: 320px; }



}


@media (max-width: 768px){

.center #sec1 p{
  font-size:0.9rem;
}

}


/* sec2 */
.center #sec2{
  background: url('/2026/assets/img/bg_brdkey.jpg') no-repeat center top;
  background-size: cover;
}


.center #sec2 .sec-inner img.bklogo{
    display: block;
  width: 60%;
  max-width: 220px;

  padding:0px 0px 70px;
}


.center #sec2 .sec-inner h2{
  font-size:1.2rem !important;
}


.center #sec2 p img{
  width:100%;
  padding-top:20px;
}

/* pc/m */
.pc-only{ display:block; }
.m-only{ display:none; }
@media (max-width:768px){
  .pc-only{ display:none; }
  .m-only{ display:block; }
}





/* =========================
   SEC3 FINAL (20vh 카드 + cover + wide 2개)
   - PC: 3열, 카드 높이 20vh
   - 모바일: 2열, 카드 높이 20vh
   - is-wide: 2칸(span 2)
   - 배경(검정) 제거, cover
   - 오버레이 텍스트 흰색
   ========================= */

/* sec3는 "잘리지 않게" 고정 높이 쓰지 말 것 */
#sec3{
  height: auto !important;
  overflow: visible !important;
}

/* 제목/패딩은 기존 취향대로 */
#sec3 .sec-inner{
  box-sizing: border-box;
  padding: 18px 20px;
}

/* 기존 masonry(column-count) 완전 차단 + 그리드 사용 */
#sec3 .gallery{
  column-count: initial !important;
  column-gap: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* 모바일 2열 */
@media (max-width: 768px){
  #sec3 .sec-inner{ padding: 16px 14px; }
  #sec3 .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* bootstrap col- 영향 제거 */
#sec3 .gallery > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;

  /* ✅ 카드 높이 = 20vh */
  height: 20vh !important;
  min-height: 20vh !important;
}

/* ✅ is-wide: 2칸 */
#sec3 .gallery > .is-wide{
  grid-column: span 2;
}

/* 카드 내부는 꽉 채우기 */
#sec3 .item-img,
#sec3 .item-img a{
  display: block;
  width: 97%;
  height: 100%;
}

/* 검정 배경 제거 + cover */
#sec3 .item-img{
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

#sec3 .item-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* ✅ cover */
  object-position: center !important;
  display: block;
}

/* ===== 오버레이(복구/유지) ===== */
#sec3 .item-img-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,.55);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
#sec3 .item-img-overlay,
#sec3 .item-img-overlay *{
  color: #fff !important;   /* ✅ 흰색 */
  margin:0px;
}




#sec3 .overlay-info{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

#sec3 .overlay-info h4{
  font-size:1.2em;
}

#sec3 .item-img:hover .item-img-overlay{ opacity: 1; }
#sec3 .item-img:hover .overlay-info{ opacity: 1; transform: translateY(0); }

/* (선택) 스크린이 너무 낮을 때 최소 높이 보정 */
@media (max-height: 700px){
  #sec3 .gallery > [class*="col-"]{
    height: 160px !important;
    min-height: 160px !important;
  }
}



/* =========================
   SEC3 MOBILE RESET
   ========================= */
@media (max-width: 768px){

  /* 갤러리: 2열 고정 */
  #sec3 .gallery{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 10px;
  }

  /* is-wide 완전 무력화 */
  #sec3 .gallery > .is-wide{
    grid-column: span 1 !important;
  }

  /* 각 카드 정사각형 */
  #sec3 .gallery > [class*="col-"]{
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  #sec3 .item-img,
  #sec3 .item-img a{
    width: 100%;
    height: 100%;
  }

  /* 이미지 꽉 채우기 */
  #sec3 .item-img img{
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
  }

@media (max-width: 768px){
  #sec3 .gallery > [class*="col-"]{
    padding: 0 !important;
    margin: 0 !important;
    width: 99% !important;
    max-width: 100% !important;
  }
}


  /* 배경 제거 */
  #sec3 .item-img{
    background: transparent !important;
  }

  /* 오버레이 유지 */
  #sec3 .item-img-overlay{
    background: rgba(0,0,0,.45);
  }
  #sec3 .item-img-overlay,
  #sec3 .item-img-overlay *{
    color: #fff !important;
  }
}




/* =========================================================
   sec6 (기본 텍스트/이미지)
   ========================================================= */
#sec6{ container-type: inline-size; }
#sec6 .sec-inner{ text-align: center; }

#sec6 .sec-inner p{
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  word-break: keep-all;
}
#sec6 .sec-inner p.sub{ padding-bottom:5px; }

#sec6 .sec-inner h2{
  text-align: center;
  font-size: 22px;
  line-height: 1;
  word-break: keep-all;
  color:#f6b000;
  padding-top:20px;
  margin:10px;
}
.win-result p{
  font-weight:600;
  margin-bottom:20px;
}

@container (max-width: 520px){ #sec6 .sec-inner p{ font-size: 16px; } }
@container (max-width: 420px){ #sec6 .sec-inner p{ font-size: 16px; } }
@container (max-width: 360px){ #sec6 .sec-inner p{ font-size: 13px; } }

#sec6 .sec-inner img{
  max-width: 100%;
  height: auto;
  display: block;
}
#sec6 .win-result{ margin-bottom: 24px; }
#sec6 .win-result img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.sec6-loading,
.sec6-error{
  text-align: center;
  padding: 20px;
  opacity: .7;
}

#sec6 .sec-inner .sec_title{
  display: inline-block;
  white-space: nowrap;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;

  transform: none;
}
@media (max-width: 768px){
  #sec6 .sec-inner .sec_title{ font-size: 30px; }
}

#sec6 .win-year{ display:none; }
#sec6 .win-year.is-on{ display:block; }


   #sec6 .win-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0px;
      text-align: center;
    }
   #sec6 .win-year { display: none; }
   #sec6 .win-year.is-on { display: block; }
   #sec6 .win-wrap img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
   #sec6 .win-wrap h2 { margin-bottom: 10px; }
   #sec6 .win-wrap p  { margin-bottom: 20px; }

#sec6 .win-wrap img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}
#sec6 .win-wrap h2{ margin: 0 0 10px; }
#sec6 .win-wrap p{ margin: 0 0 20px; font-weight:600; }

#sec6 #winDetail[hidden]{ display:none; }
#sec6 .sec6-loading,
#sec6 .sec6-error{
  text-align:center;
  padding:20px;
  opacity:.8;
}

/* =========================================================
   sec6 Year Tabs (정리본: 중복/충돌 제거)
   ========================================================= */

/* ✅ HTML에서 nav를 아래처럼 감싸주세요.
   <div class="win-tabs-wrap">
     <nav id="sec6YearTabs" class="win-tabs">...</nav>
   </div>
*/

/* sec6 연도 탭: 모바일 터치 가로 스크롤 활성화 */
#sec6 .win-tabs{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;

  overflow-x: auto;      /* 핵심 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOS 관성 */
  touch-action: pan-x;   /* 가로 스와이프 허용 */
  scroll-behavior: smooth;
}

/* 버튼이 줄바꿈/늘어남 방지 */
#sec6 .win-tab{
  flex: 0 0 auto;
}

/* (선택) 스크롤바 숨김 */
#sec6 .win-tabs::-webkit-scrollbar{ height: 0; }
#sec6 .win-tabs{ scrollbar-width: none; }




#sec6 .win-tabs-wrap{
  position: sticky;
  top: 0;
  z-index: 50;

  margin: 14px 0 14px;
  padding: 10px 12px;

  background: rgba(0,0,0,.22);

  border-top: 1px solid rgba(15,81,50,.85);
  border-bottom: 1px solid rgba(15,81,50,.85);

  overflow: hidden;
}

#sec6 #sec6YearTabs.win-tabs{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  touch-action: pan-x;
  overscroll-behavior-x: contain;

  padding: 0 18px;
  margin: 0;

  background: transparent;
}
#sec6 #sec6YearTabs.win-tabs::-webkit-scrollbar{ display:none; }

/* 버튼 */
#sec6 #sec6YearTabs .win-tab{
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  color: rgba(255,255,255,.55);
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
#sec6 #sec6YearTabs .win-tab:hover{ color:#ebb234; }
#sec6 #sec6YearTabs .win-tab.is-active{
  color:#ebb234;
  font-weight: 800;
}

/* 드래그 커서(선택) */
#sec6 #sec6YearTabs.win-tabs{ cursor: grab; user-select:none; }
#sec6 #sec6YearTabs.win-tabs.is-dragging{ cursor: grabbing; }

/* 좌/우 페이드(은은하게) */
#sec6 .win-tabs-wrap::before,
#sec6 .win-tabs-wrap::after{
  content:"";
  position:absolute;
  top:0;
  width:22px;
  height:100%;
  pointer-events:none;
  z-index: 10;
}
#sec6 .win-tabs-wrap::before{
  left:0;
  background: linear-gradient(to right,
    rgba(0,0,0,.22),
    rgba(0,0,0,0)
  );
}
#sec6 .win-tabs-wrap::after{
  right:0;
  background: linear-gradient(to left,
    rgba(0,0,0,.22),
    rgba(0,0,0,0)
  );
}
#sec6 .win-year.is-on img{
    padding:10px 0px;
    background-color: #fff;
    margin:20px 0px;
}


.address h3{
  font-size:0.9rem;
  font-weight:600;
  margin-bottom:0px;
  padding-bottom:0px;
  color:rgba(255,255,255,.8)

}
.address h4{
  font-size:0.7rem;
  font-weight:600;
  margin-top:0px;
  padding-top:0px;
    color:rgba(255,255,255,.5);
    word-break: keep-all;

}


/* 항상 세로 스크롤바 공간 확보(레이아웃 흔들림 방지) */
html { overflow-y: scroll; }

/* 크롬/엣지/사파리: 스크롤바 거터 항상 확보(지원 브라우저에서 더 완벽) */
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

/* =========================
   Research 전용 배경
   ========================= */
body.is-research #bgLayerA{
  background-image: url('/2026/assets/img/bg_research.jpg') !important;
  opacity: 1 !important;
}

body.is-research #bgLayerB{
  background-image: url('/2026/assets/img/bg_research.jpg') !important;
}


.btn-more{
  margin-top:20px;
}


/* =========================
   SEC3: 갤러리 하단 여백 제거(높이 체인 100% 연결)
   ========================= */

/* sec3 자체를 한 화면 */
#sec3.sec{
  align-items: stretch !important; /* .sec가 flex라서 중요 */
}

/* ✅ 중간 래퍼까지 높이 100% 체인 연결 */
#sec3 .portfolio-two.bg-black{
  height: 100% !important;
  min-height: 0 !important;
}
#sec3 .sec-inner{
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 제목은 고정, 갤러리가 남은 높이를 모두 사용 */
#sec3 .sec-inner > h1{
  flex: 0 0 auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* row가 높이를 먹고, 갤러리가 그 안을 꽉 채우게 */
#sec3 .sec-inner > .row{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;         /* bootstrap row 마진 제거 */
}

/* gallery를 “남은 높이” 100%로 */
#sec3 .sec-inner > .row > .gallery{
  height: 100% !important;
  min-height: 0 !important;
}

/* 그리드 아이템/카드도 높이 100% */
#sec3 .gallery > [class*="col-"]{
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 이미지 cover 유지 */
#sec3 .item-img,
#sec3 .item-img a{
  height: 100% !important;
}
#sec3 .item-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* 좌측 블럭을 세로 가운데 정렬 */
.left{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ✅ 세로 중앙 */
}

/* left-foot가 있다면 아래로 밀어내기 */
.left-foot{
  margin-top: auto;          /* footer는 맨 아래 */
}

@media (max-width: 820px){

  .left-foot{
  display: none;
}

}


  .m-foot{

    display: none;
  }

@media (max-width:820px){
  .m-foot{
    display: block;
    position: relative;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;              /* ✅ 최우선 */
    color: #fff;                /* ✅ 글자 */
    padding: 14px 20px 18px;
    background: rgba(0,0,0,.35);/* 필요없으면 transparent */
    backdrop-filter: blur(6px);
  }

.m-foot .sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    transition: color .2s
ease, opacity .2s
ease;
    text-decoration: none !important;
}


  /* m-foot에 가리지 않게 하단 여백 */
  #center{ padding-bottom: 0px; }
}


/* 모바일에서만 적용 */
@media (max-width: 900px){

  #mTopbar{
    transition: transform .3s ease, opacity .3s ease;
    will-change: transform;
  }

  /* 숨김 상태 */
  #mTopbar.is-hidden{
    transform: translateY(-100%);
    opacity: 0;
  }
}


/* =========================================================
   SEC3 모바일 2열 강제(실기기/사파리까지 안정)
   - Bootstrap col-md-* float/width 잔재 제거
   - item-img width 97% 같은 값 무효화
========================================================= */


/* 모바일 topbar 높이 통일 */
:root{ --m-topbar-h: 100px; } /* 지금 스샷이 100px이니 맞춤 */

/* ✅ 모바일: topbar는 항상 fixed로 떠있고, 레이아웃 흔들림 없게 */
@media (max-width: 900px){
  #mTopbar.m-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-topbar-h);
    z-index: 9999;
    transition: transform .25s ease, opacity .25s ease;
    will-change: transform;
  }

  /* ✅ 본문은 항상 topbar 높이만큼 공간 확보(핵심) */
  main#center.center{
    padding-top: var(--m-topbar-h);
  }

  /* topbar 숨김(스크롤 다운 시) - 공간은 유지되므로 화면 높이 안 변함 */
  body.mtopbar-hidden #mTopbar{
    transform: translateY(-100%);
    opacity: 0.98;
    pointer-events: none;
  }
}



/* =========================
   SEC3 (PC 3열 / 모바일 2열) - 단일 정리본
   ========================= */

#sec3{ height:auto !important; overflow:visible !important; }
#sec3 .sec-inner{ padding: 18px 20px; }

/* grid */
#sec3 .gallery{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  column-count: initial !important;
  column-gap: 0 !important;
}

/* ✅ 카드(HTML은 .items가 카드임) */
#sec3 .gallery > .items{
  margin: 0 !important;
  padding: 0 !important;
  height: 20vh;              /* PC 카드 높이 */
 min-height: 23vh !important;
}

/* ✅ wide는 PC에서만 2칸 */
#sec3 .gallery > .items.is-wide{ grid-column: span 2; }

/* 내부 꽉 채우기 */
#sec3 .item-img,
#sec3 .item-img > a{
  display:block;
  width:100% !important;     /* ✅ 97% 같은 값 완전 제거 */
  height:100% !important;
}

#sec3 .item-img{
  position:relative;
  overflow:hidden;
  background:transparent !important;
}

#sec3 .item-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
  padding:0px 5px;
}

/* 오버레이 */
#sec3 .item-img-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
#sec3 .item-img-overlay, #sec3 .item-img-overlay *{ color:#fff !important; }
#sec3 .item-img:hover .item-img-overlay{ opacity:1; }

/* ===== 모바일 ===== */
@media (max-width:768px){
  #sec3 .sec-inner{ padding: 16px 0px; }

  #sec3 .gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 모바일은 정사각형이 가장 안정적 */
  #sec3 .gallery > .items{
    height:auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  /* 모바일에서는 wide 무력화(실기기에서 깨지는 원인 1순위) */
  #sec3 .gallery > .items.is-wide{
    grid-column: span 1 !important;
  }

#sec3 .item-img img{
  padding:0px 10px;
}


}


@media (max-width:900px){
  .sec{ padding-top:14px !important; } /* topbar 높이 빼기 */
  main#center.center{ padding-top: var(--m-topbar-h) !important; }
}