html,
body {
  width: 100%;
  height: 100%;
}
 /* 페이지 기본 */
    :root { --gap: 16px; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: white;
    }

    /* 그리드 */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4열 */
      gap: var(--gap);
      padding: 20px;
      align-items: stretch;
    }

    /* 카드(iframe 래퍼) */
    .item {
      background: #fff;
      border: 0.7px solid black;
      /*border-radius: 12px;*/
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      /* 원하는 비율로 고정(필요 시 4/3, 1/1 등으로 변경) */
      aspect-ratio: 16/9;
      display: grid; /* iframe을 꽉 채우도록 */
    }
    .item iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

footer {
    margin-top: 10pt;
    padding-bottom: 20pt;
    font-size: 30pt;
    text-align: center;
}

.mode:hover {
    color: white;
    background: blue;
}



    /* 반응형: 화면이 줄어들면 열 수 줄이기 */
    @media (max-width: 1200px) {
      .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
    }