/* 屏幕阅读器专用样式 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.fontsea-preview-container {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fontsea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 16px;
}

.fontsea-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    white-space: nowrap;
}

.fontsea-text-selector {
    flex: 1;
}

#fontsea-text-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.fontsea-zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto; /* 靠右对齐 */
}

.fontsea-zoom-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.fontsea-slider {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.fontsea-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007cba;
    cursor: pointer;
}

.fontsea-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007cba;
    cursor: pointer;
    border: none;
}

/* 关键修改：使用width缩放，固定容器尺寸 */
.fontsea-preview-area {
    padding: 40px 24px;
    background: white;
    height: 300px; /* 固定高度，与生成的图片高度一致 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e9ecef;
    box-sizing: border-box; /* 确保padding不会影响总高度 */
}

#fontsea-preview-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 关键修改：使用width缩放，通过容器限制确保布局不变 */
#fontsea-preview-image {
    max-width: 100%; /* 确保图片不会超出容器 */
    max-height: 100%; /* 确保图片不会超出容器 */
    height: auto; /* 保持宽高比 */
    transition: width 0.3s ease; /* 平滑的宽度过渡 */
    display: block;
    margin: 0 auto; /* 确保居中 */
}

.fontsea-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
}

.fontsea-text-input {
    flex: 1;
}

#fontsea-preview-text {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #f8f9fa;
}

#fontsea-preview-text:focus {
    outline: none;
    border-color: #007cba;
    background: white;
}

#fontsea-preview-text::placeholder {
    color: #999;
}

.fontsea-weight-control {
    margin-left: 16px;
}

#fontsea-font-weight-select {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    min-width: 100px;
}

.fontsea-current-weight {
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
    color: #333;
    font-size: 14px;
    min-width: 100px;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .fontsea-preview-container {
        margin: 16px auto;
        border-radius: 8px;
    }
    
    .fontsea-header {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        border-radius: 8px 8px 0 0;
    }
    
    .fontsea-title {
        text-align: center;
        font-size: 18px;
    }
    
    .fontsea-zoom-control {
        justify-content: center;
        margin-left: 0;
    }
    
    .fontsea-preview-area {
        padding: 30px 20px;
        height: 250px; /* 移动端调整高度 */
    }
    
    .fontsea-controls {
        padding: 16px 20px;
        flex-direction: column;
        gap: 12px;
        border-radius: 0 0 8px 8px;
    }
    
    .fontsea-text-input {
        width: 100%;
    }
    
    .fontsea-weight-control {
        margin-left: 0;
        width: 100%;
    }
    
    #fontsea-font-weight-select,
    .fontsea-current-weight {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fontsea-preview-container {
        margin: 16px 12px;
        width: calc(100% - 24px);
    }
    
    .fontsea-header {
        padding: 12px 16px;
    }
    
    .fontsea-title {
        font-size: 16px;
    }
    
    .fontsea-zoom-control {
        gap: 6px;
    }
    
    .fontsea-slider {
        width: 60px;
    }
    
    .fontsea-preview-area {
        padding: 20px 16px;
        height: 200px; /* 小屏幕进一步调整高度 */
    }
    
    .fontsea-controls {
        padding: 12px 16px;
    }
}