/* 성과·무대 강조형 — 공연 사진과 합격 실적을 앞세우는 구성. 미드나잇 네이비 + 골드 포인트 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');
:root { --night: #0b1024; --navy: #18214a; --gold: #f5b331; --gold-ink: #1a1405; --ink: #15171c; --muted: #6b7080; }
.en { font-family: 'Montserrat', 'Pretendard', sans-serif; }

header.gnb { position: absolute; left: 0; right: 0; top: 0; z-index: 10; color: #fff; background: linear-gradient(180deg, rgba(11,16,36,.78), rgba(11,16,36,0)); padding-bottom: 30px; }
header.gnb.solid { position: relative; background: var(--night); }
header.gnb .wrap { width: 1320px; display: flex; align-items: center; height: 92px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo .mark { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; }
.logo b { font-family: 'Montserrat'; font-weight: 800; font-size: 22px; letter-spacing: .5px; display: block; line-height: 1; }
.logo small { font-family: 'Montserrat'; font-size: 9px; letter-spacing: 3.5px; opacity: .8; }
nav.menu { display: flex; gap: 42px; margin-left: auto; font-weight: 600; font-size: 16px; }
nav.menu a.on { color: var(--gold); }
.util { margin-left: 40px; font-size: 12px; opacity: .8; display: flex; gap: 12px; }

.hero { position: relative; height: 860px; color: #fff; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,36,.82) 0%, rgba(11,16,36,.35) 60%, rgba(11,16,36,.55) 100%); }
.hero .copy { position: absolute; left: 0; right: 0; top: 270px; }
.hero h1 { font-family: 'Montserrat'; font-weight: 900; font-size: 92px; line-height: .95; letter-spacing: -2px; color: var(--gold); text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.hero .hello { display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: end; }
.hero .hello h2 { font-size: 30px; font-weight: 800; }
.hero .hello p { margin-top: 10px; font-size: 18px; line-height: 1.6; opacity: .92; }
.quick { position: absolute; left: 0; right: 0; bottom: 0; background: var(--gold); color: var(--gold-ink); }
.quick .wrap { display: grid; grid-template-columns: repeat(4, 1fr); height: 150px; align-items: center; }
.quick .q { display: flex; gap: 18px; align-items: center; padding-left: 28px; border-left: 1px solid rgba(0,0,0,.12); }
.quick .q:first-child { border-left: 0; padding-left: 0; }
.quick .q b { display: block; font-size: 20px; font-weight: 800; }
.quick .q small { font-size: 13px; opacity: .75; }

.banner-card { position: relative; margin-top: 110px; height: 300px; border-radius: 24px; overflow: hidden; color: #fff; }
.banner-card .bg { position: absolute; inset: 0; filter: grayscale(.4) brightness(.45); }
.banner-card .in { position: relative; padding: 70px 80px; }
.banner-card h3 { font-size: 34px; font-weight: 800; display: flex; align-items: center; gap: 14px; }
.banner-card p { margin-top: 14px; font-size: 16px; opacity: .88; }
.banner-card a { display: inline-block; margin-top: 60px; font-size: 14px; border-bottom: 1px solid #fff; }

.video { margin-top: 110px; }
.video .head { display: flex; align-items: baseline; gap: 20px; }
.video .head h2 { font-family: 'Montserrat'; font-weight: 900; font-size: 46px; }
.video .head p { color: var(--muted); }
.video .head a { margin-left: auto; font-size: 13px; font-weight: 700; }
.video .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 26px; }
.vcard h4 { font-size: 19px; font-weight: 800; margin-bottom: 12px; }
.vcard .thumb { height: 230px; border-radius: 18px; overflow: hidden; position: relative; }
.vcard .thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.vcard .thumb .play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; }
.vcard p { margin-top: 14px; font-size: 14px; color: #333; }

.award-sec { background: #f2f3f7; padding: 100px 0; margin-top: 110px; }
.award { position: relative; border-radius: 26px; overflow: hidden; height: 560px; color: #fff; }
.award .bg { position: absolute; inset: 0; filter: brightness(.35); }
.award .in { position: relative; display: grid; grid-template-columns: 330px 1fr; height: 100%; padding: 50px; gap: 30px; align-items: center; }
.award .ttl small { font-family: 'Montserrat'; font-size: 20px; letter-spacing: 2px; }
.award .ttl h2 { font-family: 'Montserrat'; font-weight: 900; font-size: 56px; line-height: 1; margin-top: 14px; }
.award .ttl h2 span { color: var(--gold); }
.award .ttl p { margin-top: 20px; font-size: 18px; border-top: 1px solid rgba(255,255,255,.5); padding-top: 14px; display: inline-block; }
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.badge { background: rgba(255,255,255,.14); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; text-align: center; padding: 16px 6px; }
.badge b { display: block; font-size: 14px; font-weight: 700; }
.badge span { display: block; margin-top: 8px; font-size: 22px; font-weight: 800; color: var(--gold); }
.badge.hl { background: rgba(245,179,49,.9); border-color: transparent; }
.badge.hl b, .badge.hl span { color: var(--gold-ink); }

.icons { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 100px 0 40px; }
.icons .i svg { margin: 0 auto; }
.icons h4 { margin-top: 18px; font-size: 20px; font-weight: 800; }
.icons p { margin-top: 10px; color: #555; font-size: 14px; line-height: 1.6; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 50px 0 120px; }
.ccard { position: relative; border-radius: 24px; overflow: hidden; height: 360px; color: #fff; padding: 50px 46px; }
.ccard .bg { position: absolute; inset: 0; }
.ccard .bg::after { content: ''; position: absolute; inset: 0; }
.ccard.c1 .bg::after { background: rgba(10,10,10,.6); }
.ccard.c2 .bg::after { background: rgba(160,40,20,.72); }
.ccard.c3 { background: var(--navy); }
.ccard .in { position: relative; }
.ccard h3 { font-size: 26px; font-weight: 800; display: inline-block; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 8px; }
.ccard h4 { margin-top: 18px; font-size: 19px; font-weight: 700; }
.ccard p { margin-top: 12px; font-size: 14px; line-height: 1.75; opacity: .9; }
.ccard a { display: inline-block; margin-top: 26px; font-size: 13px; border-bottom: 1px solid #fff; }
.ccard .tel { font-size: 30px; font-weight: 800; color: var(--gold); margin-top: 18px; }

footer.ft { background: #111318; color: #c9cbd2; padding: 50px 0; font-size: 14px; }
footer.ft .wrap { display: flex; justify-content: space-between; align-items: flex-start; }
footer.ft b { color: #fff; }
footer.ft .copy { margin-top: 18px; font-size: 12px; color: #777; }
footer.ft .sns { display: flex; gap: 10px; justify-content: flex-end; }
footer.ft .sns span { width: 34px; height: 34px; border-radius: 50%; background: #2a2d36; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
footer.ft .pills { display: flex; gap: 8px; margin-top: 16px; }
footer.ft .pills span { background: #2a2d36; border-radius: 999px; padding: 6px 14px; font-size: 12px; }

/* 서브 */
.subvis { position: relative; height: 340px; color: #fff; overflow: hidden; }
.subvis .bg { position: absolute; inset: 0; filter: brightness(.45); }
.subvis .in { position: absolute; left: 0; right: 0; top: 160px; }
.subvis .in .wrap { display: flex; align-items: center; gap: 30px; }
.subvis h1 { font-family: 'Montserrat'; font-weight: 900; font-size: 52px; line-height: .95; color: var(--gold); }
.subvis p { font-size: 16px; line-height: 1.6; }
.subvis p b { font-size: 20px; display: block; }
.sub-body .wrap { display: grid; grid-template-columns: 230px 1fr; gap: 60px; padding: 30px 0 120px; }
.lnb .head { background: var(--gold); color: var(--gold-ink); text-align: center; font-weight: 800; padding: 22px 0; font-size: 18px; }
.lnb a { display: flex; justify-content: space-between; padding: 12px 6px; border-bottom: 1px solid #eee; font-size: 14px; }
.lnb a.on { color: #b07a0c; font-weight: 700; }
.crumb { font-size: 12px; color: #999; }
.page-title { font-size: 22px; font-weight: 800; margin-top: 4px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.cat-band { margin-top: 26px; background: linear-gradient(180deg, #1f2433, #2d3446); height: 140px; display: grid; place-items: center; color: var(--gold); font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.tcard { display: grid; grid-template-columns: 200px 220px 1fr; gap: 30px; padding: 46px 0; border-bottom: 1px solid #e8e8ee; }
.tcard .intro { font-size: 26px; color: #c99512; font-family: 'Montserrat'; font-weight: 500; }
.tcard .pic { width: 220px; height: 260px; border-radius: 14px; overflow: hidden; }
.tcard h3 { font-size: 30px; font-weight: 800; }
.tcard h3 small { font-size: 18px; font-weight: 500; margin-left: 4px; }
.tcard .part { font-family: 'Montserrat'; color: #999; font-weight: 700; margin-top: 2px; font-size: 14px; letter-spacing: 1px; }
.tcard ul { margin-top: 16px; }
.tcard li { font-size: 14px; color: #444; line-height: 1.95; }
.tcard li::before { content: '· '; }

.course { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.course .c { border-radius: 20px; overflow: hidden; border: 1px solid #e8e8ee; }
.course .c .ph { height: 180px; }
.course .c .tx { padding: 26px; }
.course .c b { color: #b07a0c; font-size: 13px; font-family: 'Montserrat'; letter-spacing: 1px; }
.course .c h4 { font-size: 22px; font-weight: 800; margin-top: 6px; }
.course .c ul { margin-top: 12px; }
.course .c li { font-size: 14px; color: #444; line-height: 1.9; }
.course .c li::before { content: '✓ '; color: #c99512; font-weight: 800; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 30px; }
.flow .s { text-align: center; position: relative; }
.flow .s .n { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; background: var(--night); color: var(--gold); display: grid; place-items: center; font-family: 'Montserrat'; font-weight: 800; font-size: 22px; }
.flow .s:not(:last-child)::after { content: ''; position: absolute; top: 42px; left: 62%; right: -38%; border-top: 2px dashed #c9cbd8; }
.flow .s h5 { margin-top: 14px; font-size: 17px; font-weight: 800; }
.flow .s p { margin-top: 6px; font-size: 13px; color: #666; line-height: 1.5; }
.h3x { font-size: 22px; font-weight: 800; margin-top: 60px; }
.h3x small { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 10px; }
.yeartabs { display: flex; gap: 0; margin-top: 26px; border: 1px solid #dde; border-radius: 10px; overflow: hidden; width: fit-content; }
.yeartabs a { padding: 12px 26px; font-weight: 700; font-size: 14px; border-left: 1px solid #dde; }
.yeartabs a:first-child { border-left: 0; }
.yeartabs a.on { background: var(--night); color: var(--gold); }
.passboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.pass { border-radius: 16px; padding: 22px; background: #f6f7fb; }
.pass .sch { font-size: 18px; font-weight: 800; }
.pass .dept { font-size: 13px; color: var(--muted); margin-top: 4px; }
.pass .names { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.pass .cnt { float: right; background: var(--night); color: var(--gold); font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
table.tbl { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.tbl th { border-top: 2px solid var(--ink); border-bottom: 1px solid #ccd; padding: 14px 10px; }
.tbl td { border-bottom: 1px solid #eef; padding: 14px 10px; text-align: center; }
.tbl .tag { background: var(--gold); color: var(--gold-ink); border-radius: 4px; font-size: 12px; font-weight: 800; padding: 3px 8px; }

/* 이미지 강조형 — 추가 구성 */
.quick a.q, a.i, a.c, a.nc { color: inherit; display: block; }
a.banner-card, a.ccard { color: #fff; display: block; }
.quick a.q { display: flex; }
.banner-card .more, .ccard .more { display: inline-block; margin-top: 60px; font-size: 14px; border-bottom: 1px solid #fff; }
.ccard .more { margin-top: 26px; font-size: 13px; }
.util a, .sns a, .pills a { color: inherit; }
footer.ft .sns a { width: 34px; height: 34px; border-radius: 50%; background: #2a2d36; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
footer.ft .pills a { background: #2a2d36; border-radius: 999px; padding: 6px 14px; font-size: 12px; }
.icons a.i { color: var(--ink); }
.gallery-sec { margin-top: 110px; }
.gallery-sec .head { display: flex; align-items: baseline; gap: 20px; }
.gallery-sec .head h2 { font-weight: 900; font-size: 46px; }
.gallery-sec .head p { color: var(--muted); }
.gallery-sec .head a { margin-left: auto; font-size: 13px; font-weight: 700; }
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 18px; margin-top: 26px; }
.gallery .g { position: relative; border-radius: 18px; overflow: hidden; display: block; }
.gallery .g1 { grid-row: span 2; }
.gallery .g span { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.gallery .g img { transition: transform .4s; }
.gallery .g:hover img { transform: scale(1.04); }
.gallery .g5 { grid-column: 2 / span 2; }
.gallery .g4 { display: none; }
a.photo-band { position: relative; display: block; margin-top: 110px; height: 520px; color: #fff; overflow: hidden; }
.photo-band .bg { position: absolute; inset: 0; filter: brightness(.38); }
.photo-band .in { position: relative; display: grid; grid-template-columns: 1fr 520px; gap: 50px; height: 100%; align-items: center; }
.photo-band small { font-size: 18px; letter-spacing: 3px; color: var(--gold); }
.photo-band h2 { margin-top: 14px; font-size: 44px; line-height: 1.25; font-weight: 800; }
.photo-band h2 span { color: var(--gold); }
.photo-band p { margin-top: 18px; line-height: 1.7; opacity: .9; max-width: 460px; }
.btn-gold { display: inline-block; margin-top: 28px; background: var(--gold); color: var(--gold-ink); font-weight: 800; padding: 14px 34px; border-radius: 999px; }
.photo-band .thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; gap: 14px; }
.photo-band .thumbs div { border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,.25); }
.photo-band .thumbs div:first-child { grid-row: span 2; }
.lnb a { color: inherit; }
.crumb a { color: inherit; }
.tcard.noimg { grid-template-columns: 200px 1fr; }
.wide-pic { position: relative; margin-top: 26px; height: 320px; border-radius: 20px; overflow: hidden; }
.wide-pic .cap { position: absolute; left: 30px; bottom: 26px; color: #fff; font-size: 28px; font-weight: 800; text-shadow: 0 3px 14px rgba(0,0,0,.5); }
.intro-text { margin-top: 26px; line-height: 1.9; color: #333; }
.mosaic3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.mosaic3 div { height: 220px; border-radius: 16px; overflow: hidden; }
.map-box { margin-top: 26px; height: 320px; border-radius: 20px; background: repeating-linear-gradient(0deg, #e6e8ee 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, #e6e8ee 0 1px, transparent 1px 40px), #f4f5f8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.map-box .pin { color: #c99512; font-size: 34px; line-height: 1; }
.map-box b { font-size: 20px; }
.map-box span { color: var(--muted); }
.tbl th { text-align: left; width: 160px; }
.newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.nc { border-radius: 18px; overflow: hidden; border: 1px solid #e8e8ee; }
.nc .ph { height: 190px; }
.nc .tx { padding: 18px 20px; }
.nc small { color: var(--muted); }
.nc h4 { margin-top: 6px; font-size: 17px; font-weight: 800; }
.nc p { margin-top: 6px; font-size: 14px; color: #555; }
.fac { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 14px; margin-top: 26px; }
.fac .f { position: relative; border-radius: 16px; overflow: hidden; }
.fac .f.big { grid-row: span 2; }
.fac .f span { position: absolute; left: 14px; bottom: 12px; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.6); }