/* ============================================================
   total.css — total.html 페이지 전용 레이아웃
   main-container 3행 그리드, row-1/2/3 컬럼 비율
   ============================================================ */

.main-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 40px;
}

.row {
  display: grid;
  gap: 15px;
  width: 100%;
  grid-template-columns: 1fr;   /* 모바일 기본: 1열 */
}

/* ── 표준 행 클래스 ── */
.page-row-1 { min-height: 0; }
.page-row-2 { min-height: 0; }
.page-row-3 { min-height: 0; }

/* ── 대형 뷰포트 (1200px +) — 3행 그리드 ── */
@media (min-width: 1200px) {
  html, body { height: 100vh; overflow: hidden; }

  .main-container {
    height: calc(100vh - 60px);
    padding: 40px 20px 20px 20px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px;
  }

  .row           { height: 100%; min-height: 0; display: grid; }
  .page-row-1    { grid-template-columns: 1fr 2fr; }
  .page-row-2    { grid-template-columns: 1fr 1fr 1fr; }
  .page-row-3    { grid-template-columns: 1fr 1fr; }
  
  /* 레거시 클래스 지원 */
  .row-1         { grid-template-columns: 1fr 2fr; }
  .row-2         { grid-template-columns: 1fr 1fr 1fr; }
  .row-3         { grid-template-columns: 1fr 1fr; }
  
  .widget        { height: 100%; min-height: 0; }
}

/* ── 중간 뷰포트 (768 ~ 1199px) ── */
@media (min-width: 768px) and (max-width: 1199px) {
  html, body { height: auto; overflow-y: auto; }
  .page-row-1, .page-row-2,
  .row-1, .row-2 { grid-template-columns: 1fr 1fr; }
  .page-row-1 .widget:last-child,
  .page-row-2 .widget:last-child,
  .row-1 .widget:last-child,
  .row-2 .widget:last-child { grid-column: span 2; }
}

/* ── 모바일 (767px -) ── */
@media (max-width: 767px) {
  .main-container { padding: 10px; }
}