/* =============================================
   TEAM MUSICSCAPE — Design System
   Fonts: Space Grotesk (EN) + Pretendard (KO)
   ============================================= */
:root {
    --black:   #080808;
    --dark:    #0f0f0f;
    --surface: #161616;
    --border:  rgba(255,255,255,0.07);
    --text:    #eeeae4;
    --muted:   rgba(238,234,228,0.42);
    --gold:    #b89a6a;
    --gold-t:  rgba(184,154,106,0.15);
    --ease:    cubic-bezier(0.16,1,0.3,1);
    --font-en: 'Space Grotesk', sans-serif;
    --font-ko: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    background: var(--black);
    color: var(--text);
    font-family: var(--font-ko);
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
img, video { display:block; max-width:100%; }

/* =============================================
   NAV
   ============================================= */
.nav {
    position: fixed;
    top:0; left:0; right:0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.8rem 2.5rem;
    z-index: 200;
    transition: background 0.5s, padding 0.4s;
}
.nav.bg {
    background: rgba(8,8,8,0.88);
    backdrop-filter: blur(14px);
    padding: 1.1rem 2.5rem;
    border-bottom: 1px solid var(--border);
}
.nav-brand {
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text);
}
/* 오른쪽: 언어버튼 + 햄버거 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
/* 언어 버튼 */
.lang-btns {
    display: flex;
    gap: 4px;
}
.lang-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-en);
    font-size: 0.62rem;
    letter-spacing: 2px;
    padding: 3px 7px;
    cursor: pointer;
    transition: all 0.3s;
}
.lang-btn:hover, .lang-btn.active {
    border-color: var(--gold);
    color: var(--gold);
}
.nav-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px;
}
.nav-hamburger span {
    display: block;
    width: 26px;
    height: 1px;
    background: var(--text);
    transition: transform 0.4s var(--ease), opacity 0.3s;
}

/* 오른쪽 슬라이드 메뉴 */
.side-menu {
    position: fixed;
    top: 0; right: 0;
    width: 220px;
    height: 100%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    z-index: 199;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 5rem 2rem 2rem;
}
.side-menu.open { transform: translateX(0); }
.side-close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background: none; border: none;
    color: var(--muted); font-size: 1rem;
    cursor: pointer; transition: color 0.3s;
}
.side-close:hover { color: var(--text); }
.side-links { list-style: none; }
.side-links li { border-bottom: 1px solid var(--border); }
.sl-link {
    display: block;
    font-family: var(--font-en);
    font-size: 0.78rem;          /* 글자 크기: 이전의 1/5 수준 */
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.9rem 0;
    transition: color 0.3s, padding-left 0.3s;
}
.sl-link:hover { color: var(--gold); padding-left: 6px; }

/* 딕 배경 */
.side-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 198;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s;
}
.side-backdrop.open { opacity: 1; pointer-events: all; }

/* =============================================
   HERO SLIDESHOW
   ============================================= */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--black);
}
.slides { position:absolute; inset:0; }
.slide {
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition: opacity 1.4s var(--ease);
    /* 사진 없을 때 보이는 그라디언트 폴백 */
    background-color: var(--dark);
}
.slide:nth-child(1) { background-image: linear-gradient(135deg, #0d0d14 0%, #1a1520 100%); }
.slide:nth-child(2) { background-image: linear-gradient(135deg, #0a1014 0%, #111820 100%); }
.slide:nth-child(3) { background-image: linear-gradient(135deg, #0d1010 0%, #141a14 100%); }
.slide:nth-child(4) { background-image: linear-gradient(135deg, #100a0a 0%, #201015 100%); }
.slide:nth-child(5) { background-image: linear-gradient(135deg, #100d05 0%, #1a1508 100%); }
.slide.active { opacity:1; }
.hero-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to bottom,
        rgba(8,8,8,0.25) 0%,
        rgba(8,8,8,0.05) 40%,
        rgba(8,8,8,0.55) 100%);
    z-index:1;
}

/* 화살표 */
.hero-arrow {
    position:absolute; top:50%; z-index:2;
    transform: translateY(-50%);
    background:none; border:1px solid rgba(255,255,255,0.25);
    color:var(--text); width:50px; height:50px;
    font-size:1.1rem; cursor:pointer;
    transition: border-color 0.3s, background 0.3s;
    display:flex; align-items:center; justify-content:center;
}
.hero-arrow:hover { border-color:var(--gold); background:var(--gold-t); }
.hero-arrow.left { left:2rem; }
.hero-arrow.right { right:2rem; }

/* 점(dot) 네비게이션 */
.hero-dots {
    position:absolute; bottom:2rem; left:50%;
    transform:translateX(-50%);
    z-index:2; display:flex; gap:10px;
}
.dot {
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,0.3);
    border:none; cursor:pointer;
    transition: background 0.3s, transform 0.3s;
    padding:0;
}
.dot.active { background:var(--gold); transform:scale(1.3); }

/* =============================================
   공통 섹션
   ============================================= */
.section { padding: 9rem 2.5rem; }
.wrap { max-width:1200px; margin:0 auto; }
.section-eyebrow {
    font-family: var(--font-en);
    font-size:0.72rem; font-weight:400;
    letter-spacing:5px; text-transform:uppercase;
    color:var(--gold); margin-bottom:1.2rem;
    display:block;
}
.section-title {
    font-family: var(--font-en);
    font-size:clamp(2.2rem,5vw,4rem);
    font-weight:300; letter-spacing:1px;
    line-height:1.15; margin-bottom:4rem;
}

/* =============================================
   PHILOSOPHY
   ============================================= */
.philosophy { background:var(--dark); }
.philosophy-quote {
    font-family: var(--font-ko);
    font-size:clamp(1.4rem,3vw,2.2rem);
    font-weight:300; line-height:1.5;
    color:var(--text); border:none;
    margin-bottom:3rem; padding:0;
    letter-spacing:0.5px;
}
.philosophy-body {
    max-width: 680px;
    display:flex; flex-direction:column; gap:1.8rem;
}
.philosophy-body p { color:var(--muted); font-size:1rem; line-height:1.9; }

/* =============================================
   MANIFESTO — 5 hover cards
   ============================================= */
.manifesto { background:var(--black); }
.manifesto-grid {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:2px;
    min-height:520px;
}
.m-card {
    position:relative; overflow:hidden;
    cursor:pointer;
    background-size:cover;
    background-position:center;
    background-color:var(--surface);
}

/* Front (기본): 제목만 */
.m-card-inner {
    position:absolute; inset:0;
    display:grid;
}
.m-card-front, .m-card-back {
    grid-area: 1/1;
    display:flex; flex-direction:column;
    justify-content:flex-end;
    padding:2rem 1.5rem;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
/* 앞면 배경 그라디언트 */
.m-card-front::before,
.m-card-back::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
    transition: opacity 0.5s;
}
.m-card-back::before { background: rgba(0,0,0,0.82); }

.m-card-back {
    opacity:0;
    transform:translateY(10px);
    justify-content:flex-start;
    padding-top:3rem;
}
.m-card:hover .m-card-front { opacity:0; transform:translateY(-6px); }
.m-card:hover .m-card-back  { opacity:1; transform:translateY(0); }

.m-num {
    font-family:var(--font-en); font-size:0.68rem;
    letter-spacing:4px; color:var(--gold);
    margin-bottom:0.6rem; position:relative; z-index:1;
}
.m-title {
    font-family:var(--font-en); font-size:1.05rem;
    font-weight:400; letter-spacing:0.5px;
    line-height:1.35; position:relative; z-index:1;
}
.m-card-back p {
    font-size:0.82rem; color:rgba(238,234,228,0.75);
    line-height:1.8; margin-top:1rem;
    position:relative; z-index:1;
}

@media (max-width:900px) {
    .manifesto-grid { grid-template-columns:1fr 1fr; min-height:auto; }
    .m-card { min-height:280px; }
}
@media (max-width:520px) {
    .manifesto-grid { grid-template-columns:1fr; }
}

/* =============================================
   PROJECTS
   ============================================= */
.projects { background:var(--dark); }
.projects-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:2px;
}
.project-card {
    display:block; position:relative; overflow:hidden;
    background:var(--surface);
    transition: color 0.3s;
}
.project-img {
    overflow:hidden; aspect-ratio:3/4;
    position:relative;
}
.project-img-inner {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    background-color:#1a1a1a; /* 사진 없을 때 폴백 */
    transition: transform 0.9s var(--ease);
}
.project-card:hover .project-img-inner { transform:scale(1.05); }
.project-meta {
    padding:1.8rem 1.5rem;
    border-top:1px solid var(--border);
}
.project-year {
    font-family:var(--font-en); font-size:0.7rem;
    letter-spacing:3px; color:var(--gold);
    display:block; margin-bottom:0.5rem;
}
.project-name {
    font-family:var(--font-en); font-size:1.3rem;
    font-weight:300; margin-bottom:0.5rem;
}
.project-desc { font-size:0.88rem; color:var(--muted); margin-bottom:1rem; }
.project-cta {
    font-family:var(--font-en); font-size:0.73rem;
    letter-spacing:2px; text-transform:uppercase;
    color:var(--gold);
    border-bottom:1px solid var(--gold-t);
    padding-bottom:2px;
    transition:border-color 0.3s;
}
.project-card:hover .project-cta { border-color:var(--gold); }

@media (max-width:600px) { .projects-grid { grid-template-columns:1fr; } }

/* =============================================
   MEMBERS
   ============================================= */
.members { background:var(--black); }
.members-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
}
.member { overflow:hidden; }
.member-img {
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center top;
    background-color: #1a1a1a;
    transition: transform 0.9s var(--ease);
}
.member:hover .member-img { transform:scale(1.04); }
.member-name {
    font-family:var(--font-en);
    font-size:1.05rem; font-weight:400;
    letter-spacing:2px; margin-top:1.2rem; margin-bottom:0.3rem;
}
.member-role {
    font-size:0.8rem; letter-spacing:2px;
    text-transform:uppercase; color:var(--gold);
}

@media (max-width:600px) { .members-grid { grid-template-columns:1fr; } }

/* =============================================
   CONTACT
   ============================================= */
.contact { background:var(--dark); }
.contact-desc {
    color:var(--muted); font-size:1rem;
    max-width:520px; margin-bottom:3rem;
    margin-top:-2.5rem;
}
.contact-links {
    display:flex; flex-direction:column; gap:0;
    max-width:520px; border-top:1px solid var(--border);
}
.contact-link {
    display:flex; align-items:center; gap:1.2rem;
    font-family:var(--font-en); font-size:0.95rem;
    font-weight:300; letter-spacing:1px;
    color:var(--muted);
    padding:1.5rem 0;
    border-bottom:1px solid var(--border);
    transition:color 0.3s, padding-left 0.3s;
}
.contact-link:hover { color:var(--gold); padding-left:6px; }
.contact-icon { color:var(--gold); font-size:1rem; flex-shrink:0; }

/* =============================================
   FOOTER
   ============================================= */
.footer {
    padding:1.8rem 2.5rem;
    border-top:1px solid var(--border);
    font-family:var(--font-en);
    font-size:0.72rem; letter-spacing:2px;
    text-transform:uppercase; color:var(--muted);
    text-align:center;
}

/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal {
    opacity:0;
    transform:translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Mobile */
@media (max-width:768px) {
    .section { padding:5rem 1.4rem; }
    .hero-arrow { display:none; }
}

/* ─── Works 모자이크: 12col dense 자동 배치 ───────────────
   타일 합계: 4L(6×4=24) + 5M(4×3=12) + 6S(3×2=6) = 192 = 12×16 ✓ */
.works-label { margin-top: 4rem; }

.works-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    gap: 3px;
    margin-top: 1.5rem;
    background: var(--surface);
}

.work-tile {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: var(--surface);
    display: block;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.work-tile:hover { transform: scale(1.03); z-index: 1; }

.work-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* 크기 클래스 — 합계 192셀 = 12×16 */
.work-tile.large  { grid-column: span 6; grid-row: span 4; }   /* 6×4=24 × 4tiles=96 */
.work-tile.medium { grid-column: span 4; grid-row: span 3; }   /* 4×3=12 × 5tiles=60 */
.work-tile.small  { grid-column: span 3; grid-row: span 2; }   /* 3×2= 6 × 6tiles=36 */

.work-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 55%);
    transition: background 0.4s;
}
.work-tile:hover .work-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 100%);
}

.work-title {
    position: absolute;
    bottom: 0.75rem; left: 0.85rem;
    font-family: var(--font-en);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(238,234,228,0.92);
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* 반응형 */
@media (max-width: 900px) {
    .works-mosaic { grid-template-columns: repeat(6, 1fr); }
    .work-tile.large  { grid-column: span 6; grid-row: span 3; }
    .work-tile.medium { grid-column: span 3; grid-row: span 2; }
    .work-tile.small  { grid-column: span 3; grid-row: span 2; }
}
@media (max-width: 520px) {
    .works-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
    .work-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
}
@media (max-width: 480px) {
    .works-mosaic { grid-template-columns: repeat(2, 1fr); }
    .work-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* ─── Hero 영상 슬라이드 ──────────────────────────── */
.slide-video { background: #000; cursor: pointer; }

/* 썸네일: 영상이 로드될 때까지 보여줌 */
.slide-video-thumb {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* 유튜브 iframe: 풀스크린 배경 */
.hero-video-frame {
    position: absolute;
    top: 50%; left: 50%;
    width: 177.78vh;   /* 16:9 비율 유지 */
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;  /* 클릭 통과 (컨트롤 숨김) */
}

/* 클릭 가능한 슬라이드 커서 */
.slides { cursor: pointer; }

/* "View Work →" 힌트 레이블 */
.hero-click-hint {
    position: absolute;
    bottom: 4rem; right: 2.5rem;
    font-family: var(--font-en);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(238,234,228,0.7);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    border-bottom: 1px solid rgba(238,234,228,0.3);
    padding-bottom: 2px;
}

/* ─── 사운드 토글 버튼 ─────────────────────── */
.hero-sound-btn {
    position: absolute;
    top: 1.6rem; right: 7rem;   /* 햄버거 버튼 왼쪽 */
    z-index: 5;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.1rem;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s, border-color 0.3s;
    backdrop-filter: blur(6px);
}
.hero-sound-btn:hover { background: rgba(0,0,0,0.7); border-color: var(--gold); }

/* ─── View Work 버튼 (hero-click-hint override) ── */
.hero-click-hint {
    position: absolute;
    bottom: 3.5rem; right: 2.5rem;
    z-index: 5;
    background: transparent;
    border: 1px solid rgba(238,234,228,0.5);
    color: rgba(238,234,228,0.85);
    font-family: var(--font-en);
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s, background 0.3s, color 0.3s;
    pointer-events: auto;
}
.hero-click-hint:hover {
    background: rgba(238,234,228,0.12);
    color: #fff;
    border-color: rgba(238,234,228,0.8);
}

/* ─── 사운드 버튼 위치 재조정 (좌측 하단) ─── */
.hero-sound-btn {
    top: auto !important;
    right: auto !important;
    bottom: 3.5rem;
    left: 2.5rem;
    z-index: 10 !important;
}

/* ─── 사진 없는 멤버 플레이스홀더 ─── */
.member-img--no-photo {
    background: linear-gradient(135deg, #1a1a24 0%, #2a2535 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.member-img--no-photo::after {
    content: '♪';
    font-size: 2rem;
    color: rgba(196,168,100,0.3);
}