/* * ----------------------------------------
 * style.css (공통 스타일시트) - 수정됨
 * ----------------------------------------
 */

/* 구글 폰트 (Noto Sans KR) 임포트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

html {
    height: 100%;
}

body {
    min-height: 100vh; /* height 대신 min-height 사용 */
    margin: 0;
    display: flex;
    flex-direction: column;
}


.main-content {
    flex: 1;
}

/* 메인 콘텐츠가 남는 공간을 채우도록 */
.main-content {
    flex: 1;
}


body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f5f4f2; /* 기본 배경색 */
    color: #333;
}

/* * -------------------
 * 공통 컴포넌트
 * -------------------
 */

a {
    text-decoration: none;
    color: #333;
}

/* 메인 브랜드 타이틀 (헤더) */
.brand-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #000;
    padding: 2.5rem 0;
    text-decoration: none;
}

/* 하위 페이지 헤더 (뒤로가기 버튼 포함) */
.page-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-arrow {
    position: absolute;
    left: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    line-height: 1;
}

.back-arrow:hover {
    color: #555;
}

/* 메인 컨텐츠 영역 최소 높이 */
.main-content {
    min-height: 75vh;
}
/* 흰색 배경 페이지의 메인 컨텐츠 최소 높이 */
body:not(.landing-page) .main-content {
    min-height: 75vh;
}

/* 커스텀 버튼 (이미지의 파란색) */
.btn-primary-custom {
    background-color: #347ac1;
    border-color: #347ac1;
    font-weight: 700;
    padding: 0.75rem 1rem;
    color: #fff;
}

.btn-primary-custom:hover {
    background-color: #2a629a;
    border-color: #2a629a;
    color: #dcdcdc;
}

/* 푸터
 * [수정] 배경/글자색 변경, border/margin 제거
 */
footer {
    position: relative;
    z-index: 10;
    background-color: #f5f4f2;
    text-align: center;
    padding: 2rem 0; /* 패딩을 조금 더 넉넉하게 수정 권장 */
    font-size: 0.85rem;
    color: #999;
    margin-top: 3rem; /* [추가] 푸터와 콘텐츠 사이의 안전한 간격 확보 */
}

/* * -------------------
 * 01_랜딩 페이지 (index.html)
 * -------------------
 */
.store-info p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #555;
}

.store-info .store-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
}

.hero-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    display: block; 
    margin-bottom: 0;
    margin-left: auto; /* Bootstrap text-md-end와 함께 작동하여 우측 정렬 보장 */
}

/* * [수정] 랜딩 페이지 네비게이션 섹션
 * 배경/글자색 변경, padding 수정
 */
.nav-section {
    background-color: #000; /* 검은색 배경 */
    padding: 3rem 0;
    /* border-top: 1px solid #ddd; (제거) */
    /* margin-top: 3rem; (제거) */
}

.nav-item {
    text-align: left;
    margin-bottom: 1.5rem;
}

.nav-item img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    margin-bottom: 0.75rem;
}

.nav-item .nav-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ccc; /* [수정] 밝은 회색 */
}

.nav-item h4 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff; /* [수정] 흰색 */
    margin-top: -5px;
}

/* * -------------------
 * 02_브랜드 스토리 (brand.html)
 * -------------------
 */
.map-image {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

/* * -------------------
 * 03_제품 목록 (products.html)
 * -------------------
 */

 .product-item img {
  width: 100%;           /* 부모 너비에 맞춤 */
  height: 250px;         /* 고정 높이 설정 (원하는 크기로 조절 가능) */
  object-fit: cover;     /* 이미지 비율 유지하면서 채우기 */
  border-radius: 8px;    /* 모서리 둥글게 (선택사항) */
  background-color: #f8f8f8; /* 로딩 시 빈 공간 색상 (선택사항) */
}

.product-item {
    background-color: #fff;            /* 배경 흰색으로 변경 (제품 사진 강조용) */
    border: 1px solid #e0e0e0;
    border-radius: 10px;               /* 카드 모서리 둥글게 */
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: #333;
    display: block;
    overflow: hidden;                  /* 이미지가 카드 밖으로 삐져나오지 않게 */
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    position: relative;
    z-index: 1; /* footer보다 낮은 z-index 설정 */
}

.product-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: scale(1.05); /* 확대 효과 */
    z-index: 5; /* hover 시 다른 요소 위로 올라오도록 설정 */
}

.product-item img {
    width: 90%;              /* 이미지 자체 크기를 90%로 축소 */
    height: 250px;           /* 고정 높이 유지 */
    object-fit: contain;     /* 이미지 전체가 보이도록 */
    display: block;
    margin: 0 auto;          /* 가운데 정렬 */
    background-color: #fff; /* 빈 공간 회색 배경 */
    padding: 10px;           /* 약간의 내부 여백 */
}

.product-info {
    padding: 1rem;
    text-align: left;
}

.product-info .brand {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
}

.product-info .model {
    font-size: 0.9rem;
    color: #666;
}

.product-info .price .discount {
    color: #347ac1;
    font-weight: 700;
    margin-right: 0.5rem;
}

.product-info .price .final-price {
    font-weight: 700;
    color: #000;
}

/* 페이지네이션 (Bootstrap 오버라이드) */
.pagination .page-item.active .page-link {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.pagination .page-link {
    color: #333;
}

.pagination .page-link:hover {
    color: #000;
}

/* * -------------------
 * 04_제품 상세 (detail.html)
 * -------------------
 */

/* 상세 페이지 좌측 캐러셀 */
.detail-carousel-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

#productCarousel {
    padding-bottom: 100px; 
}

.carousel-indicators {
    bottom: 0 !important;
    margin-bottom: 0;
}

.carousel-control-custom {
    text-decoration: none;
    color: #000;
    font-size: 2.5rem;
    font-weight: 300;
}
.carousel-control-custom:hover {
    color: #555;
}

/* 캐러셀 인디케이터 (점) */
.carousel-indicators [data-bs-target] {
    background-color: #ccc;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: #333;
}

.carousel-inner img {
    background-color: #f5f4f2;
}

/* 상세 페이지 우측 정보 */

.product-detail-info .brand {
    font-size: 2.2rem;
    font-weight: 900;
    color: #000;
}

.product-detail-info .model {
    font-size: 1.1rem;
    color: #777;
    margin-top: -10px;
    margin-bottom: 1.5rem;
}

.product-detail-info .price-display {
    margin-bottom: 1.5rem;
}

.product-detail-info .price-display .discount {
    font-size: 2.8rem;
    color: #347ac1;
    font-weight: 700;
    margin-right: 1rem;
}

.product-detail-info .price-display .price {
    font-size: 2.8rem;
    font-weight: 700;
    color: #000;
}

/* 제품 태그 (뱃지) */
.product-tags .badge {
    font-size: 0.9rem;
    padding: 0.5em 0.8em;
    font-weight: 400;
    color: #fff;
    margin-right: 0.5rem;
}

.badge-bulte { background-color: #495057; }
.badge-tr { background-color: #3498db; }
.badge-acetate { background-color: #2980b9; }

.landing-page .main-content {
    flex: 0 auto;       /* 남는 공간을 차지하지 않음 */
    min-height: auto;   /* 최소 높이(75vh) 제한 해제 */
}

/* 대신 푸터가 남는 공간을 밀어내도록 하여 바닥 고정 유지 */
.landing-page footer {
    margin-top: auto;
}



/* * ----------------------------------------
 * 반응형 미디어 쿼리 (Mobile & Tablet)
 * ----------------------------------------
 */
/* * ----------------------------------------
 * 반응형 미디어 쿼리 (Mobile & Tablet)
 * ----------------------------------------
 */
@media (max-width: 768px) {
    
    /* 1. 헤더 및 타이틀 조정 */
    .brand-title {
        font-size: 1.8rem;
        padding: 1.5rem 0;
    }
    
    .page-header .back-arrow {
        font-size: 1.8rem;
        left: 10px;
    }

    /* 2. 랜딩 페이지 (index.html) */
    .store-info {
        text-align: center;
        margin-bottom: 2rem;
    }

    /* 모바일에서 네비게이션 버튼 간격 확대 */
    .nav-item {
        margin-bottom: 3rem; 
        display: block;      
    }
    
    .nav-item h4 {
        font-size: 1.2rem;
    }
    
    .nav-item .nav-number {
        font-size: 0.9rem;
    }

    /* 3. 제품 목록 (products.html) */
    .product-item img {
        height: 180px;
        padding: 5px;
    }
    
    .product-info {
        padding: 0.75rem;
    }
    
    .product-info .brand { font-size: 0.85rem; }
    .product-info .model { font-size: 0.8rem; }
    .product-info .price .final-price { font-size: 0.95rem; }
    .product-info .price .discount { font-size: 0.9rem; margin-right: 0.2rem; }

    /* 4. 제품 상세 (detail.html) - [수정됨] */
    .product-detail-info {
        padding: 0 20px !important; 
        
        /* [변경] 텍스트를 좌측 정렬로 변경 */
        text-align: left !important;
        
        /* [변경] 인디케이터와의 간격을 위해 상단 여백을 2rem -> 4rem으로 확대 */
        margin-top: 4rem; 
    }
    
    /* [추가] 버튼을 감싸는 컨테이너 수정 */
    .product-detail-info .d-grid {
        display: block; /* 꽉 찬 그리드 해제 */
        padding: 0;     /* 불필요한 패딩 제거 */
    }

    /* 버튼 자체의 크기나 마진이 필요하다면 여기서 조절 */
    .product-detail-info .btn-primary-custom {
        width: auto; /* 내용물만큼만 크기 차지 (선택사항) */
        /* 만약 버튼을 조금 더 길게 하고 싶다면 width: 50% 등으로 설정 가능 */
    }

    .product-detail-info .brand { font-size: 1.8rem; }
    .product-detail-info .price-display .price { font-size: 2rem; }
    .product-detail-info .price-display .discount { font-size: 2rem; }
    
    .carousel-control-custom { font-size: 1.5rem; }
}