.weather-info-section {background: linear-gradient(135deg, #fef9e7 0%, #e0f2fe 50%, #fef9e7 100%);border-radius: 12px;padding: 16px;margin-top: 12px}
.weather-main {display: flex;align-items: center;gap: 12px;padding-bottom: 12px;margin-bottom: 12px;border-bottom: 1px solid rgba(0, 0, 0, 0.06)}
.weather-main-icon {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.weather-main-icon svg {width: 40px;height: 40px}
.weather-main-text {display: flex;align-items: baseline;gap: 12px}
.weather-main-category {font-size: 20px;font-weight: 700;color: #1f2937}
.weather-main-temp {font-size: 18px;font-weight: 600;color: #f59e0b}
.weather-main-label {font-size: 12px;color: #6b7280;font-weight: 500}
.weather-main-temp-only .weather-main-icon {width: 40px;height: 40px;background: #fef3c7;border-radius: 10px;color: #f59e0b}
.weather-main-temp-only .weather-main-icon svg {width: 24px;height: 24px}
.weather-main-temp-only .weather-main-text {flex-direction: column;align-items: flex-start;gap: 2px}
.weather-main-temp-only .weather-main-temp {font-size: 22px}
.weather-no-amedas-notice {display: flex;align-items: flex-start;gap: 8px;padding: 12px;background: rgba(107, 114, 128, 0.1);border-radius: 8px;color: #6b7280;font-size: 12px;line-height: 1.5}
.weather-no-amedas-notice svg {width: 16px;height: 16px;flex-shrink: 0;margin-top: 1px}
.weather-info-section.weather-unavailable {background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)}
.weather-unavailable-notice {display: flex;align-items: flex-start;gap: 12px}
.weather-unavailable-icon {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: rgba(107, 114, 128, 0.15);border-radius: 10px;flex-shrink: 0;color: #6b7280}
.weather-unavailable-icon svg {width: 22px;height: 22px}
.weather-unavailable-content {display: flex;flex-direction: column;gap: 4px}
.weather-unavailable-title {font-size: 14px;font-weight: 600;color: #374151}
.weather-unavailable-reason {font-size: 12px;color: #6b7280;line-height: 1.5}
.weather-details {display: flex;flex-wrap: wrap;gap: 8px}
.weather-details > [data-controller="simple-modal"] {flex: 1 1 0;min-width: 100px;display: flex}
.weather-detail-item {display: flex;align-items: center;gap: 8px;background: rgba(255, 255, 255, 0.7);border-radius: 8px;padding: 8px 12px;flex: 1 1 auto;min-width: 0;width: 100%}
.weather-detail-icon {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 8px;flex-shrink: 0}
.weather-detail-icon svg {width: 18px;height: 18px}
.weather-icon-pressure {background: #dbeafe;color: #3b82f6}
.weather-icon-trend {background: #f3f4f6}
.weather-icon-wind {background: #e0f2fe;color: #0ea5e9}
.weather-detail-content {display: flex;flex-direction: column;gap: 1px;min-width: 0}
.weather-detail-label {font-size: 10px;color: #6b7280;font-weight: 500;text-transform: uppercase;letter-spacing: 0.02em}
.weather-detail-value {font-size: 14px;font-weight: 600;color: #1f2937;display: flex;align-items: center;gap: 4px;flex-wrap: wrap;word-break: break-word}
.wind-direction-arrow {width: 16px;height: 16px;flex-shrink: 0}
.weather-detail-clickable {cursor: pointer;border: none;text-align: left;transition: transform 0.15s ease, box-shadow 0.15s ease}
.weather-detail-clickable:hover {transform: translateY(-1px);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)}
.weather-detail-clickable:active {transform: translateY(0)}
.pressure-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.pressure-modal-overlay.hidden {display: none}
.pressure-modal-content {background: #fff;border-radius: 16px;max-width: 420px;width: 100%;max-height: 85vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2)}
.pressure-modal-close {position: absolute;top: 12px;right: 12px;width: 32px;height: 32px;border: none;background: #f3f4f6;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s}
.pressure-modal-close:hover {background: #e5e7eb}
.pressure-modal-close svg {width: 18px;height: 18px;color: #6b7280}
.pressure-modal-title {font-size: 18px;font-weight: 700;color: #1f2937;padding: 20px 20px 16px;margin: 0;border-bottom: 1px solid #e5e7eb}
.pressure-modal-list {padding: 12px 16px}
.pressure-modal-item {padding: 14px;border-radius: 12px;margin-bottom: 10px;background: #f9fafb;transition: background 0.2s}
.pressure-modal-item:last-child {margin-bottom: 0}
.pressure-modal-item.current {background: #fef3c7;border: 2px solid #f59e0b}
.pressure-modal-item-header {display: flex;align-items: center;gap: 10px;margin-bottom: 8px}
.pressure-modal-icon {width: 32px;height: 32px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.pressure-modal-icon svg {width: 18px;height: 18px}
.pressure-modal-item-name {font-size: 15px;font-weight: 700}
.pressure-modal-badge {font-size: 10px;font-weight: 600;padding: 3px 8px;border-radius: 10px;margin-left: auto}
.pressure-modal-badge-good {background: #dbeafe;color: #3b82f6}
.pressure-modal-badge-normal {background: #f3f4f6;color: #6b7280}
.pressure-modal-badge-bad {background: #fee2e2;color: #dc2626}
.pressure-modal-item-desc {font-size: 13px;line-height: 1.6;color: #4b5563;margin: 0}
.pressure-modal-tips {padding: 16px;background: #f0f9ff;border-top: 1px solid #e5e7eb}
.pressure-modal-tips-title {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;color: #0369a1;margin: 0 0 10px 0}
.pressure-modal-tips-title svg {width: 16px;height: 16px}
.pressure-modal-tips-list {margin: 0;padding-left: 18px;font-size: 12px;line-height: 1.7;color: #0c4a6e}
.pressure-modal-tips-list li {margin-bottom: 4px}
.pressure-modal-tips-list li:last-child {margin-bottom: 0}
.weather-modal-credit {font-size: 11px;color: #999;text-align: center;margin: 12px 16px 16px;padding-top: 12px;border-top: 1px solid #eee}
.wind-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 9999;padding: 20px;box-sizing: border-box}
.wind-modal-overlay.hidden {display: none}
.wind-modal-content {background: #fff;border-radius: 16px;max-width: 420px;width: 100%;max-height: 85vh;margin: auto;overflow-y: auto;position: relative;box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2)}
.wind-modal-close {position: absolute;top: 12px;right: 12px;width: 32px;height: 32px;border: none;background: #f3f4f6;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s}
.wind-modal-close:hover {background: #e5e7eb}
.wind-modal-close svg {width: 18px;height: 18px;color: #6b7280}
.wind-modal-title {font-size: 18px;font-weight: 700;color: #1f2937;padding: 20px 20px 16px;margin: 0;border-bottom: 1px solid #e5e7eb}
.wind-modal-list {padding: 12px 16px}
.wind-modal-item {padding: 14px;border-radius: 12px;margin-bottom: 10px;background: #f9fafb;transition: background 0.2s}
.wind-modal-item:last-child {margin-bottom: 0}
.wind-modal-item.current {background: #fef3c7;border: 2px solid #f59e0b}
.wind-modal-item-header {display: flex;align-items: center;gap: 10px;margin-bottom: 8px}
.wind-modal-icon {width: 32px;height: 32px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.wind-modal-icon svg {width: 18px;height: 18px}
.wind-icon-calm {background: #d1fae5;color: #059669}
.wind-icon-light {background: #dbeafe;color: #3b82f6}
.wind-icon-moderate {background: #fef3c7;color: #f59e0b}
.wind-icon-strong {background: #fed7aa;color: #ea580c}
.wind-icon-dangerous {background: #fee2e2;color: #dc2626}
.wind-modal-item-info {display: flex;flex-direction: column;gap: 2px}
.wind-modal-item-name {font-size: 15px;font-weight: 700}
.wind-modal-item-name.wind-level-calm {color: #059669}
.wind-modal-item-name.wind-level-light {color: #3b82f6}
.wind-modal-item-name.wind-level-moderate {color: #f59e0b}
.wind-modal-item-name.wind-level-strong {color: #ea580c}
.wind-modal-item-name.wind-level-dangerous {color: #dc2626}
.tide-modal-item-name.tide-level-spring {color: #0D47A1}
.tide-modal-item-name.tide-level-moderate {color: #1976D2}
.tide-modal-item-name.tide-level-neap {color: #42A5F5}
.tide-modal-item-name.tide-level-long {color: #64B5F6}
.tide-modal-item-name.tide-level-young {color: #81D4FA}
.tide-modal-item-name.sun-level-sunrise {color: #FF8C00}
.tide-modal-item-name.sun-level-sunset {color: #E65C00}
.wind-modal-item-speed {font-size: 12px;color: #6b7280}
.wind-modal-badge {font-size: 10px;font-weight: 600;padding: 3px 8px;border-radius: 10px;margin-left: auto}
.wind-modal-badge-best {background: #d1fae5;color: #059669}
.wind-modal-badge-good {background: #dbeafe;color: #3b82f6}
.wind-modal-badge-caution {background: #fef3c7;color: #b45309}
.wind-modal-badge-warning {background: #fed7aa;color: #c2410c}
.wind-modal-badge-danger {background: #fee2e2;color: #dc2626}
.wind-modal-item-desc {font-size: 13px;line-height: 1.6;color: #4b5563;margin: 0}
.wind-modal-tips {padding: 16px;background: #f0f9ff;border-top: 1px solid #e5e7eb}
.wind-modal-tips-title {display: flex;align-items: center;gap: 6px;font-size: 13px;font-weight: 600;color: #0369a1;margin: 0 0 10px 0}
.wind-modal-tips-title svg {width: 16px;height: 16px}
.wind-modal-tips-list {margin: 0;padding-left: 18px;font-size: 12px;line-height: 1.7;color: #0c4a6e}
.wind-modal-tips-list li {margin-bottom: 4px}
.wind-modal-tips-list li:last-child {margin-bottom: 0}
@media (max-width: 768px) {.weather-info-section {padding: 14px}
.weather-main {gap: 10px;padding-bottom: 10px;margin-bottom: 10px}
.weather-main-icon {width: 42px;height: 42px}
.weather-main-icon svg {width: 34px;height: 34px}
.weather-main-category {font-size: 18px}
.weather-main-temp {font-size: 16px}
.weather-details {gap: 6px}
.weather-details > [data-controller="simple-modal"] {min-width: 90px}
.weather-detail-item {padding: 6px 10px}
.weather-detail-icon {width: 28px;height: 28px}
.weather-detail-icon svg {width: 16px;height: 16px}
.weather-detail-value {font-size: 13px;line-height: 1.3}}
@media (max-width: 480px) {.weather-info-section {padding: 12px;margin-top: 8px;border-radius: 10px}
.weather-unavailable-notice {gap: 10px}
.weather-unavailable-icon {width: 36px;height: 36px}
.weather-unavailable-icon svg {width: 18px;height: 18px}
.weather-unavailable-title {font-size: 13px}
.weather-unavailable-reason {font-size: 11px}
.weather-main {gap: 10px;padding-bottom: 10px;margin-bottom: 10px}
.weather-main-icon {width: 38px;height: 38px}
.weather-main-icon svg {width: 30px;height: 30px}
.weather-main-text {gap: 8px}
.weather-main-category {font-size: 16px}
.weather-main-temp {font-size: 15px}
.weather-main-temp-only .weather-main-icon {width: 36px;height: 36px}
.weather-main-temp-only .weather-main-icon svg {width: 20px;height: 20px}
.weather-main-temp-only .weather-main-temp {font-size: 18px}
.weather-details {gap: 6px}
.weather-details > [data-controller="simple-modal"] {min-width: 80px}
.weather-detail-item {padding: 6px 8px;gap: 6px}
.weather-detail-icon {width: 26px;height: 26px;border-radius: 6px}
.weather-detail-icon svg {width: 14px;height: 14px}
.weather-detail-label {font-size: 9px}
.weather-detail-value {font-size: 12px;line-height: 1.3}
.wind-direction-arrow {width: 14px;height: 14px}
.weather-hint {padding: 8px 10px;font-size: 11px;margin-top: 10px}
.weather-hint-icon {width: 16px;height: 16px}}