/* 1023px 이하 — 게시판 목록 */
@media all and (max-width: 1023px) {

  /* ── 지면 제목 · 안내 문장 — 낱말 중간에서 끊지 않는다 ─── */
  html body div[id]:not(#wrap) #section01 .title h1,
  html body div[id]:not(#wrap) #section01 .title p {
    word-break: keep-all !important;
    overflow-wrap: break-word;
  }

  /* ── 검색 줄 — 건수와 검색칸, 좁으면 검색칸이 다음 줄에서 넓게 ─── */
  html body div[id]:not(#wrap) #section01 .board .boardTop {
    flex-wrap: wrap !important;
    gap: 10px 12px;
    height: auto !important;
  }

  html body div[id]:not(#wrap) #section01 .board .boardTop .searchWrap {
    flex: 1 1 240px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px;
    width: auto !important;
  }

  html body div[id]:not(#wrap) #section01 .board .boardTop .search-wrapper {
    flex: 1 1 210px;
    max-width: 360px !important;
    margin-bottom: 0 !important;
  }

  html body div[id]:not(#wrap) #section01 .board .boardTop .search-wrapper #searchInput {
    width: 100% !important;
    padding-right: 40px !important;
    box-sizing: border-box;
  }

  html body div[id]:not(#wrap) #section01 .board .boardTop .dropdown {
    flex: 0 0 104px;
    width: 104px !important;
    margin-bottom: 0 !important;
    height: 44px !important;
  }

  html body div[id]:not(#wrap) #section01 .board .boardTop .dropdown .dropdown-toggle {
    min-width: 76px;
    padding-left: 12px !important;
    padding-right: 28px !important;
    white-space: nowrap;
  }

  /* ── 쪽 번호 — PC 여백을 걷고 가운데 모은다 ─── */
  html body div[id]:not(#wrap) #section01 .board nav li {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body div[id]:not(#wrap) #section01 .board nav .pagination {
    gap: 2px !important;
  }

  /* ── 카드 줄 — 폭에 맞춰 한 줄 1~2장, 남는 폭을 비우지 않는다 ─── */
  html body div[id]:not(#wrap) #section01 .board .boardBottom .boxes {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 20px 16px !important;
    width: auto !important;
    align-items: stretch !important;
  }

  html body div[id]:not(#wrap) #section01 .board .boardBottom .boxes .box {
    width: auto !important;
    margin: 0 !important;
  }

  html body div#news #section01 .board .boardBottom .boxes .box > a > img {
    width: 100% !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box {
    display: flex;
    flex-direction: column;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box > a {
    flex: 1 1 auto;
    background-color: #fff;
  }

  /* ── 카드 — 높이를 풀어 글이 카드 밖으로 넘치지 않게 ─── */
  html body div#news #section01 .board .boardBottom .boxes .box,
  html body div#youtube #section01 .board .boardBottom .boxes .box {
    height: auto !important;
    padding-bottom: 20px;
  }

  html body div[id]:not(#wrap) #section01 .board .boardBottom .boxes .box h3,
  html body div[id]:not(#wrap) #section01 .board .boardBottom .boxes .box p {
    word-break: keep-all !important;
    overflow-wrap: break-word;
  }

  html body div#youtube #section01 .board .boardBottom .boxes .box > a > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* 지식인 카드 */
  html body div#kin #section01 .board .boardBottom .bestAnswer {
    padding-top: 32px !important;
    padding-bottom: 8px !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer h2 {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer h2 span {
    width: auto !important;
    height: 36px !important;
    padding: 0 16px;
    font-size: 20px !important;
  }

  html body div#kin #section01 .board .boardBottom .boxes {
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  html body div#kin #section01 .board .boardBottom .answer {
    padding-top: 40px !important;
  }

  html body div#kin #section01 .board .boardBottom .boxes .box {
    height: auto !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box > a {
    position: relative !important;
    height: auto !important;
  }

  html body div#kin #section01 .board .boardBottom .answer .boxes .box {
    padding: 28px 18px 22px !important;
  }

  html body div#kin #section01 .board .boardBottom .boxes .box .content {
    height: auto !important;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag {
    padding: 16px 16px 12px !important;
    gap: 14px !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag div > img {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 50%;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag .info {
    min-width: 0;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag h6 {
    font-size: 18px !important;
    white-space: nowrap !important;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag .info a {
    font-size: 14px !important;
    white-space: nowrap;
  }

  html body div#kin #section01 .board .boardBottom .bestAnswer .boxes .box .nameTag span {
    display: inline-flex !important;
    width: auto !important;
    padding: 0 12px;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* ── 치아상식 표 — 날짜를 한 줄로 ─── */
  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(4) {
    white-space: nowrap;
  }

  /* 유튜브 재생 아이콘이 링크 누름을 가로채지 않게 */
  #youtube #section01 .container .board .boardBottom .boxes .box img.play {
    pointer-events: none;
  }
  /* 치아상식 표 작성자 칸 한 줄 */
  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(3) {
    white-space: nowrap;
  }
}

/* 767px 이하 — 표를 세 칸으로(작성자는 모든 글이 같다) */
@media all and (max-width: 767px) {

  html body div#tips #section01 .board .boardBottom table thead {
    height: auto !important;
  }

  html body div#tips #section01 .board .boardBottom table thead th {
    font-size: 14px !important;
    padding: 12px 4px;
    white-space: nowrap;
  }

  html body div#tips #section01 .board .boardBottom table thead th:nth-of-type(3),
  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(3) {
    display: none;
  }

  html body div#tips #section01 .board .boardBottom table thead th:nth-of-type(1),
  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(1) {
    width: 52px !important;
  }

  html body div#tips #section01 .board .boardBottom table thead th:nth-of-type(4),
  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(4) {
    width: 84px !important;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr {
    height: auto !important;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr td {
    padding: 14px 4px;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(2) {
    padding-left: 8px;
    font-size: 15px !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(2) a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr td:nth-of-type(4) img {
    display: none;
  }

  html body div#tips #section01 .board .boardBottom table tbody tr td span {
    width: 40px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}