/*
 * 파일명: short_url_price.css
 * 위치: /assets/css
 * 기능: 단축 URL 가격 안내 페이지 전용 스타일
 * 작성일: 2025-07-20
 */

/* ===================================
 * 페이지 전체 기본 스타일
 * ===================================
 */

/* 페이지 배경색 설정 */
body {
    background-color: #f8f9fa;
}

/* ===================================
 * 프로모션 카드 스타일
 * ===================================
 */

/* 메인 프로모션 카드 배경 및 그림자 효과 */
.promotion-card {
    background: linear-gradient(135deg, #18609C 0%, #3A7FBF 100%); /* 파란색 그라데이션 배경 */
    border-radius: 20px; /* 둥근 모서리 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 부드러운 그림자 효과 */
}

/* 가격 태그 스타일 */
.price-tag {
    background: #30C0FF; /* 밝은 파란색 배경 */
    border-radius: 50px; /* 원형 모서리 */
    padding: 5px 15px; /* 내부 여백 */
    font-weight: bold; /* 굵은 글씨 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}

/* ===================================
 * 플랜 카드 스타일
 * ===================================
 */

/* 기본 플랜 카드 스타일 */
.plan-card {
    border: 2px solid #e2e8f0; /* 연한 회색 테두리 */
    border-radius: 12px; /* 둥근 모서리 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 플랜 카드 호버 효과 */
.plan-card:hover {
    border-color: #6366f1; /* 호버 시 보라색 테두리 */
    transform: translateY(-5px); /* 위로 5px 이동 효과 */
}

/* 추천 플랜 배지 스타일 */
.best-value {
    background-color: #4f46e5; /* 진한 보라색 배경 */
    color: white; /* 흰색 글자 */
    font-size: 0.8rem; /* 작은 글씨 크기 */
    padding: 4px 12px; /* 내부 여백 */
    border-radius: 20px; /* 둥근 모서리 */
    position: absolute; /* 절대 위치 */
    top: -12px; /* 카드 위쪽으로 12px 이동 */
    left: 50%; /* 가운데 정렬을 위한 왼쪽 50% */
    transform: translateX(-50%); /* 정확한 가운데 정렬 */
}

/* ===================================
 * 기본 모바일 최적화 스타일
 * ===================================
 */

@media (max-width: 768px) {
    /* 컨테이너 모바일 최적화 */
    .container {
        padding-left: 0.2rem; /* 좌측 여백 축소 */
        padding-right: 0.2rem; /* 우측 여백 축소 */
        max-width: 100%; /* 최대 너비 100% */
    }
    
    /* 카드 요소들 모바일 최적화 */
    .features-card,
    .promotion-card {
        margin-left: 0 !important; /* 좌측 마진 제거 */
        margin-right: 0 !important; /* 우측 마진 제거 */
        border-radius: 12px; /* 둥근 모서리 축소 */
    }
}

/* ===================================
 * 가격표 섹션 스타일
 * ===================================
 */

/* 가격표 메인 섹션 컨테이너 */
.pricing-section {
    background-color: #f9f9f9; /* 연한 회색 배경 */
    padding: 1rem 10px; /* 상하 1rem, 좌우 10px 여백 */
    margin: 0 auto; /* 가운데 정렬 */
    contain: layout; /* 레이아웃 최적화 */
    min-height: 200px; /* 최소 높이 설정 */
}

/* 기능 목록 기본 스타일 초기화 */
.feature-list {
    padding: 0; /* 패딩 제거 */
    margin: 0; /* 마진 제거 */
    list-style: none; /* 불렛 포인트 제거 */
    border: 1px solid #f0f0f0; /* 연한 회색 테두리 */
    border-radius: 4px; /* 약간 둥근 모서리 */
    overflow: hidden; /* 넘치는 내용 숨김 */
}

/* ===================================
 * 가격표 헤더 스타일
 * ===================================
 */

/* 기능 헤더 그리드 레이아웃 */
.feature-header {
    display: grid; /* 그리드 레이아웃 사용 */
    grid-template-columns: 2fr 1fr 1fr 1fr; /* 2:1:1:1 비율로 4개 컬럼 */
    background-color: #e8f0fe; /* 연한 파란색 배경 */
    border-bottom: 1px solid #f0f0f0; /* 하단 테두리 */
}

/* 헤더 각 셀 스타일 */
.feature-header div {
    padding: 12px 15px; /* 내부 여백 */
    font-weight: bold; /* 굵은 글씨 */
    color: #4285f4; /* 파란색 글자 */
    text-align: center; /* 가운데 정렬 */
}

/* 헤더 첫 번째 셀(기능명)은 왼쪽 정렬 */
.feature-header div:first-child {
    text-align: left;
}

/* ===================================
 * 가격표 아이템 스타일
 * ===================================
 */

/* 기능 아이템 그리드 레이아웃 */
.feature-item {
    display: grid; /* 그리드 레이아웃 사용 */
    grid-template-columns: 2fr 1fr 1fr 1fr; /* 헤더와 동일한 비율 */
    border-bottom: 1px solid #f0f0f0; /* 하단 구분선 */
    align-items: center; /* 세로 가운데 정렬 */
}

/* 기능 아이템 호버 효과 */
.feature-item:hover {
    background-color: #f8f9fa; /* 호버 시 연한 회색 배경 */
}

/* 기능 아이템 각 셀 기본 스타일 */
.feature-item > div {
    padding: 12px 15px; /* 내부 여백 */
    color: #666; /* 회색 글자 */
    text-align: center; /* 가운데 정렬 */
}

/* 첫 번째 셀(기능명) 특별 스타일 */
.feature-item > div:first-child {
    text-align: left; /* 왼쪽 정렬 */
    color: #444; /* 더 진한 회색 글자 */
    display: flex; /* 플렉스 레이아웃 */
    align-items: center; /* 세로 가운데 정렬 */
    gap: 4px; /* 아이콘과 텍스트 간격 */
}

/* ===================================
 * 가격표 아이콘 및 상태 스타일
 * ===================================
 */

/* 기능 아이콘 스타일 */
.feature-item i {
    color: #4285f4; /* 파란색 아이콘 */
    font-size: 16px; /* 아이콘 크기 */
    width: 20px; /* 아이콘 너비 고정 */
    text-align: center; /* 가운데 정렬 */
}

/* 포함된 기능 표시 스타일 */
.feature-included {
    color: #4285f4 !important; /* 파란색으로 강조 */
}

/* 포함되지 않은 기능 표시 스타일 */
.feature-not-included {
    color: #aaa !important; /* 연한 회색으로 표시 */
}

/* 강조 표시 기능 스타일 */
.feature-highlight {
    color: #4285f4 !important; /* 파란색 강조 */
    font-weight: 500; /* 중간 굵기 글씨 */
}

/* ===================================
 * 툴팁 스타일
 * ===================================
 */

/* 툴팁 래퍼 기본 스타일 */
.tooltip-wrapper {
    position: relative; /* 상대 위치 */
    display: inline-flex; /* 인라인 플렉스 */
    align-items: center; /* 세로 가운데 정렬 */
    margin-left: 4px; /* 왼쪽 여백 */
}

/* 툴팁 호버 시 표시되는 내용 */
.tooltip-wrapper:hover::before {
    content: attr(data-tooltip); /* data-tooltip 속성 값 표시 */
    position: absolute; /* 절대 위치 */
    left: 100%; /* 오른쪽으로 100% 이동 */
    top: 50%; /* 위쪽으로 50% 이동 */
    transform: translateY(-50%); /* 정확한 세로 가운데 정렬 */
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 검은색 배경 */
    color: white; /* 흰색 글자 */
    padding: 5px 10px; /* 내부 여백 */
    border-radius: 4px; /* 둥근 모서리 */
    font-size: 14px; /* 글씨 크기 */
    white-space: nowrap; /* 줄바꿈 방지 */
    z-index: 1000; /* 최상위 레이어 */
    margin-left: 10px; /* 왼쪽 여백 */
}

/* 정보 아이콘 스타일 */
.info-icon {
    color: #4285f4; /* 파란색 */
    font-size: 14px; /* 아이콘 크기 */
    cursor: help; /* 도움말 커서 */
}

/* 모바일 탭 기본 숨김 */
.mobile-tabs {
    display: none;
}

/* ===================================
 * 모바일 반응형 스타일 (768px 이하)
 * ===================================
 */

@media (max-width: 768px) {
    /* 모바일 탭 표시 */
    .mobile-tabs {
        display: flex; /* 플렉스 레이아웃으로 표시 */
        background: #f8f9fa; /* 연한 회색 배경 */
        margin-bottom: 1rem; /* 하단 여백 */
        border-bottom: 1px solid #e0e0e0; /* 하단 구분선 */
    }
    
    /* 모바일 탭 버튼 스타일 */
    .mobile-tab {
        flex: 1; /* 균등 분할 */
        padding: 12px; /* 내부 여백 */
        text-align: center; /* 가운데 정렬 */
        cursor: pointer; /* 클릭 커서 */
        color: #666; /* 회색 글자 */
    }
    
    /* 활성화된 모바일 탭 스타일 */
    .mobile-tab.active {
        color: #4285f4; /* 파란색 글자 */
        border-bottom: 2px solid #4285f4; /* 하단 파란색 선 */
    }
    
    /* 모바일 기능 목록 테두리 제거 */
    .feature-list {
        border: none;
    }
    
    /* 모바일 헤더 및 아이템 레이아웃 변경 */
    .feature-header,
    .feature-item {
        display: flex; /* 플렉스 레이아웃으로 변경 */
        flex-direction: row; /* 가로 방향 */
        border-bottom: 1px solid #f0f0f0; /* 하단 구분선 */
    }
    
    /* 모바일 셀 기본 여백 */
    .feature-header div,
    .feature-item > div {
        padding: 10px 15px; /* 모바일에 맞게 여백 축소 */
    }
    
    /* 모바일 첫 번째 셀(기능명) 너비 설정 */
    .feature-header div:first-child,
    .feature-item > div:first-child {
        width: 60%; /* 60% 너비 */
        display: flex; /* 플렉스 레이아웃 */
    }
    
    /* 모바일에서 나머지 셀들 기본 숨김 */
    .feature-header div:not(:first-child),
    .feature-item > div:not(:first-child) {
        width: 40%; /* 40% 너비 */
        justify-content: flex-end; /* 오른쪽 정렬 */
        display: none; /* 기본 숨김 */
    }
    
    /* 선택된 컬럼만 표시 */
    .feature-header div.show-column,
    .feature-item > div.show-column {
        display: flex; /* 플렉스로 표시 */
    }
    
    /* 모바일 툴팁 위치 조정 */
    .tooltip-wrapper:hover::before {
        left: auto; /* 왼쪽 위치 자동 */
        right: 0; /* 오른쪽 기준 */
        top: 100%; /* 아래쪽 100% 이동 */
        transform: none; /* 변형 제거 */
        margin-left: 0; /* 왼쪽 여백 제거 */
        margin-top: 5px; /* 위쪽 여백 추가 */
        width: auto; /* 너비 자동 */
        max-width: 200px; /* 최대 너비 제한 */
        white-space: normal; /* 줄바꿈 허용 */
    }
    
    /* 모바일 텍스트 크기 조정 */
    .feature-item > div:first-child {
        font-size: 14px; /* 글씨 크기 축소 */
    }
    
    /* 모바일 아이콘 크기 조정 */
    .feature-item i {
        font-size: 14px; /* 아이콘 크기 축소 */
        width: 16px; /* 아이콘 너비 축소 */
    }
    
    /* 모바일 정보 아이콘 크기 조정 */
    .info-icon {
        font-size: 12px; /* 아이콘 크기 축소 */
    }
}

/* ===================================
 * 소형 모바일 최적화 (480px 이하)
 * ===================================
 */

@media (max-width: 480px) {
    /* 소형 모바일 탭 패딩 축소 */
    .mobile-tab {
        padding: 10px 8px; /* 여백 축소 */
        font-size: 13px; /* 글씨 크기 축소 */
    }
    
    /* 소형 모바일 셀 패딩 축소 */
    .feature-header div,
    .feature-item > div {
        padding: 8px 10px; /* 여백 더욱 축소 */
    }
    
    /* 소형 모바일 텍스트 크기 추가 축소 */
    .feature-item > div:first-child {
        font-size: 13px; /* 글씨 크기 더욱 축소 */
    }
    
    /* 소형 모바일 아이콘 크기 추가 축소 */
    .feature-item i {
        font-size: 13px; /* 아이콘 크기 더욱 축소 */
        width: 14px; /* 아이콘 너비 더욱 축소 */
    }
    
    /* 소형 모바일 툴팁 크기 조정 */
    .tooltip-wrapper:hover::before {
        max-width: 160px; /* 최대 너비 축소 */
        font-size: 11px; /* 글씨 크기 축소 */
        padding: 4px 8px; /* 여백 축소 */
    }
}