/* public_works.css
   - Public works list (VR/JAV) page-only layout rules
   - Color/typography must follow tokens defined in static/css/style.css
*/

.page-head{display:flex; align-items:center; justify-content:space-between; margin: 10px 0 14px;}
.page-title{font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin:0;}
.page-head-actions{display:flex; align-items:center; gap:8px;}
.page-head-plus{display:inline-block; font-size:20px; line-height:1; font-weight:900; transform: translateY(-1px);}

.notice-strip{border:1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; margin: 10px 0 14px; background: var(--surface);}
.notice-strip-title{font-weight:700; margin-bottom:8px; color: var(--text);}
.notice-strip-list{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.notice-strip-item{display:flex; gap:10px; align-items:baseline; justify-content:space-between;}
.notice-strip-link{color: var(--text); text-decoration:none;}
.notice-strip-link:hover{text-decoration:underline;}
.notice-strip-date{color: var(--muted); font-size:12px; white-space:nowrap;}

.works-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

/* list view for maker boards (and future use) */
.works-grid.is-list{
  grid-template-columns: 1fr;
}
.works-grid.is-list .work-card.is-row{
  display:flex;
  gap: 12px;
  align-items:stretch;
}
.works-grid.is-list .work-card.is-row .work-thumb{
  flex: 0 0 220px;
}
.works-grid.is-list .work-card.is-row .work-cover{
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
}
.works-grid.is-list .work-card.is-row .work-info{
  flex: 1 1 auto;
}

@media (max-width: 560px){
  .works-grid.is-list .work-card.is-row{
    flex-direction: column;
  }
  .works-grid.is-list .work-card.is-row .work-thumb{
    flex: 0 0 auto;
  }
  .works-grid.is-list .work-card.is-row .work-cover{
    aspect-ratio: 1771 / 1250;
  }
}

/* 모바일(좁은 화면)에서는 카드 1열 고정 */
@media (max-width: 560px){
  .works-grid{
    grid-template-columns: 1fr;
  }
}

.work-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.work-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in oklab, var(--line) 55%, var(--accent));
}

.work-thumb{position:relative;}
.work-cover{
  display:block;
  width: 100%;
  /* VR 커버 원본 비율(정본): 1771 x 1250 */
  aspect-ratio: 1771 / 1250;
  object-fit: cover;
  background: color-mix(in oklab, var(--line) 40%, transparent);
}

.work-badge{
  position:absolute;
  left:10px; top:10px;
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
}

.work-info{padding: 10px 12px 12px;}
.work-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  margin-bottom: 6px;
}

/* 제목 바로 아래: 좌(조회수) / 우(배포시작일) */
.work-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.work-meta-row .meta-left,
.work-meta-row .meta-right{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-meta-row .meta-right{margin-left:auto; text-align:right;}

/* 배우명(있을 때만) - 메타행 아래 */
.work-actors{color: var(--muted); font-size: 12px; line-height: 1.2; margin-bottom: 8px;}

.work-tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--line) 20%, transparent);
  color: var(--text);
}

.empty-state{padding: 22px 0; color: var(--muted);}

.pagination{display:flex; align-items:center; justify-content:center; gap: 10px; margin: 16px 0 8px;}
.page-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
}
.page-btn:hover{border-color: color-mix(in oklab, var(--line) 55%, var(--accent));}
.page-indicator{color: var(--muted); font-size: 13px;}

/* controls / facets */
.works-controls{display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 6px 0 10px;}
.works-controls-left,.works-controls-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.btn.btn-sm{padding: .35rem .65rem; font-size: var(--fs-sm); border-radius: 10px;}
.btn.is-active{border-color: color-mix(in oklab, var(--primary) 45%, var(--line)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, transparent) inset;}

.u_sep{display:inline-block; width:1px; height:18px; background: var(--line); opacity:.7; margin:0 2px;}

.maker-bar{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin: 6px 0 10px;}
.maker-chip{cursor:pointer;}
.maker-chip.admin-link{border-style:dashed;}

.facet-bar{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin: 6px 0 10px;}
.chip-count{opacity:.75; font-weight:700; font-size: var(--fs-xs); margin-left:.15rem;}

.chip.is-active{border-color: color-mix(in oklab, var(--primary) 55%, var(--line)); background: color-mix(in oklab, var(--surface) 75%, var(--primary));}

.chip-genre{border-color: color-mix(in oklab, #7c3aed 40%, var(--line));}
.chip-series{border-color: color-mix(in oklab, #16a34a 40%, var(--line));}
.chip-tag{border-color: color-mix(in oklab, #2563eb 40%, var(--line));}


/* ---- Facet / maker rows (added Ver.0132) ---- */
.maker-row, .facet-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.chip-clear{
  border-style: dashed;
  opacity: .9;
}
.notice-list{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface) 92%, var(--line));
}
.notice-item{font-size: 13px; color: var(--muted); line-height: 1.4;}

/* color distinction */
.chip-genre{background: color-mix(in oklab, rebeccapurple 12%, transparent);}
.chip-series{background: color-mix(in oklab, seagreen 12%, transparent);}
.chip-tag{background: color-mix(in oklab, dodgerblue 12%, transparent);}

.page-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:inherit;text-decoration:none;font-weight:800;}
.page-num.is-active{border-color:color-mix(in oklab,var(--accent) 40%, var(--line));background:color-mix(in oklab,var(--accent) 10%, var(--surface));}

/* maker board: compact extra metadata row (series/actors/tags/genres/label/director) */
.work-submeta{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.work-submeta .submeta-item{
  white-space: nowrap;
  max-width: 100%;
}
.works-grid.is-list .work-submeta{
  gap: 6px 12px;
}