/**
 * shipping_calculator.css
 * [기술팀] CSS 분리 - 2026-01-03
 * LCL 배송비 계산기 페이지 스타일
 */
/* reset/body 스타일은 common.css에서 처리 */

.calc-container { max-width: 1000px; margin: 30px auto; padding: 0 20px; }

/* page-header - 다른 페이지와 통일 */
.page-header { background: white; padding: 25px 30px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.page-header h1 { color: #333; font-size: 24px; margin-bottom: 5px; }
.page-header p { color: #666; }

.calculator-card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }

.section { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #e5e7eb; }
.section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.section-title { font-size: 16px; color: #667eea; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.section-title span { font-size: 20px; }

.form-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 200px; }
.form-group.small { flex: 0.7; min-width: 120px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 13px; color: #374151; font-weight: 600; }
.form-group input, .form-group select {
    width: 100%; padding: 12px 15px; border: 2px solid #e5e7eb; border-radius: 10px;
    font-size: 15px; transition: all 0.3s;
}
.form-group input:focus, .form-group select:focus {
    outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.form-group input::placeholder { color: #9ca3af; }

.hscode-result {
    background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px;
    padding: 10px 15px; margin-top: 8px; font-size: 13px; display: none;
}
.hscode-result.show { display: block; }
.hscode-result .tariff { color: #dc2626; font-weight: bold; }

.fee-section { margin-bottom: 20px; }
.fee-section h4 { font-size: 14px; color: #374151; margin-bottom: 10px; padding: 8px 12px; background: #f3f4f6; border-radius: 8px; }
.fee-options { display: flex; flex-wrap: wrap; gap: 10px; }
.fee-option {
    display: flex; align-items: center; gap: 8px; padding: 10px 15px;
    background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 10px;
    cursor: pointer; transition: all 0.2s; font-size: 14px;
}
.fee-option:hover { border-color: #667eea; background: #f0f4ff; }
.fee-option.selected { border-color: #667eea; background: #eef2ff; }
.fee-option input { display: none; }
.fee-option .fee-name { font-weight: 500; }
.fee-option .fee-price { color: #667eea; font-weight: bold; }

.result-section { background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%); border-radius: 15px; padding: 25px; color: white; }
.result-title { font-size: 18px; margin-bottom: 20px; opacity: 0.9; }
.result-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.result-row:last-child { border-bottom: none; }
.result-row.total { font-size: 20px; font-weight: bold; padding-top: 15px; margin-top: 10px; border-top: 2px solid rgba(255,255,255,0.3); }
.result-row.total .result-value { color: #ff6b6b; font-size: 28px; }
.result-label { opacity: 0.8; }
.result-value { font-weight: 600; }
.result-sub { font-size: 12px; opacity: 0.6; margin-top: 3px; }

.weight-info { display: flex; gap: 20px; margin-top: 10px; padding: 15px; background: #f0f4ff; border-radius: 10px; }
.weight-box { flex: 1; text-align: center; }
.weight-box .label { font-size: 12px; color: #6b7280; margin-bottom: 5px; }
.weight-box .value { font-size: 18px; font-weight: bold; color: #374151; }
.weight-box.applied { background: #667eea; border-radius: 8px; padding: 10px; }
.weight-box.applied .label { color: rgba(255,255,255,0.8); }
.weight-box.applied .value { color: white; }

.btn-calculate {
    width: 100%; padding: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: bold;
    cursor: pointer; transition: all 0.3s; margin-top: 20px;
}
.btn-calculate:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102,126,234,0.4); }

.back-link { display: inline-block; margin-top: 20px; color: white; text-decoration: none; opacity: 0.8; }
.back-link:hover { opacity: 1; }

/* 모드 선택 버튼 */
.mode-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}
.mode-btn {
    flex: 1;
    padding: 20px;
    border: 3px solid #e5e7eb;
    border-radius: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.mode-btn:hover {
    border-color: #667eea;
    background: #f8f9ff;
}
.mode-btn.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.mode-btn .mode-icon {
    font-size: 32px;
    margin-bottom: 10px;
}
.mode-btn .mode-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.mode-btn .mode-desc {
    font-size: 12px;
    opacity: 0.7;
}
.mode-btn.active .mode-desc {
    opacity: 0.9;
}

/* 구매대행 전용 섹션 */
.purchasing-section {
    display: none;
}
.purchasing-section.show {
    display: block;
}

@media (max-width: 768px) {
    .form-group { min-width: 100%; }
    .form-group.small { min-width: 45%; }
    .weight-info { flex-direction: column; gap: 10px; }
}