body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #606060;
    color: #fff;
    transition: background 0.6s ease;
}

body.scrolled {
    background: #0f0f0f; /* 예: 검정 → 살짝 그레이 */
}

/* 헤더 기본 */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0;    
    background: rgba(96, 96, 96, 0); /* 606060 + 알파 0 */
    transition: 0.4s ease;
    opacity: 0; /* 초기에는 숨겨진 상태 */
    pointer-events: none;
}
header.active {
    background: rgba(96,96,96,1);    /* 606060 + 알파 1 */
    backdrop-filter: blur(10px);
    opacity: 1;
    pointer-events: auto;
}
.header-logo {
    display: flex;
    align-items: center;
    justify-self: start;
    padding-left: 40px;
}
.header-logo-img {
    height: 28px;
    width: auto;
    display: block;
}
.header-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 0;
}
.header-spacer {
    padding-right: 40px;
}
.header-menu {
    justify-self: center;
    display: flex;
    gap: 32px;
}
.header-menu a {
    text-decoration: none;
    color: #ccc;
    font-size: 16px;
    transition: 0.2s;
}
.header-menu a:hover {
    color: #fff;
}

/* HERO */
#hero {
    position: relative;
    height: calc(100svh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 로고 기준 컨테이너 */
#hero-logo {
    position: relative;
    width: 360px;
    aspect-ratio: 1 / 1;
    transform: translate(0, 0);
    transition: transform 0.8s ease;
}
/* hero-logo 안의 모든 이미지 공통 */
#hero-logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
/* 레이어 순서 */
.logo-assemble {
    z-index: 1;
    transition: opacity 0.6s ease;
}
.logo-w {
    z-index: 2;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
/* 초기 상태 */
.w-dark {
    opacity: 1;
}
.w-light {
    opacity: 0;
}
.logo-text {
    font-size: 32px;
    letter-spacing: 3px;
}
#hero-w {
    position: relative;
    width: 360px;
    height: 360px;
    transform: translate(0, 0);
    transition: transform 0.8s ease;
}
#hero-w.w-moved {
    transform: translate(-220px, 220px);
}
#hero-text {
    position: absolute;
    left: 50%;
    bottom: 26.8%;
    transform: translate(5%, 0);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#hero-text.show {
    opacity: 1;
    transition-delay: 0.4s;
}
.hero-text-rest {
    font-size: 32px;       /* ← 지금은 이게 정답 */
    letter-spacing: 0.9px;
    white-space: nowrap;
}

/* PHILOSOPHY */
/*
#philosophy {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.philosophy-text {
    font-size: clamp(20px, 3vw, 36px);
    letter-spacing: 1.5px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    text-align: center;
    color: #fff;
}
.philosophy-text.show {
    opacity: 1;
    transform: translateY(0);
}
*/

/* CONTENT SECTIONS */
.content-section {
    padding: 140px 40px;
    max-width: 900px;
    margin: auto;
}

h2 {
    margin-bottom: 10px;
}

footer {
    padding: 40px;
    text-align: center;
    color: #aaa;
}
footer a {
    color: #aaa;
    text-decoration: none;
    margin: 0 6px;
}
footer a:hover {
    color: #fff;
}