/* AI-GENERATED: 과편당 웹사이트 스타일 시트 */

/* AI-GENERATED: 레퍼런스 이미지를 바탕으로 전역 변수 업데이트 */
/* 전역 변수 */
:root {
    /* 색상 팔레트 - 더 세련되고 무거운 느낌의 색상들로 변경 */
    --color-bg-primary: #FFFBF2; /* 이전 #F5F5DC에서 더 세련된 브로쉬 색상으로 변경 */
    --color-bg-secondary: #F4ECE2; /* 이전 #DEB887에서 더 세련된 보조 배경색으로 변경 */
    --color-accent-primary: #9A6A5B; /* 이전 #800000에서 더 세련된 지그예한 강조색으로 변경 */
    --color-accent-secondary: #BB8E7E; /* 이전 #A52A2A에서 더 현대적인 색상으로 변경 */
    --color-highlight-peach: #FADDC7; /* 이전 #FFDAB9에서 더 세련된 색상으로 변경 */
    --color-highlight-green: #D3D1BC; /* 이전 #BDB76B에서 더 세련된 색상으로 변경 */
    --color-text-body: #4B4237; /* 이전 #36454F에서 더 세련된 텍스트 색상로 변경 */
    --color-text-heading: #352E28; /* 이전 #5C2E2E에서 더 강하고 세련된 색상로 변경 */
    --color-text-light: #FDF9F0; /* 이전 #FFFDD0에서 더 세련된 색상로 변경 */
    --color-divider: #E5D8C9; /* 이전 #D2B48C에서 더 세련된 구분선 색상로 변경 */
    
    /* 여백 및 공간 - 더 여유롭고 세련된 디자인을 위해 값 조정 */
    --spacing-xs: 0.625rem; /* 10px */
    --spacing-sm: 1.25rem;  /* 20px */
    --spacing-md: 2.5rem;   /* 40px */
    --spacing-lg: 3.75rem;  /* 60px */
    --spacing-xl: 6.25rem;  /* 100px */
    
    /* 반응형 크기 */
    --container-max-width: 1200px;
    --mobile-breakpoint: 767px;
    --tablet-breakpoint: 1024px;
    
    /* 폰트 크기 - 더 지수함수적인 크기 대비를 위해 값 조정 */
    --font-size-xs: 0.813rem;  /* 13px */
    --font-size-sm: 0.938rem;  /* 15px */
    --font-size-md: 1.125rem;  /* 18px */
    --font-size-lg: 1.5rem;    /* 24px */
    --font-size-xl: 2.25rem;   /* 36px */
    --font-size-xxl: 3rem;     /* 48px */
    
    /* 테두리 반경 - 더 세련된 디자인을 위해 값 조정 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* 트랜지션 */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-medium: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* 새로운 변수 - 레이아웃 개선을 위한 추가 변수 */
    --section-spacing: 7.5rem; /* 섹션 간 간격 */
    --letter-spacing-heading: -0.02em; /* 제목 글자 간격 */
    --letter-spacing-body: 0.01em; /* 본문 글자 간격 */
    --line-height-heading: 1.3; /* 제목 줄간격 */
    --line-height-body: 1.7; /* 본문 줄간격 */
}

/* AI-GENERATED: 전역 box-sizing 설정 추가 */
/* 리셋 및 기본 스타일 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* AI-GENERATED: 더 세련된 기본 스타일 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
    color: var(--color-text-body);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased; /* 폰트 렌더링 개선 */
    -moz-osx-font-smoothing: grayscale; /* 폰트 렌더링 개선 */
}

/* AI-GENERATED: 더 세련된 타이포그래피 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'KoPub Batang', 'Nanum Myeongjo', serif;
    color: var(--color-text-heading);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    font-weight: 500; /* 중간 가중치로 더 세련되게 */
}

h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--spacing-sm);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-medium);
}

a:hover {
    color: var(--color-accent-secondary);
}

ul, ol {
    list-style-type: none;
}

/* AI-GENERATED: 섹션 공통 스타일 개선 */
.section-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    position: relative; /* 상대 위치 지정을 위한 기본값 */
}

/* AI-GENERATED: 섹션 제목 스타일 개선 */
.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
    font-weight: 500;
    letter-spacing: -0.03em; /* 제목을 위한 추가 글자 간격 조정 */
}

.section-title::after {
    content: '';
    display: block;
    width: 40px; /* 더 짧고 세련되게 */
    height: 2px; /* 더 가늘고 세련되게 */
    background-color: var(--color-accent-primary);
    margin: var(--spacing-sm) auto 0;
    opacity: 0.8; /* 약간 투모하게 하여 더 세련된 느낌 */
}

.section-divider {
    border-bottom: 1px solid var(--color-divider);
    margin: var(--spacing-xl) 0;
}

/* AI-GENERATED: 심플하고 모던한 버튼 스타일 */
.btn {
    display: inline-block;
    padding: 12px 24px; /* 패딩 약간 조정 */
    border-radius: 0; /* 직선형 모던 디자인 */
    text-decoration: none;
    font-weight: 400; /* 가벼운 폰트 가중치 */
    font-size: 0.9rem;
    letter-spacing: 0.05em; /* 자간 늘려서 모던함 강조 */
    transition: all var(--transition-medium);
    cursor: pointer;
    text-align: center;
    /* 그림자 제거 */
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    border: 1px solid; /* 테두리 기본 스타일 */
}

/* AI-GENERATED: 버튼 색상 가시성 개선 */
.btn--primary {
    background-color: var(--color-accent-primary); /* 배경색 추가 */
    color: #ffffff; /* 텍스트 흰색으로 강조 */
    border-color: var(--color-accent-primary);
    font-weight: 500; /* 조금 더 분명하게 */
}

.btn--primary:hover {
    background-color: var(--color-accent-secondary);
    color: #ffffff;
    border-color: var(--color-accent-secondary);
}

/* AI-GENERATED: 버튼 색상 가시성 개선 */
.btn--secondary {
    background-color: rgba(255, 255, 255, 0.9); /* 배경을 거의 흰색으로 */
    color: var(--color-accent-primary); /* 텍스트 색상 */
    border-color: var(--color-accent-primary); /* 테두리 색상 */
    font-weight: 500; /* 조금 더 분명하게 */
}

.btn--secondary:hover {
    background-color: var(--color-accent-secondary); /* 호버 시 강조색 */
    color: #ffffff; /* 호버 시 텍스트 흰색 */
    border-color: var(--color-accent-secondary); /* 호버 시 테두리 색상 */
}

/* AI-GENERATED: 로더 스타일 개선 - 화면 정중앙 배치 */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity var(--transition-medium);
}

.loader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 로더 콘텐츠를 화면 정중앙에 정렬 */
.loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 로더 로고 스타일 */
.loader__logo {
    width: 80px;
    height: auto;
    border-radius: 0;
    animation: pulse 1.5s ease-in-out infinite alternate;
}

.loader__spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-bg-secondary);
    border-top: 5px solid var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* 로고 펄스 애니메이션 */
@keyframes pulse {
    from { transform: scale(0.95); opacity: 0.8; }
    to { transform: scale(1.05); opacity: 1; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AI-GENERATED: 더 자연스럽고 현대적인 헤더 스타일 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* 배경을 투명하게 변경 */
    z-index: 1000;
    transition: all var(--transition-medium);
}

/* 스크롤 시 헤더 배경 변경 */
.header.scrolled {
    background-color: rgba(255, 251, 242, 0.95);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* AI-GENERATED: 배경색이 있을 때 원래 로고 색상으로 복원 */
.header.scrolled .header__logo-img {
    filter: none;
}

/* AI-GENERATED: 스크롤 시 햄버거 버튼 바를 원래 색상으로 복원 */
.header.scrolled .header__nav-toggle-bar {
    background-color: var(--color-text-heading);
}

.header__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px; /* 고정 키를 주어 일관성 제공 */
}

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

/* AI-GENERATED: 헤더 로고 스타일 개선 - 배경 투명시 흰색 로고 */
.header__logo-img {
    height: 36px; /* 더 세련된 사이즈 */
    width: auto;
    opacity: 0.95; /* 미뿜한 투명도로 더 세련되게 */
    transition: all var(--transition-medium);
    filter: brightness(0) invert(1); /* 로고를 흰색으로 변경 */
}

.header__logo:hover .header__logo-img {
    opacity: 1;
}

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

.header__nav-menu {
    display: flex;
    gap: var(--spacing-md);
}

/* AI-GENERATED: 더 자연스럽고 현대적인 네비게이션 링크 스타일 */
.header__nav-link {
    color: var(--color-text-light); /* 투명한 헤더에서 잘 보이도록 밝은 색상으로 변경 */
    font-weight: 500;
    font-size: 1rem; /* 적절한 크기로 조정 */
    padding: var(--spacing-xs) 0;
    position: relative;
    letter-spacing: 0.01em; /* 자연스럽게 조정 */
    text-transform: none;
    opacity: 0.9; /* 더 선명하게 */
    transition: opacity var(--transition-medium), color var(--transition-medium);
}

/* 스크롤 시 네비게이션 링크 색상 변경 */
.header.scrolled .header__nav-link {
    color: var(--color-text-heading);
}

.header__nav-link:hover,
.header__nav-link:focus {
    opacity: 1;
    color: var(--color-accent-primary);
}

/* AI-GENERATED: 네비게이션 링크 호버 효과 개선 */
.header__nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; /* 약간 더 내려서 간격 생성 */
    left: 0;
    width: 0;
    height: 1px; /* 더 가늘게 */
    background-color: var(--color-accent-primary);
    transition: width var(--transition-medium);
    opacity: 0.7; /* 미미한 투모도로 세련도 증가 */
}

.header__nav-link:hover::after,
.header__nav-link:focus::after {
    width: 100%;
}

.header__nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

/* AI-GENERATED: 화면 상단에서 햄버거 버튼 배경색 조정 */
.header__nav-toggle-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff; /* 기본상태에서 흔색으로 설정 */
    margin: 5px 0;
    transition: transform var(--transition-medium), opacity var(--transition-medium), background-color var(--transition-medium);
}

/* AI-GENERATED: 비디오 배경을 위한 히어로 섹션 스타일 */
.hero {
    padding-top: 0; /* 헤더가 투명하기 때문에 패딩 제거 */
    min-height: 100vh; /* 화면 전체 높이로 설정 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 모바일 관련 스타일은 미디어 쿼리 내부로 이동했습니다 */

/* AI-GENERATED: 비디오 배경 위 컨테이너 스타일 */
.hero__container {
    display: flex;
    align-items: center;
    justify-content: center; /* 콘텐츠 중앙 정렬 */
    width: 100%;
    max-width: var(--container-max-width);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2; /* 오버레이보다 위에 표시 */
}

/* AI-GENERATED: 비디오 배경 위 콘텐츠 스타일 */
/* AI-GENERATED: 히어로 콘텐츠 스타일 - 심플하고 모던하게 */
.hero__content {
    flex: 1;
    max-width: 768px;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-sm);
    margin: auto;
    z-index: 2; /* 비디오 및 오버레이 위에 위치 */
    /* 배경색, 블러, 그림자 등 제거하고 심플하게 */
    position: relative;
    /* 대신 상하에 미묘한 라인 추가 */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* 상하 여백 추가 */
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    width: 90%; /* 콘텐츠 영역이 화면의 90%만 차지하도록 설정 */
}

/* 배경 블러 효과를 위한 가상 요소 */
.hero__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
}

/* AI-GENERATED: 로고 이미지 스타일 - 크기 축소 및 색상 변경 */
.hero__logo {
    max-width: 180px; /* 로고 크기 작게 조정 */
    height: auto;
    margin-bottom: var(--spacing-md);
    display: inline-block;
    /* 필터를 사용한 색상 변경 */
    filter: brightness(0) invert(1); /* 하얼색으로 변경 */
    /* 다른 필터 옵션 (원하는 색상에 따라 주석 해제하여 사용) */
    /* filter: sepia(1) hue-rotate(180deg) saturate(5); /* 파란색 계열 */
    /* filter: sepia(1) hue-rotate(320deg) saturate(5); /* 분홍색 계열 */
    /* filter: sepia(0.4) saturate(5) hue-rotate(90deg); /* 초록색 계열 */
    /* filter: sepia(1) hue-rotate(30deg) saturate(5); /* 주황색 계열 */
}

/* AI-GENERATED: 히어로 제목 스타일 - 심플하고 모던하게 */
/* AI-GENERATED: 히어로 제목 스타일 - 심플하고 모던하게 */
.hero__title {
    margin-bottom: var(--spacing-sm);
    font-size: 1.8rem;
    font-weight: 500; /* 조금 더 가벼운 폰트 가중치 */
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-spacing: 0.05em;
    color: var(--color-text-light);
    /* 텍스트 그림자 제거 */
    /* 클램핑 속성 유지 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 최대 2줄로 제한 */
    line-clamp: 2; /* 표준 속성 추가 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    max-width: 700px; /* 텍스트 너비 제한 */
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 하단에 미묘한 라인 추가 */
    padding-bottom: var(--spacing-sm); /* 라인과 텍스트 사이 간격 */
}

/* AI-GENERATED: 히어로 부제목 스타일 - 심플하고 모던하게 */
.hero__subtitle {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md); /* 간격 약간 증가 */
    color: var(--color-text-light);
    font-weight: 300; /* 더 가벼운 폰트 가중치로 모던함 강조 */
    opacity: 0.85;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* 텍스트 너비 제한 조정 */
    /* 텍스트 그림자 제거 */
    letter-spacing: 0.03em; /* 자간 약간 늘려서 더 모던하게 */
    padding-top: var(--spacing-sm);
}

/* AI-GENERATED: 히어로 버튼 그룹 스타일 - 심플하고 모던하게 */
.hero__buttons {
    display: flex;
    gap: 16px; /* 간격 약간 확대 */
    margin-top: var(--spacing-md); /* 여백 늘려서 여유롭게 */
    justify-content: center;
    flex-wrap: wrap;
}

/* AI-GENERATED: 히어로 이미지 컨테이너 스타일 개선 */
.hero__image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) 0; /* 상하 여백만 적용 */
    position: relative;
    transform: translateY(-10px); /* 약간 위쪽으로 이동하여 디자인 대비 증가 */
}

/* AI-GENERATED: 히어로 이미지 스타일 개선 */
.hero__img {
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* 더 부드러운 그림자 */
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    transform: perspective(1000px) rotateY(-5deg); /* 3D 효과로 다이나믹한 느낌 추가 */
}

.hero__img:hover {
    transform: perspective(1000px) rotateY(0deg); /* 호버 시 원래 각도로 복귀 */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); /* 그림자 약간 강화 */
}

/* 과편, 맛과 멋 섹션 */
/* AI-GENERATED: 비디오 배경 관련 스타일 */
.hero__video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* 콘텐츠보다 뒷쪽에 위치 */
}

/* AI-GENERATED: 비디오 순환을 위한 스타일 - 색상 통일 및 더 부드러운 전환 */
.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    opacity: 0; /* 기본적으로 숨김 */
    transition: opacity 2s ease-in-out; /* 페이드 효과 시간 증가 (1초에서 2초로) */
    z-index: 0;
    /* 비디오 통일성을 위한 추가 스타일 */
    will-change: opacity; /* 성능 최적화 */
}

/* 현재 재생 중인 비디오 - 더 부드러운 표시 */
.hero__video.current {
    opacity: 1;
    z-index: 1;
    /* 전환 시 더 부드러운 표시를 위한 추가 속성 */
    transition: opacity 2.5s ease-in-out; /* 현재 비디오는 조금 더 긴 페이드 아웃 */
}

/* AI-GENERATED: 비디오 오버레이 - 색상 통일성을 위한 개선 */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 반투명 오버레이 + 그라디언트로 일관된 느낌 추가 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.25) 100%);
    z-index: 1; /* 비디오 위에 오버레이 */
}

.about-gwapyeon {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-xl) 0;
}

.about-gwapyeon__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl); /* 더 넓은 간격 */
    align-items: center;
    margin: var(--spacing-lg) 0; /* 상하 여백 추가 */
}

.about-gwapyeon__text,
.about-gwapyeon__image {
    flex: 1;
    min-width: 300px;
    position: relative; /* 상대 위치 지정 */
}

/* AI-GENERATED: 텍스트 정렬 문제 해결 - 패딩 제거 */
.about-gwapyeon__text {
    padding: 0; /* 모든 패딩 제거 */
    text-align: justify; /* 텍스트 양쪽 정렬 */
    display: flex;
    flex-direction: column;
    width: 100%; /* 너비 최대화 */
}

.about-gwapyeon__image {
    display: flex;
    justify-content: center; /* 이미지 중앙 정렬 */
    align-items: center;
    overflow: hidden; /* 넘치는 요소 숨김 */
}

.about-gwapyeon__img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* 더 부드러운 그림자 */
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    transform: scale(1.02); /* 약간 확대 */
}

.about-gwapyeon__img:hover {
    transform: scale(1.0); /* 원래 크기로 복귀 */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); /* 그림자 강화 */
}

.about-gwapyeon__paragraph {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md); /* 폰트 크기 조정 */
    line-height: 1.8; /* 줄간격 증가 */
    color: var(--color-text-body);
    opacity: 0.9; /* 약간 투모한 텍스트 */
}

/* 이야기보따리 섹션 */
.our-story {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-xl) 0; /* 더 여유로운 상하 패딩 */
    position: relative;
    overflow: hidden; /* 넘치는 요소 숨김 */
}

.our-story::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background-color: rgba(211, 209, 188, 0.2); /* --color-highlight-green 값을 투모하게 */
    border-radius: 50%;
    transform: translate(100px, -150px);
    z-index: 0;
}

.our-story__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 800px;
    margin: var(--spacing-lg) auto 0;
    position: relative;
    z-index: 1; /* 배경 요소보다 위에 오도록 */
}

.our-story__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 1px;
    height: 100%;
    background-color: var(--color-divider);
    opacity: 0.5;
    z-index: -1;
}

.our-story__subtitle {
    margin-bottom: var(--spacing-sm);
    color: var(--color-accent-primary);
    font-size: var(--font-size-lg);
    font-weight: 500;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block; /* 밑줄 효과를 위해 */
}

.our-story__subtitle::after {
    content: '';
}

.our-story__item {
padding: var(--spacing-md);
background-color: var(--color-bg-primary);
border-radius: var(--border-radius-md);
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 맛자랑 섹션 */
.signature-menu {
padding: var(--spacing-xl) 0;
background-color: var(--color-bg-primary);
}

.signature-menu__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
}

.menu-item {
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-medium);
}

.menu-item:hover {
    transform: translateY(-5px);
}

/* AI-GENERATED: 메뉴 이미지 영역을 인스타그램처럼 정사각형 비율로 변경 */
.menu-item__image {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 비율(정사각형) */
    overflow: hidden;
}

/* AI-GENERATED: 정사각형 컨테이너에 맞게 이미지 스타일 수정 */
.menu-item__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 제품을 중앙에 위치시킴 */
    transition: transform var(--transition-medium);
}

.menu-item:hover .menu-item__img {
    transform: scale(1.05);
}

.menu-item__content {
    padding: var(--spacing-md);
}

.menu-item__title {
    margin-bottom: var(--spacing-xs);
    color: var(--color-accent-primary);
}

.menu-item__description {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.menu-item__price {
    font-weight: 700;
    color: var(--color-text-heading);
}

/* 마음 담은 꾸러미 섹션 */
.gift-sets {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-secondary);
}

.gift-sets__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
}

.gift-sets__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.gift-item {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-medium);
}

.gift-item:hover {
    transform: translateY(-5px);
}

.gift-item__title {
    color: var(--color-accent-primary);
    margin-bottom: var(--spacing-sm);
}

.gift-item__description {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.gift-item__price {
    font-weight: 700;
    color: var(--color-text-heading);
}

.gift-sets__info {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--color-highlight-peach);
    border-radius: var(--border-radius-md);
}

/* 쉬어가는 마루 섹션 */
.cafe-interior {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-primary);
}

.cafe-interior__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
}

/* AI-GENERATED: 단순하고 안정적인 갤러리 레이아웃 */
.cafe-interior__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}

/* AI-GENERATED: 갤러리 아이템 스타일 수정 - 정사각형 비율 적용 */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-medium);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    aspect-ratio: 1/1; /* 정사각형 비율 적용 */
}

/* AI-GENERATED: 갤러리 이미지 효과 개선 */
.gallery-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: brightness(0.95);
}

.gallery-item:hover .gallery-item__img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.gallery-item:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* AI-GENERATED: 갤러리 단순화된 반응형 레이아웃 */
@media screen and (max-width: 1024px) {
    .cafe-interior__gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .cafe-interior__gallery {
        grid-template-columns: 1fr;
    }
}

/* 오시는 길 & 여는 시간 섹션 */
.location-hours {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-secondary);
}

.location-hours__content {
    display: flex;
    gap: var(--spacing-lg);
}

.location-hours__info {
    flex: 1;
}

.location-hours__map {
    flex: 1;
    height: 400px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.info-item {
    margin-bottom: var(--spacing-md);
}

.info-item__title {
    color: var(--color-accent-primary);
    margin-bottom: var(--spacing-xs);
}

.info-item__text {
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.info-item__subtext {
    font-size: var(--font-size-xs);
    color: var(--color-text-body);
}

/* 함께하는 이야기 섹션 */
.contact {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-primary);
}

.contact__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
}

.contact__methods {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

.contact-item {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    text-align: center;
    flex: 1;
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.contact-item__title {
    color: var(--color-accent-primary);
    margin-bottom: var(--spacing-sm);
}

.contact-item__text {
    margin-bottom: var(--spacing-md);
}

/* 푸터 섹션 */
.footer {
    background-color: var(--color-accent-primary);
    color: var(--color-text-light);
    padding: var(--spacing-lg) 0;
}

.footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* AI-GENERATED: 푸터 로고 스타일 개선 */
.footer__logo {
    width: 100px;
    margin-bottom: 1.5rem;
}

.footer__logo-img {
    filter: brightness(0) invert(1); /* 로고를 흔색으로 변경 */
    max-width: 100%;
    height: auto;
}

.footer__info {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.footer__social {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.footer__social-link {
    color: var(--secondary-text-color);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.footer__social-link:hover {
    color: var(--primary-color);
}

.footer__copyright {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* AI-GENERATED: 전체 메뉴판 모달 스타일 */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: block;
    opacity: 1;
}

.modal__content {
    position: relative;
    background-color: #fff;
    margin: 5vh auto;
    padding: 0;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(-30px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal.show .modal__content {
    transform: translateY(0);
}

.modal__header {
    padding: 1.5rem 2rem;
    background-color: #fff;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 2px solid #eee;
}

.modal__title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #333;
    position: relative;
    text-align: center;
    width: 100%;
}

.modal__close {
    background: transparent;
    border: none;
    color: #666;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: transform 0.2s ease;
    position: absolute;
    right: 20px;
}

.modal__close:hover {
    transform: scale(1.1);
}

.modal__body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 80px);
    background-color: #fff;
}

.menu-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    padding: 0 1rem;
}

.menu-category {
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
}

.menu-category:last-child {
    border-bottom: none;
}

.menu-category__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.menu-category__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.8rem;
    padding: 0.4rem 0;
    transition: background-color 0.2s ease;
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px dotted #eee;
}

.menu-category__item:hover {
    background-color: #f9f9f9;
}

.menu-item__name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    flex: 1 0 60%;
    color: #333;
}

.menu-item__description {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.2rem;
    flex: 1 0 100%;
    line-height: 1.3;
}

.menu-item__price {
    font-weight: 600;
    color: #333;
    text-align: right;
    flex: 0 0 auto;
    font-size: 0.95rem;
    background-color: transparent;
    padding: 0;
}

.menu-tag {
    display: inline-block;
    font-size: 0.7rem;
    background-color: #f0f0f0;
    color: #666;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: normal;
    vertical-align: middle;
}

/* AI-GENERATED: 전체 메뉴판 버튼 스타일 */
/* AI-GENERATED: 플로팅 메뉴 버튼 스타일 */
.full-menu-btn {
    position: fixed;
    bottom: 80px; /* 위치 조정하여 바다유림 버튼을 가리지 않도록 함 */
    right: 30px;
    background-color: var(--color-accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.9rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-align: center;
}

.full-menu-btn:hover {
    background-color: #8b4513;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .modal__content {
        width: 95%;
        margin: 3vh auto;
    }
    
    .modal__header {
        padding: 1rem 1.5rem;
    }
    
    .modal__body {
        padding: 1rem 1.5rem;
    }
    
    .menu-category__item {
        padding: 0.6rem;
    }
    
    /* AI-GENERATED: 모바일에서 플로팅 메뉴 버튼 위치 조정 */
    .full-menu-btn {
        bottom: 70px; /* 모바일에서 위치 조정하여 바다유림 버튼을 가리지 않도록 함 */
        right: 20px;
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
        border-radius: 6px;
    }
}

@media (max-width: 1024px) {
    :root {
        --font-size-xxl: 2.2rem;
        --font-size-xl: 1.8rem;
        --font-size-lg: 1.4rem;
    }
    
    .hero__container, .about-gwapyeon__content, .location-hours__content {
        flex-direction: column;
    }
    
    /* AI-GENERATED: 모바일에서 지도 영역 높이 설정 */
    /* AI-GENERATED: 모바일 지도 위치/크기/여백/레이아웃 보정 */
    .location-hours__map {
        width: 100% !important;
        max-width: 100vw !important;
        height: 400px !important;
        min-height: 340px !important;
        max-height: 480px !important;
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: var(--border-radius-md);
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        display: block !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    .hero__image {
        justify-content: center;
        margin-top: var(--spacing-md);
    }
    
    .contact__methods {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-item {
        width: 100%;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-xxl: 2rem;
        --font-size-xl: 1.6rem;
        --font-size-lg: 1.3rem;
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
    }
    
    .section-container {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .header__nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-bg-primary);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .header__nav-menu.active {
        display: flex;
    }
    
    .header__nav-toggle {
        display: block;
    }
    
    .header__nav-toggle.active .header__nav-toggle-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .header__nav-toggle.active .header__nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    
    .header__nav-toggle.active .header__nav-toggle-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* AI-GENERATED: 모바일에서 히어로 섹션 개선 */
    .hero {
        padding-top: 60px;
    }
    
    /* 모바일에서 히어로 콘텐츠 사이즈 및 여백 조정 */
    .hero__content {
        max-width: 85%;
        width: 85%;
        padding-top: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    /* 모바일에서 로고 사이즈 조정 */
    .hero__logo {
        max-width: 130px;
        margin-bottom: 0.8rem;
    }
    
    /* 모바일에서 제목 텍스트 조정 */
    .hero__title {
        font-size: 1.3rem;
        line-height: 1.3;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        max-height: 2.6em;
        max-width: 100%;
    }
    
    /* 모바일에서 부제목 조정 */
    .hero__subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 90%;
    }
    
    .hero__buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn {
        width: 100%;
    }
    
    .signature-menu__grid, .gift-sets__grid, .cafe-interior__gallery {
        grid-template-columns: 1fr;
    }
    
    .footer__container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer__logo, .footer__social {
        justify-content: center;
    }
}