/* 김선국제오페라단 (KSIOC) — 공통 스타일
   컬러: 극장 커튼 레드 #8E0B12 / 딥블랙 #0A0A0A / 아이보리 #F3EFE7 / 골드 #C9A24A */

:root {
	--red: #8E0B12;
	--red-light: #B2151E;
	--black: #0A0A0A;
	--ink: #1A1A1A;
	--ivory: #F3EFE7;
	--gold: #C9A24A;
	--gray: #6E6E6E;
	--line: rgba(255, 255, 255, 0.14);
	--maxw: 1200px;
	--header-h: 96px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: hidden; }   /* 모바일 메뉴 서랍(translateX)이 만드는 가로 스크롤 차단 */
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--black);
	color: var(--ivory);
	font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(var(--maxw), calc(100% - 40px)); margin: 0 auto; }

/* ---------- 헤더 ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 58px; width: auto; }
.brand-name {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #fff;
	white-space: nowrap;
}
.brand-name small {
	display: block;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 2.4px;
	color: var(--gold);
	margin-top: 2px;
}

/* 데스크톱 내비 */
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
	display: block;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 500;
	color: #EDE8DF;
	letter-spacing: -0.2px;
	transition: color .18s;
}
.nav > ul > li > a:hover { color: var(--gold); }

/* 드롭다운 */
.nav .sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 190px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #141414;
	border: 1px solid var(--line);
	border-top: 2px solid var(--red);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s, transform .18s;
}
.nav li:hover .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav .sub a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: #D8D2C7;
	white-space: nowrap;
}
.nav .sub a:hover { background: var(--red); color: #fff; }

.social { display: flex; gap: 12px; margin-left: 20px; }
.social a { color: #9A948A; font-size: 15px; transition: color .18s; }
.social a:hover { color: var(--gold); }

/* 모바일 토글 */
.nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
	padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; margin: 5px 0; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 히어로 슬라이드쇼 ---------- */
.hero {
	position: relative;
	height: calc(100vh - var(--header-h));
	min-height: 460px;
	max-height: 780px;
	overflow: hidden;
}
.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 1.4s ease, transform 7s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10,10,10,.45) 0%, rgba(10,10,10,.25) 45%, rgba(10,10,10,.92) 100%);
}
.hero-copy {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding-bottom: 68px;
	text-align: center;
}
.hero-copy .eyebrow {
	font-size: 12px;
	letter-spacing: 5px;
	color: var(--gold);
	margin-bottom: 14px;
}
.hero-copy h1 {
	margin: 0 0 14px;
	font-size: clamp(28px, 4.4vw, 52px);
	font-weight: 700;
	letter-spacing: -1px;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.hero-copy p { margin: 0; color: #D9D3C8; font-size: clamp(14px, 1.5vw, 17px); }
.hero-copy h1 .mbr { display: none; }   /* PC: 한 줄 */

.hero-dots {
	position: absolute;
	left: 0; right: 0; bottom: 26px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.hero-dots button {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.7);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background .2s;
}
.hero-dots button.on { background: var(--gold); border-color: var(--gold); }

/* ---------- 섹션 공통 ---------- */
.section { padding: 78px 0; }
.section.alt { background: #101010; }

.section-head { text-align: center; margin-bottom: 42px; }
.section-head h2 {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	letter-spacing: -0.6px;
	color: #fff;
}
.section-head .line {
	width: 54px; height: 2px;
	background: var(--red);
	margin: 0 auto 12px;
}
.section-head p { margin: 0; color: var(--gray); font-size: 14px; }

/* 바로가기 — 사진 타일 (보첼리 'Discover More' 스타일) */
.quick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.quick a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 150px;
	overflow: hidden;
	border: 1px solid var(--line);
}
.quick .bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #151515 center/cover no-repeat;
	filter: brightness(.36) saturate(.9);
	transform: scale(1.02);
	transition: transform .7s ease, filter .4s ease;
}
.quick a:hover .bg { transform: scale(1.08); filter: brightness(.55) saturate(1); }
.quick .q-in { position: relative; }
.quick .t {
	display: block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.quick .d {
	display: block;
	margin-top: 7px;
	font-size: 10.5px;
	letter-spacing: 3.5px;
	color: var(--gold);
}

/* 소식 카드 */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.news-card {
	background: #151515;
	border: 1px solid var(--line);
	overflow: hidden;
	transition: border-color .2s, transform .2s;
}
.news-card:hover { border-color: var(--red); transform: translateY(-3px); }
.news-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: #0d0d0d; }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-card .body { padding: 18px 18px 22px; }
.news-card .date { font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.news-card h3 {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #F3EFE7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.more-btn {
	display: inline-block;
	margin-top: 34px;
	padding: 12px 34px;
	border: 1px solid var(--gold);
	color: var(--gold);
	font-size: 14px;
	letter-spacing: 1px;
	transition: background .2s, color .2s;
}
.more-btn:hover { background: var(--gold); color: #101010; }
.center { text-align: center; }

/* 스튜디오 배너 */
.banner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	background: linear-gradient(135deg, #6E0910 0%, #8E0B12 55%, #A6121B 100%);
	overflow: hidden;
}
.banner .txt { padding: 46px 44px; }
.banner .txt .eyebrow { font-size: 11px; letter-spacing: 4px; color: rgba(255,255,255,.75); }
.banner .txt h3 { margin: 10px 0 12px; font-size: clamp(20px, 2.4vw, 27px); color: #fff; font-weight: 700; }
.banner .txt p { margin: 0 0 20px; color: rgba(255,255,255,.9); font-size: 14.5px; }
.banner .txt a {
	display: inline-block;
	padding: 11px 28px;
	background: #fff;
	color: var(--red);
	font-size: 14px;
	font-weight: 600;
}
.banner .pic { background: #5c070d center/cover no-repeat; min-height: 220px; }

/* ---------- 푸터 ---------- */
.site-footer {
	background: #060606;
	border-top: 1px solid var(--line);
	padding: 44px 0 38px;
	font-size: 13px;
	color: #8A857C;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.footer-inner .f-logo img { height: 62px; }
.footer-info p { margin: 0 0 6px; }
.footer-info a { color: var(--gold); }
.footer-social { margin-left: auto; display: flex; gap: 14px; }
.footer-social a { color: #8A857C; font-size: 16px; }
.footer-social a:hover { color: var(--gold); }
.copyright { margin-top: 22px; font-size: 12px; color: #5E5A53; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
	.quick { grid-template-columns: repeat(2, 1fr); }
	.news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
	:root { --header-h: 72px; }

	.brand img { height: 44px; }
	.brand-name { font-size: 17px; }
	.brand-name small { font-size: 9px; letter-spacing: 1.8px; }

	.nav-toggle { display: block; }
	.social { display: none; }

	/* 모바일 메뉴: transform 서랍 대신 페이드 오버레이 (가로 스크롤·클리핑 문제 없음) */
	.nav {
		position: absolute;      /* 헤더(backdrop-filter)가 fixed의 기준이 되므로 absolute로 고정 */
		top: 100%;
		left: 0; right: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		background: #0D0D0D;
		overflow-y: auto;
		margin: 0;
		padding: 10px 0 40px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .25s ease, visibility .25s;
		z-index: 99;
	}
	.nav.open { opacity: 1; visibility: visible; pointer-events: auto; }
	.nav > ul { flex-direction: column; gap: 0; }
	.nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.07); }
	.nav > ul > li > a { padding: 16px 24px; font-size: 16px; font-weight: 600; }
	.nav .sub {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		display: none;
		border: 0;
		background: #111;
		padding: 4px 0 10px;
		min-width: 0;
	}
	.nav li.expanded .sub { display: block; }
	.nav li:hover .sub, .nav li.expanded .sub { transform: none; left: auto; }
	.nav .sub a { padding: 11px 40px; font-size: 14.5px; }

	.hero { height: 62vh; min-height: 380px; }
	/* 관리자에서 지정한 영역과 정확히 맞도록 켄번스 확대 효과는 끈다 */
	.hero-slide { transform: none !important; transition: opacity 1.4s ease; }
	.hero-copy { padding-bottom: 54px; }
	.section { padding: 52px 0; }
	.news-grid { grid-template-columns: 1fr; }
	.banner { grid-template-columns: 1fr; }
	.banner .txt { padding: 32px 24px; }
	.banner .pic { min-height: 170px; order: -1; }
	.footer-social { margin-left: 0; }
}

@media (max-width: 480px) {
	.quick { grid-template-columns: 1fr 1fr; gap: 10px; }
	.quick a { height: 110px; }
	.quick .t { font-size: 15px; }
}

/* 히어로 사진 설명 */
.hero-cap {
	position: absolute;
	right: 22px;
	bottom: 24px;
	z-index: 3;
	font-size: 12px;
	letter-spacing: 1px;
	color: rgba(255,255,255,.72);
	text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
@media (max-width: 820px) { .hero-cap { display: none; } }

/* ---------- 모바일 보정 (터치 타깃 · 히어로 정리) ---------- */
@media (max-width: 820px) {
	/* 히어로: 문구와 점이 겹치지 않게 아래 여백 확보 */
	/* 모바일 히어로: 사진을 최대한 살리는 에디토리얼 배치 (좌측 하단 · 작은 타이포) */
	.hero-copy {
		padding: 0 22px 76px;
		text-align: left;
	}
	.hero-copy .eyebrow { display: none; }          /* 영문 캡션 숨김 */
	.hero-copy h1 {
		font-size: 22px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -0.4px;
		margin: 0;
		max-width: none;
		text-shadow: 0 1px 16px rgba(0,0,0,.55);
	}
	.hero-copy h1::before {                          /* 제목 위 짧은 골드 라인 */
		content: '';
		display: block;
		width: 30px; height: 2px;
		background: var(--gold);
		margin-bottom: 14px;
	}
	.hero-copy p { display: none; }              /* 모바일: 소제목 숨김 (제목만) */
	.hero-copy h1 .mbr { display: inline; }      /* 모바일: '…다시 태어 / 나는 이야기'로 줄바꿈 */

	/* 슬라이드 점: 보이는 크기는 작게(7px), 터치 영역만 넓게 */
	.hero-dots { bottom: 20px; gap: 0; justify-content: flex-end; padding-right: 14px; }
	.hero-dots button {
		width: 30px; height: 30px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		display: flex; align-items: center; justify-content: center;
	}
	.hero-dots button::before {
		content: '';
		width: 7px; height: 7px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,.75);
		background: transparent;
		transition: background .2s, border-color .2s;
	}
	.hero-dots button.on { background: transparent; border: 0; }
	.hero-dots button.on::before { background: var(--gold); border-color: var(--gold); }

	/* 푸터 소셜 아이콘 터치 영역 확대 */
	.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 18px; }
	.site-footer a { display: inline-block; padding: 3px 0; }
}