/* 기본 리셋 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* 🏁 전역 스크롤 바 시각적 숨김 (기능은 유지, 내부 컨테이너 포함) */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 버튼, 입력창 등 폼 요소는 명시적으로 상속 설정이 필요함 */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 전체 폰트를 'Dongle'로 통일 */
    font-size: 16px; /* 거대했던 동글 폰트 기준값을 일반 웹표준(16px)으로 초기화 */
    line-height: 1.2;
    background-color: #f0f0f0; 
    color: #222;
}

/* 
 * 1. 앱 컨테이너 
 * 최대 가로길이를 1024px로 고정하고, 브라우저 화면 중앙에 오도록 배치합니다.
 */
.app-container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* 경계 구분을 위한 가벼운 그림자 부여 */
    overflow-x: hidden; /* 혹시라도 자식의 거대한 이미지가 1024px 밖으로 화면을 찢고 나가는(가로 스크롤) 현상을 원천 차단 */
}

/* ========= 2. 헤더 및 네비게이션 영역 ========= */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #eaeaea; /* 헤더 구분선 */
}

/* 중앙 빈 공간은 flex: space-between 설정에 의해 가운데에 자동 발생하므로 생략 */

/* 로고 래퍼 (요청 사항에 따라 가로 너비 25% 비율 할당) */
.logo-wrapper {
    width: 25%;
    /* aspect-ratio를 통해 브라우저가 자동으로 가로너비에 맞춰 
       높이를 (가로의 1/2) 비율로 계산하여 유지시킵니다. (종횡비 2:1) */
    aspect-ratio: 2 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 공간 안에서 비율이 깨지지 않게 맞춤설정 */
}

/* PC 화면 (640px 초과 시) 기본 활성화 요소 세팅 */
.menu-toggle-btn, .close-menu-btn, .nav-overlay {
    display: none; /* 토글 햄버거 메뉴 및 배경색 어둡게 하는 영역은 숨킵니다 */
}

.nav-links {
    display: flex;         /* PC에서는 메뉴가 펼쳐진 상태로 나열됩니다 (가로 정렬) */
    list-style: none;
    gap: 1.5rem;          /* 각 전환 버튼들 사이를 띄웁니다 */
}

.nav-switch-btn {
    background: transparent;
    border: none;
    font-size: 1.2rem; /* PC 환경: 사용자 요청에 따른 크기 축소 */
    font-weight: 600;
    cursor: pointer;
    color: #333;
    transition: color 0.2s ease;
}

.nav-switch-btn:hover {
    color: #4a90e2; /* 마우스 올렸을 때의 변화 컬러 */
}

/* 640px 이하 모바일 대응: 토스트 사이드 드로어 메뉴 처리 (왼쪽에서 넘어오는 방식) */
@media (max-width: 640px) {
    /* 모바일에서는 햄버거 토글 버튼(가로/세로 똑같은 정사각형 모양)만 노출 시킵니다 */
    .menu-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px; 
        height: 40px; 
        background-color: #222;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    /* 햄버거 선(라인 아이콘) 디자인 */
    .hamburger-box {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #fff;
        position: relative;
    }
    .hamburger-box::before, .hamburger-box::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff;
        left: 0;
    }
    .hamburger-box::before { top: -6px; }
    .hamburger-box::after { bottom: -6px; }

    /* 드로어 메뉴 창의 위치를 강제로 화면 왼쪽 밖(-300px)으로 뺌 (초기 상태 숨겨짐) */
    .page-nav {
        position: fixed;
        top: 0;
        left: -300px; /* 창을 화면의 좌측 바깥쪽으로 숨킵니다 */
        width: 250px;
        height: 100%;
        background-color: #fff;
        z-index: 1000;
        transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); /* 튀어나오는 슬라이드 애니메이션 효과 */
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    /* JS에서 .open 클래스 활성화 시 원래 위치(left:0)로 튀어 나옴 */
    .page-nav.open {
        left: 0; 
    }

    .close-menu-btn {
        display: block;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 1rem;
        text-align: right;
        width: 100%;
    }

    .nav-links {
        flex-direction: column; /* 메뉴 항목 리스트를 세로 방향으로 정렬시킵니다 */
        padding: 0 1.5rem;
    }

    .nav-switch-btn {
        font-size: 1.2rem; /* 모바일 환경: 사용자 요청 크기 조정 */
        padding: 1rem 0;
        display: block;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #f0f0f0; /* 모바일 메뉴 구분선 */
    }

    /* 토스트 창 노출 시 화면 전체 배경을 어둡게 까는 반투명 오버레이 요소 */
    .nav-overlay.open {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
}

/* ========= 3. 메인 배너 영역 (Main Banner) ========= */
.banner-section {
    width: 100%;
}

.banner-container {
    width: 100%;
    /* 너비의 60% 높이 비율을 유지시키기 위해 종횡비를 5:3으로 강제 유지시킴 */
    aspect-ratio: 5 / 3; 
    position: relative;
    overflow: hidden; /* 영역 가로/세로 밖으로 넘쳐 흐르는 이전, 다음 이미지를 숨깁니다 */
    background-color: #f7f7f7;
}

/* 여러 이미지 요소들을 감싸는 궤도 (사용자 임의 스와이프 원천 봉쇄) */
.banner-track {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden; /* 시스템 휠/드래그 스크롤링 철벽 차단 */
    scroll-behavior: smooth; /* JS scrollTo 시에만 부드럽게 이동 */
}

/* 화면 내부의 실제 배너 이미지 */
.banner-img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    flex-shrink: 0; 
    -webkit-user-drag: none; /* 드래그 이미지 잔상 방지 (순수 클릭만 감지되게 세팅) */
}

/* 🏁 신규: 양 끝단 100% 넓이 투명 버튼 타겟 영역 (인스타 스토리 방식) */
.banner-nav {
    position: absolute;
    top: 0;
    width: 20%; /* 화면 양 끝 20% 공간을 버튼으로 할당 */
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: transparent; /* 배경 투명 */
    -webkit-tap-highlight-color: transparent; /* 모바일 깜빡임 방지 */
}
.banner-nav.prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 2rem; /* 화면 끝에 바짝 붙지 않도록 적당히 띄움 */
}
.banner-nav.next {
    right: 0;
    justify-content: flex-end;
    padding-right: 2rem;
}

/* 시각적인 단서: 반투명 블랙 원형 화살표 아이콘 */
.nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    background-color: rgba(0, 0, 0, 0.15); /* 배너 사진을 가리지 않게 아주 연하게 */
    color: white;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    opacity: 0.6; /* 평소엔 눈에 잘 띄지 않음 */
    transition: all 0.3s ease;
}
.nav-arrow svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* 엣지 호버/클릭 시 화살표가 선명해지며 동작 피드백 */
.banner-nav:hover .nav-arrow,
.banner-nav:active .nav-arrow {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
}

/* 🏁 신규: 메인 배너 하단 0px 밀착 진행 상태창 (Progress Navigation Bar) */
.banner-progress-bar {
    display: flex;
    width: 100%;
    height: 8px; /* 가시성 강화를 위해 4px -> 8px 로 두께 상향 */
    background-color: transparent;
    margin: 0;
    padding: 0;
}

/* 개별 등분 구획 단위 */
.progress-segment {
    flex: 1; /* 구획 개수만큼 화면 전체 너비를 정확한 공배수로 분할 */
    height: 100%;
    background-color: #bbd4e5; /* 유저 요청: 켜지지 않은 상태를 밝은 파란색으로 지정 */
    position: relative;
    cursor: pointer;
    margin-right: 1px; /* 구획간의 경계선(1px) 부여 */
}
.progress-segment:last-child {
    margin-right: 0; 
}

/* 시간이 지나며 서서히 차오르는 액티브 딥블루 막대기 */
.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; 
    background-color: #0e3a5b; /* 시그니처 컬러 할당 */
}

/* JavaScript에서 active 클래스를 부여하면, 너비가 100%가 되기까지 5초의 시간을 태움 */
.progress-segment.active .progress-fill {
    width: 100%;
    transition: width 5s linear; 
}

/* ========= 4. 브랜드 스토리 섹션 (Brand Story) ========= */
.brand-story-section {
    width: 100%;
    padding: 80px 20px;
    background-color: #fff;
    text-align: center;
    /* 초기 상태: 애니메이션 실행 전 투명 및 아래 배치 */
    opacity: 0;
    transform: translateY(40px);
    transition: none; /* fade-in-section의 기본 트랜지션 대신 전용 애니메이션 사용 */
}

/* 로고 박스 디자인 */
.brand-story-logo {
    margin-bottom: 30px;
}

.brand-story-logo img {
    max-width: 125px; /* 프리미엄 쇼핑몰의 세련된 크기 */
    height: auto;
    opacity: 0.85;
}

/* 브랜드 슬로건 텍스트 디자인 */
.brand-story-text {
    max-width: 850px;
    margin: 0 auto;
}

.brand-story-text p {
    font-size: 1.4rem; /* 프리텐다드 기준: 데스크탑 세련된 사이즈로 조율 */
    line-height: 1.1;
    color: #0e3a5b; /* 시그니처 블루는 유지 */
    margin-bottom: 1.5rem;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 통일감 부여 */
    font-weight: 400;
    word-break: keep-all;
    letter-spacing: 0.8px;
}

/* 🏁 Bottom-Up 애니메이션 엔진 (신규 추가) */
.brand-story-section.is-visible {
    animation: amuredoSlideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s; /* 스크롤 위치 도달 시 약간의 시차를 두고 등장 */
}

@keyframes amuredoSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모바일 전용 여백 조정 */
@media screen and (max-width: 640px) {
    .brand-story-section {
        padding: 60px 1.5rem;
    }
    .brand-story-text p {
        font-size: 1.05rem;
    }
}

/* ========= 5. 베스트 아이템 영역 (Item Cards) ========= */
.best-items-section {
    width: 100%;
    /* 상단 10px, 하단 10px로 고정하여 섹션 간 간격 통일 */
    padding: 10px 1.5rem 10px 1.5rem; 
    background-color: #fff;
}

/* 서브 타이틀 공통 스타일 */
.section-subtitle {
    text-align: center; /* 유저 요구사항: 중앙 정렬 */
    font-size: 1.5rem; /* 텍스트가 길어졌으므로 살짝 조정 */
    font-weight: 800;
    margin-bottom: 2.5rem;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 2.2px; /* 깔끔한 모던 쇼핑몰 연출 (자간 증가) */
}

/* 🏁 신규: 베스트 섹션 전용 2매 이미지 스와이프 배너 (600px 제한) */
.best-banner-container {
    max-width: 600px;
    margin: 0 auto 2.5rem; /* 중앙 정렬 및 선글라스 그리드와의 간격 */
    overflow: hidden;
    border-radius: 8px; /* 모던한 라운딩 */
}

.best-banner-track {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE, Edge */
}

.best-banner-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.best-banner-track.active-drag {
    scroll-snap-type: none; /* 마우스 드래그 중 스냅 일시 해제 */
    cursor: grabbing;
}

.best-banner-img {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    object-fit: cover;
    pointer-events: none;
}

/* 아이템 가로 스와이프 그리드 배치 시스템 (1행 무한 둘러보기) */
.item-grid-container {
    display: flex; /* 가로 1행 배치를 위해 Flex 사용 */
    flex-wrap: nowrap; /* 무조건 한 줄로만 배치 */
    overflow-x: auto; /* 가로 스크롤 활성화 */
    scroll-snap-type: x mandatory; /* 카드별 딱딱 끊어지는 스냅 부여 */
    gap: 1.5rem; /* 각 상품 카드 사이의 공백(간격) */
    padding: 0 10px 1rem 10px; /* 좌측 아이템 정렬 선 맞춤 및 하단 숨통 확보 */
    scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
    -webkit-overflow-scrolling: touch;
}

/* 크롬, 사파리 스크롤바 숨김 */
.item-grid-container::-webkit-scrollbar {
    display: none;
}

.item-grid-container.active-drag {
    scroll-snap-type: none; /* 드래그 중인 경우 스냅 방해 해제 */
    cursor: grabbing;
}

/* 개별 아이템 카드 루트 */
.item-card {
    flex: 0 0 calc(45%); /* 모바일: 한 줄에 2개 정도 걸치도록 설정 */
    display: flex;
    flex-direction: column;
    scroll-snap-align: center; /* 스냅 고정 포인트 */
    min-width: 0; 
}

/* 1. 이미지 컨테이너 (정사각형 1:1 비율 강제 규격 유지) */
.item-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* 사진의 가로/세로 비율 1:1 강제 지정 */
    overflow: hidden;    /* 튀어나가는 부분 자르기 */
    background-color: #fafafa;
    cursor: pointer;     /* 이미지를 클릭할 수 있음을 표시(손가락) */
    margin-bottom: 1rem;
    border-radius: 4px;  /* 날카롭지 않게 살짝 둥글림 (선택적) */
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 1:1 상자에 꽉 차도록 세팅 */
    transition: transform 0.3s ease;
}

/* 감성적인 애니메이션: 사진을 Hover 시 미세하게 커지는 팝업 효과 */
.item-image-wrapper:hover .item-image {
    transform: scale(1.05); 
}

/* 2. 상품명 (string) */
.item-name {
    font-size: 1.0rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.4rem;
    cursor: pointer; /* 상품명 텍스트도 클릭할 수 있음을 표시 */
    transition: color 0.2s;
    /* 글자가 너무 길면 줄바꿈 대신 말줄임표(...) 표시 (필요시) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-name:hover {
    color: #4a90e2; /* 클릭 인식을 돕기 위해 타이틀 색상 변환 피드백 */
}

/* 3. 상품 가격 (string) */
.item-price {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
}

/* *특이사항 알림: 
   화면이 모바일(640px 이하) 환경 등 협소해지더라도 요구사항을 최우선으로 준수하기 위해 
   그리드를 1열 혹은 2열로 축소시키지 않고 가로 스와이프 체제로 모바일에서도 그대로 락다운(Fixed) 합니다. 
*/

@media screen and (min-width: 641px) {
    .item-card {
        flex: 0 0 calc(24%); /* PC: 한 줄에 4개 정도 정갈하게 배치 */
    }
    .section-subtitle {
        font-size: 1.5rem;
        padding-left: 0;
        margin-left: 0; /* PC에서는 컨테이너 마진이 있으므로 기본값 활용 가능 */
    }
}

/* ========= 6. 상세 카테고리 (itemList) 전용 그리드 UI ========= */

/* 🏁 상품 리스트 페이지 조회/필터 박스 영역 */
.filter-container {
    text-align: right; /* 요구사항: 우측 정렬 */
    padding: 0 1.5rem; /* 그리드의 측면 여백과 시각적 안정감을 맞춤 */
    margin-bottom: -1rem; /* 하단 타이틀과의 간격을 좁혀 밀착도 상향 */
}

.filter-label {
    font-size: 1.0rem; /* 메인 기준 폰트 크기 변경에 따른 동기화 */
    color: #444;       
    margin-right: 0.6rem;
    font-weight: 500;
}

.filter-select {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem; /* 메인 폰트 축소에 맞춰 사이즈 다운 */
    font-family: inherit;
    border: 1px solid #ccc; /* 깔끔하고 얇은 테두리 */
    border-radius: 4px; /* 살짝 부드러운 박스 각도 */
    background-color: #fff;
    color: #111;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.filter-select:focus,
.filter-select:hover {
    border-color: #0e3a5b; /* 마우스 오버 시 브랜드 색상 피드백 */
}

/* 페이지 상단 타이틀 (sunglasses 등) */
.category-page-title {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.8rem;     /* 메인 서브타이틀(1.5rem) 기조에 맞추되 해당 페이지의 메인 간판이므로 약간의 크기 보전 */
    text-align: center;
    color: #0e3a5b;       /* 시그니처 블루 적용 */
    margin: 2.5rem 0 1.5rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: capitalize; 
}

/* ======= Flexbox 기반 반응형 레이아웃 (Grid 버그 절대 불가) ======= */
.category-grid-container {
    display: flex;
    flex-wrap: wrap; /* 자리가 꽉 차면 다음 줄로 무조건 넘김 */
    row-gap: 20px;   /* 위아래 행 간격 20px */
    column-gap: 0px; /* 좌우 열 사이 여백 없이 밀착시킴 */
    width: 100%;
}

/* PC 등 큰 화면: 무조건 3열 고정 (33.333%) */
.category-item-card {
    display: flex;
    flex-direction: column;
    /* flex basis를 정확히 3등분하여 할당, 거대한 사진도 이 범위를 찢지 못함 */
    flex: 0 0 calc(100% / 3); 
    max-width: calc(100% / 3);
}

/* 모바일 사이즈 (640px 이하): 사진 3개가 너무 작아지는 걸 방지하기 위해 예쁘게 2열(50%)로 확장 */
@media screen and (max-width: 640px) {
    .category-item-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ------------------------------------------------------------- 
   사진 영역 (1:1 종횡비율 고정 - 가장 안전한 padding hack 기법) 
-------------------------------------------------------------- */
.category-image-wrapper {
    position: relative;
    width: 100%;
    /* 가로폭 100%에 대한 세로 높이 100%를 여백으로 강제 확보하여 1:1 보장 */
    padding-bottom: 100%; 
    overflow: hidden;
    cursor: pointer;
    background-color: #fafafa;
}

/* 실제 이미지 출력 (absolute로 부모의 1:1 박스 안에 완전히 갇히게 만듦) */
.category-image {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
    transition: filter 0.3s ease;
}

/* 가벼운 호버 효과 제공 */
.category-image-wrapper:hover .category-image {
    filter: brightness(0.85); 
}

/* ------------------------------------------------------------- 
   미니멀 하단 텍스트 영역 (Minimal Bottom UI)
-------------------------------------------------------------- */
.category-info-wrapper {
    width: 100%;
    /* 사진 바로 밑에 살짝 띄워서 분리감 제공 */
    padding: 0.6rem 0.2rem; 
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* 고급스러움을 위해 텍스트 중앙 정렬 유지 */
    text-align: center; 
}

/* 상품명 텍스트 (모던하고 시원하게) */
.category-item-name {
    font-size: 1.0rem; /* 메인 1.0rem 과 완벽히 동기화 */
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    /* 글자가 모바일 폭을 넘치면 줄임표(...) 처리 */
    text-overflow: ellipsis; 
    margin: 0;
}

/* 가격 텍스트 (가독성을 고려해 1.2rem으로 상향) */
.category-item-price {
    font-size: 0.8rem; /* 메인 0.8rem 과 완벽 지정 */
    font-weight: 500;
    color: #555;
    margin: 0;
    /* 은은한 자간 증가 */
    letter-spacing: 0.5px;
}

/* ========= 7. 상품 상세 페이지 (Item Detail) ========= */
.detail-content {
    padding-top: 3rem;
    padding-bottom: 5rem;
    background-color: #fff;
}

/* 유저 요구사항: 상단 이미지 마진 좌우 10px로 고정 */
.detail-slider-container {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* 스크롤 스냅이 걸리는 핵심 궤도 (가로 스와이프존) */
.detail-slider-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* 가로 방향 칸 맞춤 */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS 스무스 스크롤 지원 */
    width: 100%;
    scrollbar-width: none; /* 파이어폭스 우측/하단 스크롤바 숨김 */
}
/* 크롬, 사파리 등 스크롤바 숨김 */
.detail-slider-track::-webkit-scrollbar {
    display: none;
}
/* 드래그 중에는 스냅 보정 일시해제(편안한 이동) */
.detail-slider-track.active-drag {
    scroll-snap-type: none;
    cursor: grabbing;
}

/* 개별 슬라이드 (가로 1칸) */
.detail-slide {
    flex: 0 0 100%; /* 무조건 화면 가로 너비 1칸 전부 꽉 채움 */
    scroll-snap-align: center; /* 터치를 멈추면 자석처럼 중앙으로 확 달라붙음 */
    padding: 0 10px; /* 요구사항: 좌우 마진 느낌의 10px 공간 확보 */
}

/* 1:1 사진 박스 래핑 (비율 깨짐 안전기법) */
.detail-image-box {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 정방형 규격 확정 */
    background-color: #fafafa;
    border-radius: 4px; /* 모던한 라운딩 옵션 */
    overflow: hidden;
}

.detail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* PC 마우스 드래그를 조작할 때 사진 잔상이 끌려나오는 Ghost 현상 원천방지 */
}

/* 하단 진행상태 페이징 도트(Dots) */
.detail-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.detail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    border: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding: 0;
    cursor: pointer;
}

/* 활성화 된 닷 디자인 */
.detail-dot.active {
    background-color: #111;
    transform: scale(1.3); /* 살짝 커지면서 존재감 부각 */
}

/* 하단 상세 정보 텍스트 (기본 모바일: 중앙 렌더링) */
.detail-info-area {
    padding: 2.5rem 10px 1rem 10px;
    text-align: center;
}

.detail-item-name {
    font-size: 2.0rem; /* 사용자 요청 반영: 메인 폼 타이틀 조율 */
    font-weight: 800;
    color: #111;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.detail-item-price {
    font-size: 1.0rem; /* 사용자 요청 반영 */
    font-weight: 500;
    color: #4a90e2; 
}

/* ==========================================================
   상품 코멘트 (모던 미니멀 라인 인용 디자인)
   ========================================================== */
.detail-item-desc {
    max-width: 90%; 
    margin: 2.5rem auto 2.5rem auto; /* 모바일: 수직 마진 정돈 */
    padding: 0.5rem 0 0.5rem 1.2rem; /* 좌측에 내용물과 라인 사이의 거리 확보 */
    color: #666; /* 부드러운 먹색으로 본문(제품명) 대비 가시성 하향 조정 (겸손한 코멘트) */
    font-size: 0.8rem; /* 사용자 요청 반영: 모바일 환경 축소 */
    line-height: 1.8; /* 자간을 넓혀 읽기 쾌적하게 구성 */
    font-style: italic; /* 프리텐다드의 세련된 이탤릭체 활용 */
    word-break: keep-all; 
    text-align: left; /* 좌측 선 라인 기준이기 때문에 좌측 정렬 고정 */
    
    /* 🏁 핵심 UI: 좌측 세로선 (아무레도 시그니처 딥블루 컬러 + 미세한 배경) */
    border-left: 3px solid #0e3a5b; 
    background-color: #fafafa;
    border-radius: 0 4px 4px 0; /* 우측만 아주 살짝 둥글게 */
}

/* ==========================================================
   PC 환경 (640px 초과) : 좌측 500px 이미지 / 우측 정보 텍스트 분할 UI
   ========================================================== */
@media screen and (min-width: 641px) {
    .detail-content {
        display: flex;
        flex-direction: row; /* 컨텐츠를 좌우로 가릅니다 */
        flex-wrap: wrap; /* 추가: 100% 크기의 연관 상품 섹션이 밑으로 줄바꿈 되도록 허용 */
        align-items: flex-start; /* 상단 라인을 깔끔하게 맞춥니다 */
    }

    /* 왼쪽 사진 영역 (유저 요구사항: 500px 고정 및 왼쪽 마진 10px) */
    .detail-left-column {
        width: 500px;
        flex: 0 0 500px;
        margin-left: 10px;
    }

    /* PC에서는 래퍼 자체가 10px 마진을 가지고 500px을 유지하므로 내부 이중 여백을 뺍니다 */
    .detail-slide {
        padding: 0;
    }

    /* 오른쪽 텍스트 정보 영역 (사용자 변경 요청: 좌측 정렬) */
    .detail-info-area {
        flex: 1; /* 남는 우측 공간을 모두 가져갑니다 */
        text-align: left; /* 상품명, 가격 등을 우측 구역 내 왼쪽으로 정렬 */
        padding: 0 1.5rem 0 2rem; /* 사진과 너무 붙지 않게 띄우고, 우측 벽과의 마진도 확보 */
    }

    /* 반응형 폭발: PC 모니터에서는 브랜드명이 2.0rem으로 웅장하게 확대됨 */
    .detail-item-name {
        font-size: 2.0rem; /* 사용자 요청 반영 (PC) */
        margin-bottom: 0.8rem;
    }
    
    /* PC 모드: 아이템 텍스트들과 열(Column) 맞춤 */
    .detail-item-desc {
        font-size: 1.0rem; /* PC 환경은 기존 1.0rem 기조 유지 */
        max-width: 100%;
        margin: 2.5rem 0; /* 우측 정렬 기준이므로 가로 마진 풀기 */
        padding: 0.6rem 0 0.6rem 1.5rem; /* PC 환경은 선과의 간격을 좀 더 시원하게 확장 */
        background-color: transparent; /* PC에서는 흰 벽에 선만 있는 깔끔함 추구 */
    }
}

/* ========= 8. About 페이지 전용 스타일링 ========= */
.about-main {
    width: 100%;
    margin-top: 0;
    padding-bottom: 5rem;
    background-color: #fff;
}

/* 1) 히어로 배너 섹션 (화면을 넓고 꽉 채우는 프리미엄 뷰) */
.about-hero {
    position: relative;
    width: 100%;
    height: 50vh; /* 모바일/PC 높이 50% 강제 할당 */
    min-height: 400px;
    background-color: #f8f8f8;
    overflow: hidden;
}

.about-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75); /* 텍스트 가독성을 위해 흰/검은색 톤다운 조율 */
}

/* 히어로 중앙 텍스트 컨테이너 */
.about-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 90%;
}

.about-hero-text h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 0.15em; /* 아이웨어 전문 브랜드처럼 확 트인 대문자 자간 */
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.about-hero-text p {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* 2) 철학(Philosophy) 서술 영역 - 극대화된 여백과 세련된 가독성 */
.about-philosophy {
    padding: 6rem 1.5rem;
    text-align: center;
    max-width: 800px; /* 너무 넓으면 문장 집중도가 떨어짐 */
    margin: 0 auto;
}

.about-philosophy h2 {
    font-size: 2.0rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 3.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* H2 제목 아래 디테일한 짧은 흑백 구분선 (명품 스타일 표방) */
.about-philosophy h2::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #222;
    margin: 1.5rem auto 0;
}

.philosophy-content p {
    font-size: 1.5rem;
    line-height: 2; /* 넉넉한 줄간격 허용 */
    color: #444;
    margin-bottom: 2.2rem;
    word-break: keep-all; /* 한글 단어 끊김 현상 완벽 방지 */
}

.philosophy-content .signature-text {
    font-family: 'Times New Roman', serif; /* 클래식한 이탤릭 디자인 서명 */
    font-style: italic;
    color: #888;
    margin-top: 4.5rem;
    font-size: 1.7rem;
}

/* ========= 7.5. 룩북 갤러리 (item_detail.html) ========= */
.lookbook-section {
    width: 100%;
    margin-top: 5rem;
    padding: 0 1.5rem; /* 모바일 대응 살짝 좌우 여백 */
}

.lookbook-subtitle {
    font-size: 2.0rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 2rem;
    text-align: center; /* 모바일은 중앙 라인업 선호 */
    letter-spacing: 0.1em;
}

/* 룩북 사진 나열 트랙 룸 */
.lookbook-track-container {
    width: 100%;
}

.lookbook-track {
    display: flex;
    flex-direction: column; /* 모바일 우선: 세로 단일행으로 1개씩 아래로 길게 나열 */
    gap: 2rem;
    align-items: center; /* 이미지들이 세로로 나열될 때 화면 중앙을 기준선으로 세움 */
}

/* 룩북 개별 사진 래퍼: 600px 제한 & 1:1 강제 보호구역 */
.lookbook-item {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f7f7f7;
    border-radius: 8px; /* 은은한 곡선 */
}

.lookbook-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 박스에 꽉 들어차며 넘치는 부분 은폐 */
    display: block;
}

/* 💻 데스크탑 / 태블릿 가로 모드 (768px 이상) -> Swipe 스크롤바 레이아웃 체인지 */
@media (min-width: 768px) {
    .lookbook-section {
        padding: 0;
        margin-top: 6rem; /* PC는 데스크탑 호흡에 따라 여백 상향 */
    }
    
    .lookbook-subtitle {
        text-align: center; /* 유저 요청: PC 환경에서도 룩북 타이틀 중앙 유지 */
    }
    
    .lookbook-track-container {
        /* 가로 스와이프/스크롤 허용 */
        overflow-x: auto;
        padding-bottom: 1.5rem; 
        
        /* Firefox 지원: 스크롤바 색상 및 두께 미리 지정 */
        scrollbar-width: thin;
        scrollbar-color: #0e3a5b #f0f0f0;
    }
    
    /* PC 브라우저(Chrome, Edge, Safari) 전용 휠 바 명시적 강제 출력 */
    .lookbook-track-container::-webkit-scrollbar {
        height: 10px; /* 기존 6px이 너무 얇을 수 있으므로 시인성 상향 */
        -webkit-appearance: none;
    }
    .lookbook-track-container::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }
    .lookbook-track-container::-webkit-scrollbar-thumb {
        background: #0e3a5b; /* 시그니처 모델 스크롤 */
        border-radius: 10px;
        border: 2px solid #f0f0f0; /* 내부 여백 효과를 위한 보더 세팅 */
    }

    .lookbook-track {
        flex-direction: row; /* 좌우 가로로 일렬로 쭉 세움 */
        flex-wrap: nowrap; /* 화면이 작아져도 아이템이 밑으로 떨어지지 않게 강제(가로 스와이프 조건) */
        gap: 1.5rem;
        align-items: flex-start;
    }
    
    .lookbook-item {
        /* PC 가로 모드에서 1개의 크기는 최대 500px, 제멋대로 줄어드는 현상(0) 방어 */
        flex: 0 0 auto; 
        width: 500px; /* 원하는 가로 크기로 조절. 사용자 요구인 최대 600px 이내 규격. */
        border-radius: 0; /* PC 환경에서는 명품 룩북처럼 엣지있는 직각 디자인이 트렌드입니다. */
    }
}

/* ========= 8. 네이버 구매 연동 버튼 (item_detail.html) ========= */
.naver-btn-wrapper {
    margin-top: 3.5rem;
    width: 100%;
    /* PC 모드: 버튼은 우측 정렬 유지 (원복) */
    text-align: right; 
}

.naver-store-btn {
    display: inline-block;
    background-color: transparent;
    color: #0e3a5b; /* 시그니처 폰트 컬러 */
    border: 2px solid #0e3a5b; /* 아웃라인 디자인 */
    padding: 0.8rem 2rem;
    font-size: 0.8rem; /* 사용자 재구성: 0.8rem으로 최소화 */
    font-weight: 700;
    cursor: pointer;
    /* 사용자 요구사항: 입체 효과 (3D Flat 박스 섀도우) */
    box-shadow: 4px 4px 0px #0e3a5b;
    transition: all 0.2s ease;
}

.naver-store-btn:hover {
    background-color: #0e3a5b;
    color: #fff;
    /* 호버 시 박스가 그림자 쪽으로 눌리는 입체적인 프레스 효과 */
    box-shadow: 0px 0px 0px #0e3a5b;
    transform: translate(4px, 4px);
}

.naver-store-btn:active {
    filter: brightness(0.9);
}

/* 640px 이하 모바일 환경: 디자인 중앙 정렬 오버라이딩 */
@media screen and (max-width: 640px) {
    .naver-btn-wrapper {
        text-align: center;
        margin-top: 2.5rem;
    }
}

/* ========= 9. JS 전용 마이크로 Fade-in 애니메이션 ========= */
/* 아래에서 위로 은은하게 등장하는 클래스 규칙 */
.fade-in-section {
    opacity: 0; 
    transform: translateY(30px); /* 출발점을 낮게 */
    transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Observer 트리거가 걸렸을 시 제자리 복귀 및 투명도 100% 반영 */
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========= 10. 상세 페이지 연관 아이템 스와이퍼 ========= */
/* 기본 컨테이너 여백 통제 영역: .detail-content 와 독립 */
.related-items-section {
    width: 100%;
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid #eee; /* 시각적 분리선 */
}

.related-subtitle {
    text-align: center;
    font-size: 2.0rem; /* 사용자 요청 반영 */
    font-weight: 700;
    margin-bottom: 2rem;
    color: #111;
    letter-spacing: 1px;
}

/* 스와이프를 허용할 래핑 보호구역 */
.related-track-container {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* 카드 스냅 활성화 */
    /* 스크롤바 모던화 숨김 처리 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.related-track-container::-webkit-scrollbar {
    display: none;
}

/* 실제 카드가 나열될 길쭉한 트랙 */
.related-track {
    display: flex;
    flex-wrap: nowrap; /* 절대로 다음 줄로 넘기지 않음 */
    gap: 1.5rem; /* 카드 사이의 여백 */
    padding-bottom: 1rem;
}

/* 개별 카드 프레임 (4개 초과 시를 고려한 1:4 분할 설계) */
.related-card {
    /* PC 환경 기본 1열 4분할 유지 (간격 1.5rem 분배분 차감) */
    flex: 0 0 calc(25% - 1.125rem); 
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start; /* 스와이프 시 멈추는 기준 포인트 */
    cursor: pointer;
    text-decoration: none; /* 혹시 모를 a태그 사용 대비 */
}

/* 첫 번째 카드에만 왼쪽 마진 10px 부여 (메인 사진 영역과 동일 선상 정렬) */
.related-card:first-child {
    margin-left: 10px;
}

.related-card-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f5f5f5;
    margin-bottom: 0.8rem;
}

.related-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-card-img-wrapper img {
    transform: scale(1.05); /* 사진 미세 줌 효과 피드백 */
}

/* 상품명 중앙 정렬 문자열 */
.related-card p.related-name {
    font-size: 1.0rem; /* 사용자 요청 반영 */
    color: #333;
    font-weight: 500;
    text-align: center;
    margin: 0;
    /* 긴 이름 자르기 줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; 
}

/* 모바일 분할 재설계 (화면이 좁으므로 1장에 여러 개를 구겨 넣지 않음) */
@media screen and (max-width: 768px) {
    .related-card {
        /* 스마트폰은 2개씩 보여주기 위해 % 수정 */
        flex: 0 0 calc(45%);
    }
}
/* ========= 11. 문의하기(Contact Us) 페이지 전용 스타일 ========= */
.contact-main {
    padding-top: 5rem;
    padding-bottom: 8rem;
    background-color: #fff;
    min-height: 100vh;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 1px; /* 글씨가 작아졌으므로 자간 살짝 압축 */
}

.contact-subtitle {
    font-size: 1.0rem;
    color: #666;
    text-align: center;
    margin-bottom: 3.5rem;
    word-break: keep-all;
}

/* 폼 그룹 레이아웃 */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.form-group label {
    font-size: 1.0rem;
    font-weight: 600;
    color: #222;
    padding-left: 0.2rem;
}

/* 입력 필드 공통 스타일 */
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 1.2rem 1rem;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.0rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #0e3a5b;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(14, 58, 91, 0.1);
}

/* 파일 업로드 디자인 */
.file-upload-wrapper {
    border: 2px dashed #eee;
    padding: 2.5rem 2rem;
    border-radius: 8px;
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* 커스텀 첨부 버튼 (강제 우선순위 상향) */
.contact-form .custom-file-label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #0e3a5b !important;
    color: #ffffff !important;
    padding: 0.7rem 2.0rem;
    font-size: 1.0rem;
    font-weight: 700;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(14, 58, 91, 0.2);
    min-width: 140px; /* 너비 약간 더 확보 */
    text-align: center !important;
}

.custom-file-label:hover {
    background-color: #1a4f7e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(14, 58, 91, 0.3);
}

#images {
    display: none; /* 실제 인풋은 완전히 숨김 */
}

.file-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.preview-item {
    position: relative;
    width: 90px; /* 약간 크기 상향 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}

/* 이미지 개별 삭제 버튼 (X) */
.btn-remove-file {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-color: #ff4d4d;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    transition: transform 0.2s ease;
}

.btn-remove-file:hover {
    background-color: #e60000;
    transform: scale(1.1);
}

.preview-item .file-name {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-top: 0.3rem;
}

.file-help-text {
    font-size: 0.8rem;
    color: #999;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* 동의 체크박스 커스텀 */
.consent-group {
    margin-top: 1rem;
}

.contact-form .checkbox-container {
    display: flex !important;
    align-items: center !important;
    position: relative;
    padding-left: 35px !important; /* 폰트가 작아졌으므로 체크박스 여백 조정 */
    cursor: pointer;
    font-size: 0.9rem;
    color: #444;
    user-select: none;
    line-height: 1.5;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 4px;
}

.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #0e3a5b;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 전송 버튼 (메인 로직 계승) */
.form-submit-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.submit-btn {
    background-color: #0e3a5b;
    color: #fff;
    border: none;
    padding: 1rem 4rem;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0px #08243a;
}

.submit-btn:disabled {
    background-color: #ccc;
    color: #f9f9f9;
    box-shadow: none;
    cursor: not-allowed;
    transform: none !important;
}

.submit-btn:not(:disabled):hover {
    background-color: #1a4f7e;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #08243a;
}

.submit-btn:not(:disabled):active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #08243a;
}

/* 모바일 폼 대응 */
@media screen and (max-width: 640px) {
    .contact-title {
        font-size: 1.5rem;
    }
    .contact-subtitle {
        font-size: 0.9rem;
    }
    .form-group label {
        font-size: 0.9rem;
    }
    .submit-btn {
        width: 100%;
    }
}

/* ========= 12. 공통 푸터 (Footer: 사업자 정보) ========= */
.main-footer {
    margin-top: 5rem;
    padding: 3rem 1.5rem 5rem;
    background-color: #fff;
    text-align: center;
}

.footer-divider {
    border: 0;
    border-top: 1px solid #eeeeee;
    margin-bottom: 2.5rem;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.footer-info {
    max-width: 600px;
    margin: 0 auto;
}

.footer-info p {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.8rem; /* 동글 폰트 특성상 1.2rem이 일반 폰트 12~13px 느낌 */
    color: #999999;
    margin-bottom: 0.3rem;
    line-height: 1.4;
    word-break: keep-all;
}

/* 모바일 푸터 대응 */
@media screen and (max-width: 640px) {
    .main-footer {
        margin-top: 3rem;
        padding: 2rem 1rem 4rem;
    }
    .footer-info p {
        font-size: 0.8rem;
    }
}