@media (max-width: 640px) {

  
  :root { --pad: 1.25rem; }

  
  .calc-hero-header {
    margin-bottom: 2rem;
  }

  
  .glass-card,
  .left-panel {
    padding: 1.5rem !important;
    border-radius: 20px !important;
  }

  
  .bento-card {
    padding: 1.5rem !important;
    border-radius: 18px !important;
  }
  .bento-card.primary {
    padding: 2rem !important;
  }

  
  .bento-value {
    font-size: 2.25rem !important;
    word-break: break-all;
  }
  .bento-card.primary .bento-value {
    font-size: 2.75rem !important;
  }

  
  .bento-value[style*="5rem"],
  .bento-card .bento-value {
    font-size: 2.25rem !important;
  }

  
  .chart-section {
    height: auto !important;
    min-height: 320px;
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }

  
  .chart-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  
  .chart-tabs {
    flex-wrap: wrap;
    gap: 4px;
  }
  .chart-tab {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  
  .chart-container {
    height: 220px !important;
  }

  
  .amortization-section {
    margin-top: 3rem !important;
  }

  
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  .section-header h2 {
    font-size: 1.75rem !important;
  }

  
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px !important;
  }
  .table-container table {
    min-width: 560px;
  }
  th, td {
    padding: 0.85rem 0.75rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }

  
  .input-row.triple {
    grid-template-columns: 1fr !important;
  }
  .input-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  
  .mode-tab {
    padding: 10px 12px !important;
  }

  
  .seo-content {
    margin-top: 4rem !important;
    gap: 2.5rem !important;
  }

  
  .sidebar-guide {
    position: static !important;
  }

  
  main {
    margin-top: 1rem !important;
  }
}


@media (max-width: 480px) {

  :root { --pad: 1rem; }

  .calc-hero-header h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .calc-hero-header p {
    font-size: 0.95rem !important;
  }

  .glass-card,
  .left-panel {
    padding: 1.1rem !important;
    border-radius: 16px !important;
  }

  .bento-card {
    padding: 1.1rem !important;
    border-radius: 14px !important;
  }
  .bento-card.primary {
    padding: 1.4rem !important;
  }

  .bento-value {
    font-size: 1.9rem !important;
  }
  .bento-card.primary .bento-value {
    font-size: 2.25rem !important;
  }

  
  .bento-grid {
    gap: 0.75rem !important;
  }

  
  .chart-section {
    min-height: 260px;
  }
  .chart-container {
    height: 180px !important;
  }

  
  .weight-range-card {
    padding: 1rem !important;
    gap: 1rem !important;
    border-radius: 14px !important;
  }

  
  .bmi-scale-wrapper {
    padding: 0 !important;
  }
  .bmi-labels span {
    font-size: 0.65rem !important;
  }

  
  .unit-toggle {
    margin-bottom: 1.5rem !important;
  }
  .unit-btn {
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
  }

  
  .input-group {
    margin-bottom: 1.25rem !important;
  }

  
  .toggle-switch {
    gap: 2px;
  }
  .toggle-btn {
    padding: 5px 8px !important;
    font-size: 0.73rem !important;
  }

  
  .height-us-group {
    gap: 0.5rem !important;
  }

  
  .input-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  
  .article-text p,
  .article-text li {
    font-size: 1rem !important;
  }
  .article-text h2 {
    font-size: 1.75rem !important;
  }
  .article-text h3 {
    font-size: 1.15rem !important;
    margin: 2rem 0 1rem !important;
  }
  .status-table th,
  .status-table td {
    padding: 0.75rem !important;
    font-size: 0.85rem !important;
  }

  
  .small-input {
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
  }

  
  .result-display {
    padding: 1rem !important;
  }
  .result-value {
    font-size: 1.5rem !important;
  }

  
  .btn-outline {
    padding: 8px 16px !important;
    font-size: 0.83rem !important;
    border-radius: 10px !important;
  }
}