/* 홍능조경 홈페이지 기본 스타일 */

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

body {
    font-family: "Noto Sans KR", Arial, sans-serif;
    color: #333;
    line-height: 1.7;
}


header {
    width: 100%;
    height: 80px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}


.logo {
    font-size: 28px;
    font-weight: 700;
    color: #276738;
}


nav a {
    margin-left: 30px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}


nav a:hover {
    color: #276738;
}



/* 메인 이미지 영역 */

.hero {

    height: 100vh;

    background:
    linear-gradient(
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.35)
    ),
    url("/images/main.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display:flex;

    align-items:center;

    padding-left:10%;

    color:white;

}


.hero-text h1 {

    font-size:55px;
    line-height:1.3;

}


.hero-text p {

    font-size:20px;
    margin:25px 0;

}



.button {

    display:inline-block;

    background:#2e7d32;

    color:white;

    padding:15px 35px;

    border-radius:30px;

    text-decoration:none;

    transition:0.3s;

}


.button:hover {

    background:#1b5e20;

}



/* 공통 영역 */

section {

    padding:100px 10%;

    text-align:center;

}


section h2 {

    font-size:38px;

    margin-bottom:30px;

    color:#245c2a;

}



/* 카드 */

.cards {

    display:flex;

    gap:30px;

    justify-content:center;

    margin-top:40px;

}


.cards div {

    width:30%;

    padding:35px;

    background:#f7f7f7;

    border-radius:15px;

}



footer {

    background:#222;

    color:white;

    padding:30px;

    text-align:center;

}



/* 모바일 */

@media(max-width:768px){


header {

    height:auto;

    padding:20px;

    flex-direction:column;

}


nav {

    margin-top:15px;

}


nav a {

    margin:0 8px;

    font-size:14px;

}



.hero-text h1 {

    font-size:36px;

}


.cards {

    flex-direction:column;

}


.cards div {

    width:100%;

}


section {

    padding:70px 5%;

}


}
/* 소나무 갤러리 */

.gallery {

    display:grid;

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

    gap:20px;

    margin-top:40px;

}


.gallery img {

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,0.15);

    transition:0.3s;

}



.gallery img:hover {

    transform:scale(1.05);

}



/* 모바일 갤러리 */

@media(max-width:768px){


.gallery {

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

}


.gallery img {

    height:180px;

}


}
/* 모바일 고정 전화 버튼 */

.floating-call {

    position:fixed;

    right:20px;

    bottom:20px;

    background:#2e7d32;

    color:white;

    padding:15px 25px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    box-shadow:0 5px 15px rgba(0,0,0,0.25);

    z-index:999;

}


.floating-call:hover {

    background:#1b5e20;

}
/* 문의 버튼 영역 */


.floating-buttons {

position:fixed;

right:20px;

bottom:20px;

display:flex;

flex-direction:column;

gap:10px;

z-index:999;

}


.call-btn,
.kakao-btn {

padding:15px 25px;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:bold;

box-shadow:0 5px 15px rgba(0,0,0,0.25);

text-align:center;

}


.call-btn {

background:#2e7d32;

}


.kakao-btn {

background:#FEE500;

color:#3c1e1e;

}



/* 지도 버튼 */


.map-box {

margin-top:50px;

padding:40px;

background:#f7f7f7;

border-radius:15px;

}


.map-button {

display:inline-block;

margin-top:20px;

padding:12px 30px;

background:#1b5e20;

color:white;

border-radius:30px;

text-decoration:none;

}
/* 고급 갤러리 */


.gallery {

display:grid;

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

gap:25px;

}



.gallery-item {

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,0.12);

padding-bottom:20px;

}



.gallery-item img {

width:100%;

height:260px;

object-fit:cover;

cursor:pointer;

}



.gallery-item h3 {

padding:15px 15px 5px;

color:#1b5e20;

}



.gallery-item p {

padding:0 15px;

line-height:1.6;

color:#555;

}





/* 이미지 확대 */

#imageModal {

display:none;

position:fixed;

z-index:2000;

left:0;

top:0;

width:100%;

height:100%;

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

align-items:center;

justify-content:center;

}



#imageModal img {

max-width:90%;

max-height:90%;

border-radius:10px;

}



@media(max-width:768px){

.gallery{

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

}


.gallery-item img{

height:180px;

}

}
.logo {
    display:flex;
    align-items:center;
}

.logo img {
    height:55px;
}