/**
 * Tab Styles
 * 탭 컴포넌트 전용 스타일 (테마 공통)
 */

/* ===========================================
   기본 탭 스타일
   =========================================== */

/* 탭 컨테이너 */
.tabs {
    background: #ffffff;
}

/* 탭 리스트 (탭 버튼들) */
.tab-list {
    display: flex;
    border-bottom: 1px solid var(--theme-item-border);
    background: var(--theme-tab-default-bg);
    border-radius: 0;
    padding: 0;
    gap: 0;
}

/* 탭 버튼 (auth-tabs.php 스타일 기반) */
html body .tab-trigger,
.tab-trigger {
    background: none;
    border: none;
    border-radius: 0;
    padding: 16px 24px;
    font-size: var(--theme-font-size-input);
    font-family: var(--theme-font-normal);
    color: var(--theme-tab-default-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    flex: 1;
    white-space: nowrap;
}

html body .tab-trigger:hover,
.tab-trigger:hover {
    background: var(--theme-tab-hover-bg);
    color: var(--theme-text-color);
}

html body .tab-trigger.active,
.tab-trigger.active {
    background: #ffffff;
    color: var(--theme-text-color);
    border-bottom: 2px solid var(--theme-main-color);
    border-radius: 0;
    font-weight: 500;
    font-family: var(--theme-font-bold);
}

html body .tab-trigger:focus,
.tab-trigger:focus {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

/* 탭 콘텐츠 */
.tab-content {
    display: none;
    background: white;
    border: none;
    border-radius: 0;
    padding: 1.5rem;
    min-height: 200px;
}

.tab-content.active {
    display: block;
}

.tab-content h3 {
    margin: 0 0 1rem 0;
    color: var(--theme-main-color);
    font-size: var(--theme-font-size-subtitle);
    font-weight: 600;
    border-bottom: 2px solid var(--theme-main-color);
    padding-bottom: 0.5rem;
    font-family: var(--theme-font-bold);
}

/* 하단 링크 버튼 */
.kaice-auth-container .kaice-back-to-login,
.kaice-back-to-login,
.kaice-back-to-login {
    padding: 20px 30px;
    text-align: center;
    border-top: 1px solid #e1e1e1;
    background: #f8f9fa;
    margin: 0;
    display: block;
}

.kaice-back-link,
a.kaice-back-link {
    color: #408090;
    text-decoration: none;
    font-size: 14px;
    font-family: 'S-CoreDream-4', sans-serif;
    display: inline;
}

.kaice-back-link:hover,
a.kaice-back-link:hover {
    text-decoration: underline !important;
}

/* ===========================================
   반응형 디자인
   =========================================== */

@media (max-width: 768px) {
    /* 탭 반응형 */
    .tab-list {
        flex-direction: row;
        gap: 0;
    }
    
    html body .tab-trigger,
    .tab-trigger {
        padding: 12px 16px;
        font-size: var(--theme-font-size-small);
    }
    
    .tab-content {
        padding: 1rem 0;
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    html body .tab-trigger,
    .tab-trigger {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .tab-content {
        padding: 0.75rem 0;
    }
    
    .tab-content h3 {
        font-size: var(--theme-font-size-input);
    }
}

/* ===========================================
   접근성 개선
   =========================================== */

html body .tab-trigger:focus,
.tab-trigger:focus {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

.tab-content:focus {
    outline: 2px solid var(--theme-main-color);
    outline-offset: 2px;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    html body .tab-trigger,
    .tab-trigger {
        border: 1px solid #000;
    }
    
    html body .tab-trigger.active,
    .tab-trigger.active {
        border: 2px solid #000;
        background: #fff;
        color: #000;
    }
    
    .tab-content {
        border: 2px solid #000;
    }
}

/* 움직임 감소 설정 */
@media (prefers-reduced-motion: reduce) {
    html body .tab-trigger,
    .tab-trigger,
    .tab-content {
        transition: none;
    }
}