:root{
    --gold:#b88949;
    --gold2:#d2ad73;
    --gold-dark:#8f642f;

    --black:#090d12;
    --dark:#111820;
    --dark2:#1a222b;

    --text:#1f2328;
    --gray:#777;
    --light:#f5f5f4;
    --line:#e5e5e5;

    --container:1400px;

    --transition:.35s cubic-bezier(.22,.61,.36,1);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Noto Sans KR",sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.65;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    /* font:inherit; */
}

button{
    border:0;
    background:none;
    cursor:pointer;
}

img{
    width:100%;
    display:block;
}

ul,
ol{
    list-style:none;
}

.container{
    width:min(calc(100% - 80px), var(--container));
    margin:0 auto;
}


/* =========================================================
   02. COMMON
========================================================= */

.section{
    padding:95px 0;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:35px;
}

.eyebrow{
    display:block;
    color:var(--gold);
    font-size:14px;
    letter-spacing:3px;
    font-weight:600;
    margin-bottom:8px;
}

.section-title{
    font-size:42px;
    font-weight:500;
    letter-spacing:-2px;
    line-height:1.25;
}

.section-desc{
    margin-top:10px;
    font-size:17px;
    color:#777;
}

.more-btn{
    display:inline-flex;
    align-items:center;
    gap:15px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    transition:var(--transition);
}

.more-btn:hover{
    color:var(--gold);
    transform:translateX(4px);
}

.btn{
    min-height:56px;
    padding:0 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:16px;
    font-weight:600;
    transition:var(--transition);
}

.btn-gold{
    color:#fff;
    background:linear-gradient(135deg,var(--gold2),var(--gold-dark));
    box-shadow:0 12px 30px rgba(144,101,47,.25);
}

.btn-gold:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(144,101,47,.35);
}


/* =========================================================
   03. HEADER
========================================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:86px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(15px);
    z-index:1000;
    transition:.3s;
    border-bottom:1px solid rgba(0,0,0,.04);
}

.header.scrolled{
    height:72px;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.header-inner{
    width:min(calc(100% - 80px),1600px);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    min-width:190px;
    font-family:"Playfair Display",serif;
    font-size:28px;
    letter-spacing:7px;
    color:#4a3524;
    line-height:1;
}

.logo small{
    display:block;
    margin-top:7px;
    font-family:"Noto Sans KR",sans-serif;
    font-size:8px;
    letter-spacing:5px;
    text-align:center;
}

.gnb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:42px;
    flex:1;
}

.gnb a{
    position:relative;
    padding:8px 0;
    font-size:16px;
    font-weight:500;
}

.gnb a:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:2px;
    background:var(--gold);
    transition:var(--transition);
}

.gnb a:hover:after{
    width:100%;
    left:0;
}

.header-reserve{
    min-width:135px;
    height:50px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    background:linear-gradient(135deg,#c59a5b,#96692f);
    border-radius:2px;
}

.mobile-toggle{
    display:none;
    width:48px;
    height:48px;
    position:relative;
}

.mobile-toggle span{
    position:absolute;
    left:50%;
    width:25px;
    height:2px;
    background:#222;
    transition:.35s ease;
}

.mobile-toggle span:nth-child(1){
    top:16px;
    transform:translateX(-50%);
}

.mobile-toggle span:nth-child(2){
    top:23px;
    transform:translateX(-50%);
}

.mobile-toggle span:nth-child(3){
    top:30px;
    transform:translateX(-50%);
}

/* 햄버거 → X */

.mobile-toggle.active span:nth-child(1){
    top:23px;
    transform:translateX(-50%) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2){
    opacity:0;
    transform:translateX(-70%);
}

.mobile-toggle.active span:nth-child(3){
    top:23px;
    transform:translateX(-50%) rotate(-45deg);
}


/* =========================================================
   04. MOBILE MENU
========================================================= */

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1100;
    opacity:0;
    visibility:hidden;
    transition:.35s;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:min(88%,400px);
    height:100vh;
    z-index:1200;
    padding:105px 35px 40px;
    background:#fff;
    transition:.45s cubic-bezier(.22,.61,.36,1);
    box-shadow:-20px 0 60px rgba(0,0,0,.15);
}

.mobile-menu.active{
    right:0;
}

.mobile-menu .mobile-logo{
    font-family:"Playfair Display",serif;
    font-size:30px;
    letter-spacing:6px;
    /*margin-bottom:45px;*/
    color:#4a3524;
}

.mobile-menu a{
    display:block;
    padding:18px 0;
    border-bottom:1px solid #eee;
    font-size:19px;
    font-weight:500;
}

.mobile-menu .mobile-reserve{
    width:100%;
    margin-top:30px;
}


/* =========================================================
   05. HERO
========================================================= */

.hero{
    height:min(830px,100vh);
    min-height:700px;
    margin-top:86px;
    position:relative;
    overflow:hidden;
    background:#111;
}

.hero-track{
    width:100%;
    height:100%;
    position:relative;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .9s ease,visibility .9s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
}

.hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.08);
    transition:transform 6s ease;
}

.hero-slide.active .hero-bg{
    transform:scale(1);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(5,7,10,.88) 0%,
            rgba(5,7,10,.68) 34%,
            rgba(5,7,10,.12) 68%,
            rgba(5,7,10,.45) 100%
        );
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(calc(100% - 180px),1280px);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
}

.hero-copy{
    max-width:600px;
    color:#fff;
}

.hero-copy .sub{
    font-size:19px;
    color:#d7ae73;
    margin-bottom:15px;
}

.hero-copy h1{
    font-size:62px;
    line-height:1.22;
    letter-spacing:-3px;
    font-weight:400;
    margin-bottom:25px;
}

.hero-copy h1 strong{
    color:#d6aa68;
    font-weight:500;
}

.hero-copy p{
    font-size:18px;
    line-height:1.9;
    color:#ddd;
    margin-bottom:34px;
}

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    color:#fff;
    z-index:10;
    font-size:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.hero-arrow:hover{
    background:var(--gold);
    border-color:var(--gold);
}

.hero-prev{
    left:55px;
}

.hero-next{
    right:55px;
}


/* HERO 3 PROGRESS */

.hero-progress{
    position:absolute;
    z-index:10;
    top:50%;
    right:10%;
    transform:translateY(-50%);
    width:260px;
}

.hero-progress-item{
    width:100%;
    min-height:86px;
    display:flex;
    align-items:center;
    text-align:left;
    color:#fff;
    opacity:.55;
    transition:.3s;
    position:relative;
}

.hero-progress-item.active{
    opacity:1;
}

.progress-num{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.5);
    background:#14191f;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:16px;
    position:relative;
    z-index:2;
    transition:.3s;
}

.hero-progress-item.active .progress-num{
    background:var(--gold);
    border-color:var(--gold);
}

.progress-info{
    padding-left:20px;
}

.progress-info small{
    display:block;
    color:#c7c7c7;
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:4px;
}

.progress-info strong{
    display:block;
    font-size:17px;
    font-weight:500;
}

.progress-line{
    position:absolute;
    left:26px;
    top:52px;
    height:35px;
    width:1px;
    background:rgba(255,255,255,.35);
}

.hero-progress-item:last-child .progress-line{
    display:none;
}

.hero-dots{
    position:absolute;
    z-index:20;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
}

.hero-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    opacity:.65;
    transition:.3s;
}

.hero-dot.active{
    background:var(--gold);
    opacity:1;
    transform:scale(1.2);
}


/* =========================================================
   06. FEATURE
========================================================= */

.feature-bar{
    background:linear-gradient(90deg,#faf9f7,#f0ede8,#fafafa);
}

.feature-grid{
    min-height:130px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.feature-item{
    display:flex;
    align-items:center;
    gap:17px;
    padding:20px 35px;
    border-right:1px solid #ddd;
}

.feature-item:last-child{
    border-right:none;
}

.feature-icon{
    width:48px;
    font-size:34px;
    color:var(--gold);
    flex-shrink:0;
    text-align:center;
}

.feature-text strong{
    display:block;
    font-size:16px;
    margin-bottom:5px;
}

.feature-text p{
    font-size:13px;
    color:#666;
}


/* =========================================================
   07. SERVICE
========================================================= */

.service-section{
    background:radial-gradient(circle at top,#202933 0%,#10161d 45%,#090d12 100%);
    color:#fff;
}

.service-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.service-tab{
    min-width:115px;
    height:54px;
    padding:0 22px;
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:15px;
    transition:.25s;
}

.service-tab.active,
.service-tab:hover{
    border-color:transparent;
    background:linear-gradient(135deg,#c79b58,#95692f);
}

.slider-wrap{
    position:relative;
    padding:0 55px;
}

.slider-viewport{
    overflow:hidden;
}

.slider-track{
    display:flex;
    gap:20px;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.service-card{
    flex:0 0 calc((100% - 80px) / 5);
    background:#fff;
    color:#222;
    cursor:pointer;
    overflow:hidden;
    transition:var(--transition);
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.service-card-img{
    height:245px;
    overflow:hidden;
}

.service-card img{
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.service-card:hover img{
    transform:scale(1.08);
}

.service-card-info{
    padding:18px 20px 20px;
}

.service-card-info h3{
    font-size:18px;
    margin-bottom:6px;
}

.service-card-info p{
    font-size:14px;
    color:#666;
}

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border-radius:50%;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    transition:.25s;
}

.service-section .slider-arrow{
    background:#111820;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
}

.slider-arrow:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:#fff;
}

.slider-arrow.prev{
    left:0;
}

.slider-arrow.next{
    right:0;
}


/* =========================================================
   08. GALLERY / DESIGNER
========================================================= */

.gallery-designer{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(350px,1fr);
    gap:55px;
    padding:95px 0;
}

.designer-area{
    padding-left:45px;
    border-left:1px solid #ddd;
}

.gallery-tabs{
    border:0px solid blue;
    display:flex;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.gallery-tab{
    min-width:96px;
    height:42px;
    padding:0 15px;
    background:#f0f1f2;
    color:#444;
    font-size:14px;
    transition:.25s;
}

.gallery-tab.active,
.gallery-tab:hover{
    background:linear-gradient(135deg,#c79b58,#95692f);
    color:#fff;
}

.gallery-slider{
    position:relative;
    padding:0 38px;
}

.gallery-track{
    display:flex;
    gap:16px;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.gallery-card{
    flex:0 0 calc((100% - 48px) / 4);
    height:310px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
}

.gallery-card img{
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.gallery-card:after{
    content:"VIEW STYLE";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing:2px;
    font-size:14px;
    opacity:0;
    transition:.3s;
}

.gallery-card:hover img{
    transform:scale(1.08);
}

.gallery-card:hover:after{
    opacity:1;
}

.gallery-slider .slider-arrow{
    background:#fff;
    border:1px solid #ddd;
    color:#333;
    width:38px;
    height:38px;
    font-size:24px;
}

.gallery-slider .slider-arrow:hover{
    background:var(--gold);
    color:#fff;
}


/* DESIGNER */

.designer-card{
    margin-top:20px;
    padding:20px;
    border:1px solid #ddd;
    border-radius:10px;
}

.designer-profile{
    display:flex;
    gap:20px;
    align-items:center;
}

.designer-main-img{
    width:105px;
    height:105px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
}

.designer-main-img img{
    height:100%;
    object-fit:cover;
}

.designer-name{
    font-size:21px;
    margin-bottom:8px;
}

.designer-badge{
    display:inline-block;
    margin-left:5px;
    padding:3px 7px;
    font-size:10px;
    color:#fff;
    background:var(--gold);
    vertical-align:middle;
}

.designer-description{
    font-size:14px;
    color:#666;
}

.designer-actions{
    display:flex;
    justify-content:space-around;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #eee;
}

.designer-actions button{
    font-size:21px;
    color:var(--gold-dark);
}

.designer-list{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:25px;
}

.designer-thumb{
    width:68px;
    text-align:center;
    opacity:.6;
    transition:.25s;
}

.designer-thumb.active,
.designer-thumb:hover{
    opacity:1;
}

.designer-thumb img{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 7px;
    border:2px solid transparent;
}

.designer-thumb.active img{
    border-color:var(--gold);
}

.designer-thumb span{
    font-size:12px;
}


/* =========================================================
   09. REVIEW
========================================================= */

/* =========================
   REVIEW
========================= */

.review-section{
    padding:110px 0;
    background:#f8f7f5;
}


/* 리뷰 탭 */

.review-tabs{
    display:flex;
    align-items:center;
    gap:10px;

    flex-wrap:wrap;
}


.review-tab{
    min-width:90px;
    height:48px;

    padding:0 22px;

    border:1px solid #dedbd5;
    background:#fff;

    color:#333;

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

    cursor:pointer;

    transition:.3s ease;
}


.review-tab:hover{
    border-color:#b88646;
    color:#a87535;
}


.review-tab.active{
    background:#b88646;
    border-color:#b88646;
    color:#fff;
}


/* 리뷰 그리드 */

.review-grid{
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:22px;

    margin-top:45px;
}


/* 리뷰 카드 */

.review-card{
    position:relative;

    min-height:270px;

    padding:34px 28px;

    background:#fff;

    border:1px solid #e6e2dc;

    box-sizing:border-box;

    transition:
        opacity .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.review-card:hover{
    transform:translateY(-6px);

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


/* 숨겨진 리뷰 */

.review-card.review-hidden{
    display:none;
}


/* 카테고리 */

.review-category{
    display:inline-flex;

    align-items:center;

    min-height:28px;

    padding:0 10px;

    margin-bottom:18px;

    background:#f3eee7;

    color:#a87535;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.2px;
}


/* 별점 */

.stars{
    margin-bottom:22px;

    color:#b88646;

    font-size:21px;

    letter-spacing:3px;
}


/* 리뷰 내용 */

.review-card p{
    margin:0 0 25px;

    color:#444;

    font-size:17px;
    line-height:1.8;

    word-break:keep-all;
}


/* 고객명 */

.review-card strong{
    display:block;

    color:#222;

    font-size:15px;
    font-weight:700;
}

/* =========================================================
   10. EVENT
========================================================= */

.event-section{
    padding:75px 0;
    color:#fff;
    background:radial-gradient(circle at center,#1b242d,#090d12 70%);
}

.event-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.event-card{
    min-height:160px;
    position:relative;
    overflow:hidden;
    border-radius:14px;
    padding:30px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    cursor:pointer;
    transition:.35s;
}

.event-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,247,236,.95),rgba(255,247,236,.35));
}

.event-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.event-content{
    position:relative;
    color:#4a3524;
}

.event-content h3{
    font-size:21px;
}

.event-content strong{
    display:block;
    font-family:"Playfair Display",serif;
    font-size:25px;
    margin:4px 0;
}

.event-content p{
    font-size:14px;
}


/* =========================================================
   11. CONTACT
========================================================= */

.contact-grid{
    min-height:140px;
    display:grid;
    grid-template-columns:1.4fr .9fr 1.1fr 1fr 1.5fr;
    align-items:center;
}

.contact-item{
    min-height:75px;
    padding:10px 25px;
    border-right:1px solid #e5e5e5;
}

.contact-item:last-child{
    border-right:none;
}

.contact-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:7px;
    color:#715029;
    font-size:15px;
    font-weight:700;
}

.contact-item p{
    color:#666;
    font-size:13px;
}

.map-box{
    height:100px;
    position:relative;
    background:
        url("https://images.unsplash.com/photo-1524661135-423995f22d0d?auto=format&fit=crop&w=900&q=80")
        center/cover;
}

.map-link{
    position:absolute;
    right:10px;
    bottom:10px;
    padding:9px 18px;
    color:#fff;
    background:#3b2918;
    font-size:14px;
}


/* =========================================================
   12. FOOTER
========================================================= */

.footer{
    background:#090d12;
    color:#9299a1;
    padding:35px 0;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.footer-logo{
    font-family:"Playfair Display",serif;
    color:#eee;
    font-size:25px;
    letter-spacing:6px;
}

.footer-logo small{
    display:block;
    font-family:"Noto Sans KR",sans-serif;
    font-size:8px;
    letter-spacing:4px;
    text-align:center;
    margin-top:5px;
}

.footer-copy{
    font-size:12px;
    line-height:1.9;
}


/* =========================================================
   13. FLOAT BUTTON
========================================================= */

.top-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#111820;
    color:#fff;
    z-index:900;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.3s;
}

.top-btn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* =========================================================
   14. MODAL
========================================================= */

.modal{
    position:fixed;
    inset:0;
    z-index:5000;
    padding:20px;
    background:rgba(0,0,0,.68);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.modal.active{
    opacity:1;
    visibility:visible;
}

.modal-box{
    position:relative;
    width:min(100%,680px);
    max-height:90vh;
    overflow-y:auto;
    padding:48px;
    background:#fff;
    border-radius:12px;
    transform:translateY(30px) scale(.97);
    transition:.35s;
}

.modal.active .modal-box{
    transform:translateY(0) scale(1);
}

.modal-close{
    position:absolute;
    top:15px;
    right:15px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f3f3f3;
    font-size:26px;
}

.modal-image{
    width:100%;
    max-height:360px;
    object-fit:cover;
    border-radius:7px;
    margin-bottom:25px;
}

.modal-title{
    font-size:31px;
    letter-spacing:-1px;
    margin-bottom:15px;
}

.modal-body{
    color:#666;
    font-size:16px;
    line-height:1.9;
}

.form-group{
    margin-bottom:17px;
}

.form-group label{
    display:block;
    margin-bottom:7px;
    font-size:15px;
    font-weight:600;
}

.form-control{
    width:100%;
    height:54px;
    padding:0 15px;
    border:1px solid #ddd;
    outline:none;
    font-size:16px;
}

textarea.form-control{
    height:140px;
    padding:15px;
    resize:vertical;
}

.form-control:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(184,137,73,.12);
}


/* =========================================================
   15. RESPONSIVE
========================================================= */

@media(max-width:1250px){

    .gnb{
        gap:25px;
    }

    .hero-progress{
        right:5%;
    }

    .service-card{
        flex-basis:calc((100% - 40px) / 3);
    }

    .gallery-card{
        flex-basis:calc((100% - 32px) / 3);
    }

    .gallery-designer{
        grid-template-columns:1fr;
    }

    .designer-area{
        border-left:0;
        border-top:1px solid #ddd;
        padding:50px 0 0;
    }

    .contact-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .contact-map{
        grid-column:span 2;
    }
}


@media(max-width:950px){

    .header{
        height:74px;
    }

    .header-inner{
        width:min(calc(100% - 40px),100%);
    }

    .gnb,
    .header-reserve{
        display:none;
    }

    .mobile-toggle{
        display:block;
    }

    .hero{
        margin-top:74px;
    }

    .hero-content{
        width:min(calc(100% - 100px),100%);
    }

    .hero-copy h1{
        font-size:52px;
    }

    .hero-progress{
        right:35px;
    }

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-item:nth-child(2){
        border-right:none;
    }

    .review-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .event-grid{
        grid-template-columns:1fr;
    }
}


@media(max-width:680px){

    .container{
        width:min(calc(100% - 32px),100%);
    }

    .section{
        padding:70px 0;
    }

    .section-head{
        display:block;
        margin-bottom:28px;
    }

    .section-head > * + *{
        margin-top:20px;
    }

    .section-title{
        font-size:32px;
        letter-spacing:-1.5px;
    }

    .section-desc{
        font-size:16px;
    }

    .logo{
        min-width:auto;
        font-size:23px;
        letter-spacing:5px;
    }

    .hero{
        min-height:720px;
        height:calc(100vh - 74px);
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.15),
                rgba(0,0,0,.75)
            );
    }

    .hero-content{
        width:calc(100% - 42px);
        align-items:flex-end;
        padding-bottom:150px;
    }

    .hero-copy .sub{
        font-size:16px;
    }

    .hero-copy h1{
        font-size:40px;
        line-height:1.3;
        letter-spacing:-2px;
    }

    .hero-copy p{
        font-size:16px;
        line-height:1.8;
    }

    .hero-arrow{
        /*top:auto;*/
        bottom:28px;
        width:46px;
        height:46px;
        font-size:29px;
    }

    .hero-prev{
        left:22px;
    }

    .hero-next{
        right:22px;
    }

    .hero-progress{
        top:auto;
        left:25px;
        right:25px;
        bottom:80px;
        transform:none;
        width:auto;
        display:flex;
        justify-content:space-between;
    }

    .hero-progress-item{
        width:auto;
        min-height:auto;
        flex:1;
    }

    .progress-info,
    .progress-line{
        display:none;
    }

    .progress-num{
        width:43px;
        height:43px;
        font-size:14px;
    }

    .hero-dots{
        display:none;
    }

    .feature-grid{
        grid-template-columns:1fr;
        padding:12px 0;
    }

    .feature-item{
        padding:16px 5px;
        border-right:none;
        border-bottom:1px solid #ddd;
    }

    .feature-item:last-child{
        border-bottom:none;
    }

    .service-tabs,
    .gallery-tabs,
    .review-tabs{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:5px;
        scrollbar-width:none;
    }

    .service-tab,
    .gallery-tab,
    .review-tab{
        flex-shrink:0;
    }

    .slider-wrap{
        padding:0;
    }

    .service-card{
        flex-basis:100%;
    }

    .service-card-img{
        height:320px;
    }

    .service-section .slider-arrow{
        top:auto;
        bottom:12px;
        transform:none;
    }

    .service-section .slider-arrow.prev{
        left:12px;
    }

    .service-section .slider-arrow.next{
        right:12px;
    }

    .service-card-info{
        padding-bottom:75px;
    }

    .gallery-slider{
        padding:0;
    }

    .gallery-card{
        flex-basis:100%;
        height:430px;
    }

    .gallery-slider .slider-arrow{
        top:auto;
        bottom:12px;
        transform:none;
    }

    .gallery-slider .slider-arrow.prev{
        left:12px;
    }

    .gallery-slider .slider-arrow.next{
        right:12px;
    }

    .designer-profile{
        align-items:flex-start;
    }

    .designer-list{
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:8px;
    }

    .designer-thumb{
        flex-shrink:0;
    }

    .review-grid{
        grid-template-columns:1fr;
    }

    .event-card{
        min-height:145px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-item{
        border-right:0;
        border-bottom:1px solid #eee;
        padding:18px 5px;
    }

    .contact-map{
        grid-column:auto;
    }

    .footer-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .modal{
        padding:12px;
    }

    .modal-box{
        padding:45px 22px 28px;
    }

    .modal-title{
        font-size:26px;
    }

    .top-btn{
        right:18px;
        bottom:18px;
    }
}

/* 모바일 우측여백X 완벽대응!*/
/* =========================
   모바일 메뉴
========================= */

.mobile-menu{
    position:fixed;
    top:0;
    right:0;

    width:min(88vw, 420px);
    height:100dvh;

    background:#fff;

    z-index:9999;

    padding:0 30px 35px;

    display:flex;
    flex-direction:column;

    transform:translateX(100%);
    visibility:hidden;

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        visibility .4s ease;

    box-sizing:border-box;
}

.mobile-menu.active{
    transform:translateX(0);
    visibility:visible;
}


/* =========================
   모바일 메뉴 상단
========================= */

.mobile-menu-head{
    height:85px;

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

    border-bottom:1px solid #e9e9e9;

    flex-shrink:0;
}


/* 로고 */

.mobile-logo{
    font-size:25px;
    letter-spacing:5px;

    font-family:serif;

    color:#222;
}


/* =========================
   X 닫기 버튼
========================= */

.mobile-menu-close{
    width:50px;
    height:50px;

    border:0;
    background:transparent;

    cursor:pointer;

    position:relative;

    flex-shrink:0;
}


/* X 선 */

.mobile-menu-close span{
    position:absolute;

    top:50%;
    left:50%;

    width:27px;
    height:2px;

    background:#222;

    border-radius:10px;

    transition:.3s ease;
}


/* 첫 번째 선 */

.mobile-menu-close span:nth-child(1){
    transform:translate(-50%, -50%) rotate(45deg);
}


/* 두 번째 선 */

.mobile-menu-close span:nth-child(2){
    transform:translate(-50%, -50%) rotate(-45deg);
}


/* hover */

.mobile-menu-close:hover span{
    background:#b58543;
}


/* =========================
   메뉴 링크
========================= */

.mobile-menu-links{
    padding-top:20px;

    flex:1;

    overflow-y:auto;
}

.mobile-menu a{
    display:flex;
    align-items:center;

    min-height:62px;

    border-bottom:1px solid #eeeeee;

    color:#222;

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

    text-decoration:none;

    transition:.25s ease;
}

.mobile-menu a:hover{
    color:#b58543;
    padding-left:10px;
}


/* =========================
   예약 버튼
========================= */

.mobile-reserve{
    width:100%;

    min-height:58px;

    margin-top:25px;

    font-size:17px;

    flex-shrink:0;
}

/**/
/* ========================================
   MOBILE 오른쪽 여백 / 가로 스크롤 완전 해결
======================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* 모든 주요 영역 화면 밖으로 나가지 않도록 */
section,
.container,
.review-section,
.review-grid,
.review-card,
.section-head,
.review-tabs{
    max-width:100%;
}


/* 모바일 최적화 */
@media (max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    /* 컨테이너 정확한 좌우 여백 */
    .container{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        padding-left:20px;
        padding-right:20px;
    }


    /* 리뷰 헤더 */
    .review-section .section-head{
        width:100%;
        max-width:100%;
    }


    /* 탭 영역 */
    .review-tabs{
        width:100%;
        max-width:100%;
        min-width:0;

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

        gap:8px;
    }


    .review-tab{
        width:100%;
        min-width:0;
        max-width:100%;

        padding-left:5px;
        padding-right:5px;

        white-space:nowrap;
    }


    /* 리뷰 전체 영역 */
    .review-grid{
        width:100%;
        max-width:100%;
        min-width:0;

        grid-template-columns:minmax(0, 1fr);

        gap:15px;
    }


    /* 리뷰 카드 */
    .review-card{
        width:100%;
        min-width:0;
        max-width:100%;

        margin:0;

        padding:28px 22px;
    }


    /* 긴 텍스트 때문에 화면이 밀리는 것 방지 */
    .review-card p,
    .review-card strong{
        max-width:100%;
        overflow-wrap:break-word;
        word-break:keep-all;
    }


    /* 혹시 100vw 사용된 요소가 있다면 */
    section{
        width:100%;
        max-width:100%;
    }

}

/**/
/* =========================================
   전체 페이지 가로 넘침 완전 차단
========================================= */

html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

body{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    overflow-x:clip;
}


/* 모든 요소 폭 계산 통일 */

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* 가로로 튀어나오기 쉬운 요소 */

section,
header,
footer,
main,
.container,
[class*="section"],
[class*="grid"],
[class*="slider"],
[class*="track"],
[class*="modal"],
[class*="menu"]{
    max-width:100%;
}

/**/

/* =========================================
   모바일 / 전체 가로 여백 및 화면 흔들림 완전 방지
========================================= */

html{
    width:100%;
    min-width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

body{
    width:100%;
    min-width:100%;
    max-width:100%;
    margin:0;
    padding:0;

    overflow-x:hidden;

    /* 스크롤바 변화로 인한 화면 폭 변화 방지 */
    /*scrollbar-gutter:stable;*/
}

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* 모든 주요 영역 가로 넘침 차단 */

body > *,
main,
header,
footer,
section,
.container{
    max-width:100%;
}


/* 이미지 및 미디어 */

img,
video,
iframe,
canvas,
svg{
    max-width:100%;
    height:auto;
}


/* =========================================
   메뉴 / 모달 열려도 body 폭 절대 변경 금지
========================================= */

body.menu-open,
body.modal-open{
    width:100%;
    max-width:100%;
    overflow-y:hidden;
    overflow-x:hidden;
}


/* fixed 요소 */

.mobile-menu,
.mobile-menu-overlay,
.modal,
.modal-overlay{
    max-width:100vw;
}


/* =========================================
   모바일 강제 보정
========================================= */

@media (max-width:768px){

    html,
    body{
        width:100%;
        min-width:0;
        max-width:100%;
        overflow-x:hidden;
    }

    .container{
        width:100%;
        max-width:100%;
        min-width:0;

        margin-left:0;
        margin-right:0;

        padding-left:20px;
        padding-right:20px;
    }

    section{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    /* 모든 grid / flex 자식이 화면 밖으로 밀리는 것 방지 */

    [class*="grid"],
    [class*="slider"],
    [class*="track"],
    [class*="flex"]{
        max-width:100%;
        min-width:0;
    }

    [class*="grid"] > *,
    [class*="slider"] > *,
    [class*="track"] > *,
    [class*="flex"] > *{
        min-width:0;
        max-width:100%;
    }

    /* 100vw 때문에 발생하는 가로 스크롤 차단 */

    .hero,
    .hero-slider,
    .hero-slide,
    .review-section,
    .review-grid,
    .review-card,
    .mobile-menu,
    .modal,
    .modal-content{
        max-width:100%;
    }

}

/**/
/* =========================================
   GALLERY MOBILE TAB
========================================= */

.gallery_mobile {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* 탭 전체 */

.gallery_mobile .gallery-tabs {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 100%;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    padding: 0 0 6px 0;
    margin: 0;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    touch-action: pan-x;
}


/* 크롬 / 사파리 스크롤바 제거 */

.gallery_mobile .gallery-tabs::-webkit-scrollbar {
    display: none;
}


/* 각각의 버튼 */

.gallery_mobile .gallery-tab {

    flex: 0 0 auto;

    white-space: nowrap;

    box-sizing: border-box;

    cursor: pointer;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .gallery_mobile {

        width: 100%;
        max-width: 100%;

        overflow: hidden;

        box-sizing: border-box;
    }


    .gallery_mobile .gallery-tabs {

        width: 100%;
        max-width: 100%;

        display: flex;

        gap: 7px;

        padding: 0 0 7px 0;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        touch-action: pan-x;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        box-sizing: border-box;
    }


    .gallery_mobile .gallery-tabs::-webkit-scrollbar {
        display: none;
    }


    .gallery_mobile .gallery-tab {

        flex: 0 0 auto;

        height: 40px;

        padding: 0 17px;

        white-space: nowrap;

        font-size: 13px;

        border-radius: 30px;

        box-sizing: border-box;
    }

}

/**/
/* =========================================
   STYLE GALLERY - MOBILE 이미지 크기 해결
========================================= */

.gallery-slider,
.slider-viewport,
.gallery-track{
    min-width:0;
    max-width:100%;
}

.slider-viewport{
    width:100%;
    overflow:hidden;
}


/* 기본 카드 */
.gallery-card{
    min-width:0;
    max-width:100%;
    overflow:hidden;
}


/* 이미지 */
.gallery-card img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:cover;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    /* 전체 갤러리 영역 */
    .gallery-slider{
        width:100%;
        max-width:100%;
        min-width:0;

        display:flex;
        align-items:center;
    }


    /* 좌우 버튼 제외한 실제 이미지 영역 */
    .slider-viewport{
        width:100%;
        flex:1;
        min-width:0;

        overflow:hidden;
    }


    /* 슬라이드 트랙 */
    .gallery-track{
        display:flex;

        width:100%;
        max-width:none;

        min-width:0;

        gap:12px;

        transition:transform .4s ease;
    }


    /* ★ 모바일에서 카드 크기 강제 */
    .gallery-card{
        flex:0 0 100%;

        width:100%;
        min-width:100%;
        max-width:100%;

        margin:0;
    }


    /* 이미지 비율 */
    .gallery-card img{
        width:100%;
        height:auto;

        max-width:100%;

        display:block;

        object-fit:cover;
    }


    /* 좌우 버튼 */
    .slider-arrow{
        flex:0 0 40px;

        width:40px;
        height:40px;

        min-width:40px;

        padding:0;

        z-index:2;
    }

}

/**/