: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:space-between;}
.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;}
.nav{display:flex;gap:18px;}
.nav-link{font-size:18px;color:var(--muted);font-weight: 600;}
.nav-link:hover{color:var(--text);}
.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);
}
.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;}

@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);}
}

@media (max-width:640px){
  .channels{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .live-row{grid-template-columns:1fr;}
  .live-side{padding:12px;}
  .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-basis:100%;}
}

@media (max-width:520px){
  .header-inner{min-height:84px;}
  .brand-mark{font-size:18px;}
  .nav{gap:10px;flex-wrap:wrap;justify-content:flex-end;}
  .nav-link{font-size:15px;}
  .hero-left{height:230px;}
  .hero-floating{
    right:10px;
    top:10px;
    max-width:220px;
    padding:10px;
  }
  .hero-floating-logo{width:118px;}
  .hero-floating-title{font-size:17px;}
  .hero-floating-time{margin-top:6px;font-size:12px;}
}


@media (max-width:1024px){
  #youtube-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  #youtube-grid{grid-template-columns:1fr;}
}


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