/* 관리자 기능 추가에 따른 작은 보완 스타일. 기존 CSS 파일은 수정하지 않았습니다. */
.catalog-safety-notice{margin:14px 0 0;padding:16px 20px;border:1px solid var(--line);border-left:3px solid #305e3e;background:#f5f2e9}
.catalog-safety-notice[hidden]{display:none}
.catalog-safety-notice strong{display:block;margin-bottom:4px;color:#305e3e;font-size:.84rem;font-weight:800}
.catalog-safety-notice p{margin:0;color:#5c6a61;font-size:.82rem;line-height:1.65}
.catalog-safety{display:inline-block;margin:0 0 15px 6px;padding:4px 8px;background:#e3ebe8;color:#2e5446;font-size:.67rem;font-weight:800}
.catalog-cover-image{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;object-fit:cover}
@media(max-width:680px){
  .catalog-tools label[for="catalog-status"]{grid-column:1;grid-row:2}
  .catalog-tools #catalog-status{grid-column:1;grid-row:3}
  .catalog-tools label[for="catalog-genre"]{grid-column:2;grid-row:2}
  .catalog-tools #catalog-genre{grid-column:2;grid-row:3}
  .catalog-tools label[for="catalog-age"]{grid-column:1;grid-row:4;margin-top:4px}
  .catalog-tools #catalog-age{grid-column:1;grid-row:5}
  .catalog-tools label[for="catalog-sort"]{grid-column:2;grid-row:4;margin-top:4px}
  .catalog-tools #catalog-sort{grid-column:2;grid-row:5}
  .catalog-safety{margin:0 0 6px 4px}
  .catalog-safety-notice{padding:13px 14px}
}
/* 연령 선택 상자가 하나 늘어 태블릿 폭(681~1000px)에서 한 줄에 다 들어가지 않으므로,
   모바일과 같은 방식(검색창 위, 선택 상자 아래)으로 4칸에 나눠 놓습니다. */
@media(min-width:681px) and (max-width:1000px){
  .catalog-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;align-items:end}
  .catalog-tools .search-box{grid-column:1/-1}
  .catalog-tools .select-label{margin:6px 0 0}
  .catalog-tools select{width:100%;min-width:0}
  .catalog-tools label[for="catalog-status"]{grid-column:1;grid-row:2}
  .catalog-tools #catalog-status{grid-column:1;grid-row:3}
  .catalog-tools label[for="catalog-genre"]{grid-column:2;grid-row:2}
  .catalog-tools #catalog-genre{grid-column:2;grid-row:3}
  .catalog-tools label[for="catalog-age"]{grid-column:3;grid-row:2}
  .catalog-tools #catalog-age{grid-column:3;grid-row:3}
  .catalog-tools label[for="catalog-sort"]{grid-column:4;grid-row:2}
  .catalog-tools #catalog-sort{grid-column:4;grid-row:3}
}