:root{
  --bg:#ffffff;
  --panel:#f6f7f9;
  --panel2:#ffffff;
  --line:transparent;
  --text:#111214;
  --muted:rgba(17,18,20,.72);
  --muted2:rgba(17,18,20,.55);
  --accent:#e60012;
  --radius:0;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  line-height:1.35;
}

a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;}

.container{max-width:1240px;margin:0 auto;padding:0 24px;}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom:none;
  padding:12px 0;
}
.header-inner{min-height:96px;display:flex;align-items:center;justify-content:flex-start;}
.brand-mark{font-weight: 700;letter-spacing:-.03em;font-size:20px;}
.brand-logo{
  display:block;
  height:32px;
  width:auto;
  object-fit:contain;
}
.brand-mark-fallback{display:none;}
.menu-toggle,
.menu-close,
.nav-scrim{display:none;}
.nav{display:flex;gap:18px;margin-left:auto;}
.nav-link{font-size:18px;color:var(--muted);font-weight: 600;}
.nav-link:hover{color:var(--text);}
.header-search-form{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:18px;
}
.header-search-input{
  width:220px;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(17,18,20,.08);
  background:#fff;
  font:inherit;
}
.header-search-button{
  height:42px;
  min-width:58px;
  padding:0 14px;
  background:#111214;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.page-home .brand-logo{height:46px;}
.page-sub .brand-logo{height:22px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 14px;
  border-radius:0;
  border:none;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:700;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.04);}
.btn-ghost{background:#fff;border:none;color:var(--text);}
.btn-ghost:hover{background:rgba(0,0,0,.03);}

.section{padding:44px 0;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
.section-title{font-size:26px;letter-spacing:-.03em;font-weight: 700;}
.live-section-head{margin-top:56px;}

.hero{padding:0;background:#fff;}
.hero .container{max-width:none;padding:0;}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:stretch;
}
.hero-left{
  position:relative;
  width:100%;
  height:420px;
  border-radius:0;
  overflow:hidden;
  border:none;
  background:#eceff2;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.hero-slide-1{background-image:url("../img/hero_banner_1.png?v=2");}
.hero-slide-2{background-image:url("../img/hero_banner_2.png?v=2");}
.hero-slide-3{background-image:url("../img/hero_banner_3.png?v=2");}
.hero-slide.active{opacity:1;pointer-events:auto;}
.hero-badge{
  align-self:flex-start;
  background:#fff;
  color:var(--accent);
  font-size:11px;
  font-weight: 700;
  border-radius:0;
  padding:5px 9px;
  margin-bottom:10px;
}
.hero-title{font-size:42px;line-height:1.07;letter-spacing:-.03em;font-weight: 700;}
.hero-sub{margin-top:10px;max-width:600px;font-size:15px;color:rgba(255,255,255,.92);font-weight:600;}
.hero-nav{
  position:absolute;
  top:36%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
  background:rgba(35,35,35,.55);
  color:#fff;
  font-size:36px;
  line-height:56px;
  text-align:center;
  cursor:pointer;
  z-index:5;
  backdrop-filter:blur(1px);
}
.hero-nav.prev{left:10px;}
.hero-nav.next{right:10px;}
.hero-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:3;}
.dot{width:8px;height:8px;border-radius:0;background:rgba(255,255,255,.45);cursor:pointer;}
.dot.active{width:24px;background:#fff;}

.hero-floating{
  position:absolute;
  right:28px;
  top:28px;
  max-width:360px;
  padding:18px 18px 16px;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(6px);
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
  z-index:4;
  pointer-events:none;
}
.hero-floating.is-visible{
  opacity:1;
  transform:translateY(0);
}
.hero-floating-logo-wrap{margin-bottom:10px;}
.hero-floating-logo{
  display:block;
  width:180px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.hero-floating-logo-fallback{
  display:none;
  font-size:26px;
  font-weight: 700;
  letter-spacing:-.03em;
}
.hero-floating-title{
  font-size:28px;
  font-weight: 700;
  line-height:1.15;
  letter-spacing:-.03em;
}
.hero-floating-time{
  margin-top:8px;
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.today{display:grid;grid-template-columns:1.45fr 0.9fr 0.9fr;gap:12px;margin-bottom:12px;}
.today-card{padding:0;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

.card{
  border-radius:0;
  border:none;
  background:var(--panel2);
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.10);}

.schedule-card{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
  min-height:88px;
  background:var(--panel);
}
.today-card-live .schedule-card{background:linear-gradient(110deg, #1f2027 0%, #151820 60%, #23252f 100%);}
.today-card:not(.today-card-live) .schedule-card{background:#A8A7A7;}
.schedule-timeblock{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  border:none;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
}
.schedule-timeblock .t{font-size:17px;font-weight: 600;letter-spacing:-.01em;line-height:1.1;}
.schedule-timeblock .t-line{display:block;}
.schedule-main .live-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 9px;
  background:#ff1a2f;
  color:#fff;
  font-size:12px;
  font-weight: 700;
  margin-bottom:8px;
}
.schedule-main .title{font-size:18px;font-weight: 700;letter-spacing:-.02em;margin-bottom:4px;}
.schedule-main .meta{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;
}
.today-card-live .schedule-timeblock .t,
.today-card-live .schedule-main .title{color:#fff;}
.today-card-live .schedule-main .meta{color:rgba(255,255,255,.78);}

.channels{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:12px;
}
.channel{height:120px;border-radius:0;border:none;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.channel-num{font-size:26px;font-weight: 700;}
.channel-name{font-size:15px;color:var(--muted);font-weight: 700;}
.channel{
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.channel:hover{
  transform:translateY(-2px);
  background:#e8ebf1;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
.live-row{
  margin-top:0;
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(240px, 3fr);
  gap:14px;
  align-items:stretch;
}
.live-player-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.live-player-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.live-side{
  background:#f6f7f9;
  padding:12px;
  display:grid;
  grid-template-rows:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.live-side-link{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  font-size:15px;
  font-weight: 600;
  background:#fff;
  color:#111214;
}
.live-side-link:hover{background:#f0f0f0;}

.programs-slider-wrap{
  position:relative;
  display:block;
}
.programs-slider{
  overflow:hidden;
}
.programs-track{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  transition:transform .32s ease;
}
.program-card{
  cursor:pointer;
  flex:0 0 calc((100% - 48px)/5);
  max-width:359px;
}
.program-thumb{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  background:#eceff2;
}
.program-body{padding:12px;}
.program-title{font-size:15px;font-weight: 700;letter-spacing:-.02em;}
.program-meta{margin-top:6px;font-size:13px;color:rgba(17,18,20,.72);font-weight:700;}
.program-desc{margin-top:8px;font-size:13px;color:rgba(17,18,20,.72);font-weight:700;line-height:1.45;}
.programs-nav{
  position:absolute;
  top:36%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(35,35,35,.55);
  color:#fff;
  font-size:36px;
  line-height:56px;
  text-align:center;
  cursor:pointer;
  z-index:5;
  backdrop-filter:blur(1px);
}
.programs-nav.prev{left:10px;}
.programs-nav.next{right:10px;}
.programs-nav:disabled{opacity:.35;cursor:default;}

.site-footer{border-top:none;padding:30px 0 44px;background:#000;}
.footer-inner{display:flex;flex-direction:column;gap:8px;}
.footer-line{font-size:13px;color:rgba(230,230,230,.88);font-weight:500;line-height:1.55;}
.footer-copy{font-size:12px;color:rgba(230,230,230,.72);margin-top:4px;}

.ad-banner-section{
  padding-top:8px;
  padding-bottom:56px;
}

.ad-banner-slot{
  min-height:140px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ad-banner-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
}

.ad-banner-image{
  display:block;
  width:min(100%, 728px);
  height:auto;
}

.ad-banner-copy{
  display:none;
  flex-direction:column;
  gap:8px;
  color:rgba(17,18,20,.74);
}

.ad-banner-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}

.ad-banner-copy strong{
  font-size:24px;
  letter-spacing:-.03em;
}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-left{height:340px;}
  .hero-floating{
    right:16px;
    top:16px;
    max-width:300px;
    padding:14px;
  }
  .hero-floating-logo{width:150px;}
  .hero-floating-title{font-size:22px;}
  .hero-floating-time{font-size:14px;}
  .today{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .channels{grid-template-columns:repeat(4, minmax(0, 1fr));}
  .programs-track{gap:10px;}
  .program-card{flex-basis:calc((100% - 20px)/3);}
  .ad-banner-slot{min-height:120px;}
}

@media (max-width:640px){
  .container{padding:0 20px;}
  .section{padding:34px 0;}
  .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:16px;
  }
  .section-title{font-size:22px;line-height:1.2;}
  .btn{height:40px;padding:0 12px;font-size:13px;}
  .today{gap:10px;}
  .today{
    grid-auto-flow:column;
    grid-auto-columns:calc(100% - 52px);
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
  }
  .today-card{scroll-snap-align:start;}
  .schedule-card{
    grid-template-columns:88px 1fr;
    gap:12px;
    padding:14px;
    min-height:84px;
  }
  .schedule-timeblock .t{font-size:15px;}
  .schedule-main .title{font-size:16px;}
  .schedule-main .meta{font-size:12px;}
  .channels{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .channel{height:104px;padding:10px 6px;}
  .channel-num{font-size:22px;}
  .channel-name{font-size:13px;text-align:center;}
  .live-row{grid-template-columns:1fr;}
  .live-side{padding:12px;}
  .live-side-link{min-height:48px;font-size:14px;}
  .hero-nav{width:42px;height:42px;line-height:42px;font-size:26px;}
  .hero-nav.prev{left:6px;}
  .hero-nav.next{right:6px;}
  .programs-nav{width:42px;height:42px;font-size:26px;line-height:42px;}
  .programs-nav.prev{left:6px;}
  .programs-nav.next{right:6px;}
  .program-card{
    flex:0 0 min(359px, calc(50vw - 26px));
    max-width:min(359px, calc(50vw - 26px));
  }
  .program-body{padding:12px 10px 14px;}
  .program-title{font-size:14px;line-height:1.35;}
  .program-meta,.program-desc{font-size:12px;}
  .programs-slider{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;}
  .programs-track{width:max-content;transform:none !important;}
  .program-card{scroll-snap-align:start;}
  .programs-nav{display:none;}
  #youtube-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc(100% - 52px);
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    margin:0 -20px;
    padding:0 20px 6px;
    align-items:start;
  }
  #youtube-grid > .card{
    scroll-snap-align:start;
    width:min(359px, calc(100vw - 52px));
    max-width:min(359px, calc(100vw - 52px));
    align-self:start;
  }
  .youtube-card-body{padding:12px;}
  .youtube-card-title{font-size:14px;}
  .ad-banner-section{padding-bottom:42px;}
  .ad-banner-copy strong{font-size:20px;}
}

@media (max-width:520px){
  .site-header{padding:10px 0;}
  .header-inner{
    min-height:72px;
    align-items:center;
    flex-direction:row;
    gap:12px;
  }
  .brand{display:inline-flex;align-items:center;}
  .brand-mark{font-size:18px;}
  .brand-logo{height:24px;max-height:80px;}
  .menu-toggle{
    width:44px;
    height:44px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-left:auto;
    background:#111214;
  }
  .menu-toggle span{
    width:18px;
    height:2px;
    background:#fff;
    display:block;
  }
  .nav-scrim{
    position:fixed;
    inset:0;
    background:rgba(17,18,20,.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
  }
  .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(300px, 82vw);
    padding:20px;
    background:#fff !important;
    color:#111214;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:18px;
    margin-left:0;
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:70;
    box-shadow:-16px 0 32px rgba(17,18,20,.16);
  }
  .menu-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    margin-left:auto;
    font-size:30px;
    line-height:1;
    color:#111214;
    background:transparent;
  }
  .nav-link{
    font-size:16px;
    line-height:1.25;
    color:#111214 !important;
    width:100%;
    padding:8px 0;
  }
  body.menu-open .nav{transform:translateX(0);}
  body.menu-open .nav-scrim{
    opacity:1;
    pointer-events:auto;
  }
  body.menu-open{overflow:hidden;}
  .hero .container{padding:0 20px;}
  .hero-left{
    height:auto;
    aspect-ratio:438 / 330;
  }
  .hero-floating{
    right:12px;
    left:12px;
    top:auto;
    bottom:16px;
    max-width:none;
    padding:12px;
  }
  .hero-floating-logo{width:112px;}
  .hero-floating-title{font-size:16px;line-height:1.2;}
  .hero-floating-time{margin-top:6px;font-size:12px;}
  .today{grid-auto-columns:calc(100% - 44px);}
  .grid-3{grid-template-columns:1fr;}
  .live-section-head{margin-top:40px;}
  .footer-line{font-size:12px;line-height:1.6;}
  .footer-copy{font-size:11px;}
}


.youtube-thumb-wrap{
  width:100%;
  aspect-ratio:16/9;
  background:#eceff2;
  overflow:hidden;
}

.youtube-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.youtube-thumb-empty{
  background:#eceff2;
}

.youtube-card-body{
  padding:12px 14px;
}

.youtube-card-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.35;
}