/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Noto Sans KR",sans-serif;

    background:#0A0A0A;

    color:#F5F5F5;

    line-height:1.8;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

section{

    padding:80px 8%;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#B89652;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#D5B46F;

}

/* ==========================================
NAVIGATION
========================================== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:rgba(10,10,10,.78);

    backdrop-filter:blur(16px);

    transition:.35s;

}

.navbar{

    max-width:1400px;

    margin:auto;

    padding:22px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-family:"Playfair Display",serif;

    font-size:30px;

    letter-spacing:3px;

    color:#D6B06A;

}

.navbar ul{

    display:flex;

    gap:40px;

    list-style:none;

}

.navbar a{

    position:relative;

    font-size:15px;

    letter-spacing:1px;

    transition:.3s;

}

.navbar a:hover{

    color:#D6B06A;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#D6B06A;

    transition:.35s;

}

.navbar a:hover::after{

    width:100%;

}

/* ==========================================
HERO
========================================== */

.hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:url("../images/hero.jpg") center center/cover no-repeat;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

}

.hero p:first-child{

    color:#D6B06A;

    letter-spacing:6px;

    text-transform:uppercase;

}

.hero h1{

    font-family:"Playfair Display",serif;

    font-size:76px;

    margin:20px 0;

    line-height:1.15;

}

.line{

    width:120px;

    height:3px;

    background:#D6B06A;

    margin:30px auto;

}

.description{

    font-size:22px;

    color:#DDD;

    margin-bottom:45px;

}

.button{

    display:inline-block;

    padding:18px 46px;

    border:2px solid #D6B06A;

    border-radius:40px;

    color:#D6B06A;

    transition:.35s;

}

.button:hover{

    background:#D6B06A;

    color:#111;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(214,176,106,.35);

}

/* ==========================================
SECTION TITLE
========================================== */

.title{

    text-align:center;

    margin-bottom:30px;

}

.title p{

    color:#D6B06A;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:1px;

}

.title h2{

    font-family:"Noto Sans KR",sans-serif;
    color:#F5F5F5;
    font-size:55px;

}



.section-description{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

    color:#BBBBBB;

    font-size:18px;

}

/* ==========================================
ABOUT
========================================== */

.about-container{

    display:grid;

    grid-template-columns:460px 1fr;

    gap:70px;

    align-items:center;

}

.profile img{
    
    border-radius:22px;

    box-shadow:0 25px 70px rgba(0,0,0,.45);

}

.bio h2{

    font-family:"Noto Sans KR",serif;

    font-size:32px;

    margin-bottom:20px;

}

.bio span{

    display:block;

    color:#D6B06A;

    font-size:18px;

    margin-top:8px;

}

.bio p{

    color:#D2D2D2;

    margin-bottom:22px;

}

.info-grid{

    display:grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap:15px;

    margin-top:10px;

    grid-template-areas:

    "card1 card3"

    "card2 card3";

}

.card{

    background:#151515;

    border:1px solid rgba(214,176,106,.18);

    border-radius:18px;

    padding:20px;

    transition:.35s;

}

.card1{
    grid-area:card1;
}


.card2{
    grid-area:card2;
}


.card3{
    grid-area:card3;
}

.card:hover{

    transform:translateY(-10px);

    border-color:#D6B06A;

    box-shadow:0 25px 50px rgba(0,0,0,.45);

}

.card h4{

    color:#D6B06A;
    margin-top:0px;
    margin-bottom:15px;

    font-size:22px;

}

.card p{
    padding-bottom:15px;
    margin-bottom:15px;
    border-bottom:1px solid rgba(214,176,106,.15);
}

/* ==========================================
VIDEOS
========================================== */

.video-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}

.video-card{

    background:#141414;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(214,176,106,.15);

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.video-card:hover{

    transform:translateY(-12px);

    border-color:#D6B06A;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.video-card iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

}

.video-card h3{

    padding:25px 30px 10px;

    color:#D6B06A;

    font-size:24px;

}

.video-card p{

    padding:0 30px 30px;

    color:#CFCFCF;

}

/* ==========================================
PROFILE DOCUMENTS
========================================== */

.document-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.document-card{

    display:block;

    background:#151515;

    padding:45px 35px;

    border-radius:20px;

    border:1px solid rgba(214,176,106,.18);

    transition:.35s;

    text-align:center;

}

.document-card:hover{

    transform:translateY(-10px);

    border-color:#D6B06A;

    background:#1B1B1B;

}

.document-card h3{

    color:#D6B06A;

    margin-bottom:18px;

    font-size:26px;

}

.document-card p{

    color:#C8C8C8;

}

/* ==========================================
PLANNING
========================================== */

.planning-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.planning-card{

    background:#151515;

    border-radius:20px;

    padding:40px;

    border:1px solid rgba(214,176,106,.15);

    transition:.35s;

}

.planning-card:hover{

    transform:translateY(-8px);

    border-color:#D6B06A;

}

.planning-card h3{

    color:#D6B06A;

    margin-bottom:18px;

    font-size:26px;

}

.planning-card p{

    color:#CFCFCF;

}

/* ==========================================
GALLERY
========================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.gallery-grid img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    transition:.45s;

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.gallery-grid img:hover{

    transform:scale(1.05);

    filter:brightness(.82);

}

/* ==========================================
TIMELINE
========================================== */

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:100px;

    top:0;

    bottom:0;

    width:3px;

    background:#D6B06A;

}

.timeline-item{

    display:flex;

    gap:45px;

    margin-bottom:70px;

    position:relative;

}

.year{

    min-width:90px;

    color:#D6B06A;

    font-size:30px;

    font-weight:700;

}

.content{

    flex:1;

    background:#151515;

    padding:30px;

    border-radius:18px;

    border:1px solid rgba(214,176,106,.15);

}

.content h3{

    color:#D6B06A;

    margin-bottom:12px;

}

/* ==========================================
CONTACT
========================================== */

.contact-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.contact-card{

    background:#151515;

    border-radius:20px;

    padding:40px;

    text-align:center;

    border:1px solid rgba(214,176,106,.15);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:#D6B06A;

}

.contact-card h3{

    color:#D6B06A;

    margin-bottom:15px;

}

.contact-card a{

    color:#F5F5F5;

    transition:.3s;

}

.contact-card a:hover{

    color:#D6B06A;

}

/* ==========================================
FOOTER
========================================== */

footer{

    background:#080808;

    padding:90px 8%;

    text-align:center;

    border-top:1px solid rgba(214,176,106,.12);

}

.footer-logo{

    font-family:"Playfair Display",serif;

    font-size:40px;

    color:#D6B06A;

    margin-bottom:20px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin:40px 0;

}

.footer-links a{

    transition:.3s;

}

.footer-links a:hover{

    color:#D6B06A;

}

.copyright{

    color:#888;

    margin-top:25px;

    font-size:14px;

}

/* ==========================================
SMOOTH ANIMATIONS
========================================== */

.card,
.video-card,
.document-card,
.planning-card,
.contact-card,
.gallery-grid img{

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    filter .35s ease;

}

/* ==========================================
SCROLL REVEAL ANIMATION
========================================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:all .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
HERO ANIMATION
========================================== */

.hero-content{

    animation:heroFade 1.8s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
FLOATING HERO LINE
========================================== */

.line{

    animation:lineMove 3s ease-in-out infinite;

}

@keyframes lineMove{

    0%{

        width:90px;

    }

    50%{

        width:150px;

    }

    100%{

        width:90px;

    }

}

/* ==========================================
GALLERY HOVER
========================================== */

.gallery-grid{

    perspective:1200px;

}

.gallery-grid img{

    transition:
    transform .45s,
    filter .45s,
    box-shadow .45s;

}

.gallery-grid img:hover{

    transform:

        scale(1.05)

        rotateY(4deg);

    box-shadow:

        0 30px 70px

        rgba(0,0,0,.55);

}

/* ==========================================
VIDEO HOVER
========================================== */

.video-card iframe{

    transition:.4s;

}

.video-card:hover iframe{

    transform:scale(1.03);

}

/* ==========================================
BUTTON EFFECT
========================================== */

.button{

    position:relative;

    overflow:hidden;

}

.button::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    rgba(255,255,255,.15);

    transform:skewX(-25deg);

    transition:.6s;

}

.button:hover::before{

    left:120%;

}

/* ==========================================
CARD GLOW
========================================== */

.card:hover,

.document-card:hover,

.planning-card:hover,

.contact-card:hover,

.video-card:hover{

    box-shadow:

    0 30px 70px rgba(214,176,106,.18);

}

/* ==========================================
SECTION DIVIDER
========================================== */

section{

    position:relative;

}

section::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:140px;

    height:1px;

    background:

    rgba(214,176,106,.12);

}

/* ==========================================
TIMELINE DOT
========================================== */

.timeline-item::before{

    content:"";

    position:absolute;

    left:92px;

    top:15px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#D6B06A;

    border:4px solid #0A0A0A;

}

/* ==========================================
IMAGE SHADOW
========================================== */

.profile img{

    transition:.4s;

}

.profile img:hover{

    transform:scale(1.03);

}

/* ==========================================
FOOTER
========================================== */

footer{

    position:relative;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:220px;

    height:2px;

    background:#D6B06A;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:700px){

section{
    padding:60px 8%;
}

.about-container{

grid-template-columns:1fr;
grid-template-areas:
"card1"
"card2"
"card3";
text-align:center;
}

.card3{

    grid-area:card3;

}

.info-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:15px;

    grid-template-areas:
    "card1"
    "card2"
    "card3";

}



.profile{

max-width:420px;

margin:auto;

}

.info-grid{

grid-template-columns:1fr 1fr;

}

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

gap:20px;

}

.timeline-item::before{

display:none;

}

}

/* ================= */

@media(max-width:900px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.hero h1{

font-size:58px;

}

.description{

font-size:10px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* ================= */
.mobile-break{
    display:none !important;
}

.mobile-text{
    display:none !important;
}

@media(max-width:700px){

.mobile-break{
    display:block !important;
}

.desktop-text{
    display:none;
}

.mobile-text{
    display:block;
    text-align:center;
}

.hero{

padding:0 20px;

}

.hero h1{

font-size:42px;

}

.title h2{

font-size:34px;

}

.info-grid{

grid-template-columns:1fr;

}


.video-grid{

grid-template-columns:1fr;

}

.document-grid{

grid-template-columns:1fr;

}

.planning-grid{

grid-template-columns:1fr;

}

.contact-container{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.footer-links{

flex-direction:column;

gap:18px;

}

}

/* ================= */

@media(max-width:500px){

.logo{

font-size:24px;

}

.navbar{

padding:18px;

}

.navbar ul{

gap:12px;

}

.navbar a{

font-size:13px;

}

.hero h1{

font-size:36px;

}

.button{

padding:15px 32px;

}

section{

padding:90px 25px;

}

}

/* ==========================================
SELECTION
========================================== */

::selection{

background:#D6B06A;

color:#111;

}

.navbar a.active{

    color:#D6B06A;

}

.navbar a.active::after{

    width:100%;

}


/* ==========================================
프로필
========================================== */

.slider {

    width:100%;
    max-width:1100px;
    margin:auto;

    overflow:hidden;
    position:relative;

}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%; 
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img,
.slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 20px;
}

/* 이전/다음 버튼 */


.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);
z-index: 10;

width:50px;
height:50px;

display: flex;
align-items: center;
justify-content: center;

cursor:pointer;

border:none;
border-radius:50%;

background:rgba(0, 0, 0, 0.065);

}

.prev{

left:20px;

}

.next{

right:20px;

}

.prev svg,
.next svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: white;
    stroke-width: 2;
}

.prev:hover,
.next:hover {
    background: rgba(0,0,0,0.8);
}

@media(max-width:700px){

    .slide{

        height:300px;

    }

    .prev,
    .next{

        width:40px;
        height:40px;

    }

    .prev{

        left:10px;

    }

    .next{

        right:10px;

    }

    .prev svg,
    .next svg{

        width:18px;
        height:18px;

    }

}