/* utility-responsive.css — 반응형 (§7) 360/390/768/1024/1440 */

@media (max-width: 1099px) {
  .ucalc-layout { grid-template-columns: 1fr; }
  .ucalc-col-result { position: static; }
}

@media (max-width: 1023px) {
  .ucalc-cats { grid-template-columns: repeat(2, 1fr); }
  .ucalc-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .u-container, .ucalc-detail, .ucalc-list, .ucalc-home { padding-left: 0px; padding-right: 0px; }
  .ucalc-card { padding: var(--sp-4); }
  .ucalc-primary { padding: var(--sp-4); }
  .ucalc-h1 { font-size: 27px; }
  .ucalc-hero h1 { font-size: 26px; }
  .ucalc-primary-value { font-size: 32px; }
  .ucalc-detail h2 { font-size: 21px; }
  .ucalc-cards { grid-template-columns: 1fr; }
  .ucalc-cats { grid-template-columns: 1fr; }
  .ucalc-search { flex-direction: column; }
  .ucalc-actions { flex-direction: column; }
  .ucalc-actions .ucalc-btn { width: 100%; }
}

/* 360px에서도 콘텐츠 자체가 뷰포트 안에서 줄어들도록 한다. */
@media (max-width: 400px) {
  .ucalc-home, .ucalc-detail, .ucalc-list, .ucalc-card, .ucalc-card-link { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .ucalc-primary-value { font-size: 28px; word-break: break-all; }
}

/* 본문 읽기 폭 제한 */
.ucalc-content, .ucalc-guide .ucalc-content { max-width: var(--reading-width); }
.ucalc-table-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }