.landing{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:clamp(28px,6vw,80px);

}

.brand{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(44px,10vw,118px);

    font-weight:500;

    line-height:.95;

    margin-bottom:50px;

}

.hero{

    font-size:clamp(22px,5vw,34px);

    line-height:1.45;

    max-width:900px;

    margin-bottom:55px;

}

.description{

    font-size:clamp(16px,3.5vw,22px);

    line-height:1.8;

    max-width:700px;

    color:#666;

    margin-bottom:90px;

}
.landing-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    width:min(100%,380px);
    height:68px;

    margin-top : 0px;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FAF9F7 100%
    );

    border:1px solid #D8D2C7;
    border-radius:999px;

    font-family:"Inter",sans-serif;
    font-size:20px;
    font-weight:500;
    letter-spacing:.04em;

    color:#242424;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(0,0,0,.06),
        0 2px 6px rgba(0,0,0,.03);

    transition:
        transform .35s cubic-bezier(.19,1,.22,1),
        box-shadow .35s cubic-bezier(.19,1,.22,1),
        border-color .35s,
        background .35s;

}

.landing-button span{

    font-size:24px;

    transition:transform .35s cubic-bezier(.19,1,.22,1);

}

.landing-button:hover{

    transform:translateY(-4px);

    background:#FFFFFF;

    border-color:#B89B5E;

    box-shadow:
        0 26px 60px rgba(0,0,0,.10),
        0 10px 20px rgba(0,0,0,.05);

}

.landing-button:hover span{

    transform:translateX(8px);

}

.landing-button:active{

    transform:translateY(-1px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);

}
/* ==========================================================
   PRELUDE
   Experience Modules
========================================================== */

.prelude{

    max-width:1080px;

    margin:0 auto;

    padding:70px 28px 120px;

}


/* ----------------------------------
   Greeting
----------------------------------- */

.welcome{

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:15px;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:#9A9A9A;

    margin-bottom:18px;

}


/* ----------------------------------
   Logo
----------------------------------- */

.prelude h2{

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:30px;

    line-height:1;

    font-weight:300;

    letter-spacing:.22em;

    color:#2A2A2A;

    margin-bottom:18px;

}


/* ----------------------------------
   Subtitle
----------------------------------- */

.intro{

    max-width:720px;

    margin:0 auto 70px;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:22px;

    line-height:1.8;

    color:#767676;

}


/* ----------------------------------
   Stack
----------------------------------- */

.stack{

    display:flex;

    flex-direction:column;

    gap:28px;

}


/* ----------------------------------
   Card
----------------------------------- */

.card{

    min-height:100px;

    height: auto;

    background:#FFFFFF;

    border:1px solid #ECE8E2;

    border-radius:34px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:24px;

    font-family:"Inter",sans-serif;

    font-size:clamp(18px,4vw,26px);

    font-weight:400;

    color:#2C2C2C;

    cursor:pointer;

    transition:

        transform .35s cubic-bezier(.19,1,.22,1),

        border-color .35s,

        box-shadow .35s;

}


/* Hover */

.card:hover{

    transform:translateY(-4px);

    border-color:#CDB27B;

    box-shadow:

        0 22px 50px rgba(0,0,0,.06),

        0 6px 16px rgba(0,0,0,.03);

}


/* Locked 느낌 */

.card:nth-child(n+2){

    color:#B6B6B6;

    background:#FDFDFC;

}


/* Ready 느낌 */

.card:first-child{

    color:#262626;

}


/* 번호 */

.card:nth-child(1)::before{

    content:"01";

}

.card:nth-child(2)::before{

    content:"02";

}

.card:nth-child(3)::before{

    content:"03";

}

.card:nth-child(4)::before{

    content:"04";

}

.card:nth-child(5)::before{

    content:"05";

}


.card::before{

    width:42px;

    display:inline-block;

    margin-right:16px;

    font-family:"Inter",sans-serif;

    font-size:clamp(20px,4vw,28px);

    font-weight:700;

}


/* READY / LOCKED */

.card::after{

    margin-left:auto;

    font-family:"Inter",sans-serif;

    font-size:clamp(11px,2.8vw,18px);

    letter-spacing:.35em;

}


.card:first-child::after{

    content:"READY";

    color:#262626;

}


.card:nth-child(n+2)::after{

    content:"LOCKED";

    color:#BDBDBD;

}


/* ----------------------------------
   Continue Button
----------------------------------- */

#continueButton{

    display:block;

    width:min(100%,360px);

    height:84px;

    margin:80px auto 0;

    border:none;

    border-radius:999px;

    background:#232323;

    color:#FFFFFF;

    font-family:"Inter",sans-serif;

    font-size:22px;

    font-weight:500;

    cursor:pointer;

    transition:

        transform .35s cubic-bezier(.19,1,.22,1),

        background .35s,

        box-shadow .35s;

}


#continueButton:hover{

    transform:translateY(-3px);

    background:#111111;

    box-shadow:

        0 18px 42px rgba(0,0,0,.18);

}


#continueButton:active{

    transform:translateY(-1px);

}








/* ======================================
   PRAELUDIUM
   Discovery Screen
====================================== */

.discovery{

    width:min(1200px,92vw);

    margin:80px auto;

    padding:20px;

}


.discovery-header{

    text-align:center;

    margin-bottom:60px;

}


.step{

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8A8A8A;

    margin-bottom:14px;

}


.category{

    font-family:"Cormorant Garamond", serif;

    font-size:42px;

    font-weight:600;

    color:#1E1E1E;

    margin-bottom:12px;

}


.greeting{

    font-family:"Cormorant Garamond", serif;

    font-size:48px;

    font-weight:600;

    line-height:1.15;

    margin-bottom:18px;

}


.reflection{

    max-width:680px;

    margin:0 auto 20px;

    color:#666;

    line-height:1.7;

    font-size:17px;

}


.question{

    font-size:26px;

    font-weight:500;

    line-height:1.4;

}



/* ======================================
   Option Grid
====================================== */

.option-grid{

    display:grid;

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

    gap:32px;

}



/* ======================================
   Option Card
====================================== */

.option-card{

    background:white;

    border:1px solid #ECECEC;

    border-radius:28px;

    overflow:hidden;

    cursor:pointer;

    transition:.28s ease;

    box-shadow:0 12px 40px rgba(0,0,0,.04);

}


.option-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 70px rgba(0,0,0,.10);

}


.option-card.selected{

    border:2px solid #1E1E1E;

    transform:translateY(-8px);

    box-shadow:0 32px 80px rgba(0,0,0,.12);

}



/* ======================================
   Image
====================================== */

.option-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

}



/* ======================================
   Content
====================================== */

.option-content{

    padding:22px;

}


.option-content h3{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(24px,5vw,34px);

    margin-bottom:16px;

}


.option-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:22px;

    font-size:clamp(15px,3vw,17px);

}



/* ======================================
   Mood Tags
====================================== */

.mood-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.tag{

    padding:8px 14px;

    border-radius:999px;

    background:#F6F6F6;

    color:#666;

    font-size:13px;

    letter-spacing:.5px;

}



/* ======================================
   Continue Button
====================================== */

.continue-btn{

    display:block;

    margin:60px auto 0;

    padding:18px 44px;

    border:none;

    border-radius:999px;

    background:#111;

    color:white;

    font-size:16px;

    font-weight:500;

    cursor:pointer;

    transition:.25s;

}


.continue-btn:hover{

    transform:translateY(-3px);

}


.continue-btn:disabled{

    opacity:.35;

    cursor:not-allowed;

    transform:none;

}



/* ==========================================
   PRAELUDIUM
   Experience Analysis
========================================== */

.analysis{

    min-height:100vh;

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

    padding:clamp(30px,6vw,80px);

    background:#FAF8F5;

}

.analysis-wrapper{

    width:100%;
    max-width:760px;

    text-align:center;

}

.analysis-label{

    font-family:"Inter",sans-serif;
    font-size:13px;
    letter-spacing:.35em;
    text-transform:uppercase;

    color:#B89B5E;

    margin-bottom:26px;

}

.analysis-title{

    font-family:"Cormorant Garamond",serif;
    font-size:68px;
    font-weight:500;
    line-height:1.05;

    color:#111;

    margin-bottom:42px;

}

.analysis-description{

    max-width:620px;

    margin:0 auto 70px;

    font-family:"Inter",sans-serif;
    font-size:22px;
    line-height:1.9;

    color:#595959;

}

.analysis-list{

    width:100%;
    max-width:520px;

    margin:0 auto 70px;

}

.analysis-item{

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

    padding:18px 0;

    border-bottom:1px solid #ECE7DF;

    font-family:"Inter",sans-serif;
    font-size:18px;
    font-weight:400;

    color:#333;

    transition:.35s;

}

.analysis-item:last-child{

    border-bottom:none;

}

.check{

    width:34px;
    height:34px;

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

    border:1px solid #D7CFBF;
    border-radius:50%;

    color:#B89B5E;

    font-size:18px;
    font-weight:600;

    transition:.35s;

}

.progress-wrapper{

    margin-top:70px;

}

.progress-bar{

    width:100%;
    height:6px;

    background:#ECE7DF;

    border-radius:999px;

    overflow:hidden;

}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #B89B5E,
        #E2C98E
    );

    transition:width .7s ease;

}

.progress-text{

    margin-top:22px;

    font-family:"Inter",sans-serif;

    font-size:15px;

    letter-spacing:.08em;

    color:#8A8A8A;

}

.analysis button{

    margin-top:70px;

}

/* ---------- Fade ---------- */

.analysis{

    animation:analysisFade .9s ease;

}

@keyframes analysisFade{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ---------- Check Animation ---------- */

.check{

    transform:scale(.9);

}

.analysis-item.active .check{

    background:#B89B5E;
    color:#fff;

    border-color:#B89B5E;

    transform:scale(1.08);

}

/* ---------- Responsive ---------- */

@media (max-width:768px){

    .analysis{

        padding:50px 30px;

    }

    .analysis-title{

        font-size:48px;

    }

    .analysis-description{

        font-size:18px;

        line-height:1.8;

    }

    .analysis-item{

        font-size:16px;

    }

}




/* ======================================
   Celebration Signature
====================================== */

.celebration{

    min-height:100vh;

    background:#f8f6f2;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:clamp(32px,6vw,80px) 20px;

}

.celebration-wrapper{

    width:100%;

    max-width:960px;

    margin:0 auto;

}

.celebration-brand{

    text-align:center;

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#999;

    margin-bottom:24px;

}

.celebration-heading{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(34px,7vw,48px);

    font-weight:500;

    text-align:center;

    color:#1f1f1f;

    margin-bottom:12px;

}

.celebration-title{

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(26px,6vw,34px);

    font-weight:600;

    text-align:center;

    color:#b08d57;

    margin-bottom:32px;

}

.celebration-opening{

    text-align:center;

    font-size:clamp(15px,3.8vw,17px);

    line-height:1.9;

    color:#555;

    max-width:560px;

    margin:0 auto 60px;

}



/* --------------------------------------
Section
-------------------------------------- */

.celebration-section{

    border-top:1px solid #ded7cf;

    padding:34px 0;

}

.celebration-section h3{

    font-family:"Cormorant Garamond", serif;

    font-size:28px;

    font-weight:500;

    color:#222;

    margin-bottom:28px;

}



/* --------------------------------------
Preference
-------------------------------------- */

.preference-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.preference-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

}

.preference-name{

    font-size:16px;

    color:#444;

}

.preference-score{

    font-size:18px;

    letter-spacing:6px;

    color:#b08d57;

}

.dot{

    color:#d4d4d4;

    font-size:18px;

    margin-left:3px;

}

.dot.active{

    color:#b08d57;

}


/* --------------------------------------
Atmosphere
-------------------------------------- */

.atmosphere-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.atmosphere-tag{

    border:1px solid #d4cabd;

    border-radius:999px;

    padding:10px 18px;

    font-size:14px;

    color:#555;

}



/* --------------------------------------
Reflection
-------------------------------------- */

.reflection-text{

    max-width:760px;

    margin:0 auto;

    text-align:center;

    font-size:17px;

    line-height:2;

    color:#555;

}

/* --------------------------------------
Passport Caption
-------------------------------------- */

.passport-area{

    margin-top:64px;

    text-align:center;

}

.passport-caption{

    margin:0 auto 28px;

    max-width:520px;

    color:#8B8B8B;

    font-size:15px;

    line-height:1.8;

    letter-spacing:.03em;

}


.passport-caption{

    margin:56px auto 28px;

    text-align:center;

    font-family:"Inter",sans-serif;

    font-size:15px;

    font-weight:400;

    letter-spacing:.03em;

    color:#8B8B8B;

    max-width:520px;

}

/* ======================================
   Celebration Buttons
====================================== */

.celebration-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    width:100%;

    margin:70px auto 0;

    flex-wrap:wrap;

}


/* Gold Button */

.passport-button{

    width:min(100%,300px);

    height:60px;

    border:none;

    border-radius:999px;

    background:#B58C4E;

    color:white;

    font-size:16px;

    font-weight:500;

    letter-spacing:.08em;

    cursor:pointer;

    transition:.3s;

}

.passport-button:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(181,140,78,.25);

}


/* Outline Button */

.restart-button{

    width:min(100%,300px);

    height:60px;

    border:1px solid #B58C4E;

    border-radius:999px;

    background:transparent;

    color:#B58C4E;

    font-size:16px;

    font-weight:500;

    letter-spacing:.08em;

    cursor:pointer;

    transition:.3s;

}

.restart-button:hover{

    background:#B58C4E;

    color:white;

}

/* --------------------------------------
Restart Button
-------------------------------------- */



/* ======================================
Passport
====================================== */

.passport{

    min-height:100vh;

    background:#FAF8F4;

    padding:clamp(32px,6vw,80px) 20px;

}


.passport-wrapper{

    max-width:720px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.passport-brand{

    text-align:center;

    letter-spacing:.35em;

    color:#B58C4E;

    font-size:13px;

    margin-bottom:12px;

}


.passport-label{

    text-align:center;

    color:#888;

    letter-spacing:.18em;

    font-size:12px;

    margin-bottom:28px;

}


.passport-title{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(34px,8vw,56px);

    text-align:center;

    margin-bottom:18px;

}


.passport-opening{

    max-width:560px;

    margin:0 auto 60px;

    text-align:center;

    line-height:1.9;

    color:#555;

    font-size:clamp(15px,3.6vw,17px);

}


.passport-card{

    border:1px solid #E5D9C6;

    border-radius:22px;

    padding:34px;

    background:white;

    box-shadow:0 15px 40px rgba(0,0,0,.04);

}


.passport-row{

    display:flex;

    justify-content:space-between;

    padding:18px 0;

    border-bottom:1px solid #EFE7DA;

}


.passport-row:last-child{

    border-bottom:none;

}


.passport-section{

    margin-top:56px;

}


.passport-section h3{

    font-family:"Cormorant Garamond",serif;

    font-size:32px;

    margin-bottom:24px;

}


.passport-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


.passport-tag{

    border:1px solid #D9C5A3;

    border-radius:999px;

    padding:10px 18px;

    color:#7A5D2D;

}


.passport-qr{

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

    width:min(260px,80vw);

    height:auto;

    margin:36px auto;

}

.passport-qr canvas{

    display:block;

    margin:0 auto;

    max-width:260px;

    width:80vw;

    height:auto;

}

.qr-placeholder{

    width:220px;

    height:220px;

    border:2px dashed #D5C6AE;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:#B58C4E;

    letter-spacing:.2em;

}


.passport-note{

    max-width:520px;

    margin:48px auto;

    text-align:center;

    color:#888;

    line-height:1.8;

}


.passport-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    width:100%;

    margin-top:32px;

}

/* ======================================
   Responsive
====================================== */

@media (max-width:900px){

    .landing{
        min-height:100vh;
        padding:40px 24px;
    }

    .option-grid{
        grid-template-columns:1fr;
        margin-top:36px;
    }

    .greeting{
        font-size:30px;
        line-height:1.15;
        letter-spacing:.08em;
        margin-bottom:8px;
    }

    .category{
        font-size:34px;
        line-height:.95;
        letter-spacing:.08em;
        margin-bottom:20px;
    }

    .question{
        font-size:18px;
        line-height:1.6;
        max-width:320px;
        margin:0 auto 36px;
    }

    .option-card img{
        height:220px;
    }

    .card{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .card::after{
        margin-left:0;
    }

    .celebration-actions{
        flex-direction:column;
    }

    .passport-actions{
        flex-direction:column;
    }

    .brand{
        font-size:54px;
        line-height:1;
        letter-spacing:.08em;
        margin-bottom:20px;
    }

    .hero{
        font-size:18px;
        line-height:1.5;
        margin-bottom:24px;
    }

    .description{
        font-size:17px;
        line-height:1.8;
        margin-bottom:32px;
        padding:0 16px;
    }

    .landing-button{
        width:100%;
        max-width:320px;
        height:56px;
        font-size:18px;
    }
    .prelude{
    min-height:auto;
    padding:32px 20px;
}

.prelude h2{
    font-size:40px;
    line-height:1.05;
    letter-spacing:.04em;
    margin:28px 0 24px;
    word-break:break-word;
}

.welcome{
    font-size:18px;
    letter-spacing:.45em;
    margin-bottom:24px;
}

.intro{
    font-size:18px;
    line-height:1.8;
    margin-bottom:40px;
    padding:0 12px;
}

.stack{
    gap:16px;
}

.card{
    padding:22px;
}

.passport{

    padding:48px 20px;

}

.passport-title{

    font-size:46px;

}

.passport-opening{

    margin-bottom:42px;

}

.passport-note{

    max-width:320px;

    margin:32px auto;

    font-size:16px;

}
.passport{

    padding:48px 20px;

}

.passport-wrapper{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.passport-section{

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

}

.passport-section h3{

    text-align:center;
    font-size:28px;

}

.passport-title{

    font-size:46px;

}

.passport-opening{

    margin-bottom:42px;

}

.passport-note{

    max-width:320px;

    margin:32px auto;

    font-size:16px;

    text-align:center;

}

.passport-qr{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:32px auto;

}

.passport canvas{

    width:220px !important;

    height:220px !important;

    display:block;

}

.passport-actions{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}
.passport canvas{

    width:260px;

    max-width:80vw;

}

.passport-button,
.restart-button{

    width:95%;

    max-width: none;

}
}