/* 넓은 화면 --------------------------------------------------------------
   높이도 같이 본다. 폰을 눕히면 폭은 800을 넘지만 높이가 400 안팎이라,
   폭만 보고 태블릿 배치를 주면 입력칸이 화면을 넘긴다. */
@media (min-width: 700px) and (min-height: 600px) {
  #app { max-width: 100%; }

  /* 탭을 위로 올린다 */
  .tabs {
    order: -1;
    position: static;
    border-top: 0;
    border-bottom: 1px solid var(--sep);
    padding: 0;
  }
  .tabs button { flex: none; padding: 11px 16px; }

  .topbar { padding-top: 22px; }
  .topbar h1 { font-size: 32px; }

  /* 목록과 카드를 나란히 둔다. 카드 넘김과 목록 고르기가 한 화면에서 된다 */
  #view-entry.on { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 24px; }
  .entrybar { grid-column: 1 / -1; grid-row: 1; }
  .savebar { grid-column: 1 / -1; grid-row: 2; }
  #mode-card, #mode-list { display: none; }
  /* 행을 못 박는다. 카드가 HTML에서 먼저 오기 때문에,
     열만 지정하면 목록이 1열로 돌아가지 못하고 다음 줄로 내려간다. */
  #list {
    display: block !important;
    grid-row: 3;
    grid-column: 1;
    max-height: calc(100dvh - 264px);
    overflow-y: auto;
  }
  #card { display: block !important; grid-row: 3; grid-column: 2; }
  .cardwrap { max-width: 520px; margin: 0 auto; }

  #snap { max-width: 720px; }
}

/* 노트북과 태블릿 가로. Home을 왼쪽에 붙박이로 둔다 */
@media (min-width: 1100px) and (min-height: 600px) {
  #app { max-width: 1280px; }
  main.v-entry { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 24px; }
  main.v-entry #view-home { display: block; grid-column: 1; }
  main.v-entry #view-home .band { margin-top: 16px; }
  main.v-entry #view-entry.on { grid-column: 2; grid-template-columns: 300px minmax(0, 1fr); }
}