@charset "utf-8";
/* 1) Reset */
*{ box-sizing: border-box;padding: 0;margin:0;border: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;word-break: break-all;white-space: normal;text-overflow: clip;}
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

/* 2) 디자인 토큰 */
:root{
  /* 색상 */
  --brand: #91372f;
  --text: #111111;
  --muted: #807b7b;
  --bg: #f3eee3;
  --bg-alt: #f8fafc;
  --border: #ebe5e5;

  /* 타이포 스케일 */
  --font-sans: 'Spoqa Han Sans Neo','Malgun Gothic','맑은 고딕',Gulim,'굴림',AppleSDGothicNeo-Regular,sans-serif;

  --fs-1: clamp(2.0rem, 2.5vw, 3.0rem); /* 히어로 타이틀 */
  --fs-2: clamp(1.4rem, 1.5vw, 2.0rem); /* 섹션 타이틀 */
  --fs-3: 1.5rem; /*본문 타이틀 */
  --fs-4: 1.125rem;  /* 본문 크게 */
  --fs-5: 1.063rem;      /* 기본 본문 */
  --fs-6: .875rem;   /* 보조 텍스트 */
  --fs-7: .75rem;   /* 보조 텍스트2 */

  /* 간격 스케일 */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 14px;
  --shadow: 0 10px 20px rgba(0,0,0,.06);
  --maxw: 1120px;
}

/* 터치시 파란색 번쩍 방지 */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* 3) 유틸리티 */
.hidden { display: none !important; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); } /* 세로 간격 */
.cluster {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: center;
}
.pad { padding: var(--space-6) var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

/* 4) 베이스 */
html { scroll-behavior: smooth; }
body{
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: var(--fs-5);
}
a{ color: var(--text); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1{ font-size: var(--fs-1); line-height: 1.2; margin: 0; }
h2{ font-size: var(--fs-2); line-height: 1.25; margin: 0 0 var(--space-3); }
h3{ font-size: var(--fs-3); line-height: 1.25; margin: 0; }
p{ margin: 0 0 var(--space-3); color: var(--text); }

/* 버튼 */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.btn.ghost{ background: #fff; color: var(--brand); }

/* 5) 레이아웃 */
.container{
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
}
.section{ padding: var(--space-7) 0; }
.card{
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* 6) 컴포넌트 */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #91372f;
  backdrop-filter: blur(10px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: .6rem 0;
}
.logo{
  font-weight: 800;
  letter-spacing: .2px;
}

.nav a{
  padding-bottom: .25rem;
  font-weight: 500;
  color: #f1e9c4;;
}
.nav a.is-active{
  font-weight: 700;
  border-bottom:2px solid var(--brand);
}

/* 7) 접근성/상태 */
:focus-visible{
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* PC */
.hero{
  position: relative;
  height: 34rem;              /* PC는 hero 높이 고정 */
  overflow: hidden;           /* 데코가 튀어나가도 hero 높이 영향 없음 */
  background-color:#6f2520;
}
.hero-bg{
  width:100%;
  height:100%;                /* hero 높이를 그대로 따라감 */
  background: url("../img/main-visual01.png") center top no-repeat;
  background-size:1640px auto;
  position: absolute;
}

.hero-deco{
  position:absolute;
  top:3rem;
  left:50%;
  transform:translateX(-50%);
  width:1250px;                /* 화면보다 훨씬 크게 */
  max-width:none;
  z-index:1;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  max-width:960px;
  margin:0 auto;
  padding-top:4rem;
  z-index:2;
}

.hero-title-wrap{
  width:min(73%, 380px);
  margin:0 auto;
}

.hero-title{
  width:100%;
  height:auto;
}
.hero .lead{
  color: var(--muted);
  max-width: 60ch;
}


/* 소개 */
#greet>div {display: flex;flex-wrap:wrap;}
#greet>div>.ceo-img{flex: 1;}
#greet>div>.ceo-txt{flex: 2.6;}
#greet>div>.ceo-txt>p{text-align: justify;text-indent: 0.5rem;}
.sign{font-size: var(--fs-5);text-align: right;} 
.sign>strong{font-size: var(--fs-5);font-weight: 500;letter-spacing: 0.3rem;margin-left: 0.5rem;}
#overview>div{display: flex;flex-wrap:wrap;}
#overview>div>.overview-img{flex: 1;}
#overview>div>.overview-txt{flex: 4;padding-left:40px;margin-top: .45rem;}
#overview>div>.overview-txt>ul{display: flex;list-style-type: none;margin: 0;padding: 0;margin-bottom: 0.7rem;}
#overview>div>.overview-txt>ul>li>strong{display: inline-block;width: 70px;}
#overview>div>.overview-txt>ul>li>strong>span{letter-spacing: 0.9rem;}

/* 일정(프로그램 카드) */
.schedule-grid{
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}
.schedule-item{
  display: grid;
  gap: .5rem;
  grid-template-columns: 80px 1fr 250px;
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.schedule-item .time{ font-weight: 700; color: var(--brand); }
.schedule-item .meta{ color: var(--muted); font-size: var(--fs-5); }
.stack>details>p:nth-child(even){color:var(--brand);font-weight: 500;}
.stack>details>p:nth-child(odd){text-align: justify;}

/* Program table */
.table-wrap{
  border-radius: var(--radius);
  background:#fff;
  overflow: hidden;
}
.table-scroll{
  width:100%;
  overflow-x:auto;
}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 560px; /* 모바일 가로 스크롤 유도 */
  font-size: var(--fs-5);
}
.table th, .table td{
  padding: .875rem 1rem;
  border-bottom:1px solid var(--border);
  text-align: center;
  vertical-align: top;
}
.table thead th{
  background: #65201a;
  font-weight:500;
  color: #f1e9c4;
}
.table .part{
  background:#fff7f0; /* 브랜드 톤 연계 */
}
.table .part th{
  color:var(--brand);
  font-weight:800;
  border-bottom:1px solid var(--border);
}
.table>tbody>tr>td>strong{color:var(--brand);font-weight: 500;}

/* 스크롤 힌트 */
.table-hint{
  padding:.5rem 1rem;
  font-size: var(--fs-5);
  color: var(--muted);
  border-top:1px dashed var(--border);
  background:#fff;
  text-align: left;
}

/* 출연진 */
.lineup{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}
.artist img{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.artist>div>p:last-child{font-size: var(--fs-6);color: var(--muted);}
.pf{display: flex;margin-bottom: 15px;}
.pf>div{padding-left: 30px;padding-top: 23px;}
.pf>div>strong {font-weight: 600;font-size: 1.15rem;}
.pf>div>.meta{color: var(--brand);font-weight: 500;font-size: 1rem;}

/* 지도 */
.map{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius);
}
ul.list{padding-left: 2rem;}
ul.list>li:not(:last-child){margin-bottom: 20px;}
ul.list>li>ul{list-style-type: none;padding-inline-start: 0;}
ul.list>li>ul>li>b{text-decoration: underline;font-weight: 500;}

/* 푸터 */
.site-footer{
  padding: var(--space-6) 0;
  border-top:1px solid var(--border);
  font-size: var(--fs-7);
}
.ir-txt {display: inline-block;text-indent: -9999px;font-size: 0;}
.logo>.ir-txt {
  box-sizing: border-box;
  background: url(../img/sprites_yonhapnewstv.svg) 0 -50px no-repeat;
  width: 136px;
  height: 24px;
}
.site-footer>div>p{margin-top: 1rem;color: #9a9898;}
/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
}
.tabs button {
  appearance: none;       /* 모바일 기본 버튼 스타일 제거 */
  -webkit-appearance: none; 
}
.tab-btn {
  font-weight: 500;
  padding: .5rem 2rem;
  border: none;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.is-active {
  font-weight: 500;
  background: var(--brand);
  color: #fff;
}
.tab-panel {
  display: none;
}
.tab-panel.is-active {
  display: block;
}

/* Sponsors */
.sponsors{
  display:grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
  align-items:center;
  justify-items:center;
}
.sponsor-item img{
  max-width:120px;
  max-height:50px;
  object-fit:contain;
  /* filter: grayscale(100%); 색 빠진 모노톤 */
  opacity:.8;
  transition:.2s;
}
.sponsor-item img:hover{
  filter:none;
  opacity:1;
}

/* 연도 + 슬라이드 레이아웃 */
.history-row{
  display: grid;
  gap: var(--space-2);
  margin-top: 3rem;
}

.history-info{text-align:left;}
.history-year{
  margin:0 0 .25rem;
  font-weight:700;
  font-size:1.5rem;
  color:var(--brand);
}
.history-title{
  margin:0 0 .5rem;
  font-size:1.3rem;
}
.history-meta{
  margin:0 0 .75rem;
  font-size:var(--fs-5);
  color:var(--muted);
}

/* 출연진 스트립 영역 */
.history-strip-wrap{
  width:100%;
}

/* 화살표 + 숫자 */
.strip-controls{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:1rem;
}
.strip-controls button{
  background: none;
  border: none;
  padding: 0;
  font-size: 1rem;
  color: #111;            /* 원하는 색으로! */
  cursor: pointer;
  appearance: none;       /* 모바일 기본 버튼 스타일 제거 */
  -webkit-appearance: none; 
}

.strip-controls button:focus{
  outline: none;
}
.strip-arrow{
  width:30px;
  height:30px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.history-strip{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:.5rem;
  padding-left: .5rem; 
  padding-right: .5rem; 
}

/* 스크롤바 숨기기 */
.history-strip{
  scrollbar-width:none;
}
.history-strip::-webkit-scrollbar{
  display:none;
}

/* 카드 하나 */
.strip-item{
  position:relative;
  flex:0 0 80%;          /* 모바일: 1장 + 옆 카드 힌트 */
  scroll-snap-align:start;
}

.strip-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:grayscale(100%);
  opacity:.6;
  transition:.25s;
}

/* 현재 메인 카드만 컬러 강조 */
.strip-item.is-main img{
  filter:none;
  opacity:1;
  transform:scale(1);
}

/* 이미지 안 하단 이름 오버레이 */
.strip-item figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.45rem .7rem;
  font-size:var(--fs-6);
  color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}

/* 인디케이터 영역 */
.strip-indicator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.25rem;
  font-size:var(--fs-5);
  color:var(--muted);
}

.strip-counter{
  font-size:1rem;
  font-weight:500;
  min-width:70px;
  text-align:center;
}

/* 혹시 모를 미세한 튀어나옴 방지용(선택) */
body{
  overflow-x: hidden;
}

/* 텍스트 연혁용 */
.history-row--text .history-textbox{
  background: #eae4d4;
  padding: 1.2rem 1.4rem;
  font-size: var(--fs-5);
}

.history-textline{
  line-height: 1.5;
  text-align: left;
}
.history-textline>p{display: flex;margin-bottom: 0;}
.history-textline>p>span:first-child{
  font-weight: 500;
  min-width: 3rem;
  color: var(--brand);
}

/* ===== Mobile Hamburger (Full Overlay) ===== */

/* 기본: 모바일에선 데스크톱 메뉴 숨김, 햄버거 표시 */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #752821;
  cursor: pointer;
}
.hamburger:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.hamburger .bar {
  position: relative; width: 20px; height: 2px; background: #f1e9c4;
}
.hamburger .bar::before, .hamburger .bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #f1e9c4;
}
.hamburger .bar::before { top: -6px; }
.hamburger .bar::after  { top:  6px; }

/* 오버레이 */
.mobile-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
}
.mobile-overlay.is-open { display: grid; }

/* 오버레이 내용 */
.mobile-menu {
  align-self: start;
  margin-top: 80px;           /* 헤더 높이 고려 */
  width: min(90%, 480px);
  justify-self: center;
  background: #91372f;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: var(--space-4);
  animation: fadeIn .18s ease-out;
}
@keyframes fadeIn { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

.mobile-menu-header{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: .25rem; border-bottom: 1px solid #f1e9c4;
}
.mobile-menu-title{ font-weight: 800;color:#f1e9c4; padding-left: 1rem; }

.mobile-links{
  display: grid; gap: .5rem; padding-top: var(--space-4);
}
.mobile-links a{
  display: block; padding: .875rem 1rem;
  border-radius: 12px;
  background: #7f2925;
  font-weight: 500; color: #f1e9c4; text-decoration: none;
}
.mobile-links a:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; }
.mobile-links a:hover{ background: #7f2925; }

.mobile-close{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 10px;
  background:#752821; cursor:pointer; color:#f1e9c4;
}

/* 오버레이 열렸을 때 바디 스크롤 잠금 */
.noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* 8) 브레이크포인트 확장 */
@media (min-width: 640px){
  .lineup{ grid-template-columns: repeat(3, 1fr); }
  .table-hint{ display:none; }
  .sponsors{grid-template-columns: repeat(4,1fr);}
}
@media (min-width: 768px){
  .history-row{grid-template-columns: 290px minmax(0, 1fr);align-items: flex-start;}
  .strip-item{flex:0 0 228px;}     /* PC: 2~3장 보이도록 */
  .strip-counter { font-size: 1rem; }
}
@media (min-width: 960px){
  .nav{ padding: 1rem 0; }
  .hero .lead{ font-size: var(--fs-5); }
  .schedule-grid{ grid-template-columns: 1fr; }
  .lineup{ grid-template-columns: repeat(2, 1fr); }
  .sponsors{grid-template-columns: repeat(6,1fr); }
  .hamburger { display: none; }
}
@media(max-width: 768px){
  /* 모바일용 비주얼 */
  .hero-bg{
    background-image:url("../img/main-visual01-m.png");
    background-size:cover;               /* 비율 유지하며 꽉 채워줌 */
    background-position:center bottom;
    aspect-ratio:1080 / 1500;            /* 모바일 전용 비율 */
  }
  .hero-deco{display: none;}
  .hero-title{display: none;}
  .hero-inner{padding-top:3rem;}
  .history-info{text-align:center;}
  .strip-controls{justify-content: center;margin-top: 1rem;}
  .table {min-width: 800px;font-size: var(--fs-6);}
  .history-strip{padding: 0;}
  .strip-item{flex: 0 0 100% !important;}
}

@media (max-width: 959.98px){
  .nav .cluster { display: none; }
  #overview>div{display: block;}
  #overview>div>.overview-txt{padding-left: 0;}
  #greet>div{display: block;}
  #greet>div>.ceo-img{text-align: center;}
  #greet>div>.ceo-img>img{display: inline-block;}
  .lineup{grid-template-columns: 1fr;}
}