/* 부가세 계산기 전용 스타일 */

/* 탭 */
.vat-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: var(--glass-bg, #f8f7f3);
  border: 1px solid var(--glass-border, #E8E6DC);
  border-radius: 12px;
  padding: 0.375rem;
}

.tab-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.tab-btn.active {
  background: #fff;
  color: var(--pastel-blue-1, #D97757);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

html.dark .vat-tabs {
  background: rgba(15, 23, 42, 0.5);
}

html.dark .tab-btn.active {
  background: #1e293b;
}

/* 입력 영역 */
.vat-input-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-input-lg {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  padding: 0.875rem 1rem !important;
  text-align: right;
}

/* 부가세율 표시 */
.vat-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: #fff7ed;
  border-radius: 8px;
  border: 1px solid #fed7aa;
}

html.dark .vat-rate-row {
  background: rgba(217,119,87,0.1);
  border-color: rgba(217,119,87,0.3);
}

.vat-rate-label {
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
}

.vat-rate-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pastel-blue-1, #D97757);
}

/* 결과 그리드 */
.vat-result-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--glass-border, #E8E6DC);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.vat-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border, #E8E6DC);
  background: var(--glass-bg, #fff);
}

.vat-result-row:last-child {
  border-bottom: none;
}

.vat-result-row.vat-highlight {
  background: #fff7ed;
}

html.dark .vat-result-row.vat-highlight {
  background: rgba(217,119,87,0.08);
}

.vat-result-row.vat-total {
  background: var(--pastel-blue-1, #D97757);
}

.vat-result-row.vat-total .vat-result-label,
.vat-result-row.vat-total .vat-result-value {
  color: #fff;
}

.vat-result-label {
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
}

.vat-result-row.vat-highlight .vat-result-label {
  color: var(--pastel-blue-1, #D97757);
  font-weight: 600;
}

.vat-result-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
}

.vat-result-row.vat-highlight .vat-result-value {
  color: var(--pastel-blue-1, #D97757);
  font-size: 1.25rem;
}

.vat-result-row.vat-total .vat-result-value {
  font-size: 1.25rem;
}

/* 복사 버튼 */
.copy-btn {
  width: 100%;
}

/* 빠른 입력 */
.quick-amounts {
  margin-top: 1.5rem;
}

.quick-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin-bottom: 0.5rem;
}

.quick-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-quick {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--glass-border, #E8E6DC);
  border-radius: 20px;
  background: var(--glass-bg, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-quick:hover {
  border-color: var(--pastel-blue-1, #D97757);
  color: var(--pastel-blue-1, #D97757);
  background: #fff7ed;
}

html.dark .btn-quick {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark .btn-quick:hover {
  border-color: #D97757;
  color: #D97757;
  background: rgba(217,119,87,0.1);
}