/* =============================================
   Ver.1329 - Mobile/community-width + thumbnail ratio SSOT
   - Works/recommend/latest: representative-image frame (1771 / 1250), contain.
   - Actor/profile thumbnails: portrait frame (3 / 4), contain to avoid mobile crop.
   - Board mobile list: compact community-home-like rows, not large cards.
   - References: MDN aspect-ratio, object-fit, CSS Grid minmax/repeat.
   ============================================= */

body.page-home{
  --home-work-thumb-ratio: 1771 / 1250;
  --home-actor-thumb-ratio: 3 / 4;
}

body.page-home .g-page,
body.page-home .g-page > .container,
body.page-home .container{
  width: 100% !important;
  max-width: min(1280px, calc(100vw - 20px)) !important;
}

body.page-home .g-page > .container{
  padding-inline: clamp(8px, 2vw, 18px) !important;
}

@media (min-width: 1280px){
  body.page-home .site-header-top-inner,
  body.page-home .site-nav-inner{
    max-width: min(1280px, calc(100vw - 32px)) !important;
  }
}

body.page-home .home-hub{
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: clamp(14px, 2vw, 24px) !important;
}
body.page-home .home-card--latest,
body.page-home .home-card--community,
body.page-home .home-card--subtitle{
  grid-column: 1 / -1 !important;
}

body.page-home .home-workgrid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: clamp(12px, 1.8vw, 18px) !important;
}
body.page-home .home-card--latest .home-workgrid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}
body.page-home .home-card--recommended .home-workgrid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
}

body.page-home .home-worktile{
  border-radius: 16px !important;
  background: color-mix(in oklab, var(--surface) 94%, #020617 6%) !important;
}
body.page-home .home-worktile__img,
body.page-home .home-worktile__img.is-wd-matte-trimmed{
  aspect-ratio: var(--home-work-thumb-ratio) !important;
  width: 100% !important;
  height: auto !important;
  background: #0b1220 !important;
  overflow: hidden !important;
}
body.page-home .home-worktile__img > img,
body.page-home .home-worktile__img > img.is-wd-matte-trimmed-img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b1220 !important;
}
body.page-home .home-worktile__info{
  padding: 9px 10px 10px !important;
  gap: 0 !important;
}
body.page-home .home-worktile__code{
  display: block !important;
  color: color-mix(in oklab, var(--accent) 76%, #93c5fd 24%) !important;
  font-size: clamp(.88rem, .84rem + .18vw, 1rem) !important;
  font-weight: 950 !important;
  text-align: center !important;
  letter-spacing: .01em !important;
}
body.page-home .home-worktile__title{
  display: none !important;
}

body.page-home .home-actortile__img,
body.page-home .home-actortile__img img{
  aspect-ratio: var(--home-actor-thumb-ratio) !important;
}
body.page-home .home-actortile__img img{
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b1220 !important;
}

@media (max-width: 1100px){
  body.page-home .home-hub{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px){
  body.page-home .g-page > .container{
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  body.page-home .home{
    gap: 16px !important;
  }
  body.page-home .home-card{
    padding: 12px !important;
    border-radius: 16px !important;
  }
  body.page-home .home-workgrid,
  body.page-home .home-card--latest .home-workgrid,
  body.page-home .home-card--recommended .home-workgrid{
    grid-template-columns: 1fr !important;
  }
  body.page-home .home-worktile__tag,
  body.page-home .home-worktile__subtitle{
    top: 7px !important;
    padding: 3px 7px !important;
    font-size: .72rem !important;
  }
  body.page-home .home-worktile__tag{ left: 7px !important; }
  body.page-home .home-worktile__subtitle{ right: 7px !important; }
}

/* Public board: mobile rows should feel like community-home rows, not large product cards. */
@media (max-width: 768px){
  body.public-dark .board-container{
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  body.public-dark .board-list-container--mobile{
    border: 1px solid color-mix(in oklab, var(--line) 82%, var(--accent) 18%) !important;
    border-radius: 16px !important;
    background: color-mix(in oklab, var(--surface) 94%, #020617 6%) !important;
    overflow: hidden !important;
  }
  body.public-dark .board-list-container--mobile .board-list-header{
    padding: 10px 12px !important;
    background: color-mix(in oklab, var(--surface) 88%, #020617 12%) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  body.public-dark .m-board{
    margin-top: 0 !important;
    gap: 0 !important;
  }
  body.public-dark .m-card,
  body.public-dark .m-card.m-notice{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid color-mix(in oklab, var(--line) 86%, transparent) !important;
    overflow: visible !important;
    transform: none !important;
  }
  body.public-dark .m-card:last-child{
    border-bottom: 0 !important;
  }
  body.public-dark .m-link{
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    color: var(--text) !important;
  }
  body.public-dark .m-link--no-thumb{
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.public-dark .m-thumb{
    width: 62px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex-basis: auto !important;
    border-radius: 12px !important;
    background: #0b1220 !important;
    border: 1px solid color-mix(in oklab, var(--line) 82%, transparent) !important;
    box-shadow: none !important;
  }
  body.public-dark .m-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #0b1220 !important;
  }
  body.public-dark .m-thumb-notice{
    width: 42px !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
  }
  body.public-dark .m-body{
    min-width: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  body.public-dark .m-title{
    color: var(--text) !important;
    font-size: .92rem !important;
    line-height: 1.32 !important;
    font-weight: 900 !important;
    -webkit-line-clamp: 1 !important;
  }
  body.public-dark .m-dscr{
    display: none !important;
  }
  body.public-dark .m-meta{
    margin-top: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  body.public-dark .m-stats{
    gap: 9px !important;
    color: var(--muted) !important;
    font-size: .78rem !important;
    opacity: 1 !important;
  }
  body.public-dark .m-stat .v{
    color: color-mix(in oklab, var(--accent) 70%, #93c5fd 30%) !important;
    font-weight: 950 !important;
  }
  body.public-dark .m-right{
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: var(--muted) !important;
    font-size: .74rem !important;
  }
  body.public-dark .m-writer{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 96px !important;
  }
  body.public-dark .m-date{
    max-width: 74px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Actor pages: profile image frame must match portrait thumbnails and never crop on mobile. */
.actors-view-grid .actor-card.public-card .actor-thumb-grid,
.actors-view-grid .actor-card .actor-thumb-grid{
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  background: #0b1220 !important;
}
.actors-view-grid .actor-card.public-card .actor-thumb-grid img,
.actors-view-grid .actor-card .actor-thumb-grid img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b1220 !important;
}
.actor-row-thumb{
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  background: #0b1220 !important;
}
.actor-row-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b1220 !important;
}

@media (max-width: 820px){
  .actors-page{
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  .actors-view-grid .actor-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px){
  .actors-view-grid .actor-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Representative work thumbnails across list/search/maker must stay landscape and contain the image. */
:is(.work-list-page, .maker-detail-page, .search-page) .works-grid .work-thumb,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb,
:is(.work-list-page, .maker-detail-page, .search-page) .works-grid .work-thumb.is-wd-matte-trimmed,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb.is-wd-matte-trimmed{
  aspect-ratio: 1771 / 1250 !important;
  height: auto !important;
  background: #0b1220 !important;
  overflow: hidden !important;
}
:is(.work-list-page, .maker-detail-page, .search-page) .works-grid .work-thumb > img,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb > img,
:is(.work-list-page, .maker-detail-page, .search-page) .works-grid .work-thumb > .work-cover,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb > .work-cover{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0b1220 !important;
}