/**
 * Unit Converter Component
 * 単位変換ツール用共通スタイル
 * Version: 1.0
 *
 * Used by:
 * - LengthConverter
 * - MassConverter
 * - AreaConverter
 * - VelocityConverter
 * - DensityConverter
 * - PressureConverter
 * - TimeConverter
 * - DataRateConverter
 * - AngleConverter
 * (分数系は除外)
 *
 * Features:
 * - Flex layout for input + unit select
 * - Swap button styling
 * - Consistent spacing and typography
 * - Mobile responsive
 */

/* Converter Form Layout */
.unit-converter-form .card-body {
    padding-top: 12px;
}

.unit-converter-form .form-group {
    margin-bottom: 12px;
}

.unit-converter-form .form-group:last-child {
    margin-bottom: 0;
}

/* Form Labels */
.unit-converter-form label {
    margin-bottom: 6px;
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-700);
}

/* Input + Select Flex Layout */
.unit-input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.unit-input-group input[type="number"],
.unit-input-group input[type="text"] {
    flex: 2;
}

.unit-input-group select {
    flex: 1;
    min-width: 80px;
}

/* Swap Button Container */
.swap-button-container {
    text-align: center;
    margin: 4px 0;
}

/* Steps List - Standardized for How-to Sections */
.steps-list {
    margin-left: 20px;
    margin-top: 16px;
    padding-left: 0;
}

.steps-list li {
    margin-bottom: 12px;
}

.steps-list li:last-child {
    margin-bottom: 0;
}

/* Content List - Standardized for What Is / Benefits Sections */
.content-list {
    margin-left: 20px;
    padding-left: 0;
}

.content-list li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.content-list li:last-child {
    margin-bottom: 0;
}

/* Optional: Padding adjustments for li in howto (legacy support) */
.unit-converter-howto ol {
    margin-left: 20px;
    margin-top: 16px;
}

.unit-converter-howto li {
    margin-bottom: 12px;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .unit-input-group {
        flex-direction: column;
    }

    .unit-input-group input,
    .unit-input-group select {
        flex: 1 1 auto;
        width: 100%;
    }
}