/*
* 파일명: timezone-converter.css
* 위치: /p/timezone-converter/index.php (인라인 스타일)
* 기능: Time Zone Converter - 시간대 변환기 전용 스타일시트
* 작성일: 2025-07-28
* 수정일: 2025-07-28
* 설명: 전 세계 시간대 비교 및 변환 도구의 모든 UI 스타일 정의
*/

/* ===================================
* CSS 변수 정의
* =================================== */
:root {
   --timezone-primary: #17a2b8;
   --timezone-primary-dark: #138496;
   --timezone-primary-darker: #0f6674;
   --timezone-secondary: #f8f9fa;
   --timezone-accent: #e1f5fe;
   --timezone-success: #28a745;
   --timezone-warning: #ffc107;
   --timezone-danger: #dc3545;
   --timezone-info: #17a2b8;
   --timezone-text: #495057;
   --timezone-text-muted: #6c757d;
   --timezone-border: #dee2e6;
   --timezone-shadow: rgba(0, 0, 0, 0.1);
   --timezone-transition: all 0.3s ease;
}

/* ===================================
* 히어로 섹션 스타일
* =================================== */
.timezone-hero {
   background: linear-gradient(135deg, var(--timezone-primary) 0%, var(--timezone-primary-dark) 100%);
   border-radius: 20px;
   padding: 2rem;
   text-align: center;
   margin-bottom: 2rem;
   color: white;
   box-shadow: 0 10px 30px rgba(23, 162, 184, 0.3);
}

.timezone-hero .webtools-title {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   font-size: 2.5rem;
   color: white !important;
   gap: 1rem;
}

.timezone-hero .webtools-icon {
   color: white !important;
   font-size: 2.5rem;
   margin: 0;
   flex-shrink: 0;
}

.timezone-hero .webtools-subtitle {
   color: rgba(255, 255, 255, 0.95) !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   margin: 1rem auto 0 auto !important;
   font-size: 1.1rem;
   text-align: center !important;
   display: block;
   max-width: 90%;
}

/* ===================================
* 사용법 안내 스타일
* =================================== */
.timezone-usage-guide {
   background: linear-gradient(135deg, var(--timezone-accent) 0%, #b3e5fc 100%);
   border-radius: 12px;
   padding: 1.5rem;
   border: 1px solid #81d4fa;
   margin-bottom: 2rem;
}

.timezone-usage-step {
   display: flex;
   align-items: flex-start;
   margin-bottom: 1rem;
   padding: 0.75rem;
   background: white;
   border-radius: 8px;
}

.timezone-usage-step:last-child {
   margin-bottom: 0;
}

.timezone-step-number {
   width: 30px;
   height: 30px;
   background: var(--timezone-primary);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.9rem;
   margin-right: 1rem;
   flex-shrink: 0;
}

.timezone-step-content {
   flex: 1;
   color: var(--timezone-text);
   line-height: 1.5;
   margin: 0;
}

/* ===================================
 * 시간대 추가 영역 스타일
 * =================================== */
.timezone-add-card {
    background: linear-gradient(135deg, var(--timezone-secondary) 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid var(--timezone-border);
    margin-bottom: 2rem;
}

/* 시간대 추가 영역 행 간격 */
.timezone-add-card .row {
    margin-bottom: 0;
}

.timezone-add-card .col-md-6,
.timezone-add-card .col-md-3 {
    margin-bottom: 1rem;
}

.timezone-add-card .col-md-3:last-child {
    margin-bottom: 1rem; /* 버튼 컬럼도 동일한 여백 */
}

/* 라벨과 입력 요소 간격 */
.timezone-add-card .form-label {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--timezone-text);
}

/* 드롭다운 선택 박스 스타일 개선 */
.timezone-select {
    border-radius: 8px;
    border: 2px solid var(--timezone-border);
    transition: var(--timezone-transition);
    padding: 0.75rem;
    font-size: 0.95rem;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.timezone-select:focus {
    border-color: var(--timezone-primary);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
    outline: none;
}

/* 검색 입력 그룹 스타일 개선 */
.search-wrapper {
    position: relative;
    width: 100%;
}

.search-wrapper .input-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.search-wrapper .input-group-text {
    background: white;
    border: 2px solid var(--timezone-border);
    border-right: none;
    padding: 0.75rem;
}

.timezone-search-input {
    border: 2px solid var(--timezone-border);
    border-left: none;
    transition: var(--timezone-transition);
    padding: 0.75rem;
    font-size: 0.95rem;
}

.timezone-search-input:focus {
    border-color: var(--timezone-primary);
    box-shadow: none; /* 기본 포커스 제거 */
    outline: none;
}

.search-wrapper .input-group:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}

.search-wrapper .input-group:focus-within .input-group-text {
    border-color: var(--timezone-primary);
}

/* 시간대 추가 버튼 정렬 개선 */
.timezone-add-btn-wrapper {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-top: 2rem; /* 라벨 높이만큼 패딩 추가 */
}

.timezone-add-btn,
.btn-add-location {
    background: linear-gradient(135deg, var(--timezone-primary) 0%, var(--timezone-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    transition: var(--timezone-transition);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
    width: 100%;
    font-size: 0.95rem;
}

.timezone-add-btn:hover,
.btn-add-location:hover {
    background: linear-gradient(135deg, var(--timezone-primary-dark) 0%, var(--timezone-primary-darker) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    color: white;
}

/* ===================================
 * 검색 결과 위치 및 크기 수정 (완전 재작성)
 * =================================== */

/* 검색 래퍼 설정 */
.search-wrapper {
    position: relative;
    width: 100%;
}

/* 기존 col-md-3 설정 제거 */
.col-md-3 {
    position: static; /* relative 제거 */
}

/* 검색 결과 메인 컨테이너 - 크기 고정 */
#searchResults,
.search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    width: 100%; /* 부모 요소 너비에 맞춤 */
    background: white;
    border-radius: 8px;
    border: 1px solid var(--timezone-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1050;
    max-height: 300px;
    animation: searchResultsShow 0.2s ease-out;
    display: none; /* 기본적으로 숨김 */
}

/* 검색 결과와 다음 섹션 간 여백 확보 */
.webtools-card:has(#searchResults) {
    margin-bottom: 3rem; /* 추가 여백 */
}

/* 시간대 목록 섹션과의 간격 */
.timezone-add-card + .webtools-card {
    margin-top: 2.5rem;
}

/* 검색 결과 표시 시 */
#searchResults.show,
.search-results.show {
    display: block;
}

/* 검색 결과 나타나기 애니메이션 */
@keyframes searchResultsShow {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 검색 결과 헤더 */
.search-results-header {
    background: linear-gradient(135deg, var(--timezone-secondary) 0%, #e9ecef 100%);
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--timezone-border);
    font-weight: 600;
    color: var(--timezone-text);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-results-header i {
    color: var(--timezone-primary);
    font-size: 0.8rem;
}

/* 검색 결과 목록 컨테이너 */
#searchResultsList,
.search-results-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

/* 개별 검색 결과 아이템 - 크기 조정 */
.search-result-item,
.timezone-search-item {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    position: relative;
    min-height: auto;
}

.search-result-item:hover,
.timezone-search-item:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    transform: translateX(2px);
}

.search-result-item:last-child,
.timezone-search-item:last-child {
    border-bottom: none;
}

/* 검색 결과 정보 영역 - 크기 조정 */
.search-result-info {
    flex: 1;
    min-width: 0;
    margin-right: 0.75rem;
}

.search-result-name {
    font-weight: 600;
    color: var(--timezone-text);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.search-result-code {
    font-size: 0.75rem;
    color: var(--timezone-text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    opacity: 0.85;
    transition: color 0.2s ease;
    line-height: 1.1;
}

/* 검색 결과 액션 영역 - 크기 조정 */
.search-result-actions {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-shrink: 0;
}

/* 즐겨찾기 버튼 - 크기 조정 */
.btn-favorite {
    background: none;
    border: none;
    color: var(--timezone-text-muted);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    position: relative;
}

/* 추가 버튼 - 크기 조정 */
.search-result-actions .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--timezone-primary);
    background: white;
    color: var(--timezone-primary);
}

/* 추가됨 배지 - 크기 조정 */
.search-result-actions .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
    background: var(--timezone-success);
    color: white;
    border: none;
}

/* 검색 결과 스크롤바 - 더 얇게 */
.search-results-list::-webkit-scrollbar {
    width: 4px;
}

.search-results-list::-webkit-scrollbar-track {
    background: var(--timezone-secondary);
    border-radius: 2px;
}

.search-results-list::-webkit-scrollbar-thumb {
    background: var(--timezone-border);
    border-radius: 2px;
}

.search-results-list::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* 반응형 - 태블릿에서 검색 결과 */
@media (max-width: 768px) {
    /* 시간대 추가 영역 간격 */
    .timezone-add-card {
        padding: 1.5rem;
    }
    
    .timezone-add-card .col-md-6,
    .timezone-add-card .col-md-3 {
        margin-bottom: 1.25rem;
    }
    
    .timezone-add-btn-wrapper {
        padding-top: 0;
        margin-top: 1rem;
    }
	
	#searchResults,
    .search-results {
        top: calc(100% + 0.75rem);
        margin-top: 0;
		position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 6px;
        max-height: 250px;
    }
    
    .search-result-item,
    .timezone-search-item {
        padding: 0.875rem;
        flex-direction: row; /* 가로 배치 유지 */
        align-items: center;
        gap: 0.5rem;
    }
    
    .search-result-info {
        margin-right: 0.5rem;
    }
    
    .search-result-name {
        font-size: 0.95rem;
    }
    
    .search-result-code {
        font-size: 0.8rem;
    }
    
    .btn-favorite {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* 반응형 - 모바일에서 검색 결과 */
@media (max-width: 576px) {
    #searchResults,
    .search-results {
        max-height: 200px;
        border-radius: 4px;
    }
    
    .search-result-item,
    .timezone-search-item {
        padding: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .search-result-info {
        margin-right: 0;
        width: 100%;
    }
    
    .search-result-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .search-results-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .btn-favorite {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    .search-result-actions .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
}


/* ===================================
* 시간대 카드 스타일
* =================================== */
.timezone-card {
   background: white;
   border-radius: 12px;
   padding: 1.5rem;
   border: 2px solid #e9ecef;
   margin-bottom: 1rem;
   transition: var(--timezone-transition);
   box-shadow: 0 2px 8px var(--timezone-shadow);
}

.timezone-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   border-color: var(--timezone-primary);
}

/* 시간대 상태별 색상 */
.timezone-card.working-hours {
   border-left: 4px solid var(--timezone-success);
   background: linear-gradient(135deg, #f8fff9 0%, #f1f8f2 100%);
}

.timezone-card.sleeping-hours {
   border-left: 4px solid #6f42c1;
   background: linear-gradient(135deg, #faf7ff 0%, #f3f0ff 100%);
}

.timezone-card.non-working-hours {
   border-left: 4px solid #fd7e14;
   background: linear-gradient(135deg, #fff8f0 0%, #fef0e6 100%);
}

/* 시간대 정보 레이아웃 */
.timezone-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
}

.timezone-details h5 {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--timezone-primary);
}

.timezone-code {
   font-size: 0.85rem;
   color: var(--timezone-text-muted);
   font-family: 'Consolas', 'Monaco', monospace;
   margin-top: 0.25rem;
}

.status-icon {
   font-size: 1.2rem;
   margin-right: 0.75rem;
}

.status-icon.working {
   color: var(--timezone-success);
}

.status-icon.sleeping {
   color: #6f42c1;
}

.status-icon.non-working {
   color: #fd7e14;
}

/* 시간 표시 */
.timezone-time {
   text-align: right;
}

.time-display {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--timezone-text);
   font-family: 'Consolas', 'Monaco', monospace;
   line-height: 1;
}

.date-display {
   font-size: 0.85rem;
   color: var(--timezone-text-muted);
   margin-top: 0.25rem;
}

/* 시간대 액션 버튼 */
.timezone-actions {
   display: flex;
   gap: 0.5rem;
   margin-top: 1rem;
   justify-content: flex-end;
}

.timezone-actions .btn {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
}

/* ===================================
* 유틸리티 섹션 스타일
* =================================== */
.timezone-utility-section {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin: 2rem 0;
   flex-wrap: wrap;
}

.timezone-utility-btn,
.btn-utility {
   padding: 0.75rem 1.5rem;
   border-radius: 25px;
   font-weight: 500;
   transition: var(--timezone-transition);
   min-width: 140px;
   margin: 0.25rem;
}

/* ===================================
* 빈 상태 및 로딩 스타일
* =================================== */
.timezone-empty-state {
   text-align: center;
   padding: 3rem 1rem;
   color: var(--timezone-text-muted);
}

.timezone-empty-icon {
   font-size: 4rem;
   margin-bottom: 1rem;
   opacity: 0.5;
}

.timezone-loading,
.loading-spinner {
   text-align: center;
   padding: 2rem;
}

/* ===================================
* 토스트 메시지 스타일
* =================================== */
.toast-container {
   z-index: 9999;
}

/* ===================================
* FAQ 섹션 스타일
* =================================== */
.timezone-faq .accordion-item {
   border-radius: 8px;
   margin-bottom: 0.5rem;
   overflow: hidden;
   border: 1px solid #e5e8ec;
}

.timezone-faq .accordion-button {
   background: linear-gradient(135deg, var(--timezone-secondary) 0%, #e9ecef 100%);
   color: var(--timezone-text);
   font-weight: 600;
   border-radius: 8px;
}

.timezone-faq .accordion-button:not(.collapsed) {
   background: linear-gradient(135deg, var(--timezone-accent) 0%, #b3e5fc 100%);
   color: var(--timezone-primary);
}

.timezone-faq .accordion-body {
   background: white;
   color: var(--timezone-text);
   line-height: 1.6;
}

/* ===================================
* 반응형 디자인 - 태블릿 (768px 이하)
* =================================== */
@media (max-width: 768px) {
   /* 히어로 섹션 */
   .timezone-hero {
       padding: 1.5rem 1rem;
   }
   
   .timezone-hero .webtools-title {
       font-size: 2rem;
       gap: 0.75rem;
   }
   
   .timezone-hero .webtools-icon {
       font-size: 2rem;
   }
   
   .timezone-hero .webtools-subtitle {
       font-size: 1rem;
       margin-top: 0.75rem !important;
   }
   
   /* 시간대 추가 영역 */
   .timezone-add-card {
       padding: 1.5rem;
   }
   
   /* 시간대 카드 */
   .timezone-info {
       flex-direction: column;
       align-items: flex-start;
       gap: 1rem;
   }
   
   .timezone-time {
       text-align: left;
       width: 100%;
   }
   
   .time-display {
       font-size: 1.5rem;
   }
   
   /* 유틸리티 섹션 */
   .timezone-utility-section {
       flex-direction: column;
       align-items: center;
   }
   
   .timezone-utility-btn {
       width: 100%;
       max-width: 250px;
   }
   
   /* 검색 결과 */
   #searchResults,
   .search-results {
       margin-top: 0.5rem;
       border-radius: 6px;
       max-height: 250px;
   }
   
   .search-result-item,
   .timezone-search-item {
       padding: 1rem;
       flex-direction: column;
       align-items: flex-start;
       gap: 0.75rem;
   }
   
   .search-result-info {
       margin-right: 0;
       width: 100%;
   }
   
   .search-result-actions {
       width: 100%;
       justify-content: flex-end;
   }
   
   .search-result-name {
       font-size: 1rem;
   }
   
   .search-result-code {
       font-size: 0.85rem;
   }
   
   .btn-favorite {
       width: 40px;
       height: 40px;
       font-size: 1.1rem;
   }
}

/* ===================================
* 반응형 디자인 - 모바일 (576px 이하)
* =================================== */
@media (max-width: 576px) {
   /* 히어로 섹션 */
   .timezone-hero {
       padding: 1rem 0.75rem;
   }
   
   .timezone-hero .webtools-title {
       font-size: 1.75rem;
       gap: 0.5rem;
   }
   
   .timezone-hero .webtools-icon {
       font-size: 1.75rem;
   }
   
   .timezone-hero .webtools-subtitle {
       font-size: 0.9rem;
       margin-top: 0.5rem !important;
   }
   
   /* 시간대 추가 영역 */
   .timezone-add-card {
       padding: 1rem;
   }
   
   /* 시간대 카드 */
   .timezone-card {
       padding: 1rem;
   }
   
   .time-display {
       font-size: 1.3rem;
   }
   
   .timezone-actions {
       justify-content: center;
       margin-top: 1.5rem;
   }
   
   /* 검색 결과 */
   #searchResults,
   .search-results {
       max-height: 200px;
       border-radius: 4px;
   }
   
   .search-result-item,
   .timezone-search-item {
       padding: 0.875rem;
   }
   
   .search-results-header {
       padding: 0.625rem 0.875rem;
       font-size: 0.85rem;
   }
   
   .search-result-actions .btn-sm {
       padding: 0.5rem 0.875rem;
       font-size: 0.85rem;
   }
   
   .btn-favorite {
       width: 44px;
       height: 44px;
       font-size: 1.2rem;
   }
}

/* ===================================
* 접근성 및 고대비 모드 지원
* =================================== */
@media (prefers-contrast: high) {
   .search-result-item,
   .timezone-search-item {
       border-bottom: 2px solid #000;
   }
   
   .search-result-item:hover,
   .timezone-search-item:hover {
       background: #e3f2fd;
       border-left: 4px solid #1976d2;
   }
   
   .search-result-item.selected {
       border-left: 4px solid var(--timezone-success);
       background: #e8f5e8;
   }
}

/* ===================================
* 다크모드 지원 (선택사항)
* =================================== */
@media (prefers-color-scheme: dark) {
   #searchResults,
   .search-results {
       background: #2c3e50;
       border-color: #34495e;
       color: white;
   }
   
   .search-results-header {
       background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
       color: #ecf0f1;
       border-color: #34495e;
   }
   
   .search-result-item,
   .timezone-search-item {
       background: #2c3e50;
       border-color: #34495e;
       color: #ecf0f1;
   }
   
   .search-result-item:hover,
   .timezone-search-item:hover {
       background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
   }
   
   .search-result-name {
       color: #ecf0f1;
   }
   
   .search-result-code {
       color: #bdc3c7;
   }
}

/* ===================================
* 추가 기능 스타일 (기타)
* =================================== */
.add-location-card {
   background: linear-gradient(135deg, var(--timezone-secondary) 0%, #e9ecef 100%);
   border-radius: 16px;
   padding: 2rem;
   border: 2px solid var(--timezone-border);
   margin-bottom: 2rem;
}

/* 애니메이션 성능 최적화 */
@media (prefers-reduced-motion: reduce) {
   .timezone-card,
   .search-result-item,
   .timezone-search-item,
   .btn-favorite,
   .timezone-add-btn,
   .btn-add-location {
       transition: none;
       animation: none;
   }
   
   @keyframes searchResultsShow,
   @keyframes starPulse,
   @keyframes badgeSlideIn {
       animation-duration: 0.01ms;
   }
}

/* ===================================
* 인쇄 최적화
* =================================== */
@media print {
   .timezone-hero,
   .timezone-add-card,
   .search-results,
   .timezone-utility-section {
       display: none;
   }
   
   .timezone-card {
       border: 1px solid #000;
       margin-bottom: 1rem;
       break-inside: avoid;
   }
}