/**
 * 컴팩트 폼 그리드 시스템 - 모든 MlangPrintAuto 품목 공통 사용
 * 2열 그리드 (768px 미만에서 1열), 타이트한 간격, 축소된 가격 박스
 * 2025년 12월 - AI Assistant
 */

/* === Compact form grid === */
.calculator-section .form-grid-compact,
.leaflet-calculator .form-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

@media (max-width: 768px) {
    .calculator-section .form-grid-compact,
    .leaflet-calculator .form-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* 각 필드를 가로 배치(라벨 좌측, 셀렉터 우측) + 간격 최소화 */
.calculator-section .form-field {
    display: flex; 
    flex-direction: row; 
    align-items: center;
    gap: 6px;
    margin: 0; 
    padding: 0;
}

.calculator-section .form-field label {
    font-size: 13px; 
    line-height: 1.2;
    margin: 0; 
    padding: 0;
    min-width: 60px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 셀렉터/인풋 컴팩트 높이 + 가로 배치 시 flex 설정 */
.calculator-section select,
.calculator-section input[type="text"],
.calculator-section input[type="number"] {
    height: 38px;
    padding: 6px 10px;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

/* 그룹 타이틀(예: '봉투 종류', '인쇄면') 상하 여백 축소 */
.calculator-section .group-title {
    font-size: 14px; 
    font-weight: 600;
    margin: 8px 0 6px 0;
}

/* 폼 전체 상하 패딩 축소 (전단지 제외) */
.calculator-section:not(.leaflet-style) {
    padding-top: 10px;
    padding-bottom: 12px;
}

/* === Price box compact === */
.price-display.calculated.price-compact {
    padding: 16px 18px;  /* 기존 대비 축소 */
    border-radius: 10px;
}

.price-display.calculated.price-compact .price-title,
.price-display.calculated.price-compact .price-label {
    font-size: 14px; 
    line-height: 1.2; 
    margin-bottom: 8px;
}

.price-display.calculated.price-compact .price-amount {
    font-size: 28px;   /* 기존이 36~40이었다면 축소 */
    line-height: 1.1;
    margin: 4px 0 6px 0;
}

.price-display.calculated.price-compact .price-meta,
.price-display.calculated.price-compact .price-details {
    font-size: 13px; 
    line-height: 1.25;
    margin-top: 6px;
}

/* 박스 자체 높이를 키우던 불필요한 min-height 제거(있다면 초기화) */
.price-display.calculated {
    min-height: auto;
}

/* 내부 항목 간 여백 최소화 */
.price-display.calculated .meta-row {
    margin: 2px 0;
}

/* 하단 주문 버튼 섹션도 약간 컴팩트하게 */
.calculator-section .order-actions {
    margin-top: 12px;
}

.calculator-section .order-actions .btn {
    height: 44px;      /* 과하게 크면 40~44px */
    padding: 10px 16px;
    font-size: 15px;
}

/* 그리드가 너무 넓게 벌어지는 경우 대비 */
.calculator-section .container-narrow {
    max-width: 980px;  /* 필요 시 조정 */
    margin: 0 auto;
}

/* 폼과 가격박스 사이 간격 축소 */
.calculator-section .form-and-price-gap {
    margin: 10px 0;
}

/* 업로드/주문 버튼 컴팩트화 */
.calculator-section .upload-order-button {
    margin-top: 8px;          /* 기존 대비 축소 */
}

.calculator-section .btn-upload-order {
    height: 44px;
    padding: 10px 16px;
    font-size: 15px;
}

/* 옵션 그리드 간격 조정 */
.calculator-section .options-grid {
    gap: 8px 12px;                /* 기존보다 축소 */
}

.calculator-section .option-group {
    margin-bottom: 0;       /* 기본 여백 제거 */
}

/* full-width 클래스가 있는 경우 (편집디자인 등) */
.calculator-section .form-grid-compact .form-field.full-width {
    grid-column: 1 / -1;  /* 전체 너비 차지 */
}

@media (max-width: 768px) {
    .calculator-section .form-grid-compact .form-field.full-width {
        grid-column: 1 / -1;  /* 모바일에서도 전체 너비 */
    }
}