/* ================================
   TOKENS
================================ */
:root{
  --black:#111;
  --white:#fff;
  --gray:#f5f5f5;
  --text:#111;
  --muted:#888;
  --red:#ff2d2d;
  --green:#02d45a;
  --radius:20px;
  --maxw:1200px;
  --gap:20px;
}

/* ================================
   RESET / BASE
================================ */
*{ box-sizing:border-box; margin:0; padding:0; letter-spacing:-0.05em; }
img{ max-width:100%; display:block; }
button{ font:inherit; }
a{ color:#e02424; font-weight:600; text-decoration:none; }

/* ================================
   HEADER & GNB
================================ */
.mo-margin {margin:0}
hr {display: none;}
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#0f0f10; color:var(--white);
  overflow:visible;
}
.site-header__inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:20px; justify-content:space-between;
}
.brand{ width:180px; }
.brand img{ object-fit:contain; }

.gnb{ flex:1; }

/* PC GNB */
.gnb--pc{ display:flex; justify-content:space-evenly; }
.gnb--mo { display:none; }
.menu-toggle { display:none; }
.gnb__list{
  display:flex; justify-content:space-evenly; align-items:center; gap:36px;
  list-style:none;
}
.gnb__item{ position:relative; }

/* top-level link + underline hover */
.gnb__link{
  position:relative; display:inline-block; color:var(--white);
  text-decoration:none; padding:10px 6px;
}
.gnb__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease-out;
}
.gnb__item:hover > .gnb__link::after{ transform:scaleX(1); }

/* Dropdown */
.has-dd{ position:relative; }
.dd{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  width:180px; background:#111; border-radius:10px; list-style:none;
  overflow:hidden; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  display:flex; flex-direction:column; /* ← 세로 한 줄씩 */
  z-index:2000;
}
.dd li{ width:100%; }
.dd a{ display:block; padding:10px 14px; color:#eee; text-decoration:none; }
.dd a:hover{ background:#28282c; color:#fff; }

/* Hover show */
.has-dd:hover > .dd{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* 호버 끊김 방지 브리지 */
.gnb__item::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}

/* 모바일 토글 (기본 숨김: PC) */
.menu-toggle{ display:none; }

/* ================================
   HERO (full-bleed)
================================ */
.hero-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-swiper .swiper-slide picture,
.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;     /* 슬라이드 높이에 맞춰 강제 */
  object-fit: cover;
  display: block;
}


/* 모바일 전용 높이 */
@media (max-width: 768px) {
  .hero-swiper .swiper-slide img {
    height: 460px;
    object-fit: cover;
  }
}

/* ================================
   LAYOUT / CARD / CONTENT
================================ */
.container{ max-width:var(--maxw); margin:56px auto; padding:0 20px; }
.grid2{ display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; }

.card{
  border:1px solid transparent; border-radius:var(--radius); padding:40px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.card:hover{ border-color:var(--red); transform:translateY(-2px); }

.video{
  margin:80px 0;
  border:1px solid transparent; border-radius:var(--radius); padding:40px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.video:hover{ border-color:var(--red); transform:translateY(-2px); }

.section-title{ font-size:30px; margin-bottom:20px; }
.section-desc{ color:#444; line-height:1.6; }

.card h2{ position:relative; display:inline-block; }
.card h2::after{
  content:""; position:absolute; left:50%; top:50%; width:0; height:6px;
  background:#e02424; transform:translate(-50%,-50%); transition:width .3s ease;
}
.card:hover h2::after{ width:100%; }

/* ONE CLICK BTNS */
.btn-wrap{
  display:grid; gap:var(--gap); grid-template-columns:2fr 2fr; 
}
.btn-stream{
  flex:1 1 calc(33.333% - (20px * 2 / 3));
  padding:14px 0; box-sizing:border-box; border-radius:20px;

  font-weight:800; cursor:pointer; transition:all .18s ease;
  display:flex; flex-direction:row; align-items:center; justify-content:space-around; gap:8px;
}
.btn-stream:first-child {  border:3px solid var(--green); background:var(--white); color:var(--green);}
.btn-stream:nth-child(2) {  border:3px solid #0096FF; background:var(--white); color:#0096FF;}
.btn-stream:nth-child(3) {  border:3px solid #0044ff; background:var(--white); color:#0044ff;}
.btn-stream:nth-child(4) { border:3px solid #FE4203; background:var(--white); color:#FE4203;}

.btn-stream:first-child:hover{ background:var(--green); color:var(--white); border-color:var(--green); }
.btn-stream:nth-child(2):hover { background:#0096FF; color:var(--white); border-color:#0096FF; }
.btn-stream:nth-child(3):hover { background:#0044ff; color:var(--white); border-color:#0044ff; }
.btn-stream:nth-child(4):hover { background:#FE4203; color:var(--white); border-color:#FE4203; }

.btn-stream:nth-child(2) img {border-radius: 20px;}


.btn-stream img:first-child{ width:32px; }
.btn-stream img:last-child{ width:12px; }

/* NOTICE */
.notice{ list-style:none; margin-top:8px; }
.notice li{ padding:8px 0; border-bottom:1px dashed #ddd; }
.notice span{ float:right; color:var(--muted); }

/* VIDEO BOX */
.video-box{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.1); background:#000;
}
.video-box iframe{ width:100%; aspect-ratio:16/9; display:block; }

/* SNS & FOOTER */
.sns{ display:flex; gap:12px; margin-top:12px; }
.sns img{ width:38px; height:38px; transition:transform .18s; }
.sns a:hover img{ transform:scale(1.06); }

.site-footer{ text-align:center; padding:64px 0; color:#666; }
.heart{ width:34px; margin:0 auto 10px; }

/* ================================
   RESPONSIVE
   - 900: 2열→1열
   - 768: 모바일 전환(단일 블록)
================================ */
@media (max-width:900px){
  .grid2{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  :root{ --gap:10px; --radius:10px; }
.mo_on{display: block;
        margin: 32px 0;
        color: #eee;
    }
    hr {color: #eee;}

  /* Base */
  body{ font-size:13px; line-height:1.5; color:#111; letter-spacing:-0.03em; }
  .container{ max-width:100%; margin:20px auto; padding:0 var(--gap); }
  .mo-margin { margin:32px 0; }

  /* GNB: PC 숨김, 햄버거/모바일 GNB 표시 */
  .gnb--pc{ display:none !important; }
  .menu-toggle{
    display:flex !important; flex-direction:column; justify-content:space-between;
    width:24px; height:18px; background:none; border:0; cursor:pointer; z-index:1100;
  }
  .menu-toggle span{ display:block; width:100%; height:2px; background:#fff; }

  .gnb--mo{
    position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.95); opacity:0; pointer-events:none;
    transition:opacity .25s ease; z-index:1000;
  }
  .gnb--mo.open{ opacity:1; pointer-events:auto; }
  .gnb--mo .gnb__list{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:16px; text-align:center;
  }
  .gnb--mo .gnb__list a{ color:#fff; font-size:18px; font-weight:600; }

  /* Hero: 모바일 이미지로 스위치 */
  .hero{ margin-bottom:20px; }
  .hero__img--pc{ display:none !important; }
  .hero__img--mo{ display:block !important; width:100%; height:auto; object-fit:cover; }

  /* 카드/타이포(시안 평면화) */
  .card, .video{ padding:0; margin:0; box-shadow:none; border:none; }
  .section-title{ font-size:20px; font-weight:800; margin-bottom:10px; }
  .section-desc{ font-size:12px; color:#555; margin-bottom:10px; line-height:1.6; }

  /* 버튼 3열 */
  .btn-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
  .btn-stream{
    height:44px; padding:0 12px; gap:6px;
    border-radius:var(--radius); border:3px solid #00d44f; background:#fff; color:#00d44f;
    font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:space-between;
  }
  .btn-stream img:first-child{ width:22px; height:22px; }
  .btn-stream img:last-child{ width:10px; height:10px; }
  .btn-stream:hover{ background:#00d44f; color:#fff; }

  /* Notice */
  .notice{ margin-top:20px; }
  .notice li{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid #eee; font-size:13px;
  }
  .notice span{ color:#888; font-size:12px; margin-left:6px; }

  /* 모바일에서 비디오 숨김(필요없으면 제거) */
  .video{ display:none !important; }

  /* SNS / Footer */
  .sns{ gap:10px; flex-wrap:wrap; margin-top:20px; }
  .sns a{
    display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
    border-radius:var(--radius);
  }
  .sns a img{ width:100%; }
  .site-footer{ padding:20px 0; }

/* PC 기본값: 모바일 메뉴 숨기기 */
@media (max-width:768px){
  /* PC 감추고 햄버거 표시 */
  .gnb--pc{ display:none !important; }
  .menu-toggle{ display:flex !important; }

  /* 풀스크린 오버레이 */
  .gnb--mo{
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.95);
    padding:72px 24px 24px;
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .gnb--mo.open{ opacity:1; pointer-events:auto; }
  body.menu-open{ overflow:hidden; }

  /* 리스트는 흐름 */
  .gnb--mo .gnb__list{ margin:0; padding:0; list-style:none; }
  .gnb--mo .gnb__item{ border:0; }

  /* 밑줄/호버/브리지 등 효과 싹 제거 */
  .gnb--mo .gnb__link{
    position:static !important;
    display:block; padding:16px 4px; color:#fff; font-size:20px; font-weight:700; text-decoration:none;
  }
  .gnb--mo .gnb__link::after,
  .gnb--mo .gnb__item::after{ content:none !important; }

  /* PC 드롭다운 규칙 완전 무효화 + 드롭다운만 */
  .gnb--mo .has-dd{ position:static !important; }


  .gnb--mo .dd li{ list-style:none; }
  .gnb--mo .dd a{ display:block; padding:10px 4px; color:#ddd; font-size:16px; text-decoration:none; }
  .gnb--mo .dd a:hover{ color:#fff; }

  #gnb .gnb.gnb--mo .dd{
    display:none !important;        /* ← 핵심 */
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    margin:6px 0 12px 0; padding:0; list-style:none;
    background:transparent !important; box-shadow:none !important; border:0 !important;
    width:100% !important;
  }
  /* li에 open 붙었을 때만 열기 */
  #gnb .gnb.gnb--mo .gnb__item.open > .dd{
    display:block !important;       /* ← 핵심 */
  }

  /* 밑줄/호버 효과 제거(원하지 않는 효과 차단) */
  #gnb .gnb.gnb--mo .gnb__link::after,
  #gnb .gnb.gnb--mo .gnb__item::after{ content:none !important; }
}
}