/* --- KBO Market Footer Style (#km-footer) --- */

/* 색상 변수 (기존 템플릿과 통일) */
:root {
    --km-primary-red: var(--rb-main-color, #dc2626);
    --km-gray-50: #f9fafb;
    --km-gray-100: #f3f4f6;
    --km-gray-200: #e5e7eb;
    --km-gray-400: #9ca3af;
    --km-gray-500: #6b7280;
    --km-gray-600: #4b5563;
    --km-gray-700: #374151;
    --km-gray-800: #1f2937;
    --km-gray-900: #111827;
}

/* 메인 푸터 영역 */
#km-footer {
    background-color: var(--km-gray-50);
    border-top: 1px solid var(--km-gray-200);
    padding-top: 40px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom)); /* 모바일 하단 네비게이션 공간 확보 */
    font-size: 13px;
    color: var(--km-gray-500);
    line-height: 1.5;
    box-sizing: border-box;
}

#km-footer * {
    box-sizing: border-box;
}

/* 컨테이너 */
#km-footer .container {
    max-width: var(--rb-footer-width);
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

/* 그리드 레이아웃 */
#km-footer .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
    text-align: left;
}

/* 공통 컬럼 스타일 */
#km-footer .footer-col {
    flex: 1;
}

/* 텍스트 스타일 */
#km-footer a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

#km-footer a:hover {
    color: var(--km-gray-900);
    text-decoration: underline;
}

#km-footer .font-bold { font-weight: 700; }
#km-footer .font-black { font-weight: 900; }
#km-footer .text-red { color: var(--km-primary-red); }

/* --- 컬럼 1: 정보 영역 --- */
#km-footer .footer-logo-wrap {
    margin-bottom: 16px;
}
#km-footer .footer-logo-wrap img {
    display: block;
    max-width: 100%;
    max-height: 40px;
    height: auto;
}
#km-footer .footer-slogan {
    margin-bottom: 16px;
    font-weight: 500;
    color: var(--km-gray-600);
}
#km-footer .footer-info-text {
    line-height: 1.6;
    font-size: 13px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}
#km-footer .footer-info-text.open {
    max-height: 200px;
    margin-top: 12px;
}
#km-footer .footer-info-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 12px 0 0 0;
    color: var(--km-gray-600);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
#km-footer .footer-info-toggle-btn:hover {
    color: var(--km-gray-900);
}
#km-footer .footer-info-toggle-btn .toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
#km-footer .footer-info-toggle-btn.active .toggle-icon {
    transform: rotate(180deg);
}

/* --- 컬럼 2: 고객센터 --- */
#km-footer .cs-title {
    margin-bottom: 16px;
    color: var(--km-gray-900);
}
#km-footer .cs-phone {
    font-size: 24px;
    color: var(--km-gray-900);
    margin-bottom: 8px;
}
#km-footer .cs-desc {
    color: var(--km-gray-600);
    white-space: pre-line;
}
#km-footer .cs-desc-sub {
    color: var(--km-gray-400);
}

/* SNS 아이콘 */
#km-footer .sns-wrapper {
    display: flex;
    margin-top: 16px;
    gap: 8px;
}
#km-footer .footer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid var(--km-gray-200);
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
}
#km-footer .footer-icon-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
#km-footer .footer-icon-btn:hover {
    background-color: var(--km-gray-100);
    border-color: var(--km-gray-400);
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* --- 컬럼 3: 메뉴 및 앱 다운로드 --- */
#km-footer .footer-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 700;
    color: var(--km-gray-700);
}

#km-footer .app-down-wrap {
    margin-top: 20px;
}
#km-footer .app-down-btn {
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--km-gray-200);
    border-radius: 8px;
    background: #fff;
    transition: background-color 0.2s;
}
#km-footer .app-down-btn:hover {
    background-color: var(--km-gray-50);
}
#km-footer .app-down-btn img {
    width: 20px;
}
#km-footer .app-down-btn span {
    font-size: 12px;
    font-weight: 700;
}


/* --- 하단 카피라이트 영역 --- */
#km-footer .footer-bottom {
    border-top: 1px solid var(--km-gray-200);
    padding-top: 24px;
    text-align: left;
}
#km-footer .footer-notice {
    margin-bottom: 8px;
    color: var(--km-gray-400);
}
#km-footer .footer-copyright {
    color: var(--km-gray-400);
}


.scroll-top-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
}

/* --- 하단 네비게이션 탭 바 스타일 --- */
.dugtem-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--km-gray-200);
    z-index: 2000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.dugtem-bottom-nav .nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    padding: 0 10px;
}

.dugtem-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--km-gray-500);
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 500;
    width: 60px;
    height: 100%;
    gap: 4px;
    transition: color 0.2s ease;
}

.dugtem-bottom-nav .nav-item:hover {
    color: var(--km-gray-900);
}

.dugtem-bottom-nav .nav-item.active {
    color: var(--km-primary-red);
    font-weight: 700;
}

.dugtem-bottom-nav .nav-item i {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}

/* 중앙 플러스 버튼 디자인 */
.dugtem-bottom-nav .nav-write-wrap {
    position: relative;
    width: 60px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dugtem-bottom-nav .nav-write-btn {
    position: absolute;
    top: -15px;
    width: 48px;
    height: 48px;
    background: var(--km-primary-red);
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--km-primary-red), transparent 70%);
    transition: all 0.2s ease;
}

.dugtem-bottom-nav .nav-write-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--km-primary-red), transparent 60%);
}

.dugtem-bottom-nav .nav-write-btn i {
    width: 24px;
    height: 24px;
    stroke-width: 2.5px;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
}

.progress-ring { transform: rotate(-90deg); position: absolute; }
.progress-ring__circle {
  transition: stroke-dashoffset 0.1s;
  stroke-dasharray: 125.6; /* 2 * π * r (2 * 3.14 * 20) */
  stroke-dashoffset: 125.6;
  stroke-width: 2px;
}

.arrow { position: relative; color:#000; z-index: 10; }


/* --- 모바일 메뉴 스타일 (전역 적용) --- */
#km-footer .footer-menu {
    display: block;
}
#km-footer .footer-menu a {
    margin-right: 20px;
}



/* 본문 콘텐츠 하단 가림 방지 (하단 탭 바 높이에 맞춰 조정) */
#contents_wrap,
section.index,
section.sub {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* =========================================
   KBO 구단 선택 풀 블러 오버레이 메뉴 스타일
   ========================================= */

/* 오버레이 기본 스타일 (전체화면 블러 처리) */
.dugtem-kbo-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); /* 반투명 어두운 배경 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                backdrop-filter 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.35s;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dugtem-kbo-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 내부 컨테이너 (등장 애니메이션 포함) */
.kbo-overlay-container {
    width: 100%;
    max-width: 440px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform: scale(0.92) translateY(15px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease;
}

.dugtem-kbo-overlay.active .kbo-overlay-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 헤더 영역 */
.kbo-overlay-header {
    text-align: center;
    margin-bottom: 28px;
    width: 100%;
}

.kbo-overlay-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.kbo-overlay-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    letter-spacing: -0.3px;
}

/* 2열 구단 카드 그리드 */
.kbo-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
    margin-bottom: 36px;
}

/* 개별 글래스모피즘 구단 카드 (1번. 반투명 화이트 글래스모피즘) */
.kbo-team-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.12); /* 은은한 흰색 반투명 */
    border: 1px solid rgba(255, 255, 255, 0.20); /* 얇은 화이트 테두리로 유리 질감 강조 */
    border-radius: 16px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    user-select: none;
    -webkit-user-select: none;
}

/* 호버 & 활성 터치 효과 */
.kbo-team-card:hover,
.kbo-team-card:active {
    transform: translateY(-3px) scale(1.03);
    background: rgba(255, 255, 255, 0.22); /* 더 화사하게 밝아짐 */
    border-color: var(--km-primary-red, #dc2626);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--km-primary-red, #dc2626), transparent 80%),
                0 0 12px color-mix(in srgb, var(--km-primary-red, #dc2626), transparent 60%);
}

/* 로고 박스 */
.team-logo-box {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.team-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 구단 이름 */
.team-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff;
}

/* 플로팅 닫기(✕) 버튼 */
.kbo-close-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.kbo-close-circle:hover {
    background: var(--km-primary-red, #dc2626);
    border-color: var(--km-primary-red, #dc2626);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--km-primary-red, #dc2626), transparent 50%);
}

.kbo-close-circle i {
    width: 24px;
    height: 24px;
    stroke-width: 2.5px;
}

/* PC 데스크톱 전용 스타일 (1024px 이상) - 푸터 요소 우측 이동 및 512px 제한 */
@media (min-width: 1024px) {
    #km-footer {
        max-width: 512px;
        margin: 0 auto !important;
        border-left: 1px solid var(--km-gray-200);
        border-right: 1px solid var(--km-gray-200);
        padding-bottom: 100px;
    }

    .dugtem-bottom-nav {
        max-width: 512px;
        left: calc(50% - 56px) !important;
        right: auto !important;
        margin: 0 !important;
        transform: none !important;
        border-left: 1px solid var(--km-gray-200);
    }
    
    .scroll-top-btn {
        right: calc(50% - 456px + 20px) !important; /* 모바일 프레임 내부 우측 20px 위치 */
    }
    
    .dugtem-kbo-overlay {
        max-width: 512px;
        left: calc(50% - 56px) !important;
        transform: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}