/* ========================================
   Toss Style Section Component
   토스 스타일 섹션 컴포넌트

   - 섹션 헤더, 타이틀, 서브타이틀
   - 더보기 링크
   - 섹션 디바이더
   ======================================== */

/* ========================================
   Section Container
   ======================================== */
.toss-section {
    width: 100%;
    position: relative;
    margin-bottom: var(--toss-space-10);
}

@media (max-width: 1024px) {
    .toss-section {
        margin-bottom: var(--toss-space-8);
    }
}

@media (max-width: 767px) {
    .toss-section {
        margin-bottom: var(--toss-space-6);
    }
}

/* ========================================
   Section Header
   ======================================== */
.toss-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--toss-space-4);
    padding: 0;
}

@media (max-width: 767px) {
    .toss-section__header {
        margin-bottom: var(--toss-space-3);
    }
}

/* ========================================
   Section Title Group
   ======================================== */
.toss-section__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--toss-space-1);
}

/* 클릭 가능한 타이틀 그룹 */
.toss-section__title-group--clickable {
    cursor: pointer;
    transition: opacity var(--toss-duration-normal) var(--toss-ease);
}

.toss-section__title-group--clickable:hover {
    opacity: 0.7;
}

/* ========================================
   Section Title
   ======================================== */
.toss-section__title {
    display: flex;
    align-items: center;
    gap: var(--toss-space-2);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-title);
    font-weight: 700;
    color: var(--toss-text-primary);
    letter-spacing: var(--toss-letter-spacing);
    line-height: var(--toss-line-height-title);
    margin: 0;
}

@media (max-width: 1024px) {
    .toss-section__title {
        font-size: var(--toss-font-body-large);
    }
}

@media (max-width: 767px) {
    .toss-section__title {
        font-size: var(--toss-font-body);
    }
}

/* 섹션 타이틀 아이콘 */
.toss-section__title-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .toss-section__title-icon {
        width: 20px;
        height: 20px;
    }
}

/* 강조 텍스트 */
.toss-section__title-highlight {
    font-weight: 700;
}

.toss-section__title-highlight--blue {
    color: var(--toss-blue-primary);
}

.toss-section__title-highlight--red {
    color: var(--toss-status-error);
}

.toss-section__title-highlight--green {
    color: var(--toss-status-success);
}

.toss-section__title-highlight--orange {
    color: var(--toss-status-warning);
}

/* ========================================
   Section Subtitle
   ======================================== */
.toss-section__subtitle {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 400;
    color: var(--toss-text-tertiary);
    letter-spacing: var(--toss-letter-spacing);
    line-height: var(--toss-line-height-body);
    margin: 0;
}

@media (max-width: 767px) {
    .toss-section__subtitle {
        font-size: var(--toss-font-caption);
    }
}

/* ========================================
   Section More Link (더보기)
   ======================================== */
.toss-section__more {
    display: flex;
    align-items: center;
    gap: var(--toss-space-1);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 500;
    color: var(--toss-text-tertiary);
    text-decoration: none;
    transition: color var(--toss-duration-fast) var(--toss-ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.toss-section__more:hover {
    color: var(--toss-blue-primary);
}

.toss-section__more-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--toss-duration-fast) var(--toss-ease);
}

.toss-section__more:hover .toss-section__more-icon {
    transform: translateX(2px);
}

@media (max-width: 767px) {
    .toss-section__more {
        font-size: var(--toss-font-caption);
    }
}

/* ========================================
   Section Divider (구분선)
   ======================================== */
.toss-divider {
    width: 100%;
    height: 1px;
    background: var(--toss-line-weak);
    margin: var(--toss-space-10) 0;
    border: none;
}

@media (max-width: 1024px) {
    .toss-divider {
        margin: var(--toss-space-8) 0;
    }
}

/* 모바일: 두꺼운 회색 배경 구분선 (토스 앱 스타일) */
@media (max-width: 767px) {
    .toss-divider {
        height: 8px;
        background: var(--toss-bg-base);
        margin: var(--toss-space-6) 0;
        /* 좌우 패딩 무시하고 전체 너비 */
        margin-left: calc(-1 * var(--toss-space-4));
        width: calc(100% + var(--toss-space-8));
    }
}

/* ========================================
   Section Content Area
   ======================================== */
.toss-section__content {
    width: 100%;
}

/* 가로 스크롤 컨테이너 */
.toss-section__scroll-container {
    display: flex;
    gap: var(--toss-space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--toss-space-2);
}

.toss-section__scroll-container::-webkit-scrollbar {
    display: none;
}

/* ========================================
   기존 notion-section 호환 스타일
   (점진적 마이그레이션용)
   ======================================== */

/* notion-section에 토스 스타일 적용 */
.notion-section {
    margin-bottom: var(--toss-space-10) !important;
}

@media (max-width: 1024px) {
    .notion-section {
        margin-bottom: var(--toss-space-8) !important;
    }
}

@media (max-width: 767px) {
    .notion-section {
        margin-bottom: var(--toss-space-6) !important;
    }
}

/* 섹션 헤더 */
.notion-section-header {
    margin-bottom: var(--toss-space-4) !important;
}

@media (max-width: 767px) {
    .notion-section-header {
        margin-bottom: var(--toss-space-3) !important;
    }
}

/* 섹션 타이틀 */
.notion-section-title {
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-body-large) !important;
    font-weight: 700 !important;
    color: var(--toss-text-primary) !important;
    letter-spacing: var(--toss-letter-spacing) !important;
    line-height: var(--toss-line-height-title) !important;
}

@media (max-width: 767px) {
    .notion-section-title {
        font-size: var(--toss-font-body) !important;
    }
}

/* 섹션 서브타이틀 */
.notion-section-subtitle {
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    color: var(--toss-text-tertiary) !important;
}

/* 더보기 링크 */
.notion-section-more {
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    font-weight: 500 !important;
    color: var(--toss-text-tertiary) !important;
    transition: color var(--toss-duration-fast) var(--toss-ease) !important;
}

.notion-section-more:hover {
    color: var(--toss-blue-primary) !important;
}

/* 섹션 구분선 - 기존 section-divider에 토스 스타일 적용 */
.section-divider {
    height: 1px !important;
    background: var(--toss-line-weak) !important;
    margin: var(--toss-space-10) 0 !important;
    border: none !important;
}

@media (max-width: 1024px) {
    .section-divider {
        margin: var(--toss-space-8) 0 !important;
    }
}

@media (max-width: 767px) {
    .section-divider {
        height: 8px !important;
        /* 하단 1px 구분선 효과 - 토스 앱 스타일 */
        background: linear-gradient(to bottom,
            #f7f8fb 0%,
            #f7f8fb calc(100% - 1px),
            #e9edf3 calc(100% - 1px),
            #e9edf3 100%) !important;
        margin: var(--toss-space-6) 0 !important;
        margin-left: calc(-1 * var(--toss-space-4)) !important;
        width: calc(100% + var(--toss-space-8)) !important;
    }
}

/* ========================================
   Info Tooltip - 토스 스타일
   ======================================== */
.toss-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.toss-tooltip__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--toss-text-tertiary);
    cursor: help;
    transition: color var(--toss-duration-fast) var(--toss-ease);
}

.toss-tooltip__trigger:hover {
    color: var(--toss-text-secondary);
}

.toss-tooltip__content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    background: var(--toss-text-primary);
    color: white;
    padding: var(--toss-space-2) var(--toss-space-3);
    border-radius: var(--toss-radius-sm);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    font-weight: 400;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--toss-shadow-md);
    transition: opacity var(--toss-duration-fast) var(--toss-ease),
                visibility var(--toss-duration-fast) var(--toss-ease);
}

.toss-tooltip__content::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--toss-text-primary);
}

.toss-tooltip:hover .toss-tooltip__content {
    visibility: visible;
    opacity: 1;
}

/* 기존 section-info-tooltip 호환 */
.section-info-tooltip .tooltip-content {
    background: var(--toss-text-primary) !important;
    border-radius: var(--toss-radius-sm) !important;
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    box-shadow: var(--toss-shadow-md) !important;
}

.section-info-tooltip .tooltip-content::before {
    border-bottom-color: var(--toss-text-primary) !important;
}

/* ========================================
   CTA Banner - 토스 스타일
   ======================================== */
.toss-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--toss-space-4) var(--toss-space-5);
    background: var(--toss-bg-base);
    border-radius: var(--toss-radius-lg);
    text-decoration: none;
    transition: all var(--toss-duration-normal) var(--toss-ease);
    margin-top: var(--toss-space-4);
}

.toss-cta-banner:hover {
    background: var(--toss-line-weak);
}

.toss-cta-banner:active {
    transform: scale(0.99);
}

.toss-cta-banner__content {
    display: flex;
    align-items: center;
    gap: var(--toss-space-3);
}

.toss-cta-banner__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--toss-radius-md);
    background: var(--toss-blue-light);
    color: var(--toss-blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.toss-cta-banner__title {
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 600;
    color: var(--toss-text-primary);
}

.toss-cta-banner__arrow {
    color: var(--toss-text-tertiary);
    font-size: 14px;
    transition: transform var(--toss-duration-fast) var(--toss-ease);
}

.toss-cta-banner:hover .toss-cta-banner__arrow {
    transform: translateX(2px);
}

/* 기존 rfq-cta-banner 호환 */
.rfq-cta-banner {
    margin-top: var(--toss-space-4) !important;
}

.rfq-cta-banner .rfq-cta-link {
    background: var(--toss-bg-base) !important;
    border-radius: var(--toss-radius-lg) !important;
    transition: all var(--toss-duration-normal) var(--toss-ease) !important;
}

.rfq-cta-banner .rfq-cta-link:hover {
    background: var(--toss-line-weak) !important;
}

.rfq-cta-banner .rfq-cta-icon {
    background: var(--toss-blue-light) !important;
    color: var(--toss-blue-primary) !important;
    border-radius: var(--toss-radius-md) !important;
}

.rfq-cta-banner .rfq-cta-title {
    font-family: var(--toss-font-sans) !important;
    color: var(--toss-text-primary) !important;
}

.rfq-cta-banner .rfq-cta-arrow {
    color: var(--toss-text-tertiary) !important;
    transition: transform var(--toss-duration-fast) var(--toss-ease) !important;
}

.rfq-cta-banner .rfq-cta-link:hover .rfq-cta-arrow {
    transform: translateX(2px) !important;
}

/* story-cta-banner 호환 */
.story-cta-banner {
    margin-top: var(--toss-space-4) !important;
}

.story-cta-banner .story-cta-link {
    background: var(--toss-bg-base) !important;
    border-radius: var(--toss-radius-lg) !important;
}

.story-cta-banner .story-cta-link:hover {
    background: var(--toss-line-weak) !important;
}

/* 모바일: CTA 배너 여백 통일 */
@media (max-width: 767px) {
    /* RFQ CTA 버튼 */
    .rfq-cta-banner {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* RFQ CTA - 토스 블루 배경, 흰색 텍스트 */
    .rfq-cta-banner .rfq-cta-link {
        background: #3182F6 !important;
    }

    .rfq-cta-banner .rfq-cta-link:hover,
    .rfq-cta-banner .rfq-cta-link:active {
        background: #1B64DA !important;
    }

    .rfq-cta-banner .rfq-cta-icon {
        background: transparent !important;
    }

    .rfq-cta-banner .rfq-cta-icon i {
        color: #FFFFFF !important;
    }

    .rfq-cta-banner .rfq-cta-title {
        color: #FFFFFF !important;
    }

    .rfq-cta-banner .rfq-cta-arrow {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Story CTA 버튼 */
    .story-cta-banner {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Story CTA - 밝은 회색 배경, 진한 그레이 텍스트/아이콘 */
    .story-cta-banner .story-cta-link {
        background: #F2F4F6 !important;
    }

    .story-cta-banner .story-cta-link:hover,
    .story-cta-banner .story-cta-link:active {
        background: #E5E8EB !important;
    }

    .story-cta-banner .story-cta-icon i {
        color: #191F28 !important;
    }

    .story-cta-banner .story-cta-title {
        color: #191F28 !important;
    }

    .story-cta-banner .story-cta-arrow {
        color: #191F28 !important;
    }

    /* RFQ CTA 이전 섹션 marginBottom 축소 */
    .notion-section:has(+ .rfq-cta-banner) {
        margin-bottom: 16px !important;
    }

    /* RFQ CTA 다음 section-divider marginTop 축소 */
    .rfq-cta-banner + .section-divider {
        margin-top: 16px !important;
    }

    /* Story CTA 이전 brand-updates-container 여백 조정 */
    .brand-updates-container:has(+ .story-cta-banner) {
        padding-bottom: 0 !important;
    }

    /* Story CTA 포함 섹션 marginBottom 축소 */
    .notion-section:has(.story-cta-banner) {
        margin-bottom: 16px !important;
    }

    /* Story CTA 섹션 다음 section-divider marginTop 축소 */
    .notion-section:has(.story-cta-banner) + .section-divider {
        margin-top: 16px !important;
    }
}

/* ========================================
   Mobile Only 유틸리티
   ======================================== */

/* 데스크톱/태블릿: 숨김 */
.section-divider.mobile-only {
    display: none !important;
}

/* 모바일: 표시 */
@media (max-width: 767px) {
    .section-divider.mobile-only {
        display: block !important;
    }

    /* 히어로-퀵링크 구분선: 상단/하단 여백 제거 */
    .hero-quicklink-divider {
        margin-top: -16px !important;
        margin-bottom: 0 !important;
    }

    /* 퀵링크 하단 패딩 제거 (구분선과 바로 붙도록) */
    .category-quicklinks {
        padding-bottom: 0 !important;
    }

    /* 퀵링크-득템찬스 구분선: 상단 여백 제거 */
    .quicklink-discount-divider {
        margin-top: 0 !important;
    }
}