/* ==============================================
   order.css - 주문하기 페이지 전용 스타일
   ============================================== */

/* 1. 배경 설정: 1번 사진 + 어두운 틴트(오버레이) */
.order-page-container {
    text-align: center;
    padding: 100px 20px; /* 여백을 좀 더 시원하게 */
    min-height: 80vh; /* 화면을 꽉 채우는 느낌 */

    /* 배경 이미지와 검은색 반투명 막을 겹쳐서 글씨가 잘 보이게 함 */
    /* ★주의: 이미지 파일 경로가 정확한지 꼭 확인하세요! */
    background: linear-gradient(
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.65)
    ), url('/images/interior1.png');

    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 스크롤 해도 배경 고정 (고급짐) */

    color: #ffffff; /* 기본 글자색 흰색 */
}

/* 2. 제목 스타일 */
.order-page-container h2 {
    font-size: 3rem; /* 제목 더 크게 */
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5); /* 그림자로 가독성 확보 */
    letter-spacing: -1px;
}

/* 3. 설명글 & 영업시간 */
.sub-text {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #eeeeee;
    font-weight: 300;
}

.business-hours {
    display: inline-block;
    margin-bottom: 60px;
    padding: 10px 25px;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 박스 */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    color: #ffcc00; /* 노란색으로 강조 (눈에 잘 띔) */
    font-weight: bold;
}

/* 4. 앱 아이콘 컨테이너 */
.app-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px; /* 간격 넓게 */
    margin-bottom: 60px;
}

/* 5. 앱 아이콘 링크 (인터랙션) */
.app-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease; /* 부드러운 움직임 */
}

.app-links img {
    width: 140px;
    height: 140px;
    display: block;
    margin-bottom: 15px;
    border-radius: 30px; /* 더 둥글게 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* 진한 그림자 */
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때 효과 (둥실 떠오름) */
.app-links a:hover {
    transform: translateY(-10px);
    color: #ffcc00; /* 글자색 노랗게 */
}
.app-links a:hover img {
    box-shadow: 0 20px 30px rgba(0,0,0,0.6); /* 그림자도 깊어짐 */
    filter: brightness(1.1); /* 살짝 밝아짐 */
}

/* 6. 전화 주문 버튼 */
.phone-order-box {
    margin-top: 20px;
}
.phone-btn {
    display: inline-block;
    text-decoration: none;
    background-color: #e63946; /* 브랜드 레드 */
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.4);
    transition: all 0.3s ease;
}
.phone-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.6);
}



/* ==============================================
   [모바일 전용 스타일] 화면 폭 768px 이하일 때 적용
   ============================================== */
@media (max-width: 768px) {

    /* 1. 컨테이너 여백 줄이기 (화면을 넓게 쓰기 위함) */
    .order-page-container {
        padding: 60px 15px; /* 상하 60px, 좌우 15px */
        min-height: 100vh;  /* 모바일 화면 높이 꽉 채우기 */
        background-attachment: scroll; /* 모바일에서는 배경 고정이 버벅거릴 수 있어서 풂 */
    }

    /* 2. 제목 크기 줄이기 (두 줄로 예쁘게 나오게) */
    .order-page-container h2 {
        font-size: 2rem; /* 3rem -> 2rem 축소 */
        margin-bottom: 15px;
        line-height: 1.3; /* 줄 간격 조정 */
    }

    /* 3. 설명글 폰트 조절 */
    .sub-text {
        font-size: 1rem; /* 1.2rem -> 1rem */
        margin-bottom: 20px;
        word-break: keep-all; /* 한글 단어 중간에 안 잘리게 */
    }

    /* 4. 영업시간 박스 스타일 */
    .business-hours {
        font-size: 0.95rem;
        padding: 8px 20px;
        margin-bottom: 40px;
        width: auto;
        display: inline-block;
    }

    /* 5. 앱 아이콘 컨테이너 (간격 좁히기) */
    .app-links {
        gap: 20px; /* 40px -> 20px */
        margin-bottom: 40px;
        flex-wrap: wrap; /* 화면 좁으면 자동 줄바꿈 */
    }

    /* 6. 앱 아이콘 크기 축소 (모바일 최적화) */
    .app-links img {
        width: 90px;  /* 140px -> 90px */
        height: 90px;
        margin-bottom: 10px;
        border-radius: 20px;
    }

    /* 앱 이름 글씨 크기 */
    .app-links a {
        font-size: 0.9rem; /* 1.2rem -> 0.9rem */
        font-weight: 600;
    }

    /* 7. 전화 주문 버튼 */
    .phone-btn {
        padding: 12px 30px;
        font-size: 1rem;
        width: 80%; /* 버튼을 가로로 길게 */
        display: block;
        margin: 0 auto; /* 중앙 정렬 */
    }
}