* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
    line-height: 1.6;
    color: #f8fafc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* Header Section */
.header {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    padding: 24px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title {
    font-size: 28px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #f8fafc 0%, #60a5fa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-subtitle {
    font-size: 14px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Integrated Status Info in Heatmap */
.heatmap-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.status-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.status-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-label-inline {
    color: #94a3b8;
    font-weight: 500;
}

.status-value-inline {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 1.1rem;
}

.status-divider {
    color: #475569;
}

.status-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-normal { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff; 
}

.status-badge.status-caution { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff; 
}

.status-badge.status-warning { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff; 
}

.status-badge.status-critical { 
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff; 
}

/* Modern Animations and Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes statusBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading States */
.loading {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.1) 25%,
        rgba(148, 163, 184, 0.3) 50%,
        rgba(148, 163, 184, 0.1) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.4s ease-out;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 32px; /* Extra padding for content after header */
}

/* Two-column layout for main content */
.main-content {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.left-column {
    flex: 1; /* 50% width */
    min-width: 0;
}

.right-column {
    flex: 1; /* 50% width */
    min-width: 0;
}

/* Old Machine Status section removed - now integrated with heatmap */

/* 2단: Temperature Heatmap */
.heatmap-section {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 80px;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.3),
        0 10px 10px -5px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(51, 65, 85, 0.6);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.heatmap-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0; /* Remove margin for better alignment */
    color: #f8fafc;
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.heatmap-container {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Changed from stretch */
    margin-top: 20px;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* No gaps between cells */
    flex: 1;
    max-width: 600px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(51, 65, 85, 0.3);
    position: relative;
    z-index: 1;
}

/* Temperature color legend */
.temp-legend {
    width: 30px; /* Slightly wider for better visibility */
    height: 460px; /* Exact 4x4 cell grid height (500px - 40px padding) */
    padding: 0;
    margin-left: 15px;
    background: linear-gradient(to top,
        #1e293b 0%,    /* Dark slate - 20°C */
        #1e293b 14%,   /* Dark slate - 25°C */
        #1d4ed8 28%,   /* Deep blue - 30°C */
        #2563eb 42%,   /* Blue - 35-40°C */
        #f59e0b 56%,   /* Amber orange - 45°C */
        #fb923c 70%,   /* Orange - 50-55°C */
        #f97316 84%,   /* Deep orange - 60-70°C */
        #ea580c 100%   /* Red orange - 80-85°C+ */
    );
    border-radius: 0; /* Rectangular shape, no rounded corners */
    position: relative;
}

.temp-legend-labels {
    position: absolute;
    right: -50px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.temp-legend-label {
    display: flex;
    align-items: center;
    line-height: 1;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 0; /* No rounded corners for seamless grid */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff; /* White text for better contrast */
    font-weight: 600;
    font-size: 15px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
}

/* First and last cells get rounded corners */
.heatmap-cell:first-child {
    border-top-left-radius: 8px;
}
.heatmap-cell:nth-child(4) {
    border-top-right-radius: 8px;
}
.heatmap-cell:nth-child(13) {
    border-bottom-left-radius: 8px;
}
.heatmap-cell:last-child {
    border-bottom-right-radius: 8px;
}



.heatmap-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1) 100%);
    border-radius: 4px;
    pointer-events: none;
}


.cell-id {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.cell-temp {
    font-size: 14px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

/* Min/Max 온도 표시 스타일 */
.cell-temp-min, .cell-temp-max {
    font-size: 12px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    margin: 2px 0;
    white-space: nowrap;
}

.cell-temp-min {
    color: rgba(255, 255, 255, 0.85);
}

.cell-temp-max {
    color: rgba(255, 255, 255, 1);
    font-weight: 800;
}

/* 3단: History Table */
.history-section {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.3),
        0 10px 10px -5px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(51, 65, 85, 0.6);
    position: relative;
    overflow: visible;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-section .section-title {
    margin-bottom: 20px;
}


.history-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.history-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.date-picker {
    padding: 10px 40px 10px 14px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.date-picker:hover {
    border-color: rgba(96, 165, 250, 0.4);
    background: linear-gradient(135deg, rgba(51, 65, 85, 1) 0%, rgba(30, 41, 59, 1) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.date-picker:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(51, 65, 85, 1) 0%, rgba(30, 41, 59, 1) 100%);
}

/* Style the calendar icon */
.date-picker::-webkit-calendar-picker-indicator {
    filter: grayscale(1) invert(1);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-right: 4px;
}

.date-picker::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.history-table th {
    background: #334155;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid #475569;
    color: #f1f5f9;
}

.history-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #475569;
    color: #e2e8f0;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.normal { background: #e8f5e8; color: #2e7d32; }
.status-badge.monitoring { background: #e3f2fd; color: #1565c0; }
.status-badge.caution { background: #fff3e0; color: #ef6c00; }
.status-badge.warning { background: #ffebee; color: #d32f2f; }
.status-badge.critical { background: #ffcdd2; color: #b71c1c; }

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
}

.page-info {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.history-table {
    min-height: 200px;
}

/* External Temperature Section */
.external-temp-section {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 0px; /* 기본 마진 제거 - 모바일에서 간격 문제 해결 */
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.3),
        0 10px 10px -5px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(51, 65, 85, 0.6);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.external-temp-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.temp-chart-container {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(51, 65, 85, 0.3);
    margin-top: 0px; /* external-temp-section 내부 공간 최적화 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px; /* 모바일 최적화를 위한 높이 축소 */
}

.temp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.temp-stat-item {
    background: rgba(51, 65, 85, 0.4);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(71, 85, 105, 0.5);
}

.temp-stat-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.temp-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
}

/* Temperature Trends Section */
.trends-section {
    background: #1e293b;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 1px solid #334155;
}

/* Unified Container Layout */
.trends-unified-container {
    display: flex;
    gap: 24px;
    padding: 20px;
    background: #1e293b;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #334155;
    height: auto;
    align-items: stretch;  /* Changed from flex-start to stretch */
}

.trends-left-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trends-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0; /* Important for flex child to shrink */
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;  /* Reduced from 12px to 6px */
}

.section-title-small {
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
}

.section-subtitle {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}

/* Zone Selection Section */
.zone-selection-section {
    background: #334155;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #475569;
}

.zone-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.zone-btn-unified {
    padding: 12px 16px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}


.zone-btn-unified.active {
    background: #60a5fa;
    border-color: #60a5fa;
    color: white;
}

/* Zone Overview Section */
.zone-overview-section {
    background: #334155;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #475569;
    height: 480px;  /* Match graph section height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.zone-visual-unified {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zone-grid-unified {
    align-self: center;
}

.grid-4x4-unified {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 200px;
}

.grid-cell-unified {
    aspect-ratio: 1;
    background: #1e293b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    border: 1px solid #475569;
    transition: all 0.2s ease;
}

.grid-cell-unified.zone-highlight {
    background: #60a5fa;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

.zone-details-unified {
    background: #1e293b;
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #475569;
}

.zone-info-unified {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zone-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.zone-info-row .info-label {
    color: #94a3b8;
    font-weight: 500;
}

.zone-info-row .info-value {
    color: #f1f5f9;
    font-weight: 600;
}

/* Period Controls Section */
.period-controls-section {
    background: #334155;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #475569;
}

.period-controls-unified {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.period-dropdown-unified {
    padding: 10px 12px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

.custom-date-range-unified {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.date-picker-unified {
    padding: 10px 36px 10px 12px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: #f1f5f9;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.date-picker-unified:hover {
    border-color: rgba(96, 165, 250, 0.4);
    background: linear-gradient(135deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.date-picker-unified:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2), 0 3px 8px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%);
}

/* Style the calendar icon */
.date-picker-unified::-webkit-calendar-picker-indicator {
    filter: grayscale(1) invert(1);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-right: 4px;
}

.date-picker-unified::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Custom Date Picker Styles */
.custom-date-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 140px;
    max-width: 180px;
}

.custom-date-input {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    backdrop-filter: blur(10px);
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-date-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.custom-calendar-icon {
    display: none;
}

.custom-calendar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10000;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 16px;
    display: none;
    min-width: 280px;
    max-height: 400px;
    overflow-y: auto;
}

.custom-calendar-dropdown.show {
    display: block;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.4);
}

.calendar-nav-btn {
    background: transparent;
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #60a5fa;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-nav-btn:hover {
    background: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa;
}

.calendar-month-year {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 16px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    padding: 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(51, 65, 85, 0.3);
    border: 1px solid transparent;
    border-radius: 6px;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.calendar-day:hover {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
}

.calendar-day.selected {
    background: #60a5fa;
    color: white;
    font-weight: 600;
}

.calendar-day.today {
    border-color: #60a5fa;
    font-weight: 600;
}

.calendar-day.other-month {
    opacity: 0.3;
}

.date-separator {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}

.load-btn-unified {
    padding: 10px 20px;
    background: #60a5fa;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    align-self: flex-start;
}


/* Graph Section */
.graph-section-unified {
    background: #334155;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #475569;
    display: flex;
    flex-direction: column;
    height: 480px;
    max-height: 480px;
}

.graph-container-unified {
    width: 100%;
    height: 400px;
    flex: 1;
}

.graph-container-unified canvas {
    width: 100% !important;
    height: 100% !important;
}

.graph-message-unified {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}



.selection-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .trends-unified-container {
        flex-direction: column;
        gap: 20px;
        min-height: auto;
        align-items: flex-start;  /* Reset to flex-start for mobile */
    }
    
    .zone-overview-section {
        height: auto;  /* Auto height on smaller screens */
        justify-content: flex-start;
    }
    
    .trends-left-column {
        flex: none;
        width: 100%;
    }
    
    .trends-right-column {
        flex: none;
        width: 100%;
    }
    
    .zone-buttons-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .period-controls-unified {
        align-items: center;
    }
    
    .custom-date-range-unified {
        justify-content: center;
    }
    
    .section-title-small {
        text-align: center;
    }
    
    .section-subtitle {
        text-align: center;
    }
}

.selection-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.selection-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 16px;
}

.selection-label {
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
    display: block;
}

.selection-dropdown {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #475569;
    border-radius: 6px;
    background: #334155;
    color: #f1f5f9;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}


.selection-dropdown:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Cell Visual Layout */
.cell-layout {
    margin: 20px 0;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.cell-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.cell-visual {
    padding: 12px;
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.cell-visual.active {
    border-color: #2196f3;
    background: #2196f3;
    color: white;
}

/* Enhanced Zone Selection Layout */
.zone-selection-container {
    display: flex;
    gap: 32px;
    margin: 20px 0;
    align-items: flex-start;
}

.zone-controls-left {
    flex: 1;
    min-width: 300px;
}

.zone-visual-display {
    flex: 1;
    height: 100%;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.zone-visual-display.active {
    border-color: #60a5fa;
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.25);
}

.zone-display-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #475569;
    padding-bottom: 12px;
}

.zone-display-header h4 {
    margin: 0;
    color: #f1f5f9;
    font-size: 18px;
    font-weight: 600;
}

.zone-display-subtitle {
    color: #94a3b8;
    font-size: 14px;
    font-style: italic;
}

/* Zone Quick Select Buttons */
.zone-quick-select {
    margin-top: 16px;
}

.zone-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.zone-btn {
    padding: 12px 20px;
    border: 2px solid #475569;
    background: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    color: #f1f5f9;
    text-align: center;
    min-width: 120px;
}

.zone-btn-enhanced {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
}

.zone-btn-label {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
}

.zone-btn-desc {
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    opacity: 0.8;
}




.zone-btn.active {
    background: #60a5fa;
    color: white;
    border-color: #60a5fa;
}

.zone-btn-enhanced.active .zone-btn-label {
    color: white;
}

.zone-btn-enhanced.active .zone-btn-desc {
    color: #e0f2fe;
    opacity: 1;
}

/* 4x4 Grid Display */
.zone-grid-display {
    margin: 20px 0;
}

.grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    max-width: 280px;
    margin: 0 auto;
    border: 2px solid #475569;
    border-radius: 8px;
    padding: 8px;
    background: #334155;
}

.grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    transition: all 0.3s ease;
    cursor: pointer;
}


.grid-cell.zone-highlight {
    background: #60a5fa;
    color: white;
    border-color: #3b82f6;
    font-weight: 600;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
}


/* Zone Details Panel */
.zone-details-panel {
    margin-top: 20px;
    padding: 16px;
    background: #334155;
    border-radius: 8px;
    border: 1px solid #475569;
}

.zone-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zone-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 14px;
}

.info-value {
    color: #60a5fa;
    font-weight: 500;
    font-size: 14px;
}

/* Custom Date Range */
.custom-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.date-range-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trends-graph-container {
    height: 400px;
    margin-top: 20px;
}

/* Temperature Graph Zone Visual Styles */
.graph-zone-container {
    display: flex;
    gap: 32px;
    margin: 20px 0;
    align-items: flex-start;
}

.graph-controls-left {
    flex: 1;
    min-width: 280px;
}

.date-range-inputs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.graph-zone-visual {
    flex: 1;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.graph-zone-visual.active {
    border-color: #2196f3;
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.15);
}

.graph-zone-info {
    margin-top: 16px;
    padding: 12px;
    background: #334155;
    border-radius: 6px;
    border: 1px solid #475569;
}

.zone-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.zone-info-item:last-child {
    margin-bottom: 0;
}

/* 4단: Temperature Graph (조건부 표시) */
.graph-section {
    background: #1e293b;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 1px solid #334155;
    display: none;
}

.graph-section.active {
    display: block;
}

/* Graph Layout Styles */
.graph-main-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.graph-left-column {
    flex: 0 0 400px;
    min-width: 400px;
}

.graph-right-column {
    flex: 1;
    min-width: 500px;
}

/* Responsive adjustments for graph section */
@media (max-width: 1200px) {
    .graph-main-layout {
        flex-direction: column;
    }
    
    .graph-left-column {
        flex: none;
        width: 100%;
        min-width: auto;
    }
    
    .graph-right-column {
        width: 100%;
        min-width: auto;
    }
}

.graph-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.selection-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selection-label {
    font-weight: 600;
    color: #666;
    font-size: 14px;
}

.selection-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    padding: 8px 16px;
    border: 2px solid #475569;
    background: #334155;
    color: #f1f5f9;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}


.btn.active {
    background: #60a5fa;
    color: white;
    border-color: #60a5fa;
}

.graph-container {
    height: 400px;
    margin-top: 20px;
}

/* CSS Custom Properties for theming */
:root {
    --primary-bg: rgba(30, 41, 59, 0.8);
    --glass-bg: rgba(15, 23, 42, 0.6);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --border-primary: rgba(51, 65, 85, 0.6);
    --border-secondary: rgba(51, 65, 85, 0.3);
    --shadow-primary: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    --gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern container queries for adaptive design */
.container {
    container-type: inline-size;
    max-width: 1400px;
}

@container (max-width: 768px) {
    .status-container {
        gap: 32px;
    }
    
    .heatmap-grid {
        max-width: none !important;
        width: 100% !important;
        padding: 16px;
        margin: 0;
        box-sizing: border-box;
        flex: none !important;
    }
}

/* Enhanced accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --text-primary: #1e293b;
        --text-secondary: #475569;
    }
}

/* 반응형 디자인 */
/* Responsive Design for Two-Column Layout */
@media (max-width: 1300px) {
    .main-content {
        flex-direction: column;
    }
    
    .left-column,
    .right-column {
        flex: 1;
        width: 100%;
    }
    
    .external-temp-section {
        width: 100%;
        padding: 16px;
        height: 420px !important; /* 그래프 하단 공간 더 확보 */
        min-height: 420px !important;
        max-height: 420px !important;
        margin-bottom: 0px !important; /* 하단 마진 완전 제거 */
    }
    
    .temp-chart-container {
        min-height: 320px !important; /* 모바일 그래프 크기 약간 증가 */
        height: 320px !important;
        max-height: 320px !important;
        margin-top: 0px !important; /* 내부 공간 최적화 */
        padding: 8px !important; /* 15px에서 8px로 축소 */
    }
}

/* ============================================
   Mobile-First Responsive Design System
   ============================================ */

/* 1. Base Mobile Styles (320px and below) */
@media screen and (max-width: 319px) {
    .container {
        padding: 10px !important;
        max-width: 100% !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 15px !important;  /* Add spacing between title and legend */
    }
    
    .section-title {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    /* Fix Temperature Trends overflow */
    .trends-unified-container {
        width: calc(100% - 20px) !important;
        margin: 0 10px !important;
        overflow-x: hidden !important;
    }
}

/* 2. iPhone SE, Galaxy S Mini (320px~359px) */
@media screen and (min-width: 320px) and (max-width: 359px) {
    .container {
        padding: 12px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 20px !important;  /* Increased spacing */
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .trends-unified-container {
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* 3. Small Android (360px~374px) */
@media screen and (min-width: 360px) and (max-width: 374px) {
    .container {
        padding: 14px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 20px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .trends-unified-container {
        width: calc(100% - 28px) !important;
        margin: 0 14px !important;
        padding: 14px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* 4. iPhone 12 mini (375px~389px) */
@media screen and (min-width: 375px) and (max-width: 389px) {
    .container {
        padding: 15px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 25px !important;  /* Increased spacing */
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .trends-unified-container {
        width: calc(100% - 30px) !important;
        margin: 0 15px !important;
        overflow-x: hidden !important;
    }
}

/* 5. iPhone 12/13/14 Standard (390px~413px) */
@media screen and (min-width: 390px) and (max-width: 413px) {
    .container {
        padding: 16px !important;
        max-width: 100% !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 25px !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .trends-unified-container {
        width: calc(100% - 32px) !important;
        margin: 0 16px !important;
        padding: 16px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #trendsGraphContainer {
        height: 280px !important;  /* Reduced from 350px */
        min-height: 280px !important;
    }
    
    /* iPhone 12/13/14 히트맵 셀 최적화 */
    .heatmap-cell {
        min-height: 85px !important;     /* 90px → 85px */
        font-size: 13px !important;      /* 14px → 13px */ 
        padding: 10px 5px !important;    /* 12px 6px → 10px 5px */
    }
    
    .cell-id {
        font-size: 10px !important;      /* 11px → 10px */
        margin-bottom: 1px;              /* 3px → 1px */
    }
    
    .cell-temp-min {
        font-size: 10px !important;      /* 11px → 10px */
        margin-bottom: 1px;              /* 기존 1px 유지 */
    }
    
    .cell-temp-max {
        font-size: 11px !important;      /* 12px → 11px */
        margin-top: 1px;                 /* 2px → 1px */
    }
}

/* 6. Standard Android (414px~427px) */
@media screen and (min-width: 414px) and (max-width: 427px) {
    .container {
        padding: 18px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 25px !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .trends-unified-container {
        width: calc(100% - 36px) !important;
        margin: 0 18px !important;
        overflow-x: hidden !important;
    }
}

/* 7. iPhone Plus, Large Android (428px~479px) */
@media screen and (min-width: 428px) and (max-width: 479px) {
    .container {
        padding: 20px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .trends-unified-container {
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
        overflow-x: hidden !important;
    }
    
    #trendsGraphContainer {
        height: 300px !important;  /* Reduced from 380px */
    }
}

/* 8. Landscape Mobile (480px~767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        padding: 20px 24px !important;
    }
    
    .external-temp-section {
        padding: 20px !important;
        margin-bottom: 5px !important; /* 30px → 5px로 대폭 축소 */
    }
    
    .external-temp-header {
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .trends-unified-container {
        flex-direction: column !important;  /* Changed to column to prevent overflow */
        width: calc(100% - 48px) !important;
        margin: 0 24px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #trendsGraphContainer {
        height: 320px !important;  /* Reduced from 400px */
    }
}

/* 9. Main Mobile Styles (up to 1300px) - Consolidated */
@media screen and (max-width: 1300px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }
    
    /* Critical Mobile Fixes for Heatmap */
    .main-content {
        flex-direction: column !important;
        gap: 20px;
    }
    
    .left-column,
    .right-column {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .heatmap-section {
        padding: 8px !important;
        margin-bottom: 20px;
        /* 모바일에서 화면 가장자리 완전히 붙이기 */
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100vw !important;
        border-radius: 0 !important;
        min-height: 420px !important;
    }
    
    .heatmap-container {
        flex-direction: column !important;
        gap: 15px;
        align-items: stretch !important;
        width: 100% !important;
        justify-content: flex-start;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .heatmap-grid {
        max-width: none !important;
        width: 100% !important;
        padding: 4px !important;
        margin: 0 !important;
        /* 모바일에서 전체 너비 차지하도록 조정 */
        border-radius: 0px !important;
        box-sizing: border-box;
        flex: none !important;
        min-height: 320px !important;
    }
    
    /* Fix cell sizes and text - Min/Max 값 모두 표시하기 위해 더 큰 셀 크기 */
    .heatmap-cell {
        font-size: 14px !important;
        padding: 10px 6px !important;
        min-height: 85px !important;
        /* 모바일에서 Min/Max 값 모두 표시하기 위한 높이 증가 */
    }
    
    .cell-id {
        font-size: 11px !important;
        margin-bottom: 3px;
        font-weight: 700;
    }
    
    .cell-temp {
        font-size: 13px !important;
        font-weight: 700;
    }
    
    /* 모바일에서도 Min과 Max 모두 표시 */
    .cell-temp-min {
        font-size: 11px !important;
        font-weight: 600;
        margin-bottom: 1px;
    }
    
    .cell-temp-max {
        font-size: 12px !important;
        font-weight: 700;
        margin-top: 1px;
    }
    
    /* Temperature Legend - Hidden on Mobile */
    .temp-legend {
        display: none !important;
    }
    
    .temp-legend-labels {
        display: none !important;
    }
    
    /* Header adjustments */
    .heatmap-header {
        gap: 8px;
    }
    
    .section-title {
        font-size: 18px !important;
    }
    
    .status-info {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px !important;
    }
    
    .status-value-inline {
        font-size: 0.9rem !important;
    }
    
    .status-badge {
        font-size: 0.85rem !important;
        padding: 4px 10px !important;
    }
    
    /* Temperature Trends Container Fix */
    .trends-unified-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .container {
        padding: 0px !important;
        max-width: 100%;
    }
    
    .container {
        padding: 12px;
    }
    
    /* Reduce legend size on mobile */
    .chart-legend {
        font-size: 10px !important;
    }
    
    /* Make zone selection grid larger on mobile */
    .grid-4x4-unified {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    /* Full-width graph containers on mobile */
    .graph-container-unified,
    #trendsGraphContainer,
    .temp-chart-container {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Main content sections */
    .main-content {
        padding: 0px !important;
        gap: 16px !important;
        margin: 0 !important;
    }
    
    /* Heatmap and external temp sections */
    .left-column,
    .right-column {
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .left-column {
        margin-bottom: 30px !important;
    }
    
    .right-column {
        margin-bottom: 12px !important; /* 25px에서 12px로 절반 감소 */
    }
    
    .heatmap-section {
        width: 100% !important;
        padding: 8px !important;
        margin: 0 !important;
    }
    
    .external-temp-section {
        width: calc(100% - 16px) !important;
        padding: 16px !important;
        margin: 0 8px 0px 8px !important; /* 하단 마진 완전 제거 */
        height: 420px !important; /* 그래프 하단 공간 더 확보 */
        min-height: 420px !important;
        max-height: 420px !important;
    }
    
    .temp-chart-container {
        height: 320px !important; /* 모바일 그래프 크기 약간 증가 */
        min-height: 320px !important;
        max-height: 320px !important;
        margin-top: 0px !important; /* 내부 공간 최적화 */
        padding: 8px !important; /* 15px에서 8px로 축소 */
    }
    
    /* Ensure canvas elements fill container */
    canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    .grid-cell-unified {
        font-size: 14px !important;
        padding: 15px !important;
        min-height: 60px !important;
    }
    
    /* Only heatmap section gets full width, others get padding */
    .history-section,
    .graph-section {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: calc(100% - 16px) !important;
    }
    
    /* history-section 하단 여백 추가 */
    .history-section {
        margin-bottom: 80px !important; /* 모바일에서 더 많은 하단 여백 */
    }
    
    .external-temp-section {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: calc(100% - 16px) !important;
    }
    
    /* Header responsive */
    .header-title {
        font-size: 22px;
    }
    
    .header-subtitle {
        font-size: 12px;
    }
    
    /* Heatmap header responsive */
    .heatmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .status-info {
        font-size: 13px;
    }
    
    .status-badge {
        font-size: 11px;
        padding: 4px 12px;
    }
    
    .heatmap-section,
    .history-section,
    .graph-section {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    /* history-section에 추가 하단 마진으로 스크롤 여유 공간 확보 */
    .history-section {
        margin-bottom: 60px !important; /* 모바일에서 충분한 하단 여백 */
    }
    
    .history-section .section-title {
        margin-bottom: 0;
    }
    
    .heatmap-grid {
        gap: 0;
    }
    
    .trends-unified-container {
        padding: 16px;
        gap: 16px;
    }
    
    .control-label {
        font-size: 13px;
    }
    
    .zone-btn-compact {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .selection-dropdown-compact,
    .btn-compact {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .grid-4x4-unified {
        width: 160px;
    }
    
    .grid-cell-unified {
        font-size: 10px;
    }
    
    .zone-info-row {
        font-size: 12px;
    }
    
    .zone-btn-unified {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .period-dropdown-unified,
    .date-picker-unified,
    .load-btn-unified {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .cell-temp {
        font-size: 14px;
    }
    
    .cell-id {
        font-size: 12px;
    }
    
    .history-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .graph-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .selection-buttons {
        justify-content: center;
    }
    
    /* Make zone buttons wider on mobile */
    .zone-btn-unified {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    /* Zone Selection and Overview Fix */
    .zone-selection-section,
    .zone-overview-section {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        margin: 0 !important;
    }
    
    .zone-buttons-grid {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .grid-4x4-unified {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* Graph Container Responsive Height */
    .graph-container-unified {
        height: 320px !important;
        min-height: 300px !important;
        max-height: 400px !important;
        margin-bottom: 20px;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #trendsGraphContainer {
        display: block !important;
        height: 100% !important;
        width: 100% !important;
        padding: 10px;
        box-sizing: border-box !important;
    }
    
    #trendsGraphContainer canvas {
        height: 100% !important;
        width: 100% !important;
    }
    
    .history-table {
        font-size: 14px;
    }
    
    .history-table th,
    .history-table td {
        padding: 8px;
    }
    
    /* Zone Selection Responsive */
    .zone-selection-container {
        flex-direction: column;
        gap: 20px;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .zone-controls-left {
        min-width: auto;
    }
    
    .zone-visual-display {
        order: -1;
    }
    
    .grid-4x4 {
        max-width: 240px;
    }
    
    .zone-buttons {
        justify-content: center;
    }
    
    /* Temperature Graph Responsive */
    .graph-zone-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .graph-controls-left {
        min-width: auto;
    }
    
    .graph-zone-visual {
        order: -1;
    }
    
    .date-range-inputs {
        justify-content: center;
    }
}

/* Small phones (Galaxy Fold, etc.) */
@media (max-width: 360px) {
    .graph-container-unified,
    #trendsGraphContainer {
        height: 50vh !important;
        min-height: 320px !important;
        max-height: 450px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .grid-4x4-unified {
        max-width: 280px !important;
    }
    
    .grid-cell-unified {
        font-size: 12px !important;
        padding: 12px !important;
        min-height: 50px !important;
    }
    
    /* 아주 작은 화면에서 히트맵 셀 크기 최적화 - Min/Max 모두 표시 */
    .heatmap-cell {
        min-height: 75px !important;
        font-size: 13px !important;
        padding: 8px 4px !important;
    }
    
    .cell-temp-min {
        font-size: 10px !important;
        margin-bottom: 1px;
    }
    
    .cell-temp-max {
        font-size: 11px !important;
        margin-top: 1px;
    }
    
    .heatmap-grid {
        width: 100% !important;
        max-width: none !important;
        padding: 6px !important;
        margin: 0;
        box-sizing: border-box;
        flex: none !important;
        min-height: 300px !important;
    }
}

/* Small phones - 더 작은 최적화 (361px~389px) */
@media (min-width: 361px) and (max-width: 389px) {
    .graph-container-unified,
    #trendsGraphContainer {
        height: 50vh !important;
        min-height: 320px !important;
        max-height: 450px !important;
    }
    
    /* 작은 화면에서 히트맵 셀 크기 최적화 */
    .heatmap-cell {
        min-height: 80px !important;     /* 90px → 80px */
        font-size: 12px !important;      /* 14px → 12px */
        padding: 8px 4px !important;     /* 12px 6px → 8px 4px */
    }
    
    .cell-id {
        font-size: 9px !important;       /* 11px → 9px */
        margin-bottom: 1px;              /* 3px → 1px */
    }
    
    .cell-temp-min {
        font-size: 9px !important;       /* 11px → 9px */
        margin-bottom: 0px;              /* 1px → 0px */
    }
    
    .cell-temp-max {
        font-size: 10px !important;      /* 12px → 10px */
        margin-top: 1px;                 /* 2px → 1px */
    }
}

/* Standard phones (iPhone 6/7/8) - 기존 범위 조정 */
@media (min-width: 390px) and (max-width: 414px) {
    .graph-container-unified,
    #trendsGraphContainer {
        height: 50vh !important;
        min-height: 320px !important;
        max-height: 450px !important;
    }
    
    /* 이미 iPhone 12/13/14 섹션에서 처리되므로 기본값만 유지 */
}

/* Larger phones */
@media (min-width: 415px) and (max-width: 480px) {
    .graph-container-unified,
    #trendsGraphContainer {
        height: 52vh !important;
        min-height: 340px !important;
        max-height: 480px !important;
    }
    
    .status-container {
        gap: 16px;
    }
    
    .status-value {
        font-size: 14px;
        padding: 10px 16px;
        min-width: 80px;
    }
    
    .heatmap-grid {
        gap: 0;
    }
    
    /* 큰 폰에서 히트맵 최적화 - 일관성 있는 크기 조정 */
    .heatmap-cell {
        min-height: 88px !important;     /* 95px → 88px */
        font-size: 14px !important;      /* 15px → 14px */
        padding: 12px 7px !important;    /* 14px 8px → 12px 7px */
    }
    
    .cell-temp-min {
        font-size: 11px !important;      /* 13px → 11px */
        margin-bottom: 1px;              /* 2px → 1px */
    }
    
    .cell-temp-max {
        font-size: 12px !important;      /* 14px → 12px */
        margin-top: 1px;                 /* 2px → 1px */
    }
    
    .cell-id {
        font-size: 11px !important;      /* 13px → 11px */
        margin-bottom: 2px;              /* 5px → 2px */
    }
    
    .btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .section-title {
        font-size: 18px;
    }
}

/* Landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .graph-container-unified,
    #trendsGraphContainer {
        height: 70vh !important;
        min-height: 250px !important;
        max-height: 350px !important;
    }
    
    .grid-4x4-unified {
        max-width: 200px !important;
    }
    
    .grid-cell-unified {
        min-height: 40px !important;
        padding: 8px !important;
    }
}

/* Tablet styles (768px~1300px) */
@media (min-width: 768px) and (max-width: 1300px) {
    /* 태블릿도 모바일처럼 세로 레이아웃 적용 */
    .main-content {
        flex-direction: column !important;
        gap: 20px;
    }
    
    .left-column,
    .right-column {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 태블릿에서 히트맵 전체 너비 사용 */
    .heatmap-section {
        width: 100% !important;
        padding: 24px !important;
        margin: 0 !important;
    }
    
    .heatmap-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }
    
    /* 태블릿에서 히트맵 그리드 전체 최적화 */
    .heatmap-grid {
        max-width: none !important;      /* 크기 제한 제거 */
        width: 100% !important;          /* 전체 너비 사용 */
        padding: 30px 20px !important;   /* 더 넉넉한 패딩 */
        margin: 0 !important;
        box-sizing: border-box;
    }
    
    /* 태블릿에서 히트맵 셀 텍스트 크기 최적화 */
    .heatmap-cell {
        min-height: 110px !important;    /* 태블릿에 맞는 셀 크기 */
        font-size: 16px !important;      /* 기본 폰트 증가 */
        padding: 16px 10px !important;   /* 충분한 패딩 */
    }
    
    .cell-id {
        font-size: 14px !important;      /* 셀 번호 */
        margin-bottom: 4px;
        font-weight: 700;
    }
    
    .cell-temp-min {
        font-size: 13px !important;      /* 최소 온도 */
        margin-bottom: 2px;
    }
    
    .cell-temp-max {
        font-size: 14px !important;      /* 최대 온도 */
        margin-top: 2px;
        font-weight: 700;
    }
    
    /* 태블릿에서 온도 범례 숨기기 (모바일처럼) */
    .temp-legend {
        display: none !important;
    }
    
    .temp-legend-labels {
        display: none !important;
    }
}

/* Desktop styles (larger screens) */
@media (min-width: 1301px) {
    /* main-content flex 레이아웃 최적화 */
    .main-content {
        display: flex;
        flex-direction: row;
        align-items: stretch; /* 양쪽 컬럼 높이 맞춤 */
        justify-content: flex-start;
        gap: 20px;
    }
    
    .left-column, .right-column {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    
    .heatmap-grid {
        flex: 0 0 auto; /* 내용에 맞는 크기로 고정 */
        max-width: none; /* 크기 제한 제거 */
        padding: 25px 10px 25px 5px; /* 왼쪽 조금 여백, 오른쪽 최소화 */
        width: fit-content; /* 셀에 딱 맞는 크기 */
    }
    
    .cell-id {
        font-size: 18px; /* 15px에서 18px로 증가 */
    }
    
    .cell-temp-min, .cell-temp-max {
        font-size: 16px; /* 14px에서 16px로 증가 */
    }
    
    /* 히트맵 셀 크기 증가 (컨테이너 이동으로 확보된 공간 활용) */
    .heatmap-cell {
        min-height: 135px; /* 셀 최소 높이 더 증가 */
        min-width: 135px; /* 셀 최소 너비 더 증가 */
    }
    
    /* right-column 높이를 left-column과 맞추기 */
    .external-temp-section {
        max-height: none; /* 차트 높이에 맞춰 제한 해제 */
        display: flex;
        flex-direction: column;
        min-height: auto; /* 자동 높이 조정 */
        margin-bottom: 0px; /* 데스크톱에서도 마진 최소화 */
    }
    
    .temp-chart-container {
        min-height: 630px; /* heatmap-grid보다 40px 더 높게 설정 */
        height: 630px; /* 헤더 차이만큼 더 높은 차트 */
    }
    
    /* heatmap container 공간 최적화 */
    .heatmap-container {
        gap: 8px; /* 셀과 파레트 사이 간격 축소하여 파레트를 왼쪽으로 이동 */
        padding-right: 0px; /* 파레트 공간 최대 확보 */
        padding-left: 0px; /* 왼쪽으로 붙이기 */
        margin-left: -20px; /* 컨테이너 자체를 왼쪽으로 이동 */
        justify-content: flex-start; /* 왼쪽 정렬로 간격 제거 */
        align-items: flex-start; /* 상단 정렬 */
    }
    
    .temp-legend {
        margin-left: 0px; /* gap으로 간격 처리 */
        margin-right: 20px; /* 두께감을 위한 오른쪽 여백 */
        height: 550px; /* 파레트 높이 조금 축소 */
        flex: 0 0 auto; /* 고정 크기 */
    }
    
    /* 데스크톱에서 온도 라벨 위치 조정 */
    .temp-legend-labels {
        right: -45px; /* 파레트와 온도 텍스트 사이 간격 증가 */
    }
    
    /* 데스크톱에서 Anomaly History 섹션 위쪽 마진 줄이기 */
    .history-section {
        margin-top: -10px; /* 30px 간격을 20px로 줄임 */
    }
}

/* 펄싱 도트 애니메이션 */
.pulse-dot {
    display: inline-block;
    color: #ef4444; /* 빨간색 */
    font-size: 14px;
    animation: pulse 1.5s infinite;
    margin-left: 4px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}