/* =========================================
   모담 - 기본 CSS
   Tailwind CDN 위에 추가 커스텀 스타일
   ========================================= */

/* ----- 웹 폰트 ----- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
/* Material Icons (nav.php 아이콘) */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ----- 전역 리셋 / 기본 ----- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /* iOS 바운스 스크롤 방지 */
    overscroll-behavior: none;
    /* 텍스트 크기 자동 조정 방지 */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f3f4f6;
}

/* ----- 모바일 앱 래퍼 ----- */
#app {
    /* iOS safe area 대응 */
    padding-top: env(safe-area-inset-top);
}

/* ----- 스크롤바 숨김 (앱처럼 보이게) ----- */
::-webkit-scrollbar {
    display: none;
}
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ----- 탭 하이라이트 제거 (모바일 터치) ----- */
a, button {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* ----- 공통 버튼 ----- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #22c55e;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn-primary:active {
    background-color: #16a34a;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: transparent;
    color: #22c55e;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: 2px solid #22c55e;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-outline:active {
    background-color: #f0fdf4;
}

/* ----- 공통 카드 ----- */
.card {
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ----- 섹션 헤더 ----- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin-bottom: 0.75rem;
}
.section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
}

/* ----- 배지 ----- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.badge-green  { background-color: #dcfce7; color: #15803d; }
.badge-yellow { background-color: #fef9c3; color: #a16207; }
.badge-red    { background-color: #fee2e2; color: #b91c1c; }
.badge-gray   { background-color: #f3f4f6; color: #4b5563; }

/* ----- 토스트 알림 ----- */
#toast-container {
    position: fixed;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 2rem);
    max-width: 390px;
    pointer-events: none;
}
.toast {
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background-color: #1f2937;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
    text-align: center;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ----- 로딩 스피너 ----- */
.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ----- 스켈레톤 로딩 ----- */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    border-radius: 0.5rem;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.main-title{
    display: flex;
}
.main-title-text{
    margin-left: 10px;
}