/* Reset and Base Styles */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.hero {
    /* height: 25vh; */ /* Removed height to allow padding to define space */
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--light-gray) 50%, #d4c4b0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 120px; /* Fixed padding-top to account for fixed header */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="0.5" fill="%23000" opacity="0.03"/><circle cx="75" cy="25" r="0.3" fill="%23000" opacity="0.02"/><circle cx="50" cy="50" r="0.4" fill="%23000" opacity="0.03"/><circle cx="25" cy="75" r="0.2" fill="%23000" opacity="0.02"/><circle cx="75" cy="75" r="0.5" fill="%23000" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.1; /* Reduced opacity for a softer grain */
}

.hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* hero 높이에 맞춰 이미지 중앙 정렬 */
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #8b4513);
    animation: pulse 2s infinite;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem; /* Increased bottom margin for more spacing */
}

.section-title {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 3rem; /* Base font size */
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em; /* Increased letter spacing */
    text-transform: uppercase; /* Uppercase for a modern look */
    text-align: center; /* Added for center alignment */
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem; /* Base font size */
    color: var(--text-color);
    font-style: normal; /* Removed italic */
    margin-top: 2rem;
    margin-bottom: 2rem; /* Increased margin */
}

.title-line {
    width: 100px; /* Increased width */
    height: 3px; /* Increased thickness */
    background: var(--primary-color); /* Used primary color */
    margin: 0 auto;
    position: relative;
}

.title-line::after {
    content: '';
    position: absolute;
    top: -4px; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    width: 10px; /* Increased size */
    height: 10px; /* Increased size */
    background: var(--primary-color); /* Used primary color */
    border-radius: 50%;
}

/* Brand Story Section */
.brand-story {
    padding: 4rem 0; /* Increased padding for more vertical space */
    background: var(--bg-color);
}

.story-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* Increased horizontal padding */
}

.story-item {
    display: flex;
    align-items: center;
    margin-bottom: 5rem; /* Increased bottom margin */
    justify-content: center;
}

.story-item:nth-child(odd) {
    flex-direction: row;
}

.story-item:nth-child(even) {
    flex-direction: row-reverse;
}

.story-item img {
    width: 35%; /* Adjusted image width */
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-light); /* Used shadow variable */
    transition: transform 0.3s ease; /* Added transition */
}

.story-item img:hover {
    transform: translateY(-5px); /* Added hover effect */
}

.story-item p {
    width: 55%; /* Adjusted text width */
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color);
    text-align: justify;
    padding: 0 40px; /* Increased horizontal padding */
}

@media (max-width: 768px) {
    .story-item {
        flex-direction: column;
        margin-bottom: 3rem; /* Adjusted for mobile */
    }

    .story-item:nth-child(even) {
        flex-direction: column;
    }

    .story-item img {
        width: 80%; /* Adjusted for mobile */
        margin-bottom: 1.5rem; /* Adjusted for mobile */
    }

    .story-item p {
        width: 100%;
        padding: 0; /* Removed padding for mobile */
    }
}

/* Seasonal Products Section */
.seasonal-products {
    padding: 4rem 0; /* Increased padding */
    background: linear-gradient(135deg, var(--light-gray) 0%, var(--bg-color) 100%); /* Adjusted background gradient */
}

.seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted minmax */
    gap: 3rem; /* Increased gap */
    margin-top: 4rem; /* Increased margin */
    padding: 0px 20px;
}

@media (min-width: 1024px) {
    .seasons-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .seasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .seasons-grid {
        grid-template-columns: 1fr;
    }
}

.season-card {
    background: #fff;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.season-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px; /* Increased thickness */
    transition: all 0.3s ease;
}

.season-card.spring::before {
    background: #E0BBE4; /* Soft pink */
}

.season-card.summer::before {
    background: #95DAB5; /* Soft green */
}

.season-card.autumn::before {
    background: #F7D794; /* Soft gold */
}

.season-card.winter::before {
    background: #A4D9F4; /* Soft blue */
}

.season-card:hover {
    transform: translateY(-15px); /* Increased hover lift */
    box-shadow: var(--shadow-medium); /* Used darker shadow variable */
}

.season-icon {
    width: 60px; /* Increased icon size */
    height: 60px; /* Increased icon size */
    margin-bottom: 2rem; /* Increased margin */
    object-fit: contain;
    animation: float 4s ease-in-out infinite; /* Adjusted animation duration */
}

.season-icon.blueberry {
    width: 80px;   /* 가로를 줄임 */
    height: 60px;  /* 세로를 늘림 */
    object-fit: contain; /* 비율 유지하며 맞춤 */
}

.season-card h3 {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 1.6rem; /* Base font size */
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.season-card p {
    color: var(--text-color);
    line-height: 1.7; /* Adjusted line height */
    font-size: 0.95rem; /* Base font size */
}

/* Values Section */
.values {
    padding: 4rem 0; /* Increased padding */
    background: var(--bg-color);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
    gap: 4rem; /* Increased gap */
    margin-top: 4rem; /* Increased margin */
}

.values-star-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
    padding: 0 20px; /* 다른 섹션과 동일한 패딩 */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.value-item {
    text-align: center;
    padding: 3rem 2rem; /* 위아래 패딩 증가, 좌우는 유지 */
    background: var(--light-gray); /* Added background color */
    border-radius: 15px; /* Added border-radius */
    box-shadow: var(--shadow-light); /* Added shadow */
    transition: all 0.3s ease;
    height: 320px; /* 높이 증가로 여백 확보 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.value-item:hover {
    transform: translateY(-8px) scale(1.02); /* Enhanced hover effect */
    box-shadow: var(--shadow-medium); /* Darker shadow on hover */
}

.value-icon {
    font-size: 3.5rem; /* Base icon size */
    margin-bottom: 2.5rem; /* 아이콘 아래 여백 증가 */
    color: var(--primary-color); /* Applied primary color */
    animation: none; /* Removed pulse animation */
}

.value-item h3 {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 1.5rem; /* Base font size */
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* 제목 아래 여백 증가 */
}

.value-item p {
    color: var(--text-color);
    line-height: 1.7; /* Adjusted line height */
    font-size: 0.95rem; /* Base font size */
    flex-grow: 1; /* 남은 공간을 차지하도록 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem; /* 좌우 여백 추가 */
}

/* Combined Heritage and Philosophy Section */
.combined-section {
    padding: 4rem 0; /* Increased padding */
    background: linear-gradient(135deg, var(--light-gray) 0%, var(--bg-color) 100%); /* Adjusted background */
    color: var(--text-color);
}

.combined-content {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem; /* Increased gap */
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 다른 섹션과 동일한 패딩 */
}

.heritage-part,
.philosophy-part {
    flex: 1; /* 가로 공간을 균등하게 분할 */
    min-width: 48%; /* Adjusted min-width */
    padding: 3rem; /* Increased padding */
    background: #fff;
    border-radius: 15px; /* Increased border-radius */
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease; /* Added transition */
}

.heritage-part:hover,
.philosophy-part:hover {
    transform: translateY(-8px); /* Added hover effect */
}

.heritage-part .section-header,
.philosophy-part .section-header {
    text-align: left;
    margin-bottom: 2.5rem; /* Increased margin */
}

.heritage-part .section-title,
.philosophy-part .section-title {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 1.5rem; /* Base font size */
    margin-bottom: 0.8rem; /* Adjusted margin */
    color: var(--primary-color); /* Applied primary color */
}

.heritage-part p,
.philosophy-part p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1.2rem; /* Adjusted margin */
    color: var(--text-color);
}

/* Experience Section */
.experience {
    padding: 4rem 0; /* Increased padding */
    background: var(--bg-color);
}

.experience-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Adjusted minmax */
    gap: 4rem; /* Increased gap */
    margin-top: 4rem; /* Increased margin */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* 다른 섹션과 동일한 패딩 */
}

.experience-item {
    padding: 3rem; /* Increased padding */
    border-left: 6px solid var(--primary-color); /* Increased border and applied primary color */
    background: var(--light-gray); /* Applied light gray background */
    border-radius: 0 20px 20px 0; /* Increased border-radius */
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light); /* Added shadow */
}

.experience-item:hover {
    background: var(--bg-color); /* Adjusted hover background */
    transform: translateX(15px); /* Increased transform */
    box-shadow: var(--shadow-medium); /* Darker shadow on hover */
}

.experience-number {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 3rem; /* Base font size */
    font-weight: bold;
    color: var(--primary-color);
    opacity: 0.2; /* Reduced opacity */
    margin-bottom: 1.5rem; /* Increased margin */
}

.experience-item h3 {
    font-family: 'Montserrat', sans-serif; /* Applied Montserrat font */
    font-size: 1.6rem; /* Base font size */
    color: var(--primary-color);
    margin-bottom: 1.2rem; /* Adjusted margin */
}

.experience-item p {
    color: var(--text-color);
    line-height: 1.7; /* Adjusted line height */
    font-size: 0.95rem; /* Base font size */
}

/* Closing Section */
.closing {
    padding: 4rem 0; /* Increased padding */
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--light-gray) 100%); /* Adjusted background */
}

.closing-content {
    max-width: 1000px; /* Increased max-width */
    margin: 0 auto;
    text-align: center;
    padding: 0 20px; /* 다른 섹션과 동일한 패딩 */
}

.closing-content blockquote {
    font-size: 1.4rem; /* Base font size */
    line-height: 1.9; /* Adjusted line height */
    color: var(--text-color); /* Applied text color */
    font-style: normal; /* Removed italic */
    position: relative;
    padding: 3rem; /* Increased padding */
    background: #fff; /* Added background */
    border-radius: 15px; /* Added border-radius */
    box-shadow: var(--shadow-light); /* Added shadow */
}

.closing-content blockquote::before,
.closing-content blockquote::after {
    content: '\201C'; /* Changed to modern quotation marks */
    font-size: 5rem; /* Increased size */
    color: var(--accent-color); /* Applied accent color */
    position: absolute;
    opacity: 0.2; /* Reduced opacity */
}

.closing-content blockquote::before {
    top: 10px; /* Adjusted position */
    left: 10px; /* Adjusted position */
}

.closing-content blockquote::after {
    content: '\201D'; /* Changed to modern quotation marks */
    bottom: 10px; /* Adjusted position */
    right: 10px; /* Adjusted position */
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Slightly reduced translateY */
    animation: fadeInUp 0.8s ease forwards; /* Adjusted animation duration */
}

.fade-in-delay {
    opacity: 0;
    transform: translateY(20px); /* Slightly reduced translateY */
    animation: fadeInUp 0.8s ease 0.3s forwards; /* Adjusted animation duration and delay */
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Adjusted translateY */
    transition: all 0.6s ease-out; /* Adjusted transition duration and easing */
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keyframe Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8; /* Adjusted opacity */
        transform: scale(1.02); /* Reduced scale */
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Reduced float distance */
    }
}

/* Responsive Design - 비율적 폰트 크기 조정 */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem; /* 83% of base size */
    }
    
    .section-subtitle {
        font-size: 0.95rem; /* 86% of base size */
    }
    
    .story-item img {
        width: 40%; /* Adjusted for smaller screens */
    }

    .story-item p {
        width: 60%; /* Adjusted for smaller screens */
        font-size: 0.9rem; /* 90% of base size */
    }

    .season-card h3 {
        font-size: 1.4rem; /* 87% of base size */
    }

    .season-card p {
        font-size: 0.85rem; /* 89% of base size */
        line-height: 1.6;
    }

    .value-icon {
        font-size: 3rem; /* 86% of base size */
    }

    .value-item h3 {
        font-size: 1.3rem; /* 87% of base size */
    }

    .value-item p {
        font-size: 0.85rem; /* 89% of base size */
    }

    .value-item {
        padding: 2.5rem 1.5rem;
        height: 300px;
    }

    .combined-content {
        gap: 3rem;
        padding: 0 20px;
    }

    .heritage-part,
    .philosophy-part {
        min-width: 47%;
        padding: 2.5rem;
    }

    .heritage-part .section-title,
    .philosophy-part .section-title {
        font-size: 1.3rem; /* 87% of base size */
    }

    .heritage-part p,
    .philosophy-part p {
        font-size: 0.8rem; /* 89% of base size */
    }

    .experience-items {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 3rem;
        padding: 0 20px;
    }

    .experience-number {
        font-size: 2.5rem; /* 83% of base size */
    }

    .experience-item h3 {
        font-size: 1.4rem; /* 87% of base size */
    }

    .experience-item p {
        font-size: 0.85rem; /* 89% of base size */
    }

    .closing-content {
        padding: 0 20px;
    }

    .closing-content blockquote {
        font-size: 1.2rem; /* 86% of base size */
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hero-content .brand-logo h1 {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem; /* 67% of base size */
    }
    
    .section-subtitle {
        font-size: 0.9rem; /* 82% of base size */
    }
    
    .story-item {
        flex-direction: column !important;
        margin-bottom: 3rem;
        align-items: center;
    }

    .story-item:nth-child(even) {
        flex-direction: column !important;
    }

    .story-item img {
        width: 80%;
        margin-bottom: 1.5rem;
        order: 1;
    }

    .story-item p {
        width: 100%;
        padding: 0;
        order: 2;
        text-align: center;
        font-size: 0.8rem; /* 80% of base size */
    }
    
    .seasons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .season-card {
        aspect-ratio: 1;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .season-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1.5rem;
    }
    
    .season-icon.blueberry {
        width: 60px;
        height: 45px;
    }
    
    .season-card h3 {
        font-size: 1.1rem; /* 69% of base size */
        margin-bottom: 0.8rem;
    }
    
    .season-card p {
        font-size: 0.64rem; /* 67% of base size */
        line-height: 1.5;
    }
    
    .values-star-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0 20px;
    }
    
    .value-icon {
        font-size: 2.5rem; /* 71% of base size */
    }

    .value-item h3 {
        font-size: 1.1rem; /* 73% of base size */
    }

    .value-item p {
        font-size: 0.7rem; /* 74% of base size */
    }

    .value-item {
        height: 280px;
        padding: 2rem 1.5rem;
    }

    .combined-content {
        padding: 0 20px;
    }

    .heritage-part,
    .philosophy-part {
        min-width: 100%;
    }

    .heritage-part .section-title,
    .philosophy-part .section-title {
        font-size: 1.1rem; /* 73% of base size */
    }

    .heritage-part p,
    .philosophy-part p {
        font-size: 0.7rem; /* 78% of base size */
    }
    
    .experience-items {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0 20px;
    }

    .experience-number {
        font-size: 2rem; /* 67% of base size */
    }

    .experience-item h3 {
        font-size: 1.1rem; /* 69% of base size */
    }

    .experience-item p {
        font-size: 0.7rem; /* 74% of base size */
    }
    
    .container {
        padding: 0 20px;
    }

    .closing-content {
        padding: 0 20px;
    }

    .closing-content blockquote {
        font-size: 1rem; /* 71% of base size */
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-content .brand-logo h1 {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.6rem; /* 53% of base size */
    }
    
    .section-subtitle {
        font-size: 0.8rem; /* 73% of base size */
    }
    
    .hero-description p {
        font-size: 1rem;
    }
    
    .story-item {
        flex-direction: column !important;
        margin-bottom: 2.5rem;
    }

    .story-item:nth-child(even) {
        flex-direction: column !important;
    }

    .story-item img {
        width: 90%;
        margin-bottom: 1.2rem;
        order: 1;
    }

    .story-item p {
        width: 100%;
        padding: 0;
        order: 2;
        text-align: center;
        font-size: 0.7rem; /* 70% of base size */
        line-height: 1.6;
    }
    
    .seasons-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .season-card {
        aspect-ratio: 1;
        padding: 1.2rem 0.8rem;
    }
    
    .season-card h3 {
        font-size: 0.9rem; /* 56% of base size */
        margin-bottom: 0.6rem;
    }
    
    .season-card p {
        font-size: 0.53rem; /* 56% of base size */
        line-height: 1.4;
    }

    .value-icon {
        font-size: 2rem; /* 57% of base size */
    }

    .value-item h3 {
        font-size: 0.9rem; /* 60% of base size */
    }

    .value-item p {
        font-size: 0.6rem; /* 63% of base size */
    }

    .value-item {
        height: 260px;
        padding: 1.8rem 1rem;
    }

    .heritage-part .section-title,
    .philosophy-part .section-title {
        font-size: 0.9rem; /* 60% of base size */
    }

    .heritage-part p,
    .philosophy-part p {
        font-size: 0.6rem; /* 67% of base size */
    }

    .experience-number {
        font-size: 1.6rem; /* 53% of base size */
    }

    .experience-item h3 {
        font-size: 0.9rem; /* 56% of base size */
    }

    .experience-item p {
        font-size: 0.6rem; /* 63% of base size */
    }
    
    .season-card,
    .value-item,
    .experience-item {
        padding: 1.5rem 1rem;
    }
    
    .closing-content blockquote {
        font-size: 0.8rem; /* 57% of base size */
        padding: 1.5rem;
    }
}

/* Fade-in-out animation */
.fade-in-out {
    animation: fade 4s infinite; /* Adjusted animation duration */
}

@keyframes fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}