/* Base Styles */
:root {
    --lq-accent-primary: #b58374;
    --lq-accent-primary-dark: #a86d5c;
    --lq-accent-primary-light: #fbf0ea;
    --lq-accent-secondary: #ffc9b9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    background: #faf8f8;
    line-height: 1.6;
}

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

/* ===== 공통 그리드 유틸리티 ===== */
/* 4열 그리드 (기본 PC) */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* 3열 그리드 */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 2열 그리드 */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ===== 공통 input / button / select 디자인 시스템 ===== */
/* 공통 input 기본 스타일 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--lq-accent-primary);
}

input::placeholder,
textarea::placeholder {
    color: #aaa;
}

/* 공통 버튼 기본 스타일 */
button {
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 주요 액션 버튼 (.btn-primary) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--lq-accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--lq-accent-primary-dark);

}

/* 보조 버튼 (.btn-secondary) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #fff;
    color: var(--lq-accent-primary);
    border: 1.5px solid var(--lq-accent-primary);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--lq-accent-primary-light);
}

/* select 화살표 커스텀 */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ===== 공통 반응형 ===== */
/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    /* 4열 → 3열 */
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* 3열 → 2열 */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 소형 태블릿 (768px 이하) */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    /* 4열 → 2열 */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 3열 → 2열 */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 2열 → 1열 */
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* 공통 input 모바일 최적화 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px; /* iOS 자동 확대 방지 */
    }
}

/* 모바일 (480px 이하) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    /* 4열 → 2열 유지 (모바일에서 1열은 너무 큼) */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* 3열 → 1열 */
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================================================
   하단 네비게이션 (bottom-nav) - 앱 환경용
   ========================================================================= */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    background: #ffffff;
    display: none;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #f0f0f0;
    padding: 8px 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 100;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    text-decoration: none;
    color: #999999;
    font-size: 10px;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 8px;
    margin: 0 2px;
}

.nav-item svg {
    transition: all 0.2s ease;
}

.nav-item span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

/* 선택된 메뉴 아이템 */
.nav-item.active {
    color: var(--lq-accent-primary);
}

/* 하단 네비 hover/focus 상태 무효화 */
.bottom-nav .nav-item:not(.active):hover,
.bottom-nav .nav-item:not(.active):focus,
.bottom-nav .nav-item:not(.active):active {
    color: inherit;
    background: transparent;
}

/* =========================================================================
   토스트 메시지 스타일
   ========================================================================= */

.common-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333333;
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
    max-width: 90%;
}

.common-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.common-toast.info {
    background: #1976d2;
}

.common-toast.success {
    background: #388e3c;
}

.common-toast.warning {
    background: #f57c00;
}

.common-toast.error {
    background: #d32f2f;
}

/* =========================================================================
   플랫폼별 헤더/네비 제어
   - lb-platform-web: 웹 환경 (기존 헤더 유지, 바텀 네비 숨김)
   - lb-platform-android / lb-platform-ios: 앱 환경 (바텀 네비 표시)
   ========================================================================= */

/* 웹 환경: 바텀 네비 숨김 */
body.lb-platform-web .bottom-nav {
    display: none !important;
}

/* 앱 환경: 바텀 네비 표시 */
body.lb-platform-android .bottom-nav,
body.lb-platform-ios .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 앱 환경에서 하단 여백 확보 (바텀 네비 높이만큼) */
body.lb-platform-android,
body.lb-platform-ios {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* 앱 환경에서 배경색 통일 */
body.lb-platform-android,
body.lb-platform-ios {
    background-color: #ffffff !important;
}

/* 앱 환경: 플로팅 버튼 위치 조정 (바텀 네비 위로) */
body.lb-platform-android .floating-actions,
body.lb-platform-ios .floating-actions {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* 웹 환경: 플로팅 버튼 기본 위치 */
body.lb-platform-web .floating-actions {
    bottom: 24px !important;
}