/* static/css/pages/public_modern.css
   Ver.1229 - 안전한 현대화 SSOT 보강판
   - Ver.1210 공개 페이지(배우/작품) 전체 현대화 통합판 유지
   - 기존 rep_image/cover, 배지, 평가, 찜, 검색/정렬 기능은 템플릿 로직 그대로 유지한다.
   - public_actors.css/public_works.css/work_detail.css의 기존 클래스 위에 보조 클래스를 더하는 additive layer다.
   - References: MDN CSS Grid repeat/minmax, object-fit, media queries, prefers-reduced-motion.
*/

.public-container{
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 12px;
}

/* base.html을 직접 쓰는 공개 배우/작품 페이지용 공통 표면 보정 */
:where(.actors-page, .work-list-page, .actor-detail-page, #wrap.work-detail.detail-container){
  color: var(--text, #e2e8f0);
}

/* ==================== 공통 카드 ==================== */
.public-card{
  background: color-mix(in oklab, var(--surface, #111827) 90%, #1e2937 10%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.38);
  border: 1px solid var(--line, #334155);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1), border-color .28s ease;
}

@media (hover:hover){
  .public-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(0,0,0,0.52);
    border-color: color-mix(in oklab, var(--accent, #60a5fa) 68%, var(--line, #334155));
  }
}

.public-card :where(img){
  background: #0f172a;
}

.public-card :where(.card-body, .work-info){
  padding: 16px;
}

.public-card :where(.card-title, .work-title, .actor-card-name){
  color: var(--text, #e2e8f0);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.public-card :where(.card-subtitle, .work-meta-row, .actor-card-sub, .actor-card-meta){
  color: var(--muted, #94a3b8);
}

.public-row-card{
  border-radius: 16px;
}

/* ==================== 그리드 ==================== */
.public-modern-grid:is(.works-grid, .actors-grid, .actor-grid){
  gap: 24px;
}

/* works-grid는 기존 5/4/3/2/1 컬럼 정책이 있으므로 컬럼 수를 덮지 않고 간격/카드 룩만 보강한다. */
.work-list-page .works-grid.public-modern-grid > .work-card.public-card{
  border-radius: 18px;
}

.work-list-page .work-card.public-card .work-cover{
  object-fit: cover;
}

.actors-view-grid .actor-grid.public-modern-grid{
  grid-template-columns: repeat(auto-fill, minmax(190px, 240px));
}

.actors-view-grid .actor-card.public-card .actor-thumb-grid img{
  width: 100%;
  height: 255px;
  object-fit: cover;
}

.actors-view-grid .actor-card.public-card .actor-card-name{
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 6px;
}

.actors-view-list .actor-row.public-card{
  background: color-mix(in oklab, var(--surface, #111827) 92%, #1e2937 8%);
}

/* ==================== 상세 페이지 ==================== */
.detail-container{
  max-width: 1380px;
  margin-inline: auto;
}

.detail-hero{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.46);
}

.detail-hero :where(img),
.detail-hero:is(img){
  width: 100%;
  object-fit: cover;
}

.actor-detail-page.detail-container .actor-top,
.work-detail.detail-container .wd-title-card{
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.work-detail.detail-container .wd-card,
.actor-detail-page.detail-container :where(.actor-card, .actor-info-card, .actor-data-card, .actor-review-card, .actor-works-card){
  border-radius: 16px;
}

/* 배지/평가/찜 기존 기능 유지: 위치와 상호작용은 기존 CSS에 맡기고 시각 톤만 보강 */
.work-badge,
.public-container .badge{
  font-size: .8rem;
  padding: 4px 10px;
}

/* 검색/정렬/필터 컨트롤 현대화 보조 */
:where(.actors-dirbar, .works-controls, .wl-controls-shell){
  border-radius: 18px;
}

:where(.actors-dirbar input, .actors-dirbar select, .works-controls input, .works-controls select){
  min-height: 40px;
}

/* 모바일 최적화 */
@media (max-width: 768px){
  .public-container{
    padding-inline: 10px;
  }

  .public-modern-grid:is(.works-grid, .actors-grid, .actor-grid){
    gap: 16px;
  }

  .actors-view-grid .actor-grid.public-modern-grid{
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }

  .actors-view-grid .actor-card.public-card .actor-thumb-grid img{
    height: 205px;
  }

  .detail-hero{
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .public-card{
    transition: none;
  }
  .public-card:hover{
    transform: none;
  }
}



/* ==================== Ver.1211 JAV / VR / 노모 작품 목록 전용 보강 ====================
   - /works/jav, /works/vr, /works/etc가 공유하는 public_works.html + work_grid_card.html 전용 계층.
   - 기존 배지/검색/정렬/필터/페이징 로직은 템플릿에서 유지하고, 카드/그리드 룩만 보강한다.
*/
.work-list-page .works-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(195px, 1fr));
  gap:24px;
  align-items:start;
}

.work-list-page .works-category-grid > .work-list-card{
  width:100%;
  min-width:0;
  max-width:none;
}

.work-list-page .work-list-card{
  display:block;
  color:inherit;
  text-decoration:none;
  background:#1e2937;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,0.5);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border:1px solid #334155;
}

@media (hover:hover){
  .work-list-page .work-list-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,0.65);
    border-color:#60a5fa;
  }
}

.work-list-page .work-list-card .work-thumb{
  border-radius:0;
  overflow:hidden;
  background:#0f172a;
}

.work-list-page .work-list-card .work-cover{
  width:100%;
  height:260px;
  aspect-ratio:auto;
  object-fit:cover;
  border-radius:0;
  background:#0f172a;
}

.work-list-page .work-list-card .work-info{
  padding:16px;
}

.work-list-page .work-list-card .work-title{
  margin:0;
  display:block;
  color:#e2e8f0;
  font-size:1.02rem;
  line-height:1.35;
  font-weight:800;
}

.work-list-page .work-list-card .work-code,
.work-list-page .work-list-card .code{
  display:block;
  margin-bottom:4px;
  color:#60a5fa;
  font-size:1rem;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.01em;
}

.work-list-page .work-list-card .work-name,
.work-list-page .work-list-card .title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#e2e8f0;
  font-size:1.02rem;
  line-height:1.35;
  font-weight:700;
}

.work-list-page .work-list-card .work-meta-row{
  margin-top:10px;
  color:#94a3b8;
}

/* 기존 public_works.css의 모바일 플랫 카드 규칙보다 뒤에서 다시 카드형을 복원한다. */
@media (max-width:768px){
  .work-list-page .works-category-grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:18px;
  }

  .work-list-page .work-list-card{
    border:1px solid #334155;
    border-radius:18px;
    background:#1e2937;
    box-shadow:0 6px 22px rgba(0,0,0,0.46);
    overflow:hidden;
  }

  .work-list-page .work-list-card .work-cover{
    height:210px;
  }

  .work-list-page .work-list-card .work-info{
    padding:14px;
  }

  .work-list-page .work-list-card .work-title{
    font-size:1rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .work-list-page .work-list-card{
    transition:none;
  }
  .work-list-page .work-list-card:hover{
    transform:none;
  }
}


/* ==================== Ver.1212 배우 목록 전용 현대화 ====================
   - 기존 public_actors.html의 검색/필터/평가/SNS/grid-list 전환은 유지하고 카드 룩과 정렬 UI만 보강한다.
   - References: MDN CSS Grid repeat/minmax, object-fit, select/change event.
*/
.actors-page .actors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:24px;
  align-items:start;
}

.actors-page .actor-card.public-card{
  background:#1e2937;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,0.5);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  border:1px solid #334155;
  min-width:0;
}

@media (hover:hover){
  .actors-page .actor-card.public-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,0.65);
    border-color:#60a5fa;
  }
}

.actors-page .actor-card.public-card .actor-thumb-grid{
  aspect-ratio:auto;
  height:240px;
  background:#0f172a;
}

.actors-page .actor-card.public-card .actor-thumb-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.actors-page .actor-name{
  font-size:1.1rem;
  font-weight:800;
  color:#e2e8f0;
  margin:12px 0 4px;
  padding-inline:14px;
}

.actors-page .actor-modern-meta{
  padding:0 14px 2px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  font-size:.9rem;
  line-height:1.5;
  color:#94a3b8;
  font-weight:700;
}

.actors-page .actor-card-meta.actor-meta{
  padding:8px 14px 0;
  color:#94a3b8;
}

.actors-page .actors-sortbar{
  gap:8px;
}

.actors-page .actors-sort select,
.actors-page #actorsSort{
  min-height:42px;
  border-radius:12px;
}


@media (max-width:820px){
  .actors-page .actors-mobile-header{
    display:none;
  }

  .actors-page .actors-dirbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:14px;
    border-radius:18px;
    background:rgba(15,23,42,.72);
    border:1px solid rgba(148,163,184,.18);
    margin-bottom:16px;
  }

  .actors-page .actors-dirbar__right,
  .actors-page .actors-dirbar__right form{
    width:100%;
  }

  .actors-page .actors-dirbar__right form{
    display:grid !important;
    grid-template-columns:1fr;
  }

  .actors-page .actors-dirbar__right input[name="q"],
  .actors-page .actors-dirbar__right .wd-icon-btn,
  .actors-page .actors-sort,
  .actors-page #actorsSort{
    width:100%;
    min-width:0 !important;
  }

  .actors-page .actors-sortbar{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }

  .actors-page .actors-sortbar .wd-icon-btn{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

@media (max-width:768px){
  .actors-page .actors-grid{
    grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));
    gap:16px;
  }

  .actors-page .actor-card.public-card .actor-thumb-grid{
    height:205px;
  }

  .actors-page .actor-name{
    font-size:1.02rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .actors-page .actor-card.public-card{
    transition:none;
  }
  .actors-page .actor-card.public-card:hover{
    transform:none;
  }
}


/* ==================== Ver.1213 배우 상세 페이지 현대화 ====================
   - 기존 actor_detail.css의 상세/평가/한줄평/출연작 DOM을 삭제하지 않고 상단 hero + 요약 박스를 additive layer로 보강한다.
   - References: MDN background-size/background-position/media queries.
*/
.actor-detail-page .actor-modern-summary{
  margin:0 0 28px;
}

.actor-detail-page .actor-detail-hero{
  min-height:420px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  background-color:#0f172a;
  background-size:cover;
  background-position:center 24%;
  box-shadow:0 14px 40px rgba(0,0,0,.62);
  border:1px solid rgba(96,165,250,.22);
}

.actor-detail-page .actor-detail-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0) 28%, rgba(15,23,42,.92) 100%);
  pointer-events:none;
}

.actor-detail-page .actor-info-box{
  background:linear-gradient(180deg, rgba(30,41,55,.98), rgba(15,23,42,.98));
  border-radius:16px;
  padding:28px;
  margin:-60px auto 0;
  position:relative;
  z-index:10;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  border:1px solid rgba(148,163,184,.22);
  max-width:1120px;
}

.actor-detail-page .actor-info-box__main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.actor-detail-page .actor-info-box__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.actor-detail-page .actor-name{
  font-size:2.2rem;
  line-height:1.14;
  font-weight:900;
  color:#e2e8f0;
  margin:0 0 8px;
  letter-spacing:-.025em;
}

.actor-detail-page .actor-subname{
  font-size:1.08rem;
  line-height:1.55;
  color:#94a3b8;
  font-weight:700;
}

.actor-detail-page .actor-stats{
  display:flex;
  gap:16px;
  margin:22px 0;
  flex-wrap:wrap;
}

.actor-detail-page .stat-item{
  flex:1 1 136px;
  min-width:128px;
  text-align:center;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  padding:16px 12px;
}

.actor-detail-page .stat-number{
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  color:#60a5fa;
  letter-spacing:-.02em;
}

.actor-detail-page .stat-label{
  margin-top:8px;
  font-size:.9rem;
  line-height:1.35;
  color:#94a3b8;
  font-weight:800;
}

.actor-detail-page .actor-info-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}

.actor-detail-page .actor-info-meta__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(51,65,85,.48);
  border:1px solid rgba(148,163,184,.14);
}

.actor-detail-page .actor-info-meta__item span{
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
}

.actor-detail-page .actor-info-meta__item strong{
  color:#e2e8f0;
  font-size:.96rem;
  line-height:1.35;
  font-weight:900;
}

.actor-detail-page .actor-layout,
.actor-detail-page .ad-card,
.actor-detail-page .radial-card,
.actor-detail-page .dist-card,
.actor-detail-page .actor-film-item{
  border-color:rgba(148,163,184,.18);
}

@media (max-width:820px){
  .actor-detail-page .actor-modern-summary{
    margin-bottom:22px;
  }

  .actor-detail-page .actor-detail-hero{
    min-height:320px;
    border-radius:18px;
    background-position:center top;
  }

  .actor-detail-page .actor-info-box{
    margin-top:-34px;
    padding:20px;
    border-radius:16px;
  }

  .actor-detail-page .actor-info-box__main{
    flex-direction:column;
  }

  .actor-detail-page .actor-info-box__actions{
    width:100%;
    justify-content:flex-start;
  }

  .actor-detail-page .actor-name{
    font-size:1.72rem;
  }

  .actor-detail-page .actor-subname{
    font-size:.98rem;
  }

  .actor-detail-page .actor-stats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin:18px 0;
  }

  .actor-detail-page .stat-item{
    min-width:0;
    padding:14px 10px;
  }

  .actor-detail-page .stat-number{
    font-size:1.32rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .actor-detail-page .actor-detail-hero,
  .actor-detail-page .actor-info-box{
    scroll-behavior:auto;
  }
}

/* ==================== Ver.1214 작품 목록 정렬/카드 세부 보강 ====================
   - /works/jav, /works/vr, /works/etc 전용.
   - 기존 검색/필터/배지/페이징을 유지하면서 사용자-facing sort select와 카드 세부 룩을 보강한다.
*/
.work-list-page .wl-sort-select,
.work-list-page .wl-search-input{
  min-height:40px;
  border:1px solid #334155;
  border-radius:12px;
  background:#0f172a;
  color:#e2e8f0;
  padding:8px 12px;
}

.work-list-page .wl-sort-select:focus-visible,
.work-list-page .wl-search-input:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
  border-color:#60a5fa;
}

.work-list-page .wl-search-input{
  min-width:220px;
}

.work-list-page .wl-search-submit{
  padding:8px 12px;
}

.work-list-page .work-list-card{
  height:100%;
}

.work-list-page .work-list-card img,
.work-list-page .work-list-card .work-cover{
  width:100%;
  height:260px;
  object-fit:cover;
}

.work-list-page .work-list-card .work-name,
.work-list-page .work-list-card .title{
  min-height:2.7em;
}

.work-list-page .work-list-card .work-badge,
.work-list-page .work-list-card .badge{
  font-size:.78rem;
  padding:3px 8px;
  margin-right:4px;
}

@media (max-width:768px){
  .work-list-page .works-controls-right form{
    width:100%;
    margin-left:0 !important;
    flex-wrap:wrap;
  }

  .work-list-page .wl-sort-select,
  .work-list-page .wl-search-input,
  .work-list-page .wl-search-submit{
    flex:1 1 150px;
  }

  .work-list-page .work-list-card img,
  .work-list-page .work-list-card .work-cover{
    height:210px;
  }
}


/* ==================== Ver.1215 작품 상세 페이지 현대화 ====================
   - public_work_detail.html의 기존 출연배우/자막/스크린샷/평가/찜/다운로드 영역은 유지한다.
   - 상단 hero + 정보 박스만 additive layer로 추가해 시각적 진입점을 정리한다.
*/
.work-detail-page .work-modern-summary{
  margin:0 0 28px;
}

.work-detail-page .work-detail-hero{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.7);
  max-height:520px;
  min-height:320px;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.18);
}

.work-detail-page .work-detail-hero img{
  width:100%;
  height:100%;
  min-height:320px;
  max-height:520px;
  object-fit:cover;
  display:block;
}

.work-detail-page .work-detail-info{
  background:linear-gradient(180deg, rgba(30,41,55,.98), rgba(15,23,42,.98));
  border-radius:18px;
  padding:32px;
  margin:-50px auto 0;
  position:relative;
  z-index:10;
  box-shadow:0 15px 40px rgba(0,0,0,.6);
  border:1px solid rgba(148,163,184,.2);
  max-width:1120px;
}

.work-detail-page .work-code{
  font-size:1.35rem;
  line-height:1.15;
  font-weight:900;
  color:#60a5fa;
  margin-bottom:8px;
  letter-spacing:.02em;
}

.work-detail-page .work-title{
  font-size:1.85rem;
  font-weight:900;
  line-height:1.3;
  color:#e2e8f0;
  margin:0 0 16px;
  letter-spacing:-.025em;
}

.work-detail-page .work-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}

.work-detail-page .work-meta > div{
  display:flex;
  align-items:center;
  gap:8px;
  color:#94a3b8;
  font-size:1.02rem;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.16);
}

.work-detail-page .work-meta strong{
  color:#cbd5e1;
  font-weight:900;
}

.work-detail-page .work-meta span{
  color:#e2e8f0;
  font-weight:700;
}

.work-detail-page .work-section{
  background:#253549;
  border-radius:14px;
  padding:20px;
  margin-bottom:0;
  border:1px solid rgba(148,163,184,.16);
}

.work-detail-page .work-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.work-detail-page .work-section__head h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.3;
  color:#e2e8f0;
  font-weight:900;
}

.work-detail-page .work-section__head span{
  color:#94a3b8;
  font-size:.88rem;
  font-weight:800;
}

.work-detail-page .work-section-actor-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.work-detail-page .work-section-actor{
  width:86px;
  color:#e2e8f0;
  text-decoration:none;
  text-align:center;
}

.work-detail-page .work-section-actor img{
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:0 auto 8px;
  border:2px solid rgba(96,165,250,.35);
  background:#0f172a;
}

.work-detail-page .work-section-actor span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.82rem;
  line-height:1.25;
  font-weight:800;
}

.work-detail-page .work-section-text{
  color:#e2e8f0;
  line-height:1.6;
  font-weight:700;
}

.work-detail-page .work-section-text.is-muted{
  color:#94a3b8;
}

.work-detail-page .wd-card,
.work-detail-page .wd-frame-card{
  border-color:rgba(148,163,184,.18);
}

@media (max-width:820px){
  .work-detail-page .work-modern-summary{
    margin-bottom:22px;
  }

  .work-detail-page .work-detail-hero{
    min-height:260px;
    border-radius:18px;
  }

  .work-detail-page .work-detail-hero img{
    min-height:260px;
    max-height:380px;
  }

  .work-detail-page .work-detail-info{
    margin-top:-30px;
    padding:20px;
    border-radius:16px;
  }

  .work-detail-page .work-code{
    font-size:1.08rem;
  }

  .work-detail-page .work-title{
    font-size:1.42rem;
  }

  .work-detail-page .work-meta{
    gap:8px;
    margin-bottom:18px;
  }

  .work-detail-page .work-meta > div{
    flex:1 1 100%;
    border-radius:14px;
    justify-content:space-between;
  }

  .work-detail-page .work-section{
    padding:16px;
  }

  .work-detail-page .work-section-actor-grid{
    gap:10px;
  }

  .work-detail-page .work-section-actor{
    width:72px;
  }

  .work-detail-page .work-section-actor img{
    width:64px;
    height:64px;
  }
}

@media (prefers-reduced-motion: reduce){
  .work-detail-page .work-detail-hero,
  .work-detail-page .work-detail-info{
    scroll-behavior:auto;
  }
}

/* ==================== Ver.1216 마이페이지 & 쪽지함 현대화 ====================
   - /my는 기존 mypage.css 기능/탭/폼/페이지네이션을 유지하고 보조 클래스만 더한다.
   - 쪽지함은 message_modal.js가 동적 생성하는 행에 message-item/message-unread를 함께 부여한다.
*/
.mypage-modern-page{
  padding-block:24px 36px;
}

.mypage-modern-page .mypage-card,
.msg-modal .message-card{
  background:#1e2937;
  border-radius:18px;
  border:1px solid #334155;
  box-shadow:0 4px 15px rgba(0,0,0,0.4);
  color:#e2e8f0;
}

.mypage-modern-page .mypage-card{
  padding:20px;
  margin-bottom:16px;
}

@media (hover:hover){
  .mypage-modern-page .mypage-card:hover,
  .msg-modal .message-card:hover{
    border-color:#60a5fa;
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
  }
}

.mypage-modern-page :where(.my-side-title, .my-card-head h2, .my-side-nick, .my-mobile-nick){
  color:#e2e8f0;
}

.mypage-modern-page :where(.my-side-meta, .my-side-points, .my-mobile-meta, .my-mobile-points, .my-grade-progress-help){
  color:#94a3b8;
}

.mypage-modern-page :where(.my-side-list, .my-mobile-menu){
  background:#1e2937;
  border-color:#334155;
  border-radius:16px;
}

.mypage-modern-page :where(.my-side-item, .my-mobile-item){
  background:#253549;
  color:#e2e8f0;
  border-color:#334155;
}

@media (hover:hover){
  .mypage-modern-page :where(.my-side-item, .my-mobile-item):hover{
    background:#334155;
  }
}

.msg-modal .message-card{
  overflow:hidden;
}

.msg-modal .message-item{
  background:#253549;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.msg-modal .message-item > td{
  border-bottom:1px solid #334155;
}

.msg-modal .message-item:hover,
.msg-modal .message-item.is-selected{
  background:#334155;
}

.msg-modal .message-unread{
  box-shadow:inset 4px 0 0 #60a5fa;
}

.msg-modal .message-unread :where(.msg-person, .msg-subject){
  color:#e2e8f0;
  font-weight:900;
}

.msg-modal :where(.msg-table thead th, .msg-table tbody td){
  color:#e2e8f0;
}

.msg-modal .msg-table thead th{
  background:#0f172a;
  border-bottom-color:#334155;
}

.msg-modal :where(.msg-subject-btn, .msg-person, .msg-col-date){
  color:inherit;
}

@media (max-width:768px){
  .mypage-modern-page{
    padding-block:16px 28px;
  }
  .mypage-modern-page .mypage-card{
    border-radius:16px;
    padding:16px;
  }
  .msg-modal .message-card{
    border-radius:16px;
  }
}

/* ==================== Ver.1217 자막자료 카드 + 테이블 하이브리드 현대화 ====================
   - 자막자료 홈/자막요청/자막/사용자 자막의 기존 기능과 링크/폼/페이지네이션을 유지한다.
   - PC에서는 기존 board-list 컬럼 의미를 유지하면서 행을 카드 표면으로 보강한다.
   - 모바일에서는 subtitle-card 중심으로 읽히도록 여백/메타/터치 영역을 보정한다.
*/
.subtitle-materials-page.public-container{
  padding-block:24px 36px;
}

.subtitle-materials-page .sr-subnav{
  overflow-x:auto;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.subtitle-materials-page .sr-subnav__item{
  flex:0 0 auto;
  background:#1e2937;
  border-color:#334155;
  color:#cbd5e1;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}

.subtitle-materials-page .sr-subnav__item.is-active{
  background:#2563eb;
  border-color:#60a5fa;
  color:#fff;
}

.subtitle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}

.subtitle-card{
  background:#1e2937;
  border-radius:16px;
  padding:18px;
  border:1px solid #334155;
  box-shadow:0 4px 16px rgba(0,0,0,.36);
  color:#e2e8f0;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

@media (hover:hover){
  .subtitle-card:hover{
    border-color:#60a5fa;
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.52);
  }
}

.subtitle-title{
  font-size:1.05rem;
  font-weight:800;
  color:#e2e8f0;
  margin-bottom:8px;
}

.subtitle-meta{
  font-size:.9rem;
  color:#94a3b8;
  line-height:1.55;
}

.subtitle-materials-page :where(.sr-home-summary__item, .sr-home-board.wd-card){
  background:#1e2937;
  border-color:#334155;
  color:#e2e8f0;
  box-shadow:0 6px 22px rgba(0,0,0,.38);
}

.subtitle-materials-page .sr-home-summary__label,
.subtitle-materials-page .sr-home-board__more,
.subtitle-materials-page :where(.sr-home-board-row__code, .sr-request-code, .sr-work-code-link, .subtitle-title){
  color:#60a5fa;
}

.subtitle-materials-page .sr-home-summary__value,
.subtitle-materials-page :where(.sr-section-title, .sr-home-board-row__primary){
  color:#e2e8f0;
}

.subtitle-materials-page :where(.sr-subline, .sr-home-board-row__secondary, .sr-request-body, .sr-inline-subtitle, .subtitle-meta){
  color:#94a3b8;
}

.subtitle-materials-page .sr-home-board__more{
  background:#253549;
  border-color:#334155;
  text-decoration:none;
}

.subtitle-materials-page .sr-home-board-row{
  border-top-color:#334155;
}

.subtitle-materials-page .sr-home-board-row__thumb,
.subtitle-materials-page .sr-request-thumb,
.subtitle-materials-page .sr-library-thumb{
  background:#0f172a;
  border-color:#334155;
}

.subtitle-materials-page :where(.sr-board-list, .sr-home-board__list){
  gap:12px;
}

.subtitle-materials-page .sr-board-list .board-list-head{
  background:#0f172a;
  border:1px solid #334155;
  border-radius:14px;
  color:#cbd5e1;
  margin-bottom:10px;
}

.subtitle-materials-page .sr-board-list ul.lst.subtitle-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  list-style:none;
}

.subtitle-materials-page .sr-board-list ul.lst.subtitle-card > li{
  min-width:0;
}

.subtitle-materials-page .sr-board-list ul.lst.subtitle-card :where(a, .lnk){
  color:inherit;
}

.subtitle-materials-page .sr-board-list ul.lst.subtitle-card .files,
.subtitle-materials-page .sr-board-list ul.lst.subtitle-card .date,
.subtitle-materials-page .sr-board-list ul.lst.subtitle-card .status{
  color:#cbd5e1;
}

.subtitle-materials-page .board-list-actions{
  gap:12px;
  flex-wrap:wrap;
}

.subtitle-materials-page .board-search{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:16px;
  padding:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.32);
}

.subtitle-materials-page .board-search :where(input, select){
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid #475569;
  border-radius:12px;
}

.subtitle-materials-page .board-search :where(input, select):focus{
  outline:2px solid #60a5fa;
  outline-offset:1px;
  border-color:#60a5fa;
}

.subtitle-materials-page :where(.btn-search, .btn-write){
  border-radius:12px;
}

.subtitle-materials-page .board-pagination .page-link{
  background:#1e2937;
  border-color:#334155;
  color:#cbd5e1;
}

.subtitle-materials-page .board-pagination .page-link.active{
  background:#2563eb;
  border-color:#60a5fa;
  color:#fff;
}

@media (max-width:768px){
  .subtitle-materials-page.public-container{
    padding-block:16px 28px;
  }

  .subtitle-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .subtitle-card{
    border-radius:15px;
    padding:16px;
  }

  .subtitle-materials-page .sr-board-list .board-list-head{
    display:none;
  }

  .subtitle-materials-page .sr-board-list ul.lst.subtitle-card{
    align-items:flex-start;
    gap:10px;
  }

  .subtitle-materials-page .sr-board-list ul.lst.subtitle-card > li.code{
    flex:1 1 auto;
    width:auto;
  }

  .subtitle-materials-page .sr-mobile-meta{
    color:#94a3b8;
  }

  .subtitle-materials-page .board-search{
    width:100%;
  }

  .subtitle-materials-page .board-search :where(input, select, button){
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .subtitle-card{
    transition:none;
  }
  .subtitle-card:hover{
    transform:none;
  }
}


/* ==================== Ver.1227 자막 요청/자막/사용자 자막 목록 다크 카드 보강 ====================
   - Ver.1217의 자막자료 카드 + 테이블 하이브리드 구조를 유지한다.
   - 요청 selector(.subtitle-page-container, .subtitle-request-card, .subtitle-library-card,
     .subtitle-code, .subtitle-title, .subtitle-info, .status-badge)를 실제 목록 DOM에 연결한다.
   - 검색/상태 필터/글쓰기/업로드/페이지네이션/작품 상세 이동 계약은 템플릿 로직 그대로 유지한다.
*/
.subtitle-page-container{
  max-width:1380px;
  margin-inline:auto;
  padding:24px 12px 40px;
}

.subtitle-materials-page.subtitle-page-container{
  width:min(100%, 1380px);
}

.subtitle-materials-page .write-headbar{
  margin:18px 0 16px;
}

.subtitle-request-card,
.subtitle-library-card{
  background:#1e2937;
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
  border:1px solid #334155;
  box-shadow:0 6px 20px rgba(0,0,0,.42);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

@media (hover:hover){
  .subtitle-request-card:hover,
  .subtitle-library-card:hover{
    border-color:#60a5fa;
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(0,0,0,.58);
  }
}

.subtitle-code{
  font-size:1.1rem;
  font-weight:900;
  color:#60a5fa;
  letter-spacing:.01em;
}

.subtitle-title{
  font-size:1.05rem;
  color:#e2e8f0;
  line-height:1.35;
  margin:8px 0;
}

.subtitle-info{
  font-size:.92rem;
  color:#94a3b8;
  line-height:1.5;
}

.status-badge,
.subtitle-materials-page .sr-badge.status-badge{
  font-size:.85rem;
  padding:4px 12px;
  border-radius:9999px;
  line-height:1.25;
  white-space:nowrap;
}

.subtitle-materials-page .sr-board-list ul.lst.subtitle-request-card,
.subtitle-materials-page .sr-board-list ul.lst.subtitle-library-card{
  min-height:82px;
}

.subtitle-materials-page .sr-request-codewrap{
  min-height:64px;
}

.subtitle-materials-page .sr-request-thumb,
.subtitle-materials-page .sr-library-thumb{
  flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.18);
}

.subtitle-materials-page .sr-library-list .sr-work-row{
  cursor:pointer;
}

.subtitle-materials-page .sr-library-list .sr-work-row:focus-visible,
.subtitle-materials-page :where(.subtitle-request-card, .subtitle-library-card) :where(a, button, [tabindex]):focus-visible{
  outline:3px solid rgba(96,165,250,.85);
  outline-offset:3px;
  border-radius:12px;
}

.subtitle-materials-page .board-list-actions{
  margin-top:16px;
}

.subtitle-materials-page .board-search :where(input, select, button),
.subtitle-materials-page :where(.btn-search, .btn-write){
  min-height:44px;
}

@media (max-width:768px){
  .subtitle-page-container{
    padding:18px 10px 32px;
  }

  .subtitle-request-card,
  .subtitle-library-card{
    padding:16px;
    border-radius:16px;
    margin-bottom:14px;
  }

  .subtitle-materials-page .sr-board-list ul.lst.subtitle-request-card,
  .subtitle-materials-page .sr-board-list ul.lst.subtitle-library-card{
    display:block;
    min-height:0;
  }

  .subtitle-materials-page .sr-request-codewrap{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:0;
  }

  .subtitle-code{
    font-size:1rem;
  }

  .subtitle-title{
    font-size:1rem;
    margin:6px 0;
  }

  .subtitle-info{
    font-size:.9rem;
  }

  .status-badge,
  .subtitle-materials-page .sr-badge.status-badge{
    font-size:.78rem;
    padding:4px 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .subtitle-request-card,
  .subtitle-library-card{
    transition:none;
  }
  .subtitle-request-card:hover,
  .subtitle-library-card:hover{
    transform:none;
  }
}

@media (forced-colors: active){
  .subtitle-request-card,
  .subtitle-library-card,
  .status-badge{
    border:1px solid CanvasText;
  }
}

/* =============================================
   Ver.1294 - 자막자료 thumb frame fill 보강
   - 블랙테마 dark frame 위에 fallback 박스가 겹쳐 보이지 않도록,
     thumb wrapper와 img를 후순위로 다시 고정한다.
   - 최근 자막 / 자막 목록의 cover thumb만 대상이며 status thumb 계약은 유지한다.
   ============================================= */
.subtitle-materials-page .sr-home-board-row__thumb:not(.is-status),
.subtitle-materials-page .sr-library-thumb{
  background:#0f172a;
  border-color:#334155;
  box-shadow:none !important;
}
.subtitle-materials-page .sr-home-board-row__thumb:not(.is-status) > img,
.subtitle-materials-page .sr-library-thumb > img{
  display:block;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit;
  background:transparent !important;
  box-shadow:none !important;
  object-fit:cover;
  object-position:center;
}

/* ==================== Ver.1218 게시판 목록/글쓰기/상세/댓글 현대화 ====================
   - public_board.css/public_post.css/public_post_write.css의 기존 기능과 배치 계약은 유지한다.
   - 게시판 목록, 글쓰기/수정, 글 상세, 댓글 영역에 보조 클래스만 얹는 additive layer다.
*/
.board-modern-page.public-container,
.post-modern-page.public-container,
.write-modern-page.public-container{
  max-width:1380px;
  margin-inline:auto;
}

/* 게시판 목록 */
.board-modern-page .board-list-card{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.38);
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.board-modern-page ul.lst.board-list-card{
  margin-bottom:12px;
}

.board-modern-page .m-card.board-list-card{
  margin-bottom:14px;
  overflow:hidden;
}

@media (hover:hover){
  .board-modern-page .board-list-card:hover{
    border-color:#60a5fa;
    box-shadow:0 14px 34px rgba(0,0,0,.5);
    transform:translateY(-3px);
  }
}

.board-modern-page .board-list-card :where(.title, .m-title){
  color:#e2e8f0;
}

.board-modern-page .board-list-card :where(.dscr, .ctx_ftr, .m-excerpt, .m-meta, .writer, .date){
  color:#94a3b8;
}

.board-modern-page .board-search,
.board-modern-page .board-list-actions{
  gap:12px;
  flex-wrap:wrap;
}

.board-modern-page .board-search{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:16px;
  padding:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.32);
}

.board-modern-page .board-search :where(input, select){
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid #475569;
  border-radius:12px;
  min-height:40px;
}

.board-modern-page .board-search :where(input, select):focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:1px;
  border-color:#60a5fa;
}

.board-modern-page :where(.btn-search, .btn-write){
  border-radius:12px;
  min-height:40px;
}

.board-modern-page .board-pagination .page-link{
  background:#1e2937;
  border-color:#334155;
  color:#cbd5e1;
}

.board-modern-page .board-pagination .page-link.active,
.board-modern-page .board-pagination .page-link[aria-current="page"]{
  background:#2563eb;
  border-color:#60a5fa;
  color:#fff;
}

/* 글쓰기 / 수정 */
.write-modern-page .editor-container{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:18px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  color:#e2e8f0;
}

.write-modern-page .write-headbar{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.34);
}

.write-modern-page .write-crumb,
.write-modern-page .write-top .label,
.write-modern-page .write-label,
.write-modern-page .col1{
  color:#e2e8f0;
}

.write-modern-page .write-help,
.write-modern-page .editor-meta,
.write-modern-page .write-guide__body{
  color:#94a3b8;
}

.write-modern-page .write-form :where(input, select, textarea){
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid #475569;
  border-radius:12px;
}

.write-modern-page .write-form :where(input, select, textarea):focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:1px;
  border-color:#60a5fa;
}

.write-modern-page .editor-wrap{
  background:#0f172a;
  border:1px solid #334155;
  border-radius:16px;
  overflow:hidden;
}

.write-modern-page .write-guide{
  background:#253549;
  border:1px solid #334155;
  border-radius:14px;
}

/* 글 상세 */
.post-modern-page .post-detail{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:18px;
  padding:32px;
  margin-bottom:28px;
  box-shadow:0 12px 34px rgba(0,0,0,.48);
  color:#e2e8f0;
}

.post-modern-page .post-title{
  color:#e2e8f0;
  font-weight:800;
  letter-spacing:-.015em;
}

.post-modern-page .post-meta,
.post-modern-page .post-meta-row{
  color:#94a3b8;
}

.post-modern-page .post-body{
  color:#e2e8f0;
  line-height:1.75;
}

.post-modern-page .post-body :where(img, video){
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* 댓글 */
.post-modern-page .comment-section{
  background:#253549;
  border:1px solid #334155;
  border-radius:18px;
  padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.36);
}

.post-modern-page .comment-section .wd-section-head{
  border-color:#334155;
}

.post-modern-page .comment-section .comment-item{
  background:#1e2937;
  border:1px solid #334155;
  border-left:4px solid #60a5fa;
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
}

.post-modern-page .comment-section .comment-item.is-reply{
  border-left-color:#94a3b8;
}

.post-modern-page .comment-section :where(.comment-body, .comment-author){
  color:#e2e8f0;
}

.post-modern-page .comment-section :where(.comment-time, .comment-empty, .comment-login){
  color:#94a3b8;
}

.post-modern-page .comment-section .comment-textarea{
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid #475569;
  border-radius:14px;
}

.post-modern-page .comment-section .comment-textarea:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:1px;
  border-color:#60a5fa;
}

@media (max-width:768px){
  .board-modern-page.public-container,
  .post-modern-page.public-container,
  .write-modern-page.public-container{
    padding-inline:10px;
  }

  .board-modern-page .board-list-card{
    border-radius:15px;
  }

  .board-modern-page .m-card.board-list-card{
    padding:14px;
  }

  .board-modern-page .board-search,
  .board-modern-page .board-search :where(input, select, button),
  .board-modern-page .btn-write{
    width:100%;
  }

  .write-modern-page .editor-container{
    padding:16px;
    border-radius:16px;
  }

  .write-modern-page .write-top .write-line{
    align-items:flex-start;
    gap:8px;
  }

  .post-modern-page .post-detail{
    padding:20px 16px;
    border-radius:16px;
    margin-bottom:18px;
  }

  .post-modern-page .comment-section{
    padding:18px 14px;
    border-radius:16px;
  }

  .post-modern-page .comment-section .comment-item{
    padding:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .board-modern-page .board-list-card,
  .write-modern-page .editor-container,
  .post-modern-page .post-detail,
  .post-modern-page .comment-section .comment-item{
    transition:none;
  }
  .board-modern-page .board-list-card:hover{
    transform:none;
  }
}



/* ==================== Ver.1219 공용 헤더/푸터 다크 테마 현대화 ====================
   - 기존 public_header.html 구조, 모바일 드로어, 쪽지 배지, 동적 작품/커뮤니티 드롭다운을 유지한다.
   - Bootstrap 예시처럼 마크업을 교체하지 않고 현재 프로젝트의 site-* 계약 위에 additive layer만 더한다.
   - References: MDN position: sticky, Bootstrap navbar/collapse responsive pattern, MDN prefers-reduced-motion.
*/
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(10,15,28,.98) 100%);
  border-bottom:1px solid rgba(148,163,184,.24);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}

.site-header .site-header-top{
  background:radial-gradient(circle at 18% 0%, rgba(96,165,250,.13), transparent 34rem);
}

.site-header .site-header-top-inner{
  padding-block:14px;
  gap:18px;
}

.site-header .site-logo{
  font-size:clamp(1.35rem, 1.15rem + .48vw, 1.65rem);
  font-weight:900;
  letter-spacing:-.04em;
  color:#60a5fa;
  text-decoration:none;
  text-shadow:0 8px 22px rgba(96,165,250,.18);
}

.site-header .site-logo span{
  color:#cbd5e1;
}

.site-header .site-logo:hover{
  color:#93c5fd;
}

.site-header .site-search,
.site-header .mob-search{
  background:rgba(15,23,42,.82);
  border:1px solid rgba(148,163,184,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.24);
}

.site-header .site-search-input,
.site-header .mob-search-input{
  color:#e2e8f0;
}

.site-header .site-search-input::placeholder,
.site-header .mob-search-input::placeholder{
  color:#74839a;
}

.site-header .site-search-btn,
.site-header .mob-search-btn,
.site-header .mob-search-close{
  border-color:rgba(96,165,250,.28);
  background:linear-gradient(135deg, rgba(59,130,246,.26), rgba(15,23,42,.76));
  color:#dbeafe;
}

.site-header .site-search-btn:hover,
.site-header .mob-search-btn:hover,
.site-header .mob-search-close:hover{
  border-color:rgba(147,197,253,.58);
  color:#fff;
}

.site-header .accountbar{
  gap:10px;
}

.site-header .account-link{
  color:#cbd5e1;
}

.site-header .account-link:not(.account-link--plain){
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.48);
}

.site-header .account-link:hover,
.site-header .account-link--plain:hover{
  color:#93c5fd;
  background:rgba(96,165,250,.10);
  text-decoration:none;
}

.site-header .account-link--plain{
  padding:6px 8px;
  border-radius:999px;
}

.site-header .account-link--mail{
  position:relative;
  width:36px;
  height:36px;
  justify-content:center;
  color:#dbeafe;
  border:1px solid rgba(96,165,250,.24);
  background:rgba(96,165,250,.08);
}

.site-header .site-nav{
  background:rgba(10,15,28,.94);
  border-top:1px solid rgba(148,163,184,.16);
}

.site-header .site-nav-inner{
  padding-block:10px;
  gap:8px;
  flex-wrap:wrap;
}

.site-header .site-nav-item{
  color:#cbd5e1;
  border:1px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.site-header .site-nav-item:hover,
.site-header .site-nav-group:hover > .site-nav-item{
  color:#f8fafc;
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.28);
  text-decoration:none;
}

.site-header .site-nav-item.is-active{
  color:#fff;
  background:linear-gradient(135deg, rgba(59,130,246,.32), rgba(96,165,250,.12));
  border-color:rgba(96,165,250,.42);
}

.site-header .site-nav-dropdown{
  background:rgba(15,23,42,.98);
  color:#e2e8f0;
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 22px 60px rgba(0,0,0,.52);
  backdrop-filter:blur(12px);
}

.site-header .site-nav-dropdown a,
.site-header .site-nav-dropdown .nav-dd-item,
.site-header .nav-dd-section-title{
  color:#cbd5e1;
}

.site-header .site-nav-dropdown a:hover,
.site-header .site-nav-dropdown .nav-dd-item:hover,
.site-header .nav-dd-item--root.is-active{
  background:rgba(96,165,250,.14);
  color:#fff;
}

.site-header .mob-action-btn{
  border-color:rgba(148,163,184,.22);
  background:rgba(15,23,42,.58);
  color:#f8fafc;
}

.site-header .mob-action-btn:hover{
  border-color:rgba(96,165,250,.42);
  background:rgba(96,165,250,.14);
}

.site-header .mob-search-panel,
.site-header .mob-menu{
  background:rgba(5,8,20,.96);
  border-color:rgba(148,163,184,.18);
}

.site-header .mob-menu-inner{
  background:#0f172a;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 22px 64px rgba(0,0,0,.50);
}

.site-header .mob-menu-title,
.site-header .mob-panel-title,
.site-header .mob-subtitle{
  color:#f8fafc;
}

.site-header .mob-menu-item,
.site-header .mob-sub-item,
.site-header .mob-back,
.site-header .mob-menu-close{
  color:#dbeafe;
  background:transparent;
  border-color:rgba(148,163,184,.16);
}

.site-header .mob-menu-item:hover,
.site-header .mob-sub-item:hover,
.site-header .mob-back:hover,
.site-header .mob-menu-close:hover{
  color:#fff;
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.30);
  text-decoration:none;
}

.site-header :where(a, button, input):focus-visible,
.site-footer :where(a, button):focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:3px;
}

.site-footer{
  margin-top:56px;
  background:
    radial-gradient(circle at 12% 0%, rgba(96,165,250,.14), transparent 28rem),
    linear-gradient(180deg, #0a0f1c 0%, #050814 100%);
  color:#94a3b8;
  border-top:1px solid rgba(148,163,184,.20);
  box-shadow:0 -18px 46px rgba(0,0,0,.26);
}

.site-footer__inner{
  display:grid;
  grid-template-columns:minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap:28px;
  padding-block:46px 34px;
}

.site-footer__logo{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.04em;
  color:#60a5fa;
  text-decoration:none;
  margin-bottom:12px;
}

.site-footer__logo span{
  color:#cbd5e1;
}

.site-footer__desc{
  color:#94a3b8;
  line-height:1.7;
  margin:0;
  max-width:34rem;
}

.footer-title{
  font-size:1.05rem;
  font-weight:800;
  color:#e2e8f0;
  margin:0 0 14px;
  letter-spacing:-.01em;
}

.footer-link{
  color:#94a3b8;
  text-decoration:none;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:9px;
  line-height:1.35;
}

.footer-link:hover{
  color:#60a5fa;
  text-decoration:none;
}

.footer-link--accent{
  color:#bfdbfe;
  font-weight:800;
}

.footer-link--inline{
  display:inline-flex;
  margin-bottom:0;
}

.footer-bottom{
  border-top:1px solid rgba(148,163,184,.18);
  padding-block:18px;
  font-size:.9rem;
}

.site-footer__bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#64748b;
}

body.public-dark .g-footerbar,
.g-footerbar{
  background:rgba(5,8,20,.92);
  border-top:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;
  backdrop-filter:blur(10px);
}

.g-footerbar .btn{
  border-color:rgba(148,163,184,.24);
  background:#111827;
  color:#e2e8f0;
}

.g-footerbar .btn:hover{
  border-color:rgba(96,165,250,.48);
  color:#fff;
}

@media (hover:hover){
  .site-header .site-nav-item:hover{
    transform:translateY(-1px);
  }
}

@media (max-width:980px){
  .site-footer__inner{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .site-footer__brand,
  .site-footer__contact{
    grid-column:1 / -1;
  }
}

@media (max-width:860px){
  .site-header .site-header-top-inner{
    padding-block:10px;
  }
  .site-header .site-logo{
    font-size:1.35rem;
  }
  .site-header .mob-search-panel{
    position:relative;
    top:auto;
    z-index:80;
  }
}

@media (max-width:640px){
  .site-footer{
    margin-top:38px;
  }
  .site-footer__inner{
    grid-template-columns:1fr;
    gap:22px;
    padding-block:34px 24px;
  }
  .site-footer__bottom-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .site-nav-item,
  .footer-link{
    transition:none;
  }
  .site-header .site-nav-item:hover{
    transform:none;
  }
}

@media (forced-colors: active){
  .site-header,
  .site-header .site-nav,
  .site-header .site-nav-dropdown,
  .site-footer,
  .g-footerbar{
    background:Canvas;
    color:CanvasText;
    border-color:CanvasText;
    box-shadow:none;
    backdrop-filter:none;
  }
}

/* ==================== Ver.1220 마이페이지 + 쪽지함 다크 UI 재정리 ====================
   - 기존 /my 탭/폼/페이지네이션과 message_modal.js 읽음/보관/삭제/답장 계약을 유지한다.
   - Bootstrap card/list-group 개념처럼 표면(card)과 목록(list item)을 분리하고, MDN :focus-visible 및 prefers-reduced-motion 기준을 반영한다.
*/
.mypage-container{
  max-width:1280px;
  margin:0 auto;
  padding:24px 12px 40px;
}

.mypage-modern-page .mypage-overview{
  display:grid;
  grid-template-columns:minmax(280px, .9fr) minmax(0, 1.1fr);
  gap:20px;
  align-items:stretch;
  margin-bottom:20px;
  padding:24px;
}

.mypage-modern-page .mypage-profile{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.mypage-modern-page .mypage-avatar{
  width:76px;
  height:76px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(135deg, rgba(96,165,250,.34), rgba(37,99,235,.16));
  border:1px solid rgba(147,197,253,.34);
  color:#eff6ff;
  font-size:2rem;
  font-weight:900;
  box-shadow:0 14px 32px rgba(37,99,235,.20);
}

.mypage-modern-page .mypage-profile__body{
  min-width:0;
}

.mypage-modern-page .mypage-eyebrow{
  margin:0 0 6px;
  color:#60a5fa;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
}

.mypage-modern-page .mypage-name{
  margin:0;
  color:#f8fafc;
  font-size:clamp(1.5rem, 1.2rem + .8vw, 2.1rem);
  line-height:1.16;
  font-weight:900;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}

.mypage-modern-page .mypage-profile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  color:#94a3b8;
  font-size:.9rem;
}

.mypage-modern-page .mypage-profile-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(148,163,184,.10);
  border:1px solid rgba(148,163,184,.16);
}

.mypage-modern-page .mypage-profile-meta .is-verified{
  color:#bbf7d0;
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
}

.mypage-modern-page .mypage-profile__actions{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}

.mypage-modern-page .mypage-action{
  min-height:34px;
  border:1px solid rgba(96,165,250,.30);
  border-radius:999px;
  background:rgba(96,165,250,.10);
  color:#dbeafe;
  padding:0 12px;
  font-size:.84rem;
  font-weight:900;
  cursor:pointer;
}

.mypage-modern-page .mypage-action:hover{
  border-color:rgba(147,197,253,.58);
  background:rgba(96,165,250,.18);
  color:#fff;
}

.mypage-modern-page .mypage-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}

.mypage-modern-page .mypage-stat{
  background:#253549;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:18px 14px;
  text-align:center;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.mypage-modern-page .mypage-stat .number{
  font-size:clamp(1.45rem, 1.1rem + .8vw, 2rem);
  line-height:1.1;
  font-weight:900;
  color:#60a5fa;
  letter-spacing:-.03em;
}

.mypage-modern-page .mypage-stat .label{
  margin-top:7px;
  color:#94a3b8;
  font-size:.86rem;
  font-weight:800;
}

.msg-modal .msg-modal__dialog{
  background:linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  border-color:rgba(148,163,184,.22);
  box-shadow:0 28px 92px rgba(0,0,0,.58);
}

.msg-modal .msg-hero,
.msg-modal .msg-bottom{
  background:#0f172a;
  border-color:#334155;
  color:#e2e8f0;
}

.msg-modal .message-list .msg-table{
  border-collapse:separate;
  border-spacing:0 10px;
}

.msg-modal .message-list .msg-table thead th{
  background:#0f172a;
  border-bottom:1px solid #334155;
  color:#cbd5e1;
}

.msg-modal .message-list .message-item{
  background:transparent;
  transition:transform .2s ease, filter .2s ease;
}

.msg-modal .message-list .message-item > td{
  background:#1e2937;
  padding:16px 12px;
  border-top:1px solid #334155;
  border-bottom:1px solid #334155;
}

.msg-modal .message-list .message-item > td:first-child{
  border-left:1px solid #334155;
  border-radius:14px 0 0 14px;
}

.msg-modal .message-list .message-item > td:last-child{
  border-right:1px solid #334155;
  border-radius:0 14px 14px 0;
}

.msg-modal .message-list .message-item.unread,
.msg-modal .message-list .message-item.message-unread{
  box-shadow:none;
}

.msg-modal .message-list .message-item.unread > td:first-child,
.msg-modal .message-list .message-item.message-unread > td:first-child{
  border-left:5px solid #60a5fa;
}

.msg-modal .message-item .message-title{
  font-weight:900;
  color:#e2e8f0;
}

.msg-modal .message-item .message-from{
  color:#94a3b8;
  font-size:.95rem;
}

.msg-modal .message-preview{
  margin-top:6px;
  color:#94a3b8;
  font-size:.86rem;
  line-height:1.45;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.msg-modal .msg-reader-card,
.msg-modal .msg-list-card{
  background:#111827;
  border-color:#334155;
}

.msg-modal :where(.msg-reader__empty-title, .msg-reader__subject, .msg-reader__meta-value, .msg-reader__body, .msg-subject){
  color:#e2e8f0;
}

.msg-modal :where(.msg-reader__empty, .msg-reader__empty-text, .msg-reader__meta-label, .msg-col-date, .msg-pager__status){
  color:#94a3b8;
}

.msg-modal :where(.msg-input, .msg-textarea, .msg-page-size select, .msg-pager button){
  background:#0f172a;
  border-color:#334155;
  color:#e2e8f0;
}

@media (hover:hover){
  .msg-modal .message-list .message-item:hover{
    transform:translateX(4px);
  }
  .msg-modal .message-list .message-item:hover > td,
  .msg-modal .message-list .message-item.is-selected > td{
    border-color:#60a5fa;
    background:#253549;
  }
}

@media (max-width:980px){
  .mypage-modern-page .mypage-overview{
    grid-template-columns:1fr;
  }
  .mypage-modern-page .mypage-stats{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .mypage-container{
    padding-inline:10px;
    padding-block:16px 28px;
  }
  .mypage-modern-page .mypage-overview{
    padding:18px 14px;
    border-radius:16px;
  }
  .mypage-modern-page .mypage-profile{
    align-items:flex-start;
  }
  .mypage-modern-page .mypage-avatar{
    width:58px;
    height:58px;
    font-size:1.45rem;
  }
  .mypage-modern-page .mypage-profile__actions{
    display:none;
  }
  .mypage-modern-page .mypage-stats{
    gap:10px;
  }
  .mypage-modern-page .mypage-stat{
    padding:15px 10px;
  }
  .msg-modal .message-list .message-item > td{
    padding:12px 8px;
  }
  .msg-modal .message-preview{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .mypage-modern-page .mypage-action,
  .msg-modal .message-list .message-item{
    transition:none;
  }
  .msg-modal .message-list .message-item:hover{
    transform:none;
  }
}

/* =====================================================================
 * Ver.1221 작품 등록/수정 페이지 다크 UI 현대화
 * - 기존 editor_v2.js / meta_paste.js / actor_picker_v2.js 계약을 유지한다.
 * - 사용자 제안 클래스(work-form-container/form-section/meta-paste-box)를 실제 v2 구조에 연결한다.
 * ===================================================================== */
.work-form-page.work-form-container,
.work-form-container.ed2{
  --ed2-bg:#0b1120;
  --ed2-card:#1e2937;
  --ed2-text:#e2e8f0;
  --ed2-muted:#94a3b8;
  --ed2-line:#334155;
  --ed2-mint:#60a5fa;
  --ed2-mint-2:#93c5fd;
  --ed2-radius:18px;
  --ed2-shadow:0 8px 30px rgba(0,0,0,.46);
  max-width:1280px;
  margin:0 auto;
  padding:24px 12px 110px;
  background:transparent;
  color:#e2e8f0;
}

.work-form-page .work-form-hero{
  background:linear-gradient(135deg, rgba(30,41,59,.96), rgba(15,23,42,.96));
  border:1px solid rgba(148,163,184,.20);
  border-radius:20px;
  padding:24px;
  margin-bottom:18px;
  box-shadow:0 8px 30px rgba(0,0,0,.46);
}

.work-form-page .ed2-h1,
.work-form-page .ed2-h2,
.work-form-page .form-section-title{
  color:#e2e8f0;
}

.work-form-page .form-section-title{
  font-size:1.25rem;
  font-weight:900;
  color:#60a5fa;
  margin-bottom:18px;
  border-bottom:1px solid #475569;
  padding-bottom:12px;
}

.work-form-page .form-section,
.work-form-page .ed2-section,
.work-form-page .ed2-card{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:20px;
  padding:24px;
  box-shadow:0 8px 30px rgba(0,0,0,.38);
}

.work-form-page .ed2-section + .ed2-section,
.work-form-page .ed2-card + .ed2-card{
  margin-top:18px;
}

.work-form-page .meta-paste-box{
  background:#0f172a;
  border:2px dashed #475569;
  transition:border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

@media (hover:hover){
  .work-form-page .meta-paste-box:hover{
    border-color:#60a5fa;
    background:#111c31;
    box-shadow:0 0 0 3px rgba(96,165,250,.12), 0 8px 30px rgba(0,0,0,.42);
  }
}

.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select),
.work-form-page input[type="text"],
.work-form-page input[type="date"],
.work-form-page input[type="file"],
.work-form-page textarea,
.work-form-page select{
  background:#334155;
  border:1px solid #475569;
  color:#e2e8f0;
  border-radius:12px;
  padding:14px 16px;
  outline:none;
}

.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select)::placeholder,
.work-form-page textarea::placeholder,
.work-form-page input::placeholder{
  color:#94a3b8;
  opacity:.84;
}

.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select):focus,
.work-form-page input[type="text"]:focus,
.work-form-page input[type="date"]:focus,
.work-form-page textarea:focus,
.work-form-page select:focus{
  background:#1e2937;
  border-color:#60a5fa;
  color:#f8fafc;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

.work-form-page .ed2-label{
  color:#cbd5e1;
  font-weight:900;
}

.work-form-page .ed2-sub,
.work-form-page .ed2-help,
.work-form-page .ed2-desc,
.work-form-page .ed2-kicker,
.work-form-page .ed2-viewer__meta{
  color:#94a3b8;
}

.work-form-page .ed2-badge,
.work-form-page .ed2-rep.is-active,
.work-form-page .ed2-tab[aria-selected="true"]{
  background:rgba(96,165,250,.16);
  border-color:rgba(96,165,250,.42);
  color:#bfdbfe;
}

.work-form-page .ed2-btn{
  background:#253549;
  border-color:#475569;
  color:#e2e8f0;
  min-height:42px;
}

.work-form-page .ed2-btn--primary,
.work-form-page .ed2-viewer__blurBtn{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.work-form-page .ed2-btn--ghost{
  background:rgba(15,23,42,.42);
}

@media (hover:hover){
  .work-form-page .ed2-btn:hover{
    border-color:#60a5fa;
    color:#fff;
    transform:translateY(-1px);
  }
  .work-form-page .ed2-btn--primary:hover,
  .work-form-page .ed2-viewer__blurBtn:hover{
    background:#3b82f6;
    border-color:#3b82f6;
  }
}

.work-form-page .ed2-btn:focus-visible,
.work-form-page .ed2-tab:focus-visible,
.work-form-page .ed2-rep:focus-visible,
.work-form-page .ed2-thumb:focus-visible{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.28);
}

.work-form-page .ed2-main{
  grid-template-columns:minmax(0,1fr) minmax(390px,.86fr);
  gap:18px;
}

.work-form-page .ed2-grid2{
  gap:14px;
}

.work-form-page .work-inline-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.work-form-page .ed2-cover__imgWrap,
.work-form-page .ed2-viewer__stage,
.work-form-page .ed2-thumb,
.work-form-page .inc-card{
  background:#0f172a;
  border-color:#334155;
}

.work-form-page .ed2-cover__img,
.work-form-page .ed2-viewer__img,
.work-form-page .ed2-thumb__img{
  background:#111827;
}

.work-form-page .ed2-thumb{
  color:#e2e8f0;
}

.work-form-page .ed2-thumb:hover,
.work-form-page .ed2-thumb.is-active{
  border-color:#60a5fa;
  background:linear-gradient(180deg, rgba(96,165,250,.14) 0%, #111827 72%);
  box-shadow:0 0 0 3px rgba(96,165,250,.14), 0 14px 30px rgba(0,0,0,.42);
}

.work-form-page .ed2-thumb__meta,
.work-form-page .inc-code,
.work-form-page .inc-sub{
  color:#94a3b8;
}

.work-form-page .ed2-thumb__rep,
.work-form-page .ed2-thumb__selected,
.work-form-page .ed2-viewer__rep,
.work-form-page .ed2-rep{
  background:rgba(15,23,42,.82);
  color:#bfdbfe;
  border-color:rgba(147,197,253,.36);
}

.work-form-page .ed2-action{
  background:rgba(15,23,42,.92);
  border-top-color:#334155;
  box-shadow:0 -16px 42px rgba(0,0,0,.34);
}

.work-form-page .ed2-blur__panel{
  background:#0f172a;
  border-color:#334155;
}

.work-form-page .ed2-blur__head{
  border-bottom-color:#334155;
  color:#e2e8f0;
}

.work-form-page .ed2-blur__frame{
  background:#0b1120;
}

.work-form-page .ed2-tab{
  background:#1e2937;
  border-color:#334155;
  color:#94a3b8;
}

.work-form-page .ed2-sub-item,
.work-form-page .ed2-sub-delete,
.work-form-page .inc-actions .mini,
.work-form-page .inc-actions button{
  background:#253549;
  border-color:#475569;
  color:#e2e8f0;
}

.work-form-page .ed2-sub-delete{
  border-color:rgba(248,113,113,.42);
  color:#fecaca;
}

.work-form-page .ap-chip,
.work-form-page .ap-issue,
.work-form-page .ap-card{
  background:#253549;
  border-color:#475569;
  color:#e2e8f0;
}

.work-form-page .mp-paste-status-note{
  vertical-align:middle;
}

@media (max-width:1100px){
  .work-form-page .ed2-main{
    grid-template-columns:1fr;
  }
}

@media (max-width:980px){
  .work-form-page.work-form-container,
  .work-form-container.ed2{
    padding:18px 10px 110px;
  }
  .work-form-page .ed2-tabs{
    display:flex;
  }
  .work-form-page .ed2-thumbsWrap{
    background:rgba(15,23,42,.86);
    border-color:#334155;
  }
}

@media (max-width:640px){
  .work-form-page .work-form-hero,
  .work-form-page .form-section,
  .work-form-page .ed2-section,
  .work-form-page .ed2-card{
    border-radius:16px;
    padding:18px 14px;
  }
  .work-form-page .ed2-grid2,
  .work-form-page .work-inline-controls{
    grid-template-columns:1fr;
  }
  .work-form-page .ed2-title__right,
  .work-form-page .ed2-title__right .ed2-btn,
  .work-form-page .ed2-action .ed2-btn{
    width:100%;
  }
  .work-form-page .ed2-action{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (prefers-reduced-motion: reduce){
  .work-form-page *,
  .work-form-page *::before,
  .work-form-page *::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
  .work-form-page .ed2-btn:hover,
  .work-form-page .ed2-thumb.is-active{
    transform:none;
  }
}

@media (forced-colors: active){
  .work-form-page :where(.ed2-section,.ed2-card,.form-section,.ed2-input,.ed2-textarea,.ed2-select,.ed2-btn){
    forced-color-adjust:auto;
  }
}

/* ==================== Ver.1222 블러 편집기 창 다크 UI 현대화 ====================
   실제 작품 등록/수정 화면의 iframe 오버레이와 사용자 제안 클래스 연결.
   내부 캔버스/컨트롤 화면은 static/css/blur_popup.css가 담당한다.
*/
.blur-editor-modal{
  background:#1e2937;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  overflow:hidden;
  max-width:1100px;
  margin:20px auto;
}

.blur-editor-header{
  background:#0f172a;
  padding:18px 24px;
  border-bottom:1px solid #334155;
}

.blur-editor-body{
  padding:24px;
  background:#1e2937;
}

.blur-preview{
  background:#0f172a;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #475569;
  margin-bottom:20px;
}

.blur-controls{
  background:#253549;
  border-radius:16px;
  padding:24px;
}

.slider-label{
  color:#94a3b8;
  font-size:.95rem;
}

.btn-blur-apply{
  min-height:52px;
  font-size:1.05rem;
  font-weight:600;
}

.work-form-page .ed2-blur__backdrop{
  background:rgba(2,6,23,.76);
  backdrop-filter:blur(8px);
}

.work-form-page .ed2-blur__panel.blur-editor-modal{
  width:min(1100px, calc(100vw - 24px));
  height:min(820px, calc(100vh - 24px));
  margin:0;
  background:#1e2937;
  border:1px solid #334155;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
}

.work-form-page .ed2-blur__head.blur-editor-header{
  min-height:64px;
  padding:18px 24px;
  background:#0f172a;
  border-bottom:1px solid #334155;
  color:#e2e8f0;
}

.work-form-page .ed2-blur__title.blur-editor-title{
  font-size:1.15rem;
  font-weight:900;
  color:#f8fafc;
}

.work-form-page .ed2-blur__head .ed2-btn{
  min-height:42px;
  background:#253549;
  border-color:#475569;
  color:#e2e8f0;
}

.work-form-page .ed2-blur__head .ed2-btn:hover{
  border-color:#60a5fa;
  background:#334155;
}

.work-form-page .ed2-blur__frame.blur-editor-frame{
  flex:1 1 auto;
  min-height:0;
  background:#0b1120;
}

@media (max-width:720px){
  .work-form-page .ed2-blur__panel.blur-editor-modal{
    width:calc(100vw - 12px);
    height:calc(100dvh - 12px);
    height:calc(100vh - 12px);
    border-radius:16px;
  }

  .work-form-page .ed2-blur__head.blur-editor-header{
    min-height:58px;
    padding:14px 16px;
  }

  .work-form-page .ed2-blur__head .ed2-btn{
    min-height:44px;
    padding-inline:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .work-form-page .ed2-blur *,
  .work-form-page .ed2-blur *::before,
  .work-form-page .ed2-blur *::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}

@media (forced-colors: active){
  .work-form-page :where(.blur-editor-modal,.blur-editor-header,.blur-editor-frame){
    forced-color-adjust:auto;
  }
}

/* ==================== Ver.1223 모바일 홈 화면 카테고리 카드 ====================
   - templates/public_index.html의 PC hero shortcut은 넓은 화면에만 유지한다.
   - 모바일은 중복 버튼 대신 큰 터치 카드형 카테고리로 노출한다.
*/
.home-category-section{
  margin:0 0 clamp(18px, 3vw, 28px);
}

.home-mobile-categories{
  display:none;
}

.home-category-title{
  margin:0 0 16px;
  color:#f8fafc;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.home-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:16px;
  margin:24px 0;
}

.home-category-card{
  display:flex;
  min-height:112px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background:#1e2937;
  border-radius:16px;
  padding:20px 12px;
  text-align:center;
  border:1px solid #334155;
  color:#e2e8f0;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.home-category-card .icon{
  display:block;
  font-size:2.2rem;
  line-height:1;
  margin-bottom:0;
}

.home-category-card .label{
  display:block;
  font-size:1.05rem;
  line-height:1.25;
  font-weight:700;
  color:#e2e8f0;
}

.home-category-card:focus-visible{
  outline:3px solid rgba(96,165,250,.38);
  outline-offset:3px;
}

@media (hover:hover){
  .home-category-card:hover{
    background:#253549;
    border-color:#60a5fa;
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(0,0,0,.38);
  }
}

@media (max-width:991.98px){
  .home-hero__actions--desktop{
    display:none !important;
  }
  .home-mobile-categories{
    display:block;
  }
}

@media (max-width:420px){
  .home-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin:18px 0 20px;
  }
  .home-category-card{
    min-height:104px;
    padding:18px 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-category-card{
    transition:none !important;
  }
  .home-category-card:hover{
    transform:none !important;
  }
}

@media (forced-colors: active){
  .home-category-card{
    forced-color-adjust:auto;
  }
}

/* ==================== Ver.1225 통합검색 페이지 카드형 다크 UI 현대화 ====================
   - 기존 /search 기능, scope/order, 배지, 정렬, 필터, pagination은 유지한다.
   - templates/public_search.html의 work_grid_card/actor_card 구조 위에 보조 class만 더한다.
*/
.search-page .search-results{
  max-width:1380px;
  width:100%;
  margin:0 auto;
  padding:20px 12px 34px;
}

.search-page .search-head{
  margin:4px 0 18px;
}

.search-page .search-head__title{
  color:#f8fafc;
  font-size:clamp(1.35rem, 2.2vw, 2rem);
  font-weight:900;
  letter-spacing:-.03em;
}

.search-page .search-head__meta{
  color:#94a3b8;
  font-size:.95rem;
}

.search-page .search-filters{
  background:#111827;
  border:1px solid #334155;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.26);
}

.search-page .search-filters__label{
  color:#cbd5e1;
  font-weight:700;
}

.search-page .search-filters__select,
.search-page .search-filters__input{
  min-height:42px;
  background:#1e2937;
  border:1px solid #475569;
  border-radius:12px;
  color:#e2e8f0;
}

.search-page .search-filters__select:focus-visible,
.search-page .search-filters__input:focus-visible{
  outline:3px solid rgba(96,165,250,.32);
  outline-offset:2px;
  border-color:#60a5fa;
}

.search-page .search-filters__btn,
.search-page .search-section__more{
  min-height:42px;
  border:1px solid #2563eb;
  border-radius:12px;
  background:#3b82f6;
  color:#fff;
  font-weight:800;
}

.search-page .search-section__more{
  text-decoration:none;
}

.search-page .search-filters__btn:hover,
.search-page .search-section__more:hover{
  background:#2563eb;
  box-shadow:0 0 0 3px rgba(96,165,250,.22);
}

.search-page .search-section{
  margin:24px 0 30px;
  padding:18px;
  background:rgba(15,23,42,.82);
  border:1px solid #334155;
  border-radius:20px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.search-page .search-section__head{
  margin-bottom:18px;
}

.search-page .search-section-title{
  font-size:1.4rem;
  font-weight:800;
  color:#e2e8f0;
  margin:0;
  border-bottom:2px solid #334155;
  padding-bottom:12px;
  flex:1 1 auto;
}

.search-page .search-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 224px));
  gap:18px;
  align-items:stretch;
  justify-content:start;
}

.search-page .search-results-grid > :where(a, .work-card, .actor-card-link){
  width:100%;
  max-width:224px;
  justify-self:start;
}

.search-page .search-card{
  background:#1e2937;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  border:1px solid #334155;
  color:#e2e8f0;
  text-decoration:none;
}

.search-page a.search-card,
.search-page .search-card a,
.search-page .actor-card-link{
  color:inherit;
  text-decoration:none;
}

.search-page .search-card :where(img, .work-cover){
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.search-page .search-card .card-body,
.search-page .search-card .work-info{
  padding:14px;
}

.search-page .search-card .code,
.search-page .search-card .work-code{
  display:block;
  color:#60a5fa;
  font-weight:800;
  font-size:.96rem;
  line-height:1.25;
  margin-bottom:6px;
}

.search-page .search-card .title,
.search-page .search-card .work-name,
.search-page .search-card .actor-card-name,
.search-page .search-card .work-title{
  font-size:1.05rem;
  color:#e2e8f0;
  line-height:1.35;
  font-weight:750;
}

.search-page .search-card .actor-card-sub{
  margin-top:4px;
  color:#94a3b8;
  font-size:.9rem;
}

.search-page .search-card .actor-thumb-grid,
.search-page .search-card .work-thumb{
  background:#0f172a;
}

.search-page .search-card .actor-thumb-grid-empty{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f172a;
  color:#64748b;
  font-weight:800;
}

.search-page .search-empty{
  background:#111827;
  border-color:#475569;
  color:#e2e8f0;
}

.search-page .search-empty__desc{
  color:#94a3b8;
}

@media (hover:hover){
  .search-page .search-card:hover{
    transform:translateY(-8px);
    border-color:#60a5fa;
    box-shadow:0 16px 38px rgba(0,0,0,.55);
  }
}

.search-page .search-card:focus-visible,
.search-page .actor-card-link:focus-visible{
  outline:3px solid rgba(96,165,250,.38);
  outline-offset:3px;
}


/* Ver.1225 specificity bridge: public_search.css legacy stabilizers must not override the modern grid/card layer. */
.search-page .works-grid.search-results-grid,
.search-page .actors-view-grid .actor-grid.search-results-grid{
  grid-template-columns:repeat(auto-fill, minmax(190px, 224px));
  gap:18px;
  justify-content:start;
}

.search-page .works-grid.search-results-grid > a.work-card,
.search-page .actors-view-grid .actor-grid.search-results-grid > a{
  width:100%;
  max-width:224px;
  justify-self:start;
}

.search-page .works-grid.search-results-grid .work-cover,
.search-page .actors-view-grid .actor-grid.search-results-grid .actor-thumb-grid img{
  width:100%;
  height:220px;
  aspect-ratio:auto;
  object-fit:cover;
}

@media (max-width:760px){
  .search-page .search-results{
    padding:16px 10px 28px;
  }

  .search-page .search-filters{
    padding:14px;
  }

  .search-page .search-filters__row{
    gap:8px;
  }

  .search-page .search-filters__input,
  .search-page .search-filters__select,
  .search-page .search-filters__btn{
    width:100%;
    min-width:0;
  }

  .search-page .search-filters__label{
    width:100%;
    margin-top:4px;
  }

  .search-page .search-filters__split{
    display:none;
  }

  .search-page .search-section{
    padding:14px;
    border-radius:18px;
  }

  .search-page .search-section__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .search-page .search-section-title{
    width:100%;
    font-size:1.18rem;
  }

  .search-page .search-results-grid,
  .search-page .works-grid.search-results-grid,
  .search-page .actors-view-grid .actor-grid.search-results-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .search-page .search-results-grid > :where(a, .work-card, .actor-card-link),
  .search-page .works-grid.search-results-grid > a.work-card,
  .search-page .actors-view-grid .actor-grid.search-results-grid > a{
    max-width:none;
  }

  .search-page .search-card :where(img, .work-cover),
  .search-page .search-card .actor-thumb-grid-empty{
    height:auto;
    aspect-ratio:3 / 4;
    min-height:0;
  }

  .search-page .search-card .work-info,
  .search-page .search-card .card-body{
    padding:12px;
  }

  .search-page .search-card .title,
  .search-page .search-card .work-name,
  .search-page .search-card .actor-card-name,
  .search-page .search-card .work-title{
    font-size:.95rem;
  }
}

@media (max-width:420px){
  .search-page .search-results-grid,
  .search-page .works-grid.search-results-grid,
  .search-page .actors-view-grid .actor-grid.search-results-grid{
    gap:10px;
  }

  .search-page .search-card .work-info,
  .search-page .search-card .card-body{
    padding:10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .search-page .search-card,
  .search-page .search-filters__btn,
  .search-page .search-section__more{
    transition:none !important;
  }
  .search-page .search-card:hover{
    transform:none !important;
  }
}

@media (forced-colors: active){
  .search-page :where(.search-card,.search-section,.search-filters,.search-empty){
    forced-color-adjust:auto;
  }
}


/* =========================================================
   Ver.1226 게시판 허브/목록 페이지 카드 + 하이브리드 다크 UI 현대화
   - /community hub cards and /board/<id> PC table + mobile cards
   - Existing board_list_row / board_mobile_card / search / pagination contracts remain intact.
========================================================= */
.board-modern-page,
.community-hub{
  color:#e2e8f0;
}

.board-modern-page .board-hub-grid,
.community-hub .board-hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
  margin:22px 0;
}

.board-modern-page .board-list-container,
.community-hub .board-list-container{
  background:#1e2937;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  border:1px solid #334155;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}

.board-modern-page .board-list-container:hover,
.community-hub .board-list-container:hover{
  border-color:#60a5fa;
}

.board-modern-page .board-list-header,
.community-hub .board-list-header{
  background:#253549;
  padding:16px 20px;
  border-bottom:1px solid #334155;
}

.board-modern-page .board-list-heading{
  color:#e2e8f0;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:-.01em;
}

.board-modern-page .board-list-item,
.community-hub .board-list-item{
  border-bottom:1px solid #334155;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.board-modern-page .board-list-item:hover,
.community-hub .board-list-item:hover{
  background:#253549;
}

.board-modern-page .board-list-item:last-child,
.community-hub .board-list-item:last-child{
  border-bottom:none;
}

.board-modern-page .board-title,
.community-hub .board-title{
  font-size:1.08rem;
  font-weight:700;
  color:#e2e8f0;
  margin-bottom:6px;
}

.board-modern-page a.board-title,
.community-hub a.board-title{
  display:inline-flex;
  align-items:center;
  color:#e2e8f0;
  text-decoration:none;
}

.board-modern-page a.board-title:hover,
.community-hub a.board-title:hover,
.community-hub .community-card-title a:hover{
  color:#93c5fd;
  text-decoration:none;
}

.board-modern-page .board-meta,
.community-hub .board-meta{
  font-size:.9rem;
  color:#94a3b8;
}

.board-modern-page .board-list-container--pc .board-list{
  margin:0;
  background:transparent;
}

.board-modern-page .board-list-container--pc .board-list-head{
  background:#0f172a;
  color:#94a3b8;
  border-bottom:1px solid #334155;
}

.board-modern-page .board-list-container--pc .lst.board-list-item{
  margin:0;
  border-radius:0;
  background:#1e2937;
  box-shadow:none;
  border-left:0;
  border-right:0;
  border-top:0;
  border-bottom:1px solid #334155;
}

.board-modern-page .board-list-container--pc .lst.board-list-item:hover{
  background:#253549;
  border-color:#475569;
}

.board-modern-page .board-list-container--pc .lst.board-list-item .title,
.board-modern-page .board-list-container--pc .lst.board-list-item .lnk,
.board-modern-page .board-list-container--pc .lst.board-list-item .vstt{
  color:#e2e8f0;
}

.board-modern-page .board-list-container--pc .lst.board-list-item .dscr,
.board-modern-page .board-list-container--pc .lst.board-list-item .writer,
.board-modern-page .board-list-container--pc .lst.board-list-item .date,
.board-modern-page .board-list-container--pc .lst.board-list-item .ctx_ftr,
.board-modern-page .board-list-container--pc .lst.board-list-item .stat{
  color:#94a3b8;
}

.board-modern-page .board-list-container--pc .lst.board-list-item .blue,
.board-modern-page .board-list-container--mobile .m-card .v,
.community-hub .community-card-kicker,
.community-hub .community-more:hover{
  color:#60a5fa;
}

.board-modern-page .board-list-container--mobile{
  display:none;
}

.board-modern-page .board-list-container--mobile .m-board{
  padding:14px;
  gap:14px;
  background:#1e2937;
}

.board-modern-page .board-list-container--mobile .m-card.board-list-item{
  background:#0f172a;
  border:1px solid #334155;
  border-radius:16px;
  margin:0;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

.board-modern-page .board-list-container--mobile .m-card.board-list-item:hover{
  background:#111c31;
  border-color:#60a5fa;
}

.board-modern-page .board-list-container--mobile .m-title{
  color:#e2e8f0;
}

.board-modern-page .board-list-container--mobile .m-dscr,
.board-modern-page .board-list-container--mobile .m-stats,
.board-modern-page .board-list-container--mobile .m-right,
.board-modern-page .board-list-container--mobile .m-date{
  color:#94a3b8;
}

.board-modern-page .board-list-container--mobile .m-thumb{
  background:#0b1120;
  border-color:#334155;
  box-shadow:none;
}

.board-modern-page .board-list-container--mobile .m-thumb-placeholder{
  color:#64748b;
}

.community-hub{
  max-width:1380px;
  padding:24px 12px 44px;
}

.community-hub .community-hub-title{
  color:#e2e8f0;
  font-size:1.7rem;
  font-weight:850;
}

.community-hub .community-hub-sub{
  color:#94a3b8;
}

.community-hub .community-grid.board-hub-grid{
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}

.community-hub .community-card-head{
  align-items:center;
}

.community-hub .community-card-title{
  margin:0;
}

.community-hub .community-card-title a{
  color:#e2e8f0;
  text-decoration:none;
}

.community-hub .community-more{
  color:#bfdbfe;
  border-color:#475569;
  background:#0f172a;
}

.community-hub .community-more:hover{
  border-color:#60a5fa;
  background:#172033;
}

.community-hub .community-list{
  padding:0;
  background:#1e2937;
}

.community-hub .community-item{
  padding:0;
}

.community-hub .community-link{
  min-height:58px;
  padding:16px 20px;
  border-bottom:0;
  color:#e2e8f0;
}

.community-hub .community-post-title{
  color:#e2e8f0;
  font-weight:650;
}

.community-hub .community-empty{
  padding:16px 20px;
  color:#94a3b8;
}

.board-modern-page .board-list-actions{
  background:#1e2937;
  border:1px solid #334155;
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}

.board-modern-page .board-search select,
.board-modern-page .board-search input{
  background:#0f172a;
  color:#e2e8f0;
  border-color:#475569;
}

.board-modern-page .board-search select:focus,
.board-modern-page .board-search input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.22);
  outline:0;
}

@media (hover:hover){
  .board-modern-page .board-list-container:hover,
  .community-hub .board-list-container:hover{
    box-shadow:0 14px 36px rgba(0,0,0,.55);
  }
  .board-modern-page .board-hub-card-shell:hover,
  .community-hub .board-list-container:hover{
    transform:translateY(-4px);
  }
  .board-modern-page .board-list-container--mobile .m-card.board-list-item:hover{
    transform:translateX(4px);
  }
}

.board-modern-page :where(.board-title, .m-link, .lnk, .board-hub-card, .btn-search, .btn-write):focus-visible,
.community-hub :where(.community-link, .community-more, .community-card-title a):focus-visible{
  outline:3px solid rgba(96,165,250,.38);
  outline-offset:3px;
}

@media (max-width:768px){
  .board-modern-page .board-list-container--pc{
    display:none !important;
  }
  .board-modern-page .board-list-container--mobile{
    display:block !important;
  }
  .board-modern-page .board-list-header,
  .community-hub .board-list-header{
    padding:14px 16px;
  }
  .board-modern-page .board-title,
  .community-hub .board-title{
    font-size:1rem;
  }
  .board-modern-page .board-list-actions{
    padding:14px;
  }
  .community-hub .community-grid.board-hub-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .community-hub .community-link{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    min-height:64px;
  }
}

@media (max-width:480px){
  .board-modern-page .board-hub-grid,
  .community-hub .board-hub-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .board-modern-page .board-list-container--mobile .m-board{
    padding:12px;
    gap:12px;
  }
  .community-hub{
    padding:18px 10px 36px;
  }
  .community-hub .community-link{
    padding:14px 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .board-modern-page .board-list-container,
  .board-modern-page .board-list-item,
  .community-hub .board-list-container,
  .community-hub .board-list-item{
    transition:none !important;
  }
  .board-modern-page .board-list-container:hover,
  .board-modern-page .board-list-item:hover,
  .community-hub .board-list-container:hover,
  .community-hub .board-list-item:hover{
    transform:none !important;
  }
}

@media (forced-colors: active){
  .board-modern-page :where(.board-list-container,.board-list-header,.board-list-item),
  .community-hub :where(.board-list-container,.board-list-header,.board-list-item){
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1228 - public_modern.css SSOT 기반 전체 현대화
   - public_modern.css를 공개 화면 현대화의 최종 override/SSOT 레이어로 사용한다.
   - 기존 page CSS는 레이아웃/기능 보조로 남기되, 공통 색상·카드·버튼·980px 전환 기준은 여기서 우선한다.
   - References: Bootstrap Card/Button base+modifier pattern, Bootstrap Breakpoints, MDN Media Queries, MDN prefers-reduced-motion.
   ============================================= */
:root{
  --public-bg:#0f172a;
  --public-bg-deep:#0a0f1c;
  --public-surface:#1e2937;
  --public-surface-2:#253549;
  --public-line:#334155;
  --public-line-2:#475569;
  --public-text:#e2e8f0;
  --public-muted:#94a3b8;
  --public-accent:#60a5fa;
  --public-primary:#3b82f6;
  --public-primary-hover:#2563eb;
  --public-danger:#ef4444;
  --public-danger-hover:#dc2626;
  --public-success:#10b981;
  --public-success-hover:#059669;
  --public-secondary:#64748b;
  --public-secondary-hover:#475569;
  --public-radius-card:18px;
  --public-radius-control:12px;
  --public-breakpoint-mobile:980px;
}

body:not(.admin-body),
body.public-dark{
  background:var(--public-bg);
  color:var(--public-text);
}

body:not(.admin-body) :where(.public-container, .admin-container){
  max-width:1380px;
  margin:0 auto;
  padding:24px 12px;
}

body:not(.admin-body) .public-card{
  background:var(--public-surface);
  border-radius:var(--public-radius-card);
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  border:1px solid var(--public-line);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

@media (hover:hover){
  body:not(.admin-body) .public-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.65);
    border-color:var(--public-accent);
  }
}

body:not(.admin-body) :where(.btn, button.btn, a.btn){
  border-radius:var(--public-radius-control);
  font-weight:600;
  padding:10px 18px;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

body:not(.admin-body) :where(.btn-primary, .btn.btn-primary){
  background:var(--public-primary);
  color:#fff;
  border-color:var(--public-primary);
}

body:not(.admin-body) :where(.btn-primary, .btn.btn-primary):hover{
  background:var(--public-primary-hover);
  color:#fff;
  border-color:var(--public-primary-hover);
  transform:translateY(-1px);
}

body:not(.admin-body) :where(.btn-secondary, .btn.btn-secondary){
  background:var(--public-secondary);
  color:#fff;
  border-color:var(--public-secondary);
}

body:not(.admin-body) :where(.btn-secondary, .btn.btn-secondary):hover{
  background:var(--public-secondary-hover);
  color:#fff;
  border-color:var(--public-secondary-hover);
}

body:not(.admin-body) :where(.btn-danger, .btn.btn-danger){
  background:var(--public-danger);
  color:#fff;
  border-color:var(--public-danger);
}

body:not(.admin-body) :where(.btn-danger, .btn.btn-danger):hover{
  background:var(--public-danger-hover);
  color:#fff;
  border-color:var(--public-danger-hover);
}

body:not(.admin-body) :where(.btn-success, .btn.btn-success){
  background:var(--public-success);
  color:#fff;
  border-color:var(--public-success);
}

body:not(.admin-body) :where(.btn-success, .btn.btn-success):hover{
  background:var(--public-success-hover);
  color:#fff;
  border-color:var(--public-success-hover);
}

body:not(.admin-body) :where(.btn-outline, .btn.btn-outline, .btn-outline-light, .btn.btn-outline-light){
  background:transparent;
  color:var(--public-accent);
  border:2px solid var(--public-accent);
}

body:not(.admin-body) :where(.btn-outline, .btn.btn-outline, .btn-outline-light, .btn.btn-outline-light):hover{
  background:var(--public-accent);
  color:#0f172a;
  border-color:var(--public-accent);
}

body:not(.admin-body) :where(.btn-sm, .btn.btn-sm){
  padding:8px 14px;
  font-size:.9rem;
}

body:not(.admin-body) .text-primary{
  color:var(--public-accent) !important;
}

body:not(.admin-body) .badge{
  font-size:.82rem;
  padding:4px 10px;
}

@media (max-width:980px){
  body:not(.admin-body) :where(.admin-table, .public-pc-table, .board-modern-page .board-list-container--pc){
    display:none !important;
  }
  body:not(.admin-body) :where(.public-mobile-cards, .board-modern-page .board-list-container--mobile){
    display:block !important;
  }
  body:not(.admin-body) :where(.public-container, .admin-container){
    padding:20px 10px;
  }
}

@media (min-width:981px){
  body:not(.admin-body) :where(.admin-card, .admin-mobile-cards, .public-mobile-cards, .board-modern-page .board-list-container--mobile){
    display:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body:not(.admin-body) :where(.public-card, .btn, button.btn, a.btn){
    transition:none !important;
  }
  body:not(.admin-body) :where(.public-card:hover, .btn:hover, button.btn:hover, a.btn:hover){
    transform:none !important;
  }
}

@media (forced-colors: active){
  body:not(.admin-body) :where(.public-card, .btn, .badge){
    forced-color-adjust:auto;
  }
}


/* =============================================
   Ver.1229 - 안전한 현대화 SSOT (기존 파일 삭제 금지)
   - 기존 CSS 파일(ed2_*, wd_*, public_home.css, public_board.css 등)은 삭제하거나 대체하지 않는다.
   - 새 현대화 스타일은 public_modern.css의 additive layer로 추가한다.
   - 신규 작업은 public-card/modern-card, modern-btn-primary, admin-modern-card 같은 보조 클래스를 우선 사용한다.
   - References: Bootstrap Card component pattern, Bootstrap Buttons variant pattern, MDN prefers-reduced-motion.
   ============================================= */
body:not(.admin-body) :where(.public-card, .modern-card){
  background:var(--public-surface, #1e2937);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  border:1px solid var(--public-line, #334155);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

@media (hover:hover){
  body:not(.admin-body) :where(.public-card, .modern-card):hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.65);
    border-color:var(--public-accent, #60a5fa);
  }
}

body:not(.admin-body) .modern-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:42px;
  padding:10px 18px;
  background:var(--public-primary, #3b82f6);
  color:#fff;
  border:1px solid var(--public-primary, #3b82f6);
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:not(.admin-body) .modern-btn-primary:hover,
body:not(.admin-body) .modern-btn-primary:focus-visible{
  background:var(--public-primary-hover, #2563eb);
  border-color:var(--public-primary-hover, #2563eb);
  color:#fff;
  transform:translateY(-1px);
  text-decoration:none;
}

body:not(.admin-body) .modern-btn-primary:focus-visible{
  outline:3px solid rgba(96,165,250,.45);
  outline-offset:2px;
}

body:not(.admin-body) .modern-btn-primary:disabled,
body:not(.admin-body) .modern-btn-primary[aria-disabled="true"]{
  opacity:.58;
  pointer-events:none;
  transform:none;
}

.admin-modern-table th{
  background:#334155;
  color:#cbd5e1;
}

.admin-modern-card{
  background:#1e2937;
  border-radius:16px;
  padding:18px;
  border:1px solid #475569;
}

@media (prefers-reduced-motion: reduce){
  body:not(.admin-body) :where(.public-card, .modern-card, .modern-btn-primary){
    transition:none !important;
  }
  body:not(.admin-body) :where(.public-card:hover, .modern-card:hover, .modern-btn-primary:hover, .modern-btn-primary:focus-visible){
    transform:none !important;
  }
}

@media (forced-colors: active){
  body:not(.admin-body) :where(.modern-card, .modern-btn-primary),
  :where(.admin-modern-card, .admin-modern-table th){
    forced-color-adjust:auto;
  }
}


/* =============================================
   Ver.1230 - 안전한 SSOT 기반 현대화 1단계 보조 클래스 완성
   - Ver.1229 additive layer 원칙을 유지한다.
   - 기존 CSS 파일(ed2_*, wd_*, public_home.css, public_board.css 등)은 삭제하거나 대체하지 않는다.
   - 사용자 제안의 modern-btn / modern-btn-danger / modern-btn-outline / 980px 보조 breakpoint를 public_modern.css에만 추가한다.
   - References: MDN link stylesheet, MDN media queries, MDN transition/box-shadow/border-radius.
   ============================================= */
body:not(.admin-body) :where(.public-card, .modern-card){
  background:#1e2937;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  border:1px solid #334155;
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s cubic-bezier(.4,0,.2,1), background-color .35s cubic-bezier(.4,0,.2,1);
}

@media (hover:hover){
  body:not(.admin-body) :where(.public-card, .modern-card):hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.65);
    border-color:#60a5fa;
  }
}

body:not(.admin-body) .modern-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:42px;
  padding:10px 20px;
  border-radius:12px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:not(.admin-body) :where(.modern-btn:hover, .modern-btn:focus-visible){
  text-decoration:none;
}

body:not(.admin-body) .modern-btn:focus-visible{
  outline:3px solid rgba(96,165,250,.45);
  outline-offset:2px;
}

body:not(.admin-body) .modern-btn:disabled,
body:not(.admin-body) .modern-btn[aria-disabled="true"]{
  opacity:.58;
  pointer-events:none;
  transform:none;
}

body:not(.admin-body) :where(.modern-btn-primary, .btn.modern-btn-primary){
  background:#3b82f6;
  color:#fff;
  border-color:#3b82f6;
}

body:not(.admin-body) :where(.modern-btn-primary, .btn.modern-btn-primary):hover,
body:not(.admin-body) :where(.modern-btn-primary, .btn.modern-btn-primary):focus-visible{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
  transform:translateY(-1px);
}

body:not(.admin-body) :where(.modern-btn-danger, .btn.modern-btn-danger){
  background:#ef4444;
  color:#fff;
  border-color:#ef4444;
}

body:not(.admin-body) :where(.modern-btn-danger, .btn.modern-btn-danger):hover,
body:not(.admin-body) :where(.modern-btn-danger, .btn.modern-btn-danger):focus-visible{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
  transform:translateY(-1px);
}

body:not(.admin-body) :where(.modern-btn-outline, .btn.modern-btn-outline){
  background:transparent;
  color:#60a5fa;
  border:2px solid #60a5fa;
}

body:not(.admin-body) :where(.modern-btn-outline, .btn.modern-btn-outline):hover,
body:not(.admin-body) :where(.modern-btn-outline, .btn.modern-btn-outline):focus-visible{
  background:#60a5fa;
  color:#0f172a;
  border-color:#60a5fa;
  transform:translateY(-1px);
}

.admin-modern-table th{
  background:#334155;
  color:#cbd5e1;
}

.admin-modern-card{
  background:#1e2937;
  border-radius:16px;
  padding:18px;
  border:1px solid #475569;
}

@media (max-width:980px){
  .admin-table{
    display:none;
  }
  .admin-mobile-cards{
    display:block;
  }
}

@media (min-width:981px){
  .admin-mobile-cards{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  body:not(.admin-body) :where(.public-card, .modern-card, .modern-btn, .modern-btn-primary, .modern-btn-danger, .modern-btn-outline){
    transition:none !important;
  }
  body:not(.admin-body) :where(.public-card:hover, .modern-card:hover, .modern-btn:hover, .modern-btn:focus-visible, .modern-btn-primary:hover, .modern-btn-primary:focus-visible, .modern-btn-danger:hover, .modern-btn-danger:focus-visible, .modern-btn-outline:hover, .modern-btn-outline:focus-visible){
    transform:none !important;
  }
}

@media (forced-colors: active){
  body:not(.admin-body) :where(.public-card, .modern-card, .modern-btn, .modern-btn-primary, .modern-btn-danger, .modern-btn-outline),
  :where(.admin-modern-card, .admin-modern-table th){
    forced-color-adjust:auto;
  }
}


/* =============================================
   Ver.1231 - 작품 목록 & 상세 페이지 이미지/레이아웃 개선
   - Ver.1230 additive layer 원칙을 유지한다.
   - 기존 ed2_*/wd_* CSS 삭제 또는 대체 없이 public_modern.css에서만 보강한다.
   - References: MDN object-fit/object-position, MDN media queries, MDN img alt text.
   ============================================= */
/* 작품 목록 - 이미지 비율 개선 */
.works-grid .public-card img{
  height:280px;
  object-fit:cover;
  object-position:center;
}

/* 모바일에서는 조금 더 세로 비율 허용 */
@media (max-width:768px){
  .works-grid .public-card img{
    height:240px;
  }
}

/* 작품 상세 페이지 개선 */
.work-detail-page .work-detail-hero{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.7);
  margin-bottom:30px;
  background:#000;
}

.work-detail-page .work-detail-hero img{
  width:100%;
  height:auto;
  max-height:520px;
  min-height:0;
  object-fit:contain;
  object-position:center;
  background:#000;
}

.work-detail-page .work-detail-main-title{
  font-size:1.9rem;
  font-weight:700;
  color:#e2e8f0;
  margin:0 0 16px;
  line-height:1.32;
  letter-spacing:-.025em;
}

/* 중복 제목 제거를 위한 숨김 처리 */
.work-detail-page .work-detail-sub-title{
  display:none !important;
}

@media (max-width:820px){
  .work-detail-page .work-detail-main-title{
    font-size:1.45rem;
  }
}

/* =============================================
   Ver.1232 - 작품 작성/수정 페이지 입력 필드 가독성 강화
   - Ver.1231 additive layer 원칙을 유지한다.
   - 기존 ed2_*/work_form.css 삭제 또는 대체 없이 public_modern.css에서만 후순위 보강한다.
   - References: MDN :focus, MDN ::placeholder, MDN link stylesheet.
   ============================================= */
.work-form-container .form-control,
.work-form-container .form-select,
.work-form-container textarea{
  background:#334155 !important;
  color:#e2e8f0 !important;
  border:1px solid #475569;
  border-radius:12px;
  padding:14px 16px;
  font-size:1rem;
}

.work-form-container .form-control:focus,
.work-form-container .form-select:focus,
.work-form-container textarea:focus{
  background:#1e2937 !important;
  color:#f1f5f9 !important;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.3);
  outline:none;
}

.work-form-container .form-control::placeholder,
.work-form-container textarea::placeholder{
  color:#cbd5e1;
  opacity:.88;
}

/* 메타 붙여넣기 영역 */
.meta-paste-box textarea{
  background:#0f172a !important;
  color:#e2e8f0 !important;
  border:2px dashed #475569;
}

.meta-paste-box textarea:focus{
  border-color:#60a5fa;
  background:#1e2937 !important;
}

@media (forced-colors: active){
  .work-form-container .form-control,
  .work-form-container .form-select,
  .work-form-container textarea,
  .meta-paste-box textarea{
    forced-color-adjust:auto;
  }
}



/* =============================================
   Ver.1233 - 작품목록 cover 우선 + 상세 Hero 중복 정리
   - 작품목록(/works/jav, /works/vr, /works/etc) 썸네일만 cover 우선 계약을 사용한다.
   - 통합검색/홈/상세 요약 등 다른 공개 노출은 rep_image 우선 계약을 유지한다.
   - 기존 ed2_*/wd_* CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN object-fit/object-position, MDN media queries.
   ============================================= */
.work-list-page .works-category-grid{
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:24px;
}

.work-list-page .works-category-grid > .work-list-card{
  width:100%;
  max-width:none;
  justify-self:stretch;
}

/* 작품목록 썸네일은 cover 이미지를 전제로 카드 영역을 꽉 채운다. */
.work-list-page .works-category-grid .work-cover,
.work-list-page .works-category-grid .work-thumb > img{
  width:100%;
  height:280px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  background:#0f172a;
}

@media (max-width:768px){
  /* 작품목록 모바일은 한 줄에 한 작품씩 세로 카드로 고정한다. */
  .work-list-page .works-category-grid{
    grid-template-columns:1fr !important;
    gap:20px;
  }

  .work-list-page .works-category-grid > .work-list-card{
    width:100%;
    max-width:none;
  }

  .work-list-page .works-category-grid .work-cover,
  .work-list-page .works-category-grid .work-thumb > img{
    height:260px;
  }
}

/* 상세 요약의 큰 Hero는 기존 상세 cover 영역과 중복되어 보이므로 숨긴다. */
.work-detail-page .work-modern-summary .work-detail-hero{
  display:none !important;
}

/* 상세에서 별도 대표 이미지 영역을 다시 사용할 때는 rep_image 우선 이미지를 잘림 없이 보여주는 용도다. */
.work-detail-page .work-detail-main-image{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.6);
  margin-bottom:28px;
  background:#000;
}

.work-detail-page .work-detail-main-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
  background:#000;
}

@media (forced-colors: active){
  .work-list-page .works-category-grid > .work-list-card,
  .work-detail-page .work-detail-main-image{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1234 - 작품목록 cover 썸네일 프레임 비율 정정
   - 작품목록(/works/jav, /works/vr, /works/etc)만 cover 우선 계약을 유지한다.
   - cover 이미지 전환에 맞춰 썸네일 프레임도 cover 원본 비율(1771 / 1250)로 맞춘다.
   - Ver.1233의 고정 height(PC 280px / 모바일 260px) 후순위 보정을 여기서 무효화한다.
   - 기존 CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN aspect-ratio, object-fit/object-position, media queries.
   ============================================= */
.work-list-page .works-category-grid{
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
}

.work-list-page .works-category-grid .work-thumb{
  display:block;
  width:100%;
  aspect-ratio:1771 / 1250;
  min-height:0;
  overflow:hidden;
  background:#0f172a;
}

.work-list-page .works-category-grid .work-cover,
.work-list-page .works-category-grid .work-thumb > img{
  display:block;
  width:100%;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:1771 / 1250;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  background:#0f172a;
}

@media (max-width:768px){
  .work-list-page .works-category-grid{
    grid-template-columns:1fr !important;
    gap:20px;
  }

  .work-list-page .works-category-grid .work-thumb{
    aspect-ratio:1771 / 1250;
  }

  .work-list-page .works-category-grid .work-cover,
  .work-list-page .works-category-grid .work-thumb > img{
    height:100% !important;
    max-height:none !important;
    aspect-ratio:1771 / 1250;
  }
}

@media (forced-colors: active){
  .work-list-page .works-category-grid .work-thumb{
    forced-color-adjust:auto;
  }
}



/* =============================================
   Ver.1237 - 작품/배우 상세 상단 현대화 Hero/추가 제목 제거
   - 템플릿에서 work-modern-summary와 actor-modern-summary를 제거하고 기존 title card/actor-top 제목 양식으로 되돌린다.
   - 과거 캐시나 부분 템플릿에 modern summary가 남아도 상세 화면에서 중복 제목/hero가 보이지 않도록 안전 보정한다.
   - 기존 CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN display, MDN object-fit.
   ============================================= */
.work-detail-page .work-modern-summary,
.actor-detail-page .actor-modern-summary{
  display:none !important;
}

.work-detail-page .wd-title-card .wd-title{
  display:block !important;
}

.work-detail-page .wd-title-card .wd-code-chip{
  display:inline-flex;
}

.work-detail-page .wd-top-grid .wd-media-frame.detail-hero,
.actor-detail-page .actor-layout .actor-photo.detail-hero{
  display:block;
}

@media (forced-colors: active){
  .work-detail-page .wd-title-card,
  .actor-detail-page .actor-top{
    forced-color-adjust:auto;
  }
}

/* ==================== Ver.1238 - 게시판 공지/모바일 하위 메뉴 가독성 복구 ====================
   - 게시판 상단 notice_frame_style.html은 기존 light-frame 토큰을 유지하지만 public-dark의 --text가 밝은색으로 바뀌면서
     흰색 계열 배경 위 글자가 사라질 수 있었다. 커뮤니티 게시판 범위에서만 배경/글자색 쌍을 명시한다.
   - 모바일 햄버거 2-depth 메뉴는 JS transform 이동을 유지하되, 하위 패널 텍스트가 항상 보이도록 색상/표면을 보강한다.
   - 기존 public_board.css/style.css/템플릿 구조는 삭제하거나 대체하지 않는다.
*/
.board-modern-page .notice-frame{
  background:rgba(15,23,42,.94) !important;
  color:#e2e8f0 !important;
  border-color:rgba(245,158,11,.34) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}

.board-modern-page .notice-frame-title{
  color:#fbbf24 !important;
  text-shadow:0 8px 24px rgba(251,191,36,.16);
}

.board-modern-page .notice-frame .notice-list{
  background:#0b1220 !important;
  border-color:rgba(245,158,11,.28) !important;
}

.board-modern-page .notice-frame .notice-list a{
  background:linear-gradient(135deg, rgba(120,83,18,.26), rgba(15,23,42,.98)) !important;
  color:#f8fafc !important;
}

.board-modern-page .notice-frame .notice-list li+li a{
  border-top-color:rgba(245,158,11,.22) !important;
}

.board-modern-page .notice-frame .notice-list a:hover,
.board-modern-page .notice-frame .notice-list a:focus-visible{
  background:linear-gradient(135deg, rgba(245,158,11,.26), rgba(30,41,59,.98)) !important;
  color:#fff !important;
}

.board-modern-page .notice-frame .notice-badge{
  background:rgba(245,158,11,.18) !important;
  border-color:rgba(251,191,36,.52) !important;
  color:#fde68a !important;
}

.board-modern-page .notice-frame .notice-title{
  color:#f8fafc !important;
}

.board-modern-page .notice-frame .notice-date{
  color:#cbd5e1 !important;
  opacity:.9 !important;
}

.board-modern-page .board-list-container--pc .lst.board-list-item.notice,
.board-modern-page .board-list-container--mobile .m-card.m-notice{
  background:linear-gradient(135deg, rgba(120,83,18,.30), rgba(15,23,42,.98)) !important;
  border-color:rgba(245,158,11,.36) !important;
}

.board-modern-page .lst.board-list-item.notice :where(.title,.lnk,.vstt),
.board-modern-page .m-card.m-notice :where(.m-title,.m-dscr,.m-meta,.m-date,.m-right){
  color:#f8fafc !important;
}

.site-header .mob-panels{
  overflow:hidden;
}

.site-header .mob-panel{
  min-width:100%;
  width:100%;
  color:#e2e8f0;
}

.site-header .mob-subgroup-title{
  color:#93c5fd !important;
}

.site-header .mob-sub-item,
.site-header .mob-back{
  background:rgba(15,23,42,.82) !important;
  color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.24) !important;
}

.site-header .mob-sub-item:hover,
.site-header .mob-sub-item:focus-visible,
.site-header .mob-back:hover,
.site-header .mob-back:focus-visible{
  background:rgba(96,165,250,.16) !important;
  color:#fff !important;
  border-color:rgba(96,165,250,.44) !important;
}

@media (forced-colors: active){
  .board-modern-page .notice-frame,
  .board-modern-page .notice-frame .notice-list,
  .board-modern-page .notice-frame .notice-list a,
  .site-header .mob-sub-item,
  .site-header .mob-back{
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1239 - 작품목록 다크 표면/컨트롤 톤 정리
   - 작품목록은 base.html을 직접 상속해 public_dark.css가 로드되지 않는 경로가 있다.
   - work_detail.css의 light card 토큰이 wd-title-card/wd-card에 남아 흰색 바탕이 보이는 회귀를 작품목록 범위에서만 후순위로 보정한다.
   - 기존 CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN backgrounds/borders, color contrast, box-shadow.
   ============================================= */
.work-list-page{
  color:#e2e8f0;
}

.work-list-page .work-detail{
  color:#e2e8f0 !important;
  background:transparent !important;
}

.work-list-page .wd-title-card,
.work-list-page .wd-card.wl-controls-shell,
.work-list-page .wd-card.wl-results-shell{
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98)) !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(71,85,105,.92) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.work-list-page .wd-title-card .wl-title{
  color:#f8fafc !important;
  text-shadow:0 10px 26px rgba(0,0,0,.24);
}

.work-list-page .wd-title-card .wl-sub,
.work-list-page .works-controls label,
.work-list-page .works-controls .muted{
  color:#cbd5e1 !important;
}

.work-list-page .works-controls{
  background:transparent !important;
  color:#e2e8f0 !important;
}

.work-list-page .wd-icon-btn,
.work-list-page .wl-filter-btn,
.work-list-page .wl-search-submit{
  background:#111827 !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(71,85,105,.95) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18) !important;
}

.work-list-page .wd-icon-btn:hover,
.work-list-page .wd-icon-btn:focus-visible,
.work-list-page .wl-filter-btn:hover,
.work-list-page .wl-filter-btn:focus-visible,
.work-list-page .wl-search-submit:hover,
.work-list-page .wl-search-submit:focus-visible{
  background:#1e293b !important;
  color:#fff !important;
  border-color:rgba(96,165,250,.62) !important;
  outline:2px solid rgba(96,165,250,.38);
  outline-offset:2px;
}

.work-list-page .wl-filter-btn.is-active{
  background:linear-gradient(135deg, rgba(37,99,235,.92), rgba(30,64,175,.92)) !important;
  color:#fff !important;
  border-color:rgba(147,197,253,.82) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18), 0 12px 26px rgba(30,64,175,.28) !important;
}

.work-list-page .wl-sort-select,
.work-list-page .wl-search-input{
  background:#0b1220 !important;
  color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.95) !important;
}

.work-list-page .wl-search-input::placeholder{
  color:#94a3b8 !important;
  opacity:.95;
}

.work-list-page .wl-sort-select:focus-visible,
.work-list-page .wl-search-input:focus-visible{
  border-color:rgba(96,165,250,.78) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18) !important;
}

.work-list-page .facet-row{
  width:100%;
  margin-top:12px;
  padding:10px;
  border-radius:16px;
  background:rgba(11,18,32,.72) !important;
  border:1px solid rgba(71,85,105,.68) !important;
  color:#e2e8f0 !important;
}

.work-list-page .chip{
  background:rgba(96,165,250,.12) !important;
  border-color:rgba(96,165,250,.28) !important;
  color:#bfdbfe !important;
}

.work-list-page .chip:hover,
.work-list-page .chip:focus-visible{
  background:rgba(96,165,250,.20) !important;
  color:#fff !important;
  border-color:rgba(147,197,253,.58) !important;
}

.work-list-page .chip.is-active{
  background:rgba(37,99,235,.38) !important;
  border-color:rgba(147,197,253,.72) !important;
  color:#fff !important;
}

.work-list-page .chip-count{
  color:#dbeafe !important;
}

.work-list-page .works-category-grid > .work-list-card,
.work-list-page .work-list-card{
  background:#1e2937 !important;
  color:#e2e8f0 !important;
  border-color:rgba(51,65,85,.96) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.44) !important;
}

.work-list-page .works-category-grid .work-thumb,
.work-list-page .work-list-card .work-thumb,
.work-list-page .works-category-grid .work-cover,
.work-list-page .works-category-grid .work-thumb > img{
  background:#0b1220 !important;
}

.work-list-page .work-list-card .work-info{
  background:#1e2937 !important;
  color:#e2e8f0 !important;
}

.work-list-page .work-list-card .work-title,
.work-list-page .work-list-card .work-name,
.work-list-page .work-list-card .title{
  color:#f1f5f9 !important;
}

.work-list-page .work-list-card .work-code,
.work-list-page .work-list-card .code{
  color:#60a5fa !important;
}

.work-list-page .work-list-card .work-meta-row,
.work-list-page .work-list-card .meta-left,
.work-list-page .work-list-card .meta-right{
  color:#cbd5e1 !important;
}

.work-list-page .page-row .page-num{
  background:#111827 !important;
  color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.95) !important;
}

.work-list-page .page-row .page-num.is-active{
  background:rgba(37,99,235,.38) !important;
  color:#fff !important;
  border-color:rgba(147,197,253,.72) !important;
}

@media (max-width:768px){
  .work-list-page .wd-title-card,
  .work-list-page .wd-card.wl-controls-shell,
  .work-list-page .wd-card.wl-results-shell{
    border-radius:16px !important;
  }

  .work-list-page .works-controls-right,
  .work-list-page .works-controls-left{
    width:100%;
  }
}

@media (forced-colors: active){
  .work-list-page .wd-title-card,
  .work-list-page .wd-card.wl-controls-shell,
  .work-list-page .wd-card.wl-results-shell,
  .work-list-page .work-list-card,
  .work-list-page .facet-row,
  .work-list-page .chip,
  .work-list-page .wd-icon-btn{
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1240 - 모바일 햄버거 하위목록 텍스트 가시성/빈 메이커 방지
   - 실제 배포 DB에서 maker id는 있으나 name이 비어 있으면 빈 카드처럼 보일 수 있다.
   - 템플릿/서버에서 빈 이름을 걸러도, 하위목록 텍스트 자체는 후순위 CSS에서 명시적으로 표시한다.
   - References: MDN display, visibility, flex/flex-basis, color.
   ============================================= */
.site-header .mob-menu.open .mob-panel.is-active .mob-subgroup,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-subgroup{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  visibility:visible !important;
  opacity:1 !important;
}

.site-header .mob-menu.open .mob-panel.is-active .mob-sub-item,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:46px !important;
  padding:10px 14px !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  text-indent:0 !important;
  text-decoration:none !important;
  visibility:visible !important;
  opacity:1 !important;
  white-space:normal !important;
  overflow:visible !important;
  background:rgba(15,23,42,.86) !important;
  border:1px solid rgba(148,163,184,.30) !important;
  border-radius:13px !important;
}

.site-header .mob-menu.open .mob-panel.is-active .mob-sub-item__text,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item__text{
  display:block !important;
  min-width:0;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

.site-header .mob-menu.open .mob-panel.is-active .mob-sub-item__count,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item__count{
  flex:0 0 auto;
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
  font-size:12px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(96,165,250,.16);
  border:1px solid rgba(96,165,250,.26);
}

.site-header .mob-menu.open .mob-panel.is-active .mob-sub-item:hover,
.site-header .mob-menu.open .mob-panel.is-active .mob-sub-item:focus-visible,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item:hover,
.site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item:focus-visible{
  background:rgba(96,165,250,.18) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:rgba(96,165,250,.52) !important;
}

@media (forced-colors: active){
  .site-header .mob-menu.open .mob-panel.is-active .mob-sub-item,
  .site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item,
  .site-header .mob-menu.open .mob-panel.is-active .mob-sub-item__text,
  .site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item__text,
  .site-header .mob-menu.open .mob-panel.is-active .mob-sub-item__count,
  .site-header .mob-menu[aria-hidden="false"] .mob-panel.is-active .mob-sub-item__count{
    background:Canvas !important;
    color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important;
    border-color:CanvasText !important;
  }
}

/* =============================================
   Ver.1241 - 작품/배우 상세 다크 표면 복구 + 수정 화면 500 회귀 방지
   - work_detail.css/actor_detail.css의 light fallback을 상세 페이지 범위에서만 후순위 보정한다.
   - 기존 상세 DOM/기능은 변경하지 않고 흰색 카드/입력/평가 박스만 다크 테마와 맞춘다.
   - References: MDN background-color, color-scheme, Flask error handling.
   ============================================= */
.work-detail-page,
.actor-detail-page{
  color-scheme:dark;
}

.work-detail-page{
  --wd-bg:#0f172a;
  --wd-card:#1e2937;
  --wd-card-bg:#1e2937;
  --wd-card-border:rgba(71,85,105,.92);
  --wd-text:#e2e8f0;
  --wd-muted:#94a3b8;
  --wd-line:rgba(71,85,105,.92);
  --wd-chip-bg:rgba(15,23,42,.72);
  --wd-btn-bg:#111827;
  --ed2-card:#1e2937;
  --ed2-line:rgba(71,85,105,.92);
  --ed2-text:#e2e8f0;
  --ed2-muted:#94a3b8;
}

.actor-detail-page{
  --ad-bg:#0f172a;
  --ad-card:#1e2937;
  --ad-text:#e2e8f0;
  --ad-muted:#94a3b8;
  --ad-line:rgba(71,85,105,.92);
  --ad-shadow:0 14px 34px rgba(0,0,0,.42);
  --ed2-card:#1e2937;
  --ed2-line:rgba(71,85,105,.92);
  --ed2-text:#e2e8f0;
  --ed2-muted:#94a3b8;
}

.work-detail-page :where(.wd-title-card,.wd-card,.rv-modal-panel,.wd-review-item,.wd-dist-item,.wd-mini-btn),
.actor-detail-page :where(.actor-left,.actor-card,.right-photos,.right-eval,.actor-frame2 .frame-card,.ad-card,.ad-review-item,.dist-item,.legend-item,.rv-modal-panel,.actor-reco-item){
  background:#1e2937 !important;
  color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.92) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.42) !important;
}

.work-detail-page :where(.wd-title,.wd-section-title,.wd-review-title,.wd-review-author,.wd-dist-label,.rv-modal-title,.rv-score-row label,.rv-avg .k),
.actor-detail-page :where(.actor-title,.actor-title .name,.data-title,.data-name,.gallery-title .t,.radial-title .t,.ad-section-title,.ad-review-author,.rv-modal-title,.rv-score-row label,.rv-avg .k,.actor-post-title,.actor-reco-name){
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.work-detail-page :where(.wd-code-chip,.wd-badge,.wd-meta .k,.wd-review-date,.wd-dist-meta,.wd-dist-axis,.rv-counter),
.actor-detail-page :where(.actor-title .sub,.actor-subtitle,.kv .k,.reco-meta,.empty-text,.gallery-empty,.radial-title .m,.dist-head .m,.dist-meta,.dist-axis,.ad-muted,.rv-counter,.actor-reco-meta,.actor-post-excerpt){
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

.work-detail-page :where(.wd-media-frame,.wd-shot,.wd-shot-thumb,.wd-imagebox),
.actor-detail-page :where(.actor-photo,.gallery-thumb,.actor-post-thumb,.actor-reco-thumb){
  background:#0b1220 !important;
  border-color:rgba(71,85,105,.92) !important;
}

.work-detail-page :where(.rv-textarea,.wd-review-textarea,.rv-score-row select,.wd-review-select,.wd-dist-toggle),
.actor-detail-page :where(.rv-textarea,.ad-review-comment-form textarea,.rv-score-row select,.dist-toggle,.ad-rv-vote){
  background:#0f172a !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.92) !important;
}

.work-detail-page :where(.rv-textarea,.wd-review-textarea)::placeholder,
.actor-detail-page :where(.rv-textarea,.ad-review-comment-form textarea)::placeholder{
  color:#94a3b8 !important;
  opacity:.95;
}

.work-detail-page :where(.rv-score-row,.rv-avg),
.actor-detail-page :where(.rv-score-row,.rv-avg,.actor-code-chip){
  background:rgba(15,23,42,.72) !important;
  color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.92) !important;
}

.actor-detail-page :where(.actor-admin-overlay,.share-btn,.pill-link,.gallery-more,.pg-btn){
  background:rgba(15,23,42,.88) !important;
  color:#e2e8f0 !important;
  border-color:rgba(71,85,105,.92) !important;
}

.work-detail-page .wd-rv-avg,
.actor-detail-page .ad-rv-avg{
  background:rgba(37,99,235,.32) !important;
  color:#dbeafe !important;
  border:1px solid rgba(96,165,250,.42) !important;
}

.work-detail-page .u-bg,
.actor-detail-page .u-bg{
  stroke:rgba(148,163,184,.22) !important;
}

.work-detail-page .radial-center-text,
.actor-detail-page .radial-center-text{
  fill:#f8fafc !important;
}

.work-detail-page .radial-center-sub,
.actor-detail-page .radial-center-sub{
  fill:#94a3b8 !important;
}

.work-detail-page :where(a),
.actor-detail-page :where(a){
  color:inherit;
}

.work-detail-page :where(.blue,.ad-link,.wd-link),
.actor-detail-page :where(.blue,.ad-link,.wd-link){
  color:#93c5fd !important;
  -webkit-text-fill-color:#93c5fd !important;
}

@media (forced-colors: active){
  .work-detail-page :where(.wd-title-card,.wd-card,.rv-modal-panel,.wd-review-item,.wd-dist-item,.wd-mini-btn),
  .actor-detail-page :where(.actor-left,.actor-card,.right-photos,.right-eval,.actor-frame2 .frame-card,.ad-card,.ad-review-item,.dist-item,.legend-item,.rv-modal-panel,.actor-reco-item){
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1242 - 상세/작성 이미지 프레임 무채움 + 평가 항목 가독성 보강
   - 커버/스크린샷 미리보기에서 흰색 fallback이 보이지 않도록 이미지 주변 프레임은 부모 카드 색을 그대로 비추는 transparent로 통일한다.
   - 실제 이미지 자체의 흰 배경 픽셀은 변경하지 않고, CSS frame/background만 보정한다.
   - 평가 그래프 하단 legend/dist 항목은 다크 카드 위에서 읽히도록 글자색/크기/line-height를 후순위로 보강한다.
   - References: MDN background-color, object-fit, color, font-size.
   ============================================= */
.work-detail-page :where(.wd-media-frame,.wd-shot,.wd-shot-figure,.wd-shot-thumb,.wd-imagebox,.wd-inc-thumb),
.actor-detail-page :where(.actor-photo,.gallery-thumb,.actor-post-thumb,.actor-reco-thumb),
.work-form-page :where(.ed2-cover__imgWrap,.ed2-viewer__stage,.ed2-thumb__img,.wf-cover-frame,.shotBox img){
  background:transparent !important;
  background-color:transparent !important;
  border-color:rgba(71,85,105,.82) !important;
}

.work-detail-page :where(.wd-cover,.wd-shot img,.wd-inc-thumb img),
.actor-detail-page :where(.actor-photo img,.gallery-thumb img,.actor-post-thumb img,.actor-reco-thumb img),
.work-form-page :where(.ed2-cover__img,.ed2-viewer__img,.wf-cover-frame img,.shotBox img){
  background:transparent !important;
  background-color:transparent !important;
}

.work-form-page :where(.ed2-thumbsWrap,.ed2-viewer,.ed2-workspace){
  background:transparent !important;
  background-color:transparent !important;
}

.work-form-page .ed2-thumb{
  background:rgba(15,23,42,.42) !important;
  border-color:rgba(71,85,105,.82) !important;
  color:#e2e8f0 !important;
}

.work-form-page .ed2-thumb:hover,
.work-form-page .ed2-thumb.is-active{
  background:rgba(30,41,59,.78) !important;
  border-color:rgba(96,165,250,.72) !important;
}

.work-form-page .ed2-viewer__stage{
  min-height:260px;
}

.work-detail-page .wd-cover{
  object-fit:contain !important;
  object-position:center !important;
}

.work-detail-page .wd-shot img,
.work-form-page .ed2-cover__img,
.work-form-page .ed2-viewer__img,
.work-form-page .ed2-thumb__img{
  object-position:center !important;
}

.work-detail-page :where(.wd-legend,.radial-legend),
.actor-detail-page :where(.radial-legend){
  gap:12px !important;
}

.work-detail-page :where(.legend-item),
.actor-detail-page :where(.legend-item){
  background:rgba(15,23,42,.70) !important;
  border-color:rgba(96,165,250,.24) !important;
  color:#e2e8f0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.work-detail-page :where(.legend-item .l,.wd-dist-label,.dist-label),
.actor-detail-page :where(.legend-item .l,.dist-label){
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:.01em;
}

.work-detail-page :where(.legend-item .v,.wd-dist-avg,.dist-avg),
.actor-detail-page :where(.legend-item .v,.dist-avg){
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
}

.work-detail-page :where(.wd-dist-meta,.wd-dist-axis,.wd-graph-note,.dist-meta,.dist-axis),
.actor-detail-page :where(.dist-meta,.dist-axis,.radial-title .m){
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  font-weight:850 !important;
}

.work-detail-page :where(.wd-dist-axis span,.dist-axis span),
.actor-detail-page :where(.dist-axis span){
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

.work-detail-page :where(.wd-dist-toggle),
.actor-detail-page :where(.dist-toggle){
  background:rgba(15,23,42,.78) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  border-color:rgba(96,165,250,.32) !important;
}

.work-detail-page :where(.wd-dist-bars span),
.actor-detail-page :where(.dist-bars span){
  background:rgba(96,165,250,.48) !important;
}

.work-detail-page :where(.wd-dist-bars span.i0),
.actor-detail-page :where(.dist-bars span.i0){
  background:rgba(148,163,184,.22) !important;
}

@media (forced-colors: active){
  .work-detail-page :where(.wd-media-frame,.wd-shot,.wd-shot-figure,.wd-shot-thumb,.wd-imagebox,.wd-inc-thumb),
  .actor-detail-page :where(.actor-photo,.gallery-thumb,.actor-post-thumb,.actor-reco-thumb),
  .work-form-page :where(.ed2-cover__imgWrap,.ed2-viewer__stage,.ed2-thumb,.ed2-thumb__img,.wf-cover-frame,.shotBox img),
  .work-detail-page :where(.legend-item,.wd-dist-item),
  .actor-detail-page :where(.legend-item,.dist-item){
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1243 - 작성 중복코드 차단 UX + 작품/배우 목록 균형 그리드 보정
   - 작성 화면에서 메타 붙여넣기로 상품코드가 채워졌을 때 중복이면 팝업/저장 차단 상태를 명확히 보여준다.
   - 작품목록은 auto-fill 빈 트랙이 남는 회귀를 줄이기 위해 auto-fit + 균등 stretch로 조정한다.
   - 배우목록은 max 240px 카드가 왼쪽에만 몰리지 않도록 grid track을 1fr로 균등 배치한다.
   - References: MDN CSS Grid, auto-fit/minmax, disabled form controls, confirm dialog.
   ============================================= */
.work-form-page #codeDupStatus.is-duplicate{
  display:block !important;
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(127,29,29,.32) !important;
  border:1px solid rgba(248,113,113,.48) !important;
  color:#fecaca !important;
  line-height:1.55;
  font-weight:800;
}

.work-form-page #codeDupStatus.is-ok{
  color:#86efac !important;
  font-weight:800;
}

.work-form-page :where(button,input[type="submit"])[data-dup-blocked="1"],
.work-form-page :where(button,input[type="submit"]):disabled{
  opacity:.48 !important;
  cursor:not-allowed !important;
  filter:saturate(.65) !important;
  transform:none !important;
}

.work-list-page .works-category-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 286px), 1fr)) !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  grid-auto-rows:1fr;
  gap:22px !important;
}

.work-list-page .works-category-grid > .work-list-card,
.work-list-page .work-list-card{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.work-list-page .work-list-card .work-thumb{
  flex:0 0 auto;
}

.work-list-page .work-list-card .work-info{
  flex:1 1 auto;
  min-height:132px;
  display:flex !important;
  flex-direction:column !important;
}

.work-list-page .work-list-card .work-meta-row{
  margin-top:auto;
}

.actors-page .actors-view-grid .actor-grid.public-modern-grid,
.actors-page .actors-view-grid .actor-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 184px), 1fr)) !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  grid-auto-rows:1fr;
  gap:18px !important;
}

.actors-page .actors-view-grid .actor-card.public-card,
.actors-page .actors-view-grid .actor-card{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.actors-page .actors-view-grid .actor-thumb-grid{
  flex:0 0 auto;
  aspect-ratio:3 / 4 !important;
}

.actors-page .actors-view-grid .actor-card-name{
  min-height:2.45em;
}

.actors-page .actors-view-grid .actor-modern-meta,
.actors-page .actors-view-grid .actor-card-meta{
  min-height:28px;
}

.actors-page .actors-view-grid .actor-card-sns{
  margin-top:auto;
  min-height:34px;
}

@media (min-width:1500px){
  .work-list-page .works-category-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
  }

  .actors-page .actors-view-grid .actor-grid.public-modern-grid,
  .actors-page .actors-view-grid .actor-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  }
}

@media (max-width:768px){
  .work-list-page .works-category-grid,
  .actors-page .actors-view-grid .actor-grid.public-modern-grid,
  .actors-page .actors-view-grid .actor-grid{
    grid-template-columns:1fr !important;
  }

  .work-list-page .work-list-card .work-info{
    min-height:118px;
  }
}

@media (forced-colors: active){
  .work-form-page #codeDupStatus.is-duplicate,
  .work-list-page .work-list-card,
  .actors-page .actors-view-grid .actor-card{
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1244 - 메타 붙여넣기 자동채움 필드 가독성 보강
   - meta_paste.js가 파싱 결과 상태를 표시할 때 주입하는 light 배경을 작성/수정 폼 범위에서만 다크 테마 색상으로 재정의한다.
   - 값이 채워진 input/textarea의 글자색, placeholder, focus, note pill 대비를 함께 지정해 밝은 민트/주황 배경에 글자가 묻히는 회귀를 막는다.
   - References: MDN CSS specificity, color, background-color, ::placeholder.
   ============================================= */
.work-form-page :where(input,textarea,select).mp-paste-status--success,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--success{
  background:linear-gradient(180deg, rgba(6,78,59,.78) 0%, rgba(15,23,42,.94) 100%) !important;
  background-color:#0f2f28 !important;
  border-color:rgba(52,211,153,.86) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  caret-color:#f8fafc !important;
  box-shadow:0 0 0 3px rgba(52,211,153,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-weight:800;
}

.work-form-page :where(input,textarea,select).mp-paste-status--review,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--review{
  background:linear-gradient(180deg, rgba(124,45,18,.82) 0%, rgba(15,23,42,.94) 100%) !important;
  background-color:#3a2415 !important;
  border-color:rgba(251,146,60,.90) !important;
  color:#fff7ed !important;
  -webkit-text-fill-color:#fff7ed !important;
  caret-color:#fff7ed !important;
  box-shadow:0 0 0 3px rgba(251,146,60,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-weight:800;
}

.work-form-page :where(input,textarea,select).mp-paste-status--unknown,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--unknown{
  background:linear-gradient(180deg, rgba(127,29,29,.82) 0%, rgba(15,23,42,.94) 100%) !important;
  background-color:#3b1717 !important;
  border-color:rgba(248,113,113,.92) !important;
  color:#fee2e2 !important;
  -webkit-text-fill-color:#fee2e2 !important;
  caret-color:#fee2e2 !important;
  box-shadow:0 0 0 3px rgba(248,113,113,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-weight:800;
}

.work-form-page :where(input,textarea,select).mp-paste-status--success:focus,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--success:focus{
  background:#123b31 !important;
  border-color:#6ee7b7 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 0 0 4px rgba(110,231,183,.24) !important;
}

.work-form-page :where(input,textarea,select).mp-paste-status--review:focus,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--review:focus{
  background:#4a2b18 !important;
  border-color:#fdba74 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 0 0 4px rgba(253,186,116,.24) !important;
}

.work-form-page :where(input,textarea,select).mp-paste-status--unknown:focus,
.work-form-page :where(.ed2-input,.ed2-textarea,.ed2-select,.form-control,.form-select).mp-paste-status--unknown:focus{
  background:#4a1c1c !important;
  border-color:#fca5a5 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 0 0 4px rgba(252,165,165,.24) !important;
}

.work-form-page :where(input,textarea).mp-paste-status--success::placeholder,
.work-form-page :where(.ed2-input,.ed2-textarea,.form-control).mp-paste-status--success::placeholder{
  color:#bbf7d0 !important;
  -webkit-text-fill-color:#bbf7d0 !important;
  opacity:.82 !important;
}

.work-form-page :where(input,textarea).mp-paste-status--review::placeholder,
.work-form-page :where(.ed2-input,.ed2-textarea,.form-control).mp-paste-status--review::placeholder{
  color:#fed7aa !important;
  -webkit-text-fill-color:#fed7aa !important;
  opacity:.84 !important;
}

.work-form-page :where(input,textarea).mp-paste-status--unknown::placeholder,
.work-form-page :where(.ed2-input,.ed2-textarea,.form-control).mp-paste-status--unknown::placeholder{
  color:#fecaca !important;
  -webkit-text-fill-color:#fecaca !important;
  opacity:.84 !important;
}

.work-form-page .mp-paste-status-note{
  border:1px solid transparent !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18) !important;
}

.work-form-page .mp-paste-status-note--success{
  background:rgba(22,101,52,.94) !important;
  color:#f0fdf4 !important;
  -webkit-text-fill-color:#f0fdf4 !important;
  border-color:rgba(134,239,172,.46) !important;
}

.work-form-page .mp-paste-status-note--review{
  background:rgba(154,52,18,.94) !important;
  color:#fff7ed !important;
  -webkit-text-fill-color:#fff7ed !important;
  border-color:rgba(253,186,116,.50) !important;
}

.work-form-page .mp-paste-status-note--unknown{
  background:rgba(153,27,27,.94) !important;
  color:#fef2f2 !important;
  -webkit-text-fill-color:#fef2f2 !important;
  border-color:rgba(252,165,165,.50) !important;
}

.work-form-page input:-webkit-autofill,
.work-form-page textarea:-webkit-autofill,
.work-form-page select:-webkit-autofill{
  -webkit-text-fill-color:#f8fafc !important;
  caret-color:#f8fafc !important;
  box-shadow:0 0 0 1000px #1e2937 inset !important;
  transition:background-color 9999s ease-out 0s !important;
}

@media (forced-colors: active){
  .work-form-page :where(input,textarea,select).mp-paste-status--success,
  .work-form-page :where(input,textarea,select).mp-paste-status--review,
  .work-form-page :where(input,textarea,select).mp-paste-status--unknown,
  .work-form-page .mp-paste-status-note{
    background:Canvas !important;
    color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1245 - 공개 여러 페이지 가독성 공통 보강
   - 작품 작성/수정 외에도 별도 legacy CSS 또는 standalone 화면에 남은 light fallback을 다크 테마 대비 색상으로 보정한다.
   - 배경/글자색/테두리/focus/placeholder/상태 배지를 한 쌍으로 지정해 페이지별 톤이 갈라지는 회귀를 막는다.
   - References: MDN color/background-color, color-scheme, ::placeholder, forced-colors; W3C WCAG contrast minimum.
   ============================================= */
:root{
  --readable-dark-surface:#1e293b;
  --readable-dark-surface-2:#0f172a;
  --readable-dark-surface-3:#162033;
  --readable-dark-line:#475569;
  --readable-dark-text:#e2e8f0;
  --readable-dark-strong:#f8fafc;
  --readable-dark-muted:#cbd5e1;
  --readable-dark-soft:#94a3b8;
}

body:not(.admin-body) :where(.page-head,.write-headbar,.board-list-actions),
body:not(.admin-body) :where(.page-title,.write-crumb,.board-empty-row){
  color:var(--readable-dark-text) !important;
  -webkit-text-fill-color:var(--readable-dark-text) !important;
}

body:not(.admin-body) :where(.page-title,.sr-section-title,.sr-label,.subtitle-title){
  color:var(--readable-dark-strong) !important;
  -webkit-text-fill-color:var(--readable-dark-strong) !important;
}

body:not(.admin-body) :where(.page-head .btn,.pager .btn,.pager .btn-sm){
  background:#1e293b !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  border-color:rgba(148,163,184,.48) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
}

body:not(.admin-body) :where(.page-head .btn:hover,.pager .btn:hover,.pager .btn-sm:hover){
  background:#26364f !important;
  border-color:rgba(125,211,252,.72) !important;
}

body:not(.admin-body) :where(.pager span,.pager [aria-disabled="true"],.pager .disabled){
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  opacity:1 !important;
}

.makers-grid .maker-card{
  background:linear-gradient(180deg, #1e293b 0%, #162033 100%) !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.40) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.28) !important;
}

.makers-grid .maker-card:hover,
.makers-grid .maker-card:focus-visible{
  background:#26364f !important;
  border-color:rgba(96,165,250,.80) !important;
  box-shadow:0 16px 38px rgba(37,99,235,.22) !important;
  outline:2px solid rgba(96,165,250,.55) !important;
  outline-offset:2px !important;
}

.makers-grid .maker-name{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-weight:900 !important;
}

.makers-grid .maker-count,
body:not(.admin-body) :where(.subtitle-meta,.sr-subline,.sr-inline-subtitle,.sr-mobile-meta,.maker-detail-page .facet-row){
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  opacity:1 !important;
}

.actor-eval-wrap{
  color-scheme:dark;
  max-width:760px;
  margin:0 auto;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
}

.actor-eval-wrap .actor-eval-top,
.actor-eval-card{
  background:linear-gradient(180deg, #1e293b 0%, #162033 100%) !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border:1px solid rgba(148,163,184,.42) !important;
  border-radius:20px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
}

.actor-eval-wrap .actor-eval-top{
  padding:18px 20px !important;
  margin-bottom:14px !important;
}

.actor-eval-wrap .actor-eval-title{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-size:24px !important;
  font-weight:950 !important;
  letter-spacing:-.02em;
}

.actor-eval-wrap .actor-eval-sub{
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  font-size:14px !important;
  line-height:1.65 !important;
  margin-top:8px !important;
}

.actor-eval-card{
  padding:18px 20px !important;
}

.actor-eval-wrap .actor-eval-row{
  display:grid !important;
  grid-template-columns:minmax(92px, 150px) minmax(0, 1fr) !important;
  gap:12px !important;
  align-items:center !important;
  padding:12px 0 !important;
  border-top:1px solid rgba(148,163,184,.20) !important;
}

.actor-eval-wrap .actor-eval-row:first-child{
  border-top:0 !important;
}

.actor-eval-wrap .actor-eval-row .k{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-size:15px !important;
  font-weight:900 !important;
}

.actor-eval-wrap .actor-eval-row .v,
.actor-eval-wrap label{
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
}

.actor-eval-wrap :where(.score-select, textarea, input[type="text"], input[type="number"]){
  width:100%;
  min-height:42px;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.54) !important;
  background:#0f172a !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  caret-color:#f8fafc !important;
  padding:10px 12px !important;
  font-size:15px !important;
  font-weight:800 !important;
  outline:0 !important;
}

.actor-eval-wrap :where(.score-select, textarea, input[type="text"], input[type="number"]):focus,
.actor-eval-wrap :where(.score-select, textarea, input[type="text"], input[type="number"]):focus-visible{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.22) !important;
}

.actor-eval-wrap textarea::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  opacity:1 !important;
}

.actor-eval-wrap :where(.score-select:disabled,input:disabled,textarea:disabled){
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  background:#111827 !important;
  border-color:rgba(148,163,184,.30) !important;
  opacity:1 !important;
}

.actor-eval-wrap .btn-eval,
.actor-eval-wrap :where(button[type="submit"],button[type="button"]){
  border:1px solid rgba(96,165,250,.70) !important;
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-radius:12px !important;
  min-height:42px !important;
  padding:10px 16px !important;
  font-size:15px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(37,99,235,.24) !important;
}

.actor-eval-wrap .actor-eval-actions form[action$="/delete"] .btn-eval{
  border-color:rgba(248,113,113,.78) !important;
  background:linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
}

.subtitle-materials-page{
  color-scheme:dark;
}

.subtitle-materials-page :where(.sr-card.wd-card,.sr-card,.sr-notice-box,.sr-fileitem,.sr-alert){
  background:linear-gradient(180deg, #1e293b 0%, #162033 100%) !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.42) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.26) !important;
}

.subtitle-materials-page :where(.sr-home-summary__item,.sr-home-board,.sr-subnav__item,.sr-home-board__more,.sr-home-board-row,.subtitle-request-card,.subtitle-library-card,.subtitle-row-card){
  background:#1e293b !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.40) !important;
}

.subtitle-materials-page :where(.sr-home-board-row,.sr-request-codewrap,.sr-home-board-row__body){
  text-decoration:none !important;
}

.subtitle-materials-page :where(.sr-home-board-row:hover,.sr-subnav__item:hover,.sr-home-summary__item:hover,.sr-home-board__more:hover){
  background:#26364f !important;
  border-color:rgba(96,165,250,.70) !important;
}

.subtitle-materials-page :where(.sr-input,.sr-textarea,.sr-select,.sr-admin-move-form .sr-input){
  background:#0f172a !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  caret-color:#f8fafc !important;
  border-color:rgba(148,163,184,.54) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.subtitle-materials-page :where(.sr-input,.sr-textarea,.sr-select,.sr-admin-move-form .sr-input):focus,
.subtitle-materials-page :where(.sr-input,.sr-textarea,.sr-select,.sr-admin-move-form .sr-input):focus-visible{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
  outline:0 !important;
}

.subtitle-materials-page :where(.sr-input,.sr-textarea)::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  opacity:1 !important;
}

.subtitle-materials-page :where(.sr-body,.sr-filename,.sr-request-body,.sr-home-board-row__primary,.sr-home-board-row__secondary,.sr-request-code,.sr-home-board-row__code,.sr-home-summary__value){
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
}

.subtitle-materials-page :where(.sr-section-title,.sr-label,.sr-code,.sr-work-code-link,.subtitle-code){
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.subtitle-materials-page :where(.sr-inline-subtitle,.sr-subline,.sr-mobile-meta,.sr-home-board-row__secondary,.subtitle-info){
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  opacity:1 !important;
}

.subtitle-materials-page :where(.sr-subnav__item.is-active){
  background:#2563eb !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#60a5fa !important;
}

.subtitle-materials-page :where(.sr-badge.request,.status-badge.request,.sr-request-thumb.request,.sr-home-board-row__thumb.is-status.request){
  background:rgba(30,64,175,.45) !important;
  border-color:rgba(147,197,253,.78) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
}

.subtitle-materials-page :where(.sr-badge.progress,.status-badge.progress,.sr-request-thumb.progress,.sr-home-board-row__thumb.is-status.progress){
  background:rgba(146,64,14,.50) !important;
  border-color:rgba(253,186,116,.82) !important;
  color:#ffedd5 !important;
  -webkit-text-fill-color:#ffedd5 !important;
}

.subtitle-materials-page :where(.sr-badge.done,.status-badge.done,.sr-request-thumb.done,.sr-home-board-row__thumb.is-status.done){
  background:rgba(22,101,52,.52) !important;
  border-color:rgba(134,239,172,.78) !important;
  color:#dcfce7 !important;
  -webkit-text-fill-color:#dcfce7 !important;
}

.subtitle-materials-page :where(.sr-alert-success){
  background:rgba(22,101,52,.40) !important;
  border-color:rgba(134,239,172,.72) !important;
  color:#dcfce7 !important;
  -webkit-text-fill-color:#dcfce7 !important;
}

.subtitle-materials-page :where(.sr-alert-warning){
  background:rgba(146,64,14,.42) !important;
  border-color:rgba(253,186,116,.78) !important;
  color:#ffedd5 !important;
  -webkit-text-fill-color:#ffedd5 !important;
}

.subtitle-materials-page :where(.sr-alert-error,.sr-alert-danger){
  background:rgba(127,29,29,.46) !important;
  border-color:rgba(252,165,165,.78) !important;
  color:#fee2e2 !important;
  -webkit-text-fill-color:#fee2e2 !important;
}

.subtitle-materials-page :where(.btn,.sr-btn){
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  border-color:rgba(148,163,184,.50) !important;
}

.subtitle-materials-page :where(.btn-primary,.sr-btn-primary){
  background:#2563eb !important;
  border-color:#60a5fa !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.subtitle-materials-page :where(.btn-ghost,.btn-secondary,.sr-btn-ghost){
  background:#1e293b !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
}

@media (max-width: 768px){
  .actor-eval-wrap .actor-eval-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .actor-eval-card,
  .actor-eval-wrap .actor-eval-top{
    padding:16px !important;
  }

  .subtitle-materials-page .sr-form-actions,
  .subtitle-materials-page .sr-inline-actions{
    justify-content:stretch !important;
  }

  .subtitle-materials-page .sr-form-actions :where(.btn,.sr-btn),
  .subtitle-materials-page .sr-inline-actions :where(.btn,.sr-btn){
    flex:1 1 auto !important;
  }
}

@media (forced-colors: active){
  body:not(.admin-body) :where(.page-head .btn,.pager .btn,.pager .btn-sm),
  .makers-grid .maker-card,
  .actor-eval-wrap,
  .actor-eval-card,
  .actor-eval-wrap .actor-eval-top,
  .actor-eval-wrap :where(.score-select, textarea, input[type="text"], input[type="number"]),
  .subtitle-materials-page :where(.sr-card.wd-card,.sr-card,.sr-notice-box,.sr-fileitem,.sr-alert),
  .subtitle-materials-page :where(.sr-input,.sr-textarea,.sr-select,.sr-admin-move-form .sr-input),
  .subtitle-materials-page :where(.sr-badge,.status-badge,.sr-request-thumb,.sr-home-board-row__thumb.is-status){
    background:Canvas !important;
    color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
    outline-color:CanvasText !important;
  }
}


/* =========================================================
   Ver.1246 - 배우목록 정렬 버튼/썸네일 링크 아이콘 정렬 보강
   - 작품목록 wl-filter-btn 톤을 배우목록 정렬 버튼에도 동일 적용한다.
   - SNS/블로그/홈페이지 링크는 그리드 카드 하단 flow에서 빼고 썸네일 내부 왼쪽 아래 overlay로 배치한다.
========================================================= */
.actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn,
.actors-page .actors-dirbar__right form .wd-icon-btn,
.actors-page .actors-dirbar__right form .wl-filter-btn{
  min-height:44px !important;
  height:44px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:#111827 !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border:1px solid rgba(71,85,105,.95) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.18) !important;
  font-weight:900 !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

.actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn:hover,
.actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn:focus-visible,
.actors-page .actors-dirbar__right form .wd-icon-btn:hover,
.actors-page .actors-dirbar__right form .wd-icon-btn:focus-visible,
.actors-page .actors-dirbar__right form .wl-filter-btn:hover,
.actors-page .actors-dirbar__right form .wl-filter-btn:focus-visible{
  background:#1e293b !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(96,165,250,.62) !important;
  outline:2px solid rgba(96,165,250,.38) !important;
  outline-offset:2px !important;
}

.actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn.is-active,
.actors-page .actors-sortbar .wd-icon-btn.is-active{
  background:linear-gradient(135deg, rgba(37,99,235,.92), rgba(30,64,175,.92)) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(147,197,253,.82) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18), 0 12px 26px rgba(30,64,175,.28) !important;
}

.actors-page .actors-dirbar__right input[name="q"],
.actors-page .actors-sort select,
.actors-page #actorsSort{
  min-height:44px !important;
  background:#0b1220 !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
  border:1px solid rgba(71,85,105,.95) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.actors-page .actors-dirbar__right input[name="q"]::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  opacity:.95 !important;
}

.actors-page .actors-dirbar__right input[name="q"]:focus-visible,
.actors-page .actors-sort select:focus-visible,
.actors-page #actorsSort:focus-visible{
  border-color:rgba(96,165,250,.78) !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.18) !important;
  outline:none !important;
}

.actors-page .actors-view-grid .actor-thumb-grid{
  position:relative !important;
  overflow:hidden !important;
}

.actors-page .actors-view-grid .actor-thumb-grid::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:42%;
  background:linear-gradient(to top, rgba(2,6,23,.72), rgba(2,6,23,0));
  pointer-events:none;
  z-index:2;
}

.actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:10px !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  pointer-events:none;
}

.actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
  pointer-events:auto;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  border-radius:10px !important;
  padding:0 !important;
  background:rgba(15,23,42,.86) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  border:1px solid rgba(226,232,240,.30) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(8px);
}

.actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn:hover,
.actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn:focus-visible{
  background:#2563eb !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(191,219,254,.86) !important;
  outline:2px solid rgba(191,219,254,.55) !important;
  outline-offset:2px !important;
}

.actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .sns-letter{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

@media (max-width: 768px){
  .actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn,
  .actors-page .actors-dirbar__right form .wd-icon-btn,
  .actors-page .actors-dirbar__right form .wl-filter-btn{
    min-height:42px !important;
    height:42px !important;
  }

  .actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    gap:8px !important;
  }

  .actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

@media (forced-colors: active){
  .actors-page .actors-sortbar .wd-icon-btn.wl-filter-btn,
  .actors-page .actors-dirbar__right form .wd-icon-btn,
  .actors-page .actors-dirbar__right form .wl-filter-btn,
  .actors-page .actors-dirbar__right input[name="q"],
  .actors-page .actors-sort select,
  .actors-page #actorsSort,
  .actors-page .actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
    background:Canvas !important;
    color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
    outline-color:CanvasText !important;
  }

  .actors-page .actors-view-grid .actor-thumb-grid::after{
    display:none !important;
  }
}

/* =========================================================
   Ver.1247 - 배우목록 그리드 고정/링크 overlay 복구 + 메타 날짜 파싱 보강
   - 실제 DOM은 .actors-page와 .actors-view-grid가 같은 section에 붙는다.
   - 따라서 후순위 selector는 .actors-page.actors-view-grid 형태를 정본으로 사용한다.
========================================================= */
.actors-page.actors-view-grid .actor-grid.public-modern-grid,
.actors-page.actors-view-grid .actor-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 184px), 1fr)) !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
  gap:18px !important;
}

.actors-page.actors-view-grid .actor-card.public-card,
.actors-page.actors-view-grid .actor-card{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.actors-page.actors-view-grid .actor-card > .actor-thumb-grid{
  position:relative !important;
  z-index:auto !important;
  flex:0 0 auto !important;
  aspect-ratio:3 / 4 !important;
  overflow:hidden !important;
}

.actors-page.actors-view-grid .actor-card-stretch{
  z-index:2 !important;
}

.actors-page.actors-view-grid .actor-thumb-grid::after{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:42% !important;
  background:linear-gradient(to top, rgba(2,6,23,.78), rgba(2,6,23,0)) !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:10px !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  pointer-events:none !important;
}

.actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
  pointer-events:auto !important;
  position:relative !important;
  z-index:6 !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  border-radius:10px !important;
  padding:0 !important;
  background:rgba(15,23,42,.90) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  border:1px solid rgba(226,232,240,.36) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.40) !important;
  backdrop-filter:blur(8px);
}

.actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn:hover,
.actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn:focus-visible{
  background:#2563eb !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:rgba(191,219,254,.90) !important;
  outline:2px solid rgba(191,219,254,.58) !important;
  outline-offset:2px !important;
}

.actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .sns-letter{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

.actors-page .actors-view-toggle{
  display:none !important;
}

@media (min-width:1500px){
  .actors-page.actors-view-grid .actor-grid.public-modern-grid,
  .actors-page.actors-view-grid .actor-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  }
}

@media (max-width:768px){
  .actors-page.actors-view-grid .actor-grid.public-modern-grid,
  .actors-page.actors-view-grid .actor-grid{
    grid-template-columns:1fr !important;
  }

  .actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    gap:8px !important;
  }

  .actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

@media (forced-colors: active){
  .actors-page.actors-view-grid .actor-card-sns.actor-card-sns--overlay .actor-sns-btn{
    background:Canvas !important;
    color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
    outline-color:CanvasText !important;
  }

  .actors-page.actors-view-grid .actor-thumb-grid::after{
    display:none !important;
  }
}

/* =============================================
   Ver.1248 - 작품목록 페이지당 24개 균형 기준 명시
   - 실제 페이지 개수는 config/performance_rules.json의 works_per_page=24가 SSOT다.
   - CSS는 Ver.1243의 auto-fit/stretch grid를 유지하고, 3열/4열 화면에서 24개 페이지가 빈 줄 없이 정렬되도록 카드 stretch 계약만 재명시한다.
   - 기존 CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN CSS Grid auto-fit/minmax, gap.
   ============================================= */
.work-list-page .works-category-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 286px), 1fr)) !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  gap:22px !important;
}

.work-list-page .works-category-grid > .work-list-card{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}

@media (min-width:1500px){
  .work-list-page .works-category-grid{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
  }
}

@media (max-width:768px){
  .work-list-page .works-category-grid{
    grid-template-columns:1fr !important;
  }
}

/* =============================================
   Ver.1249 - 작품 상세 커버/스크린샷 이미지 배경 완전 제거
   - public_work_detail.html의 work_detail.css를 head block으로 이동해 public_modern.css가 최종 override가 되도록 복구한다.
   - 커버/스크린샷 이미지 주변 프레임에는 배경색을 주지 않고 transparent로 고정한다.
   - 실제 이미지 픽셀은 변경하지 않고 CSS frame/background/object-fit만 보정한다.
   - References: MDN CSS background-color, object-fit, cascade order.
   ============================================= */
.work-detail-page .wd-card.wd-media{
  background:transparent !important;
  background-color:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

.work-detail-page :where(.wd-media-frame.detail-hero,.wd-cover,.wd-shot,.wd-shot-figure,.wd-shot img,.wd-shot-caption,.wd-shot-dialog,.wd-shot-dialog-inner,.wd-shot-dialog-inner img){
  background:transparent !important;
  background-color:transparent !important;
}

.work-detail-page :where(.wd-media-frame.detail-hero,.wd-shot,.wd-shot-figure){
  box-shadow:none !important;
}

.work-detail-page .wd-media-frame.detail-hero{
  border-color:transparent !important;
}

.work-detail-page .wd-cover,
.work-detail-page .wd-shot img,
.work-detail-page .wd-shot-dialog-inner img{
  object-fit:contain !important;
  object-position:center !important;
}

.work-detail-page .wd-shot img{
  height:auto !important;
  max-height:none !important;
}

@media (max-width:980px){
  .work-detail-page .wd-card.wd-media{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .work-detail-page .wd-media-frame.detail-hero{
    aspect-ratio:auto !important;
    background:transparent !important;
  }

  .work-detail-page .wd-cover{
    width:100% !important;
    height:auto !important;
    background:transparent !important;
    object-fit:contain !important;
  }
}

@media (forced-colors: active){
  .work-detail-page .wd-card.wd-media,
  .work-detail-page :where(.wd-media-frame.detail-hero,.wd-cover,.wd-shot,.wd-shot-figure,.wd-shot img,.wd-shot-caption,.wd-shot-dialog,.wd-shot-dialog-inner,.wd-shot-dialog-inner img){
    background:Canvas !important;
    color:CanvasText !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* =============================================
   Ver.1251 - 작품 상세 커버/스크린샷 비율 프레임 제거
   - Ver.1249의 transparent 보정만으로는 PC cover의 16/10 고정 프레임 여백이 배경처럼 남을 수 있었다.
   - 커버/스크린샷은 배경 박스에 끼워 넣지 않고 이미지 자체 높이로 표시한다.
   - 기존 CSS 삭제 또는 대체 없이 public_modern.css 마지막 additive layer에서만 보강한다.
   - References: MDN aspect-ratio, object-fit, background-color.
   ============================================= */
.work-detail-page .wd-card.wd-media,
.work-detail-page .wd-card.wd-shots{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-detail-page .wd-card.wd-media{
  padding:0 !important;
}

.work-detail-page .wd-card.wd-shots{
  padding:0 !important;
}

.work-detail-page .wd-media-frame.detail-hero{
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
}

.work-detail-page .wd-cover{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

.work-detail-page .wd-shot-grid,
.work-detail-page .wd-shot-grid-group,
.work-detail-page .wd-shot,
.work-detail-page .wd-shot-figure{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-detail-page .wd-shot,
.work-detail-page .wd-shot-figure{
  overflow:visible !important;
  border-radius:0 !important;
}

.work-detail-page .wd-shot img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

.work-detail-page .wd-shot-dialog,
.work-detail-page .wd-shot-dialog-inner,
.work-detail-page .wd-shot-dialog-inner img{
  background:transparent !important;
  background-color:transparent !important;
}

.work-detail-page .wd-shot-dialog-inner img{
  border-radius:0 !important;
  box-shadow:none !important;
}

@media (max-width:980px){
  .work-detail-page .wd-card.wd-media,
  .work-detail-page .wd-card.wd-shots{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .work-detail-page .wd-media-frame.detail-hero,
  .work-detail-page .wd-cover,
  .work-detail-page .wd-shot img{
    border-radius:0 !important;
  }
}

@media (forced-colors: active){
  .work-detail-page .wd-card.wd-media,
  .work-detail-page .wd-card.wd-shots,
  .work-detail-page .wd-media-frame.detail-hero,
  .work-detail-page .wd-cover,
  .work-detail-page .wd-shot,
  .work-detail-page .wd-shot-figure,
  .work-detail-page .wd-shot img,
  .work-detail-page .wd-shot-dialog,
  .work-detail-page .wd-shot-dialog-inner,
  .work-detail-page .wd-shot-dialog-inner img{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1252 - 작품 상세 이미지 흰색 매트 표시 제거(표시 전용 smart trim)
   - 실제 이미지 파일 안에 흰 배경/매트가 포함된 경우 CSS background transparent만으로는 제거되지 않는다.
   - wd_smart_matte_trim.js가 near-white 외곽 매트를 감지한 경우에만 wrapper를 잘라 표시한다.
   - 원본 파일/저장 데이터는 변경하지 않는다.
   - References: MDN object-fit, background-color, CSS display/box tree.
   ============================================= */
.work-detail-page [data-wd-smart-trim-box]{
  background:transparent !important;
  background-color:transparent !important;
}

.work-detail-page .wd-shot-imagebox{
  display:block !important;
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  line-height:0 !important;
  overflow:visible !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-detail-page .wd-shot-imagebox > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-detail-page [data-wd-smart-trim-box].is-wd-matte-trimmed{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:var(--wd-smart-trim-aspect) !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-detail-page [data-wd-smart-trim-box].is-wd-matte-trimmed > img.is-wd-matte-trimmed-img{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:var(--wd-smart-trim-width) !important;
  height:auto !important;
  max-width:none !important;
  transform:translate(var(--wd-smart-trim-x), var(--wd-smart-trim-y)) !important;
  transform-origin:0 0 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.work-detail-page .wd-shot-figure:has(.wd-shot-imagebox){
  gap:0 !important;
  background:transparent !important;
  background-color:transparent !important;
}

.work-detail-page .wd-media-frame.detail-hero.is-wd-matte-trimmed .wd-play{
  z-index:2;
}

@media (forced-colors: active){
  .work-detail-page [data-wd-smart-trim-box].is-wd-matte-trimmed,
  .work-detail-page [data-wd-smart-trim-box].is-wd-matte-trimmed > img.is-wd-matte-trimmed-img,
  .work-detail-page .wd-shot-imagebox{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1253 - 작품목록 썸네일 흰색 매트 표시 제거(표시 전용 smart trim)
   - Ver.1252 상세페이지 smart trim을 작품목록 카드 썸네일에도 확대 적용한다.
   - 원본 이미지 파일/DB 값은 변경하지 않고 목록 표시에서만 near-white 외곽 매트를 잘라 보인다.
   - 배지/봤음 overlay는 이미지보다 위에 유지한다.
   - References: MDN overflow, CSS transform, object-fit.
   ============================================= */
.work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box]{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:1771 / 1250;
  overflow:hidden !important;
  line-height:0 !important;
  background:transparent !important;
  background-color:transparent !important;
}

.work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box] > img[data-wd-smart-trim]{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:var(--wd-smart-trim-aspect) !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed > img.is-wd-matte-trimmed-img{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  z-index:1;
  width:var(--wd-smart-trim-width) !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  transform:translate(var(--wd-smart-trim-x), var(--wd-smart-trim-y)) !important;
  transform-origin:0 0 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.work-list-page .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge-stack,
.work-list-page .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge,
.work-list-page .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge--seen{
  z-index:4 !important;
}

@media (forced-colors: active){
  .work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box],
  .work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box] > img[data-wd-smart-trim],
  .work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed,
  .work-list-page .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed > img.is-wd-matte-trimmed-img{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1254 - 상세 제목 전체 표시 + 공용 포인트 상시 확인
   - 작품 상세 제목은 말줄임/클램프 대신 줄바꿈을 허용해 전체 제목을 확인할 수 있게 한다.
   - 로그인 사용자는 마이페이지 진입 없이 sticky 공용 헤더에서 현재 포인트를 확인할 수 있다.
   - 기존 header/template 계약은 유지하고 public_modern.css 후순위 additive layer로만 보강한다.
   - References: MDN overflow-wrap, MDN line-clamp, MDN position:sticky.
   ============================================= */
.work-detail-page .wd-title-card{
  align-items:flex-start !important;
  gap:12px !important;
}

.work-detail-page .wd-title-card .wd-title-row{
  flex:1 1 100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

.work-detail-page .wd-title-card .wd-title-line{
  width:100% !important;
  align-items:flex-start !important;
  gap:8px 10px !important;
  flex-wrap:wrap !important;
}

.work-detail-page .wd-title-card .wd-code-chip{
  flex:0 0 auto !important;
  line-height:1.45 !important;
}

.work-detail-page .wd-title-card .wd-title{
  display:block !important;
  flex:1 1 420px !important;
  min-width:min(100%, 260px) !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  overflow-wrap:anywhere !important;
  word-break:keep-all !important;
  line-height:1.38 !important;
}

.work-detail-page .wd-title-card .wd-actions{
  margin-left:auto !important;
}

.site-header .account-point-chip,
.site-header .mob-point-chip,
.site-header .mob-menu-point{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(96,165,250,.34);
  background:linear-gradient(135deg, rgba(37,99,235,.28), rgba(15,23,42,.82));
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  border-radius:999px;
  text-decoration:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(2,6,23,.24);
  white-space:nowrap;
}

.site-header .account-point-chip{
  min-height:32px;
  padding:6px 10px 6px 8px;
  font-size:13px;
  font-weight:900;
}

.site-header .mob-point-chip{
  min-height:36px;
  padding:7px 10px 7px 8px;
  font-size:12px;
  font-weight:900;
}

.site-header .mob-menu-point{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border-radius:14px;
  justify-content:flex-start;
  font-size:14px;
  font-weight:850;
}

.site-header .point-chip__icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(96,165,250,.26);
  color:#bfdbfe !important;
  -webkit-text-fill-color:#bfdbfe !important;
  font-size:11px;
  font-weight:950;
  line-height:1;
}

.site-header .point-chip__label{
  color:#93c5fd !important;
  -webkit-text-fill-color:#93c5fd !important;
  font-weight:850;
}

.site-header .point-chip__value,
.site-header .mob-menu-point strong{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

.site-header .account-point-chip:hover,
.site-header .account-point-chip:focus-visible,
.site-header .mob-point-chip:hover,
.site-header .mob-point-chip:focus-visible,
.site-header .mob-menu-point:hover,
.site-header .mob-menu-point:focus-visible{
  border-color:rgba(147,197,253,.68);
  background:linear-gradient(135deg, rgba(59,130,246,.38), rgba(15,23,42,.90));
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.site-header .account-point-chip:focus-visible,
.site-header .mob-point-chip:focus-visible,
.site-header .mob-menu-point:focus-visible{
  outline:2px solid rgba(147,197,253,.72);
  outline-offset:2px;
}

@media (max-width:860px){
  .site-header .mob-actions{
    gap:8px;
  }
  .site-header .mob-point-chip{
    max-width:38vw;
  }
  .site-header .mob-point-chip .point-chip__value{
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width:420px){
  .site-header .mob-point-chip{
    padding-inline:7px;
    gap:4px;
    max-width:34vw;
  }
  .site-header .mob-point-chip .point-chip__icon{
    width:18px;
    height:18px;
  }
}

@media (forced-colors:active){
  .work-detail-page .wd-title-card .wd-title,
  .site-header .account-point-chip,
  .site-header .mob-point-chip,
  .site-header .mob-menu-point{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1255 - 작품 상세 장르/태그 pill + 자막파일 버튼 가독성 보강
   - work_detail.css의 light fallback(#fff/#f4f6f8)이 상세 다크 카드에서 다시 드러나는 영역만 후순위로 보정한다.
   - 기존 템플릿/다운로드/포인트 차감/자막 dedup 계약은 변경하지 않는다.
   - References: MDN background-color/color contrast guidance, MDN text-overflow, WCAG 2.2 contrast minimum.
   ============================================= */
.work-detail-page .wd-meta .wd-pill-wrap{
  gap:8px !important;
  align-items:center !important;
}

.work-detail-page .wd-meta .wd-pill,
.work-detail-page .wd-meta a.wd-pill,
.work-detail-page .wd-meta span.wd-pill{
  min-height:28px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(96,165,250,.38) !important;
  background:linear-gradient(135deg, rgba(37,99,235,.30), rgba(15,23,42,.92)) !important;
  color:#eaf2ff !important;
  -webkit-text-fill-color:#eaf2ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(2,6,23,.20) !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
}

.work-detail-page .wd-meta .wd-pill-genre{
  border-color:rgba(96,165,250,.52) !important;
  background:linear-gradient(135deg, rgba(37,99,235,.36), rgba(30,41,59,.96)) !important;
}

.work-detail-page .wd-meta .wd-pill-tag{
  border-color:rgba(45,212,191,.42) !important;
  background:linear-gradient(135deg, rgba(20,184,166,.28), rgba(15,23,42,.94)) !important;
}

.work-detail-page .wd-meta .wd-pill-series{
  border-color:rgba(167,139,250,.46) !important;
  background:linear-gradient(135deg, rgba(124,58,237,.30), rgba(15,23,42,.94)) !important;
}

.work-detail-page .wd-meta a.wd-pill:hover,
.work-detail-page .wd-meta a.wd-pill:focus-visible{
  border-color:rgba(191,219,254,.78) !important;
  background:linear-gradient(135deg, rgba(59,130,246,.48), rgba(30,41,59,.98)) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  outline:none !important;
}

.work-detail-page .wd-meta a.wd-pill:focus-visible{
  box-shadow:0 0 0 3px rgba(96,165,250,.32), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.work-detail-page .wd-card.wd-subfile-card{
  background:rgba(15,23,42,.68) !important;
  border:1px solid rgba(148,163,184,.30) !important;
  color:#e2e8f0 !important;
  -webkit-text-fill-color:#e2e8f0 !important;
}

.work-detail-page .wd-subfile-title{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.work-detail-page .wd-subfile-policy{
  color:#aebdd2 !important;
  -webkit-text-fill-color:#aebdd2 !important;
}

.work-detail-page .wd-subfile-item,
.work-detail-page a.wd-subfile-item,
.work-detail-page .wd-subfile-item--static{
  border:1px solid rgba(96,165,250,.34) !important;
  background:linear-gradient(135deg, rgba(30,41,59,.98), rgba(15,23,42,.96)) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(2,6,23,.22) !important;
}

.work-detail-page a.wd-subfile-item:hover,
.work-detail-page a.wd-subfile-item:focus-visible{
  border-color:rgba(147,197,253,.76) !important;
  background:linear-gradient(135deg, rgba(37,99,235,.38), rgba(15,23,42,.98)) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
  outline:none !important;
}

.work-detail-page a.wd-subfile-item:focus-visible{
  box-shadow:0 0 0 3px rgba(96,165,250,.32), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.work-detail-page .wd-subfile-item--static{
  cursor:default !important;
  border-color:rgba(148,163,184,.26) !important;
  background:rgba(30,41,59,.86) !important;
  color:#dbe4f0 !important;
  -webkit-text-fill-color:#dbe4f0 !important;
}

.work-detail-page .wd-subfile-name{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  font-weight:900 !important;
  min-width:0 !important;
  text-shadow:0 1px 1px rgba(2,6,23,.30) !important;
}

.work-detail-page .wd-subfile-ico{
  border-radius:8px !important;
  background:#f8fafc !important;
  padding:2px !important;
  box-shadow:0 1px 2px rgba(2,6,23,.20) !important;
}

@media (max-width:640px){
  .work-detail-page .wd-meta .wd-pill,
  .work-detail-page .wd-meta a.wd-pill,
  .work-detail-page .wd-meta span.wd-pill{
    min-height:30px !important;
    padding:6px 11px !important;
    font-size:12px !important;
  }
  .work-detail-page .wd-subfile-item{
    min-height:56px !important;
    padding:12px 14px !important;
  }
  .work-detail-page .wd-subfile-name{
    font-size:.92rem !important;
  }
}

@media (forced-colors:active){
  .work-detail-page .wd-meta .wd-pill,
  .work-detail-page .wd-subfile-item,
  .work-detail-page .wd-subfile-name{
    forced-color-adjust:auto;
  }
}


/* =============================================
   Ver.1262 - 배우 상세 태그 pill light fallback 가독성 보강
   - actor_detail.css의 pastel `.ad-pill/.pill-*` 조합이 다크 상세 카드에서 흰색 pill + 흐린 글자로 보이는 문제를 actor detail 범위에서만 후순위 보정한다.
   - 기존 태그 링크/필터 이동 계약은 변경하지 않는다.
   - References: MDN background-color/color, MDN :focus-visible, WCAG 2.2 contrast minimum.
   ============================================= */
.actor-detail-page .kv .v-tags{
  gap:8px !important;
  align-items:center !important;
}

.actor-detail-page .kv .v-tags .ad-pill,
.actor-detail-page a.ad-pill{
  min-height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(147,197,253,.36) !important;
  background:linear-gradient(135deg, rgba(37,99,235,.28), rgba(15,23,42,.94)) !important;
  color:#edf6ff !important;
  -webkit-text-fill-color:#edf6ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(2,6,23,.20) !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  text-shadow:0 1px 1px rgba(2,6,23,.30) !important;
}

.actor-detail-page .kv .v-tags .ad-pill.pill-0,
.actor-detail-page .kv .v-tags .ad-pill.pill-3{
  border-color:rgba(147,197,253,.44) !important;
  background:linear-gradient(135deg, rgba(59,130,246,.34), rgba(15,23,42,.96)) !important;
}

.actor-detail-page .kv .v-tags .ad-pill.pill-1,
.actor-detail-page .kv .v-tags .ad-pill.pill-5{
  border-color:rgba(45,212,191,.40) !important;
  background:linear-gradient(135deg, rgba(20,184,166,.26), rgba(15,23,42,.96)) !important;
}

.actor-detail-page .kv .v-tags .ad-pill.pill-2,
.actor-detail-page .kv .v-tags .ad-pill.pill-4{
  border-color:rgba(251,191,36,.34) !important;
  background:linear-gradient(135deg, rgba(245,158,11,.25), rgba(15,23,42,.96)) !important;
}

.actor-detail-page .kv .v-tags .ad-pill:hover,
.actor-detail-page .kv .v-tags .ad-pill:focus-visible,
.actor-detail-page a.ad-pill:hover,
.actor-detail-page a.ad-pill:focus-visible{
  border-color:rgba(191,219,254,.78) !important;
  background:linear-gradient(135deg, rgba(59,130,246,.48), rgba(30,41,59,.98)) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
  outline:none !important;
}

.actor-detail-page .kv .v-tags .ad-pill:focus-visible,
.actor-detail-page a.ad-pill:focus-visible{
  box-shadow:0 0 0 3px rgba(96,165,250,.32), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width:640px){
  .actor-detail-page .kv .v-tags .ad-pill,
  .actor-detail-page a.ad-pill{
    min-height:30px !important;
    padding:6px 11px !important;
    font-size:12px !important;
  }
}

@media (forced-colors:active){
  .actor-detail-page .kv .v-tags .ad-pill,
  .actor-detail-page a.ad-pill{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1269 - 작품 상세 모바일 제목 카드/상단 액션바 밀림 보정
   - PC 상세 레이아웃은 유지하고, 모바일에서 wd-title-card가 과도한 빈 높이를 갖거나
     wd-actions가 legacy light action bar로 보이는 회귀만 후순위로 보정한다.
   - 기존 상세 DOM, 목록/더보기/관리자 overflow 계약은 변경하지 않는다.
   - References: MDN media queries, flexbox stretch/default alignment, CSS viewport units.
   ============================================= */
@media (max-width: 768px){
  .work-detail-page .wd-title-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    align-content:start !important;
    justify-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    block-size:auto !important;
    min-block-size:0 !important;
    max-block-size:none !important;
    padding:14px 14px 12px !important;
    margin:10px 0 12px !important;
    overflow:visible !important;
    border-radius:18px !important;
  }

  .work-detail-page .wd-title-card .wd-title-row{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    align-items:start !important;
    align-content:start !important;
    gap:10px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:start !important;
  }

  .work-detail-page .wd-title-card .wd-title-line{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:6px !important;
    width:100% !important;
    min-height:0 !important;
    align-self:start !important;
  }

  .work-detail-page .wd-title-card .wd-code-chip{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    font-size:12px !important;
    line-height:1.25 !important;
    letter-spacing:.02em !important;
    color:#94a3b8 !important;
    -webkit-text-fill-color:#94a3b8 !important;
  }

  .work-detail-page .wd-title-card .wd-title{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    flex:initial !important;
    font-size:clamp(16px, 4.25vw, 19px) !important;
    line-height:1.42 !important;
    letter-spacing:-.018em !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
  }

  .work-detail-page .wd-title-card .wd-actions,
  .work-detail-page .wd-title-card .wd-top-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:6px !important;
    border:1px solid rgba(96,165,250,.30) !important;
    border-radius:16px !important;
    background:linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,41,59,.88)) !important;
    color:#e2e8f0 !important;
    -webkit-text-fill-color:#e2e8f0 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(2,6,23,.26) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    align-self:start !important;
  }

  .work-detail-page .wd-title-card .wd-top-group,
  .work-detail-page .wd-title-card .wd-top-group-main{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    margin-left:auto !important;
    min-width:0 !important;
  }

  .work-detail-page .wd-title-card .wd-icon-btn.icon-only,
  .work-detail-page .wd-title-card .wd-overflow > summary.wd-icon-btn.icon-only{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:13px !important;
    border:1px solid rgba(148,163,184,.30) !important;
    background:rgba(15,23,42,.82) !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .work-detail-page .wd-title-card .wd-icon-btn.icon-only:hover,
  .work-detail-page .wd-title-card .wd-icon-btn.icon-only:focus-visible,
  .work-detail-page .wd-title-card .wd-overflow > summary.wd-icon-btn.icon-only:hover,
  .work-detail-page .wd-title-card .wd-overflow > summary.wd-icon-btn.icon-only:focus-visible{
    border-color:rgba(147,197,253,.72) !important;
    background:rgba(37,99,235,.36) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    outline:none !important;
  }

  .work-detail-page .wd-title-card .wd-icon-btn.icon-only:focus-visible,
  .work-detail-page .wd-title-card .wd-overflow > summary.wd-icon-btn.icon-only:focus-visible{
    box-shadow:0 0 0 3px rgba(96,165,250,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .work-detail-page .wd-title-card .wd-btn-label{
    display:none !important;
  }

  .work-detail-page .wd-view-m,
  .work-detail-page .wdm-stack{
    margin-top:0 !important;
  }
}

@media (max-width: 420px){
  .work-detail-page .wd-title-card{
    padding:12px !important;
    border-radius:16px !important;
  }

  .work-detail-page .wd-title-card .wd-title{
    font-size:16px !important;
    line-height:1.38 !important;
  }

  .work-detail-page .wd-title-card .wd-actions,
  .work-detail-page .wd-title-card .wd-top-actions{
    padding:5px !important;
    border-radius:15px !important;
  }

  .work-detail-page .wd-title-card .wd-icon-btn.icon-only,
  .work-detail-page .wd-title-card .wd-overflow > summary.wd-icon-btn.icon-only{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
  }
}

@media (forced-colors: active){
  .work-detail-page .wd-title-card,
  .work-detail-page .wd-title-card .wd-actions,
  .work-detail-page .wd-title-card .wd-top-actions,
  .work-detail-page .wd-title-card .wd-icon-btn.icon-only{
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1278 - PC 작품목록 밀도 보정 + 메이커 상세 카드 parity
   - 모바일 Ver.1270/1269 보정은 유지하고, 1024px 이상 PC/태블릿 landscape에서만 카드/폰트/배지 밀도를 낮춘다.
   - /works/jav, /works/vr, /works/etc와 /works/*/makers/<id>는 같은 work_grid_card.html + works-category-grid 계약을 사용한다.
   - References: MDN media queries, CSS cascade/source order, container-aware responsive patterns.
   ============================================= */
@media (min-width: 1024px){
  body:not(.admin-body) .public-wrapper > :is(.work-list-page, .maker-detail-page){
    max-width:1280px;
    padding:14px 12px 18px;
  }

  :is(.work-list-page, .maker-detail-page) .work-detail{
    max-width:1280px;
    margin-inline:auto;
  }

  :is(.work-list-page, .maker-detail-page) .wd-title-card{
    padding:14px 16px !important;
    border-radius:16px !important;
  }

  :is(.work-list-page, .maker-detail-page) .wl-title{
    font-size:16px !important;
    line-height:1.25;
  }

  :is(.work-list-page, .maker-detail-page) .wl-sub{
    font-size:11px !important;
    line-height:1.35;
  }

  :is(.work-list-page, .maker-detail-page) .wl-card-pad{
    padding:10px !important;
  }

  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap:14px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card{
    border-radius:14px !important;
    box-shadow:0 5px 16px rgba(0,0,0,.42) !important;
  }

  @media (hover:hover){
    :is(.work-list-page, .maker-detail-page) .work-list-card:hover{
      transform:translateY(-4px) !important;
      box-shadow:0 16px 34px rgba(0,0,0,.58) !important;
    }
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-cover{
    height:auto !important;
    aspect-ratio:1771 / 1250 !important;
    object-fit:cover !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-info{
    padding:10px 11px 11px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-code,
  :is(.work-list-page, .maker-detail-page) .work-list-card .code{
    font-size:.82rem !important;
    line-height:1.18 !important;
    margin-bottom:3px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-name,
  :is(.work-list-page, .maker-detail-page) .work-list-card .title,
  :is(.work-list-page, .maker-detail-page) .work-list-card .work-title{
    font-size:.86rem !important;
    line-height:1.32 !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-meta-row{
    margin-top:8px !important;
    font-size:11px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge-stack{
    top:7px !important;
    left:7px !important;
    gap:4px !important;
    max-width:calc(100% - 58px) !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge{
    min-height:22px !important;
    padding:4px 7px !important;
    font-size:10.5px !important;
    line-height:1 !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--subtitle{
    top:7px !important;
    right:7px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen{
    left:7px !important;
    bottom:7px !important;
    top:auto !important;
    right:auto !important;
    min-height:24px !important;
    padding:4px 8px !important;
    gap:5px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen svg{
    width:12px !important;
    height:12px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen span{
    font-size:10.5px !important;
  }

  :is(.work-list-page, .maker-detail-page) .page-num{
    min-width:32px !important;
    height:32px !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }
}

@media (min-width: 1440px){
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)) !important;
  }
}


/* =============================================
   Ver.1279 - 모바일 작품목록 compact + 메이커 상세 모바일 parity
   - Ver.1278에서 PC만 compact/parity를 고정했기 때문에, 모바일에서도 /works/*와 /works/*/makers/<id>가 같은 2열 compact 카드/썸네일/배지 계약을 사용하도록 마지막 additive layer에서 보강한다.
   - 기존 템플릿/JS/DB 계약은 유지하고, 모바일 media query와 maker-detail-page scope만 후순위 재정의한다.
   - References: MDN media queries, CSS Grid repeat/minmax, aspect-ratio.
   ============================================= */
@media (max-width: 768px){
  body:not(.admin-body) .public-wrapper > :is(.work-list-page, .maker-detail-page){
    padding:8px 8px 14px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-detail{
    max-width:100% !important;
    margin-inline:auto !important;
  }

  :is(.work-list-page, .maker-detail-page) .wd-title-card{
    padding:10px 11px !important;
    border-radius:14px !important;
  }

  :is(.work-list-page, .maker-detail-page) .wl-title{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  :is(.work-list-page, .maker-detail-page) .wl-sub{
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  :is(.work-list-page, .maker-detail-page) .wl-actions{
    gap:6px !important;
    flex-wrap:wrap !important;
  }

  :is(.work-list-page, .maker-detail-page) .wd-icon-btn,
  :is(.work-list-page, .maker-detail-page) .wl-filter-btn{
    min-height:34px !important;
    height:34px !important;
    padding:0 10px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  :is(.work-list-page, .maker-detail-page) .wl-card-pad,
  :is(.work-list-page, .maker-detail-page) .wl-results-shell{
    padding:8px !important;
  }

  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
    grid-auto-rows:1fr !important;
  }

  :is(.work-list-page, .maker-detail-page) .works-grid > a.work-card,
  :is(.work-list-page, .maker-detail-page) .works-category-grid > .work-list-card,
  :is(.work-list-page, .maker-detail-page) .work-list-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    border:1px solid rgba(148,163,184,.18) !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background:#142033 !important;
    box-shadow:0 6px 18px rgba(0,0,0,.34) !important;
    transform:none !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-thumb,
  :is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1771 / 1250 !important;
    min-height:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#0f172a !important;
    flex:0 0 auto !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-cover,
  :is(.work-list-page, .maker-detail-page) .works-category-grid .work-cover,
  :is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    aspect-ratio:1771 / 1250 !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-info{
    flex:1 1 auto !important;
    min-height:82px !important;
    padding:7px 8px 8px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-title,
  :is(.work-list-page, .maker-detail-page) .work-list-card .work-name,
  :is(.work-list-page, .maker-detail-page) .work-list-card .title{
    margin-bottom:5px !important;
    font-size:12px !important;
    line-height:1.28 !important;
    -webkit-line-clamp:2 !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-code,
  :is(.work-list-page, .maker-detail-page) .work-list-card .code{
    display:inline !important;
    font-size:11px !important;
    line-height:1.15 !important;
    margin-right:2px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-meta-row{
    margin-top:auto !important;
    gap:5px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge-stack{
    top:5px !important;
    left:5px !important;
    gap:3px !important;
    max-width:calc(100% - 54px) !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge{
    min-height:20px !important;
    padding:3px 6px !important;
    border-radius:999px !important;
    font-size:9.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--subtitle{
    top:5px !important;
    right:5px !important;
    max-width:44px !important;
    min-height:20px !important;
    padding-inline:6px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen{
    left:5px !important;
    bottom:5px !important;
    top:auto !important;
    right:auto !important;
    min-height:22px !important;
    max-width:calc(100% - 10px) !important;
    padding:3px 6px !important;
    gap:4px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen svg{
    width:11px !important;
    height:11px !important;
  }

  :is(.work-list-page, .search-page, .maker-detail-page) .work-badge--seen span{
    font-size:9.5px !important;
  }

  :is(.work-list-page, .maker-detail-page) .facet-row{
    gap:6px !important;
    max-height:128px !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  :is(.work-list-page, .maker-detail-page) .chip{
    min-height:32px !important;
    padding:6px 8px !important;
    font-size:11px !important;
  }
}

@media (max-width: 360px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    gap:8px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-info{
    min-height:76px !important;
    padding:6px 7px 7px !important;
  }

  :is(.work-list-page, .maker-detail-page) .work-list-card .work-title,
  :is(.work-list-page, .maker-detail-page) .work-list-card .work-name,
  :is(.work-list-page, .maker-detail-page) .work-list-card .title{
    font-size:11px !important;
  }
}

@media (max-width: 320px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:1fr !important;
  }
}


/* =============================================
   Ver.1280 - 메이커 상세 작품목록 smart trim 로드/표시 parity
   - 하위 메이커 작품목록도 메인 JAV/VR/ETC 작품목록처럼 wd_smart_matte_trim.js와 동일한 썸네일 프레임을 사용한다.
   - 이미지 파일/DB는 변경하지 않고, 흰색 외곽 매트가 감지되면 표시 영역에서만 crop한다.
   - smart trim이 아직 적용되기 전에도 카드 뒤 흰색 배경이 드러나지 않도록 프레임과 img 배경을 deep dark로 고정한다.
   - References: MDN object-fit/object-position/background-size.
   ============================================= */
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb[data-wd-smart-trim-box]{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:1771 / 1250 !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  box-shadow:none !important;
}

:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb[data-wd-smart-trim-box] > img[data-wd-smart-trim]{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  box-shadow:none !important;
}

:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed{
  aspect-ratio:var(--wd-smart-trim-aspect) !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb[data-wd-smart-trim-box].is-wd-matte-trimmed > img.is-wd-matte-trimmed-img{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  z-index:1;
  width:var(--wd-smart-trim-width) !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  transform:translate(var(--wd-smart-trim-x), var(--wd-smart-trim-y)) !important;
  transform-origin:0 0 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge-stack,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge,
:is(.work-list-page, .maker-detail-page) .works-category-grid .work-thumb.is-wd-matte-trimmed .work-badge--seen{
  z-index:4 !important;
}


/* =============================================
   Ver.1282 - 공개 화면 PC comfort width/density 복원
   - public_layout의 페이지별 wrapper 구조는 유지하되, PC에서 전체 화면이 과하게 꽉 차 보이지 않도록 공개 영역의 읽기 폭과 기본 글자 스케일을 한 단계 낮춘다.
   - 모바일 Ver.1269~1279 보정과 작품목록/메이커 상세 parity는 유지하고, min-width:1024px 범위에서만 적용한다.
   - References: MDN media queries, MDN responsive images(max-width centered content).
   ============================================= */
@media (min-width: 1024px){
  body:not(.admin-body){
    --public-comfort-max:1180px;
    --content-max:var(--public-comfort-max);
    --container:var(--public-comfort-max);
    --wd-page-max:var(--public-comfort-max);
    --fs-lg:15px;
    --h1:clamp(24px, 1.75vw, 30px);
    --h2:clamp(20px, 1.45vw, 25px);
    --h3:18px;
  }

  body:not(.admin-body) :where(.container, .public-container, .detail-container, .home-container, .community-hub, .board-container, .post-container, .search-results, .search-page .container, .subtitle-materials-page.public-container, .board-modern-page.public-container, .post-modern-page.public-container, .write-modern-page.public-container, #wrap.work-detail.detail-container){
    max-width:var(--public-comfort-max) !important;
  }

  body:not(.admin-body) .public-wrapper > :where(.g-page, .site_body, section.site_body, .work-list-page, .maker-detail-page){
    max-width:var(--public-comfort-max) !important;
  }

  body:not(.admin-body) .public-wrapper > :is(.work-list-page, .maker-detail-page){
    max-width:var(--public-comfort-max) !important;
    padding-inline:12px !important;
  }

  body:not(.admin-body) :where(.public-card, .home-card, .wd-card, .wd-title-card, .community-card, .board-list-container, .post-modern-page, .search-card){
    border-radius:16px;
  }

  body:not(.admin-body) .home{
    gap:24px !important;
  }

  body:not(.admin-body) .home-hero{
    min-height:clamp(260px, 30vw, 390px) !important;
    padding:clamp(34px, 5vw, 70px) clamp(18px, 3vw, 44px) !important;
    border-radius:0 0 24px 24px !important;
  }

  body:not(.admin-body) .home-hero__content{
    max-width:760px !important;
    gap:13px !important;
  }

  body:not(.admin-body) .home-hero__title{
    font-size:clamp(1.85rem, 3.5vw, 2.75rem) !important;
  }

  body:not(.admin-body) .home-hero__desc{
    font-size:clamp(.95rem, 1.45vw, 1.08rem) !important;
    line-height:1.55 !important;
  }

  body:not(.admin-body) .home-card{
    padding:18px !important;
  }

  body:not(.admin-body) .sec-head__title{
    font-size:clamp(1.08rem, 1.35vw, 1.42rem) !important;
  }

  body:not(.admin-body) .home-workgrid{
    gap:16px !important;
  }

  body:not(.admin-body) .home-worktile__info{
    padding:10px 10px 11px !important;
  }

  body:not(.admin-body) .actors-view-grid .actor-grid.public-modern-grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 190px)) !important;
    gap:16px !important;
  }

  body:not(.admin-body) .actors-view-grid .actor-card.public-card .actor-thumb-grid img{
    height:230px !important;
  }

  body:not(.admin-body) .work-detail .wd-top-grid{
    grid-template-columns:minmax(260px, 330px) minmax(0, 1fr) minmax(240px, 310px) !important;
    gap:14px !important;
  }

  body:not(.admin-body) .work-detail .wd-title{
    font-size:17px !important;
  }
}

/* =============================================
   Ver.1283 - 작품목록 PC grid staircase / max 5 columns
   - Ver.1278의 자동 컬럼 PC 보정이 Ver.1282 comfort width(1180px) 안에서 6열까지 생성되는 문제를 후순위로 차단한다.
   - /works/jav, /works/vr, /works/etc와 /works/*/makers/<id> 모두 같은 단계형 컬럼 계약을 사용한다.
   - PC/태블릿 landscape에서는 3열 → 4열 → 5열까지만 증가하며, 5열을 초과하지 않는다.
   - 모바일 Ver.1279의 2열 compact 계약은 유지한다.
   - References: MDN CSS Grid repeat(), MDN media queries.
   ============================================= */
@media (min-width: 1024px) and (max-width: 1159.98px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1160px) and (max-width: 1359.98px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1360px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  }
}

/* =============================================
   Ver.1284 - 작품목록 전체 반응형 staircase / 모바일 1열 시작
   - Ver.1279 모바일 2열 compact 보존 문구 때문에 모바일이 2열로 고정되는 혼선을 보정한다.
   - 작품목록/하위 메이커 상세 모두 작은 화면은 1열, 넓은 모바일/태블릿은 2열, PC는 3→4→5열까지만 단계적으로 증가한다.
   - 기존 템플릿/JS/DB/이미지 원본은 변경하지 않고, CSS source-order 후순위에서 그리드 열 수만 재계약한다.
   - References: MDN CSS Grid repeat(), MDN media queries.
   ============================================= */
@media (max-width: 639.98px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:1fr !important;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px){
  :is(.work-list-page, .maker-detail-page) .works-grid,
  :is(.work-list-page, .maker-detail-page) .works-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =============================================
   Ver.1292 - 커뮤니티 홈 AVDBS-style dense topic list
   - 사용자 제공 AVDBS topic-lst/article 구조를 블랙테마에 맞춰 재구성한다.
   - 기존 /community route, board/post URL, 댓글/추천/조회 데이터 계약은 유지한다.
   ============================================= */
.community-hub.community-topic-hub{
  max-width:1260px;
  padding:18px 14px 44px;
  color:#e5edf7;
}

.community-hub.community-topic-hub .community-grid.board-hub-grid.community-topic-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  column-gap:38px;
  row-gap:18px;
  margin:0;
  align-items:start;
}

.community-hub.community-topic-hub .community-card.board-list-container.community-topic{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  min-height:0;
  transform:none !important;
}

.community-hub.community-topic-hub .community-card-head.board-list-header.community-topic-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:0;
  background:transparent;
  border-bottom:1px solid rgba(148, 163, 184, .22);
}

.community-hub.community-topic-hub .community-card-title.community-topic-title{
  margin:0;
  min-width:0;
  font-size:1.04rem;
  line-height:38px;
  font-weight:900;
  letter-spacing:-.02em;
}

.community-hub.community-topic-hub .community-card-title.community-topic-title a{
  display:inline-flex;
  align-items:baseline;
  min-width:0;
  max-width:100%;
  color:#f8fafc;
  text-decoration:none;
}

.community-hub.community-topic-hub .community-topic-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.community-hub.community-topic-hub .community-topic-sep{
  margin:0 4px;
  color:#64748b;
  font-size:.88rem;
  font-weight:700;
}

.community-hub.community-topic-hub .community-card-kicker.community-topic-group{
  color:#22d3ee;
  font-size:1em;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
}

.community-hub.community-topic-hub .community-more.community-topic-more{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 2px 0 10px;
  color:#cbd5e1;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:.82rem;
  line-height:1;
  text-decoration:none;
}

.community-hub.community-topic-hub .community-more.community-topic-more:hover{
  color:#67e8f9;
  background:transparent;
  border:0;
}

.community-hub.community-topic-hub .community-list.community-article-list{
  list-style:none;
  margin:7px 0 0;
  padding:0;
  background:transparent;
}

.community-hub.community-topic-hub .community-item.board-list-item.community-article{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

.community-hub.community-topic-hub .community-link.community-article-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:28px;
  padding:0;
  color:#dbeafe;
  border:0;
  border-bottom:0;
  text-decoration:none;
}

.community-hub.community-topic-hub .community-link.community-article-link:hover{
  background:transparent;
}

.community-hub.community-topic-hub .community-link.community-article-link:hover .community-article-title{
  color:#67e8f9;
}

.community-hub.community-topic-hub .community-titleline.community-article-titlewrap{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  overflow:hidden;
}

.community-hub.community-topic-hub .community-adult,
.community-hub.community-topic-hub .adult_only.community-adult{
  flex:0 0 auto;
  color:#fb7185;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:28px;
}

.community-hub.community-topic-hub .community-post-title.community-article-title{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e5edf7;
  font-size:.92rem;
  font-weight:620;
  line-height:28px;
  letter-spacing:-.01em;
}

.community-hub.community-topic-hub .reply_cnt.community-reply,
.community-hub.community-topic-hub .community-like{
  flex:0 0 auto;
  font-size:.78rem;
  font-weight:850;
  line-height:28px;
}

.community-hub.community-topic-hub .reply_cnt.community-reply{
  color:#fb7185;
}

.community-hub.community-topic-hub .community-like{
  color:#60a5fa;
}

.community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
  flex:0 0 72px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:0;
  color:#94a3b8;
  font-size:.78rem;
  line-height:28px;
  white-space:nowrap;
}

.community-hub.community-topic-hub .community-view{
  color:#94a3b8;
}

.community-hub.community-topic-hub .community-empty.community-article-empty{
  margin:7px 0 0;
  padding:0;
  min-height:28px;
  color:#64748b;
  font-size:.86rem;
  line-height:28px;
  background:transparent;
}

@media (hover:hover){
  .community-hub.community-topic-hub .board-list-container:hover{
    box-shadow:none !important;
    transform:none !important;
    border-color:transparent !important;
  }
}

@media (max-width:920px){
  .community-hub.community-topic-hub .community-grid.board-hub-grid.community-topic-list{
    grid-template-columns:1fr !important;
    row-gap:20px;
  }
}

@media (max-width:560px){
  .community-hub.community-topic-hub{
    padding:14px 12px 36px;
  }
  .community-hub.community-topic-hub .community-card-title.community-topic-title{
    font-size:1rem;
  }
  .community-hub.community-topic-hub .community-link.community-article-link{
    gap:8px;
    min-height:30px;
  }
  .community-hub.community-topic-hub .community-post-title.community-article-title,
  .community-hub.community-topic-hub .community-adult,
  .community-hub.community-topic-hub .reply_cnt.community-reply,
  .community-hub.community-topic-hub .community-like{
    line-height:30px;
  }
  .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
    flex-basis:58px;
    font-size:.74rem;
    line-height:30px;
  }
}


/* =============================================
   Ver.1293 - 커뮤니티 홈 모바일 dense topic list 보강
   - Ver.1226 모바일 카드형 규칙(flex-direction:column/min-height/padding)이
     Ver.1292 dense list를 다시 키우지 못하도록 /community body scope에서 최종 덮는다.
   - 920px 이하 1열, 560px 이하 30px 행, 360px 이하 조회수 숨김으로 가로 넘침을 막는다.
   ============================================= */
body.page-community .public-wrapper > .g-page{
  max-width:1260px !important;
  padding-inline:clamp(10px, 3vw, 14px) !important;
}

body.page-community .community-hub.community-topic-hub,
body.public-dark.page-community .community-hub.community-topic-hub{
  width:100% !important;
  max-width:1260px !important;
  margin:0 auto !important;
  padding:14px 0 40px !important;
}

body.page-community .community-hub.community-topic-hub .community-grid.board-hub-grid.community-topic-list{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px 38px !important;
  margin:0 !important;
  padding:0 !important;
}

body.page-community .community-hub.community-topic-hub .community-card.board-list-container.community-topic{
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}

body.page-community .community-hub.community-topic-hub .community-card-head.board-list-header.community-topic-head{
  min-height:38px !important;
  padding:0 !important;
  background:transparent !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
}

body.page-community .community-hub.community-topic-hub .community-list.community-article-list{
  margin:6px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
}

body.page-community .community-hub.community-topic-hub .community-item.board-list-item.community-article{
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

body.page-community .community-hub.community-topic-hub .community-link.community-article-link{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:28px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
}

body.page-community .community-hub.community-topic-hub .community-titleline.community-article-titlewrap{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:100% !important;
  gap:4px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

body.page-community .community-hub.community-topic-hub .community-post-title.community-article-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

body.page-community .community-hub.community-topic-hub .community-adult,
body.page-community .community-hub.community-topic-hub .adult_only.community-adult,
body.page-community .community-hub.community-topic-hub .reply_cnt.community-reply,
body.page-community .community-hub.community-topic-hub .community-like,
body.page-community .community-hub.community-topic-hub .community-post-title.community-article-title,
body.page-community .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
  line-height:28px !important;
}

body.page-community .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
  flex:0 0 62px !important;
  width:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  font-size:.74rem !important;
}

body.page-community .community-hub.community-topic-hub .community-empty.community-article-empty{
  min-height:28px !important;
  padding:0 !important;
  line-height:28px !important;
}

@media (max-width:920px){
  body.page-community .community-hub.community-topic-hub .community-grid.board-hub-grid.community-topic-list{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

@media (max-width:560px){
  body.page-community .public-wrapper > .g-page{
    padding-inline:10px !important;
  }
  body.page-community .community-hub.community-topic-hub{
    padding-top:10px !important;
    padding-bottom:32px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-card-head.board-list-header.community-topic-head{
    min-height:36px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-card-title.community-topic-title{
    font-size:.96rem !important;
    line-height:36px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-more.community-topic-more{
    height:26px !important;
    padding:0 0 0 8px !important;
    font-size:.76rem !important;
  }
  body.page-community .community-hub.community-topic-hub .community-list.community-article-list{
    margin-top:4px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-link.community-article-link{
    min-height:30px !important;
    gap:6px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-post-title.community-article-title{
    font-size:.86rem !important;
    font-weight:620 !important;
  }
  body.page-community .community-hub.community-topic-hub .community-adult,
  body.page-community .community-hub.community-topic-hub .adult_only.community-adult,
  body.page-community .community-hub.community-topic-hub .reply_cnt.community-reply,
  body.page-community .community-hub.community-topic-hub .community-like,
  body.page-community .community-hub.community-topic-hub .community-post-title.community-article-title,
  body.page-community .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
    line-height:30px !important;
  }
  body.page-community .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
    flex-basis:50px !important;
    width:50px !important;
    font-size:.68rem !important;
  }
}

@media (max-width:360px){
  body.page-community .community-hub.community-topic-hub .community-stats.board-meta.community-article-inf{
    display:none !important;
  }
  body.page-community .community-hub.community-topic-hub .community-link.community-article-link{
    gap:0 !important;
  }
}


/* =============================================
   Ver.1297 - 배우/작품 한줄평 dense mention list
   - 사용자 첨부 AVDBS 샘플의 ul.mention(comment/writer/reco)처럼
     한줄평을 카드형이 아닌 촘촘한 1행 목록으로 보정한다.
   - 공개 블랙테마는 유지하고, 배우/작품 한줄평 영역에만 적용한다.
   ============================================= */
.work-detail-page .wd-oneline,
.actor-detail-page .ad-oneline{
  padding:14px 16px 12px !important;
  background:#1e2937 !important;
  border:1px solid rgba(71,85,105,.92) !important;
  border-radius:18px !important;
  color:#e2e8f0 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.34) !important;
}

.work-detail-page .wd-oneline-head,
.actor-detail-page .ad-oneline-head{
  min-height:34px !important;
  margin:0 0 6px !important;
  padding:0 0 7px !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
}

.work-detail-page .wd-oneline-head .wd-section-title,
.actor-detail-page .ad-oneline-head .ad-section-title{
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.35 !important;
  font-weight:950 !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.work-detail-page .wd-review-list,
.actor-detail-page .ad-review-list{
  display:grid !important;
  gap:0 !important;
  margin:0 !important;
  border-top:0 !important;
}

.work-detail-page .wd-review-item,
.actor-detail-page .ad-review-item{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 104px 124px !important;
  grid-template-areas:"comment author reco" "detail detail detail" !important;
  column-gap:12px !important;
  row-gap:0 !important;
  align-items:center !important;
  min-height:37px !important;
  padding:5px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#e2e8f0 !important;
  box-shadow:none !important;
  scroll-margin-top:90px;
}

.work-detail-page .wd-review-item:last-child,
.actor-detail-page .ad-review-item:last-child{
  border-bottom-color:rgba(148,163,184,.10) !important;
}

.work-detail-page .wd-review-content,
.actor-detail-page .ad-review-content{
  grid-area:comment !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  font-size:.92rem !important;
  line-height:1.45 !important;
  color:#e8eefb !important;
  -webkit-text-fill-color:#e8eefb !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
}

.work-detail-page .wd-review-content .wd-muted,
.actor-detail-page .ad-review-content .ad-muted{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

.work-detail-page .wd-review-item-top,
.actor-detail-page .ad-review-item-top{
  display:contents !important;
}

.work-detail-page .wd-review-item-top > div:first-child,
.actor-detail-page .ad-review-item > .ad-review-item-top > .ad-review-author{
  grid-area:author !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:.82rem !important;
  line-height:1.35 !important;
  font-weight:760 !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.work-detail-page .wd-review-item-top > div:first-child .wd-review-author{
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.work-detail-page .wd-rv-right,
.actor-detail-page .ad-review-right{
  grid-area:reco !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
  margin:0 !important;
}

.work-detail-page .wd-rv-vote,
.actor-detail-page .ad-rv-vote{
  min-width:0 !important;
  min-height:24px !important;
  height:24px !important;
  padding:0 5px !important;
  border-radius:7px !important;
  border:0 !important;
  background:transparent !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  box-shadow:none !important;
  font-size:.78rem !important;
  font-weight:780 !important;
  line-height:1 !important;
}

.work-detail-page .wd-rv-vote:hover,
.actor-detail-page .ad-rv-vote:hover{
  background:rgba(96,165,250,.12) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.work-detail-page .wd-rv-up,
.actor-detail-page .ad-rv-up{
  color:#60a5fa !important;
  -webkit-text-fill-color:#60a5fa !important;
}

.work-detail-page .wd-rv-down,
.actor-detail-page .ad-rv-down{
  color:#f87171 !important;
  -webkit-text-fill-color:#f87171 !important;
}

.work-detail-page .wd-rv-avg,
.actor-detail-page .ad-rv-avg{
  min-width:34px !important;
  height:24px !important;
  padding:0 7px !important;
  border-radius:7px !important;
  border:1px solid rgba(96,165,250,.35) !important;
  background:rgba(37,99,235,.26) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  font-size:.78rem !important;
  line-height:22px !important;
  box-shadow:none !important;
}

.work-detail-page .wd-review-comments,
.actor-detail-page .ad-review-comments{
  grid-area:detail !important;
  margin:4px 0 0 !important;
  padding-top:4px !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
}

.work-detail-page .wd-review-comments:not([open]),
.actor-detail-page .ad-review-comments:not([open]){
  display:none !important;
}

.work-detail-page .wd-review-comments summary,
.actor-detail-page .ad-review-comments summary{
  min-height:22px !important;
  font-size:.82rem !important;
  line-height:22px !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.work-detail-page .wd-review-comments-body,
.actor-detail-page .ad-review-comments-body{
  margin-top:4px !important;
  gap:4px !important;
}

.work-detail-page .wd-review-comment-list,
.actor-detail-page .ad-review-comment-list{
  gap:4px !important;
}

.work-detail-page .wd-review-comment-item,
.actor-detail-page .ad-review-comment-item{
  padding:6px 8px !important;
  border-radius:9px !important;
  background:rgba(15,23,42,.45) !important;
  border-color:rgba(148,163,184,.16) !important;
}

.work-detail-page .wd-review-item > .wd-rv-right,
.work-detail-page .wd-review-item > .ad-review-right,
.actor-detail-page .ad-review-item > .ad-review-right{
  grid-area:detail !important;
  justify-content:flex-end !important;
  margin-top:4px !important;
}

.work-detail-page .wd-overflow-item,
.actor-detail-page .wd-overflow-item{
  min-height:26px !important;
  padding:3px 8px !important;
  border-radius:8px !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
}

.work-detail-page .wd-oneline{padding-bottom:12px !important;}
.work-detail-page .wd-oneline-head .rv-write-btn,
.actor-detail-page .ad-oneline-cta .rv-write-btn{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  min-height:36px !important;
  margin:8px 0 0 !important;
  border-radius:0 !important;
  border:1px solid rgba(148,163,184,.34) !important;
  background:rgba(15,23,42,.38) !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  box-shadow:none !important;
  font-size:.9rem !important;
  font-weight:760 !important;
}

.work-detail-page .wd-oneline-head .rv-write-btn:hover,
.actor-detail-page .ad-oneline-cta .rv-write-btn:hover{
  background:rgba(30,41,59,.86) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  border-color:rgba(96,165,250,.45) !important;
}

.actor-detail-page .ad-oneline-cta{
  margin-top:0 !important;
  display:block !important;
}

.work-detail-page .rv-pager,
.actor-detail-page .rv-pager{
  margin:9px 0 0 !important;
  gap:4px !important;
}

.work-detail-page .rv-page,
.actor-detail-page .rv-page{
  min-width:24px !important;
  height:28px !important;
  padding:0 6px !important;
  border-radius:7px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:rgba(15,23,42,.42) !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.84rem !important;
  line-height:1 !important;
  text-decoration:none !important;
}

.work-detail-page .rv-page-cur,
.actor-detail-page .rv-page-cur{
  min-width:44px !important;
  border-color:transparent !important;
  background:transparent !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
  font-weight:850 !important;
}

/* Ver.1338: 모바일 작품/배우 한줄평은 본문을 즉시 읽고 추천/비추천하는 UI이므로
   MDN text wrapping 기준에 맞춰 mobile breakpoint에서 ellipsis clamp를 해제한다. */
@media (max-width:720px){
  .work-detail-page .wd-review-item,
  .actor-detail-page .ad-review-item{
    grid-template-columns:minmax(0,1fr) 86px 104px !important;
    column-gap:8px !important;
    min-height:35px !important;
  }
  .work-detail-page .wd-review-content,
  .actor-detail-page .ad-review-content{
    font-size:.86rem !important;
    line-height:1.5 !important;
    white-space:pre-wrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  .work-detail-page .wd-review-item-top > div:first-child,
  .actor-detail-page .ad-review-item > .ad-review-item-top > .ad-review-author{
    font-size:.76rem !important;
  }
  .work-detail-page .wd-rv-vote,
  .actor-detail-page .ad-rv-vote,
  .work-detail-page .wd-rv-avg,
  .actor-detail-page .ad-rv-avg{
    font-size:.72rem !important;
  }
}

@media (max-width:520px){
  .work-detail-page .wd-oneline,
  .actor-detail-page .ad-oneline{
    padding:12px 10px 10px !important;
    border-radius:16px !important;
  }
  .work-detail-page .wd-review-item,
  .actor-detail-page .ad-review-item{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"comment" "reco" "author" "detail" !important;
    row-gap:5px !important;
    column-gap:0 !important;
    padding:8px 0 !important;
  }
  .work-detail-page .wd-review-item-top > div:first-child,
  .actor-detail-page .ad-review-item > .ad-review-item-top > .ad-review-author{
    margin-top:0 !important;
  }
  .work-detail-page .wd-rv-right,
  .actor-detail-page .ad-review-right{
    gap:5px !important;
    justify-content:flex-start !important;
  }
  .work-detail-page .wd-rv-avg,
  .actor-detail-page .ad-rv-avg{
    display:none !important;
  }
}

/* ==================== Ver.1298 - 커뮤니티 댓글 dense list ====================
   - 게시글 상세 댓글창을 한줄평 샘플처럼 촘촘한 row list로 보정한다.
   - 기존 댓글 작성/답글/삭제/추천/비추천 DOM과 JS data 계약은 유지한다.
   - Reference: sample ul.mention comment/writer/reco structure, MDN flex/grid/overflow/cascade.
*/
.post-modern-page .comment-section{
  padding:14px 16px !important;
  border-radius:16px !important;
  background:#1e2937 !important;
  border-color:#334155 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.34) !important;
  color:#e2e8f0 !important;
}

.post-modern-page .comment-section .wd-section-head{
  min-height:32px !important;
  margin:0 0 8px !important;
  padding-bottom:8px !important;
  border-bottom:1px solid rgba(148,163,184,.20) !important;
}

.post-modern-page .comment-section .wd-section-title{
  font-size:1.02rem !important;
  line-height:1.25 !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.post-modern-page .comment-editor{
  padding:8px !important;
  border-radius:10px !important;
  background:rgba(15,23,42,.42) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}

.post-modern-page .comment-form{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important;
  align-items:stretch !important;
}

.post-modern-page .comment-textarea{
  min-height:42px !important;
  max-height:110px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  font-size:.9rem !important;
  line-height:1.45 !important;
  background:#0f172a !important;
  color:#e8eefb !important;
  -webkit-text-fill-color:#e8eefb !important;
  border-color:rgba(148,163,184,.30) !important;
}

.post-modern-page .comment-textarea::placeholder{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

.post-modern-page .comment-submit{
  min-width:auto !important;
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:8px !important;
  font-size:.84rem !important;
  line-height:1.2 !important;
}

.post-modern-page .comment-login{
  min-height:32px !important;
  padding:6px 4px !important;
  font-size:.88rem !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.post-modern-page .comment-tabs{
  margin:8px 0 4px !important;
  gap:6px !important;
  font-size:.82rem !important;
  line-height:1 !important;
}

.post-modern-page .comment-tab{
  min-height:26px !important;
  padding:0 8px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(15,23,42,.34) !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  text-decoration:none !important;
}

.post-modern-page .comment-tab.is-active{
  border-color:rgba(96,165,250,.44) !important;
  background:rgba(37,99,235,.22) !important;
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
}

.post-modern-page .comment-list{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border-top:1px solid rgba(148,163,184,.16) !important;
}

.post-modern-page .comment-section .comment-item{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 98px !important;
  gap:8px !important;
  align-items:start !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.post-modern-page .comment-section .comment-item.is-reply{
  margin-left:22px !important;
  padding-left:8px !important;
  border-left:2px solid rgba(148,163,184,.28) !important;
  border-bottom-color:rgba(148,163,184,.13) !important;
}

.post-modern-page .comment-main{
  min-width:0 !important;
  padding:7px 0 !important;
}

.post-modern-page .comment-head{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:18px !important;
  margin:0 !important;
  flex-wrap:wrap !important;
}

.post-modern-page .comment-author{
  max-width:180px !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:.82rem !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.post-modern-page .comment-time{
  font-size:.75rem !important;
  line-height:1.2 !important;
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

.post-modern-page .comment-sys-badge{
  min-height:18px !important;
  padding:1px 5px !important;
  border-radius:999px !important;
  font-size:.68rem !important;
  line-height:1.2 !important;
  background:rgba(148,163,184,.14) !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
}

.post-modern-page .comment-body{
  margin:2px 0 0 !important;
  color:#e8eefb !important;
  -webkit-text-fill-color:#e8eefb !important;
  font-size:.91rem !important;
  line-height:1.45 !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
}

.post-modern-page .comment-item.is-deleted .comment-body{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  font-style:normal !important;
}

.post-modern-page .comment-foot{
  margin:3px 0 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}

.post-modern-page .comment-foot form{
  margin:0 !important;
  display:inline-flex !important;
}

.post-modern-page .comment-reply-toggle,
.post-modern-page .comment-reply{
  color:#93c5fd !important;
  -webkit-text-fill-color:#93c5fd !important;
  font-size:.76rem !important;
  line-height:1.2 !important;
  text-decoration:none !important;
}

.post-modern-page .comment-reply-toggle:hover,
.post-modern-page .comment-reply:hover{
  color:#dbeafe !important;
  -webkit-text-fill-color:#dbeafe !important;
  text-decoration:underline !important;
}

.post-modern-page .comment-votes{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  gap:4px !important;
  padding:8px 0 0 !important;
  min-width:0 !important;
}

.post-modern-page .comment-vote.ui-icon-circle,
.post-modern-page .comment-vote{
  width:auto !important;
  min-width:36px !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 5px !important;
  border-radius:7px !important;
  border:0 !important;
  background:transparent !important;
  color:#cbd5e1 !important;
  -webkit-text-fill-color:#cbd5e1 !important;
  box-shadow:none !important;
  font-size:.78rem !important;
  line-height:1 !important;
}

.post-modern-page .comment-vote:hover:not(:disabled){
  background:rgba(96,165,250,.12) !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.post-modern-page .comment-vote[data-vote='up'] .comment-vote-count{
  color:#60a5fa !important;
  -webkit-text-fill-color:#60a5fa !important;
}

.post-modern-page .comment-vote[data-vote='down'] .comment-vote-count{
  color:#f87171 !important;
  -webkit-text-fill-color:#f87171 !important;
}

.post-modern-page .comment-vote:disabled,
.post-modern-page .comment-vote.is-disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

.post-modern-page .comment-reply-form{
  grid-column:1 / -1 !important;
  margin:4px 0 7px !important;
  padding:6px 8px !important;
  border-radius:9px !important;
  background:rgba(15,23,42,.44) !important;
  border:1px solid rgba(148,163,184,.18) !important;
}

.post-modern-page .comment-reply-form.is-hidden{
  display:none !important;
}

.post-modern-page .comment-textarea--reply{
  min-height:44px !important;
  max-height:90px !important;
  padding:7px 9px !important;
  border-radius:8px !important;
  font-size:.86rem !important;
}

.post-modern-page .comment-reply-actions{
  display:flex !important;
  gap:6px !important;
  margin-top:5px !important;
  justify-content:flex-end !important;
}

.post-modern-page .comment-reply-actions .btn,
.post-modern-page .comment-foot .btn{
  min-height:24px !important;
  padding:2px 7px !important;
  border-radius:7px !important;
  font-size:.74rem !important;
  line-height:1.15 !important;
}

.post-modern-page .comment-empty{
  min-height:34px !important;
  margin:0 !important;
  padding:8px 0 !important;
  border:0 !important;
  border-top:1px solid rgba(148,163,184,.16) !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
  box-shadow:none !important;
}

@media (max-width:640px){
  .post-modern-page .comment-section{
    padding:12px 10px !important;
    border-radius:14px !important;
  }
  .post-modern-page .comment-form{
    grid-template-columns:1fr !important;
  }
  .post-modern-page .comment-submit{
    width:100% !important;
  }
  .post-modern-page .comment-section .comment-item{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    min-height:38px !important;
  }
  .post-modern-page .comment-main{
    padding:6px 0 !important;
  }
  .post-modern-page .comment-author{
    max-width:136px !important;
    font-size:.78rem !important;
  }
  .post-modern-page .comment-time{
    font-size:.7rem !important;
  }
  .post-modern-page .comment-body{
    font-size:.86rem !important;
  }
  .post-modern-page .comment-votes{
    padding-top:7px !important;
    gap:2px !important;
  }
  .post-modern-page .comment-vote.ui-icon-circle,
  .post-modern-page .comment-vote{
    min-width:30px !important;
    height:22px !important;
    min-height:22px !important;
    padding-inline:3px !important;
    font-size:.72rem !important;
  }
  .post-modern-page .comment-section .comment-item.is-reply{
    margin-left:12px !important;
    padding-left:7px !important;
  }
}


/* ==================== Ver.1299 - 커뮤니티 글 상세 모바일 액션 버튼 보정 ====================
   - Ver.1288 light paper surface 안에서 목록/이미지ZIP/수정/삭제 버튼이
     모바일에서 icon-only 40px square로 되돌아가 글자가 겹치거나 보이지 않는 문제를 보정한다.
   - 단일 #post-actions 마크업과 post_actions_swap.js 이동 계약은 유지한다.
*/
@media (max-width:720px){
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-slot--body{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 14px 0 !important;
    padding:0 0 10px 0 !important;
    border-bottom:1px solid var(--post-paper-border, rgba(15,23,42,.14)) !important;
    color:var(--post-paper-text, #111827) !important;
    overflow:visible !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-top-inline-form{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-icon-btn.icon-only,
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-top-inline-form .wd-icon-btn.icon-only{
    width:auto !important;
    min-width:42px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    border-radius:11px !important;
    border:1px solid rgba(15,23,42,.18) !important;
    background:#e2e8f0 !important;
    color:#0f172a !important;
    font-size:.82rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-icon-btn.icon-only.danger,
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-top-inline-form .wd-icon-btn.icon-only.danger{
    background:#fee2e2 !important;
    color:#991b1b !important;
    border-color:rgba(220,38,38,.28) !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-icon-btn.icon-only svg{
    display:none !important;
  }

  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-btn-label{
    display:inline !important;
    color:inherit !important;
    -webkit-text-fill-color:currentColor !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }
}

@media (max-width:360px){
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-slot--body{
    justify-content:flex-start !important;
  }
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar{
    justify-content:flex-start !important;
  }
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-icon-btn.icon-only,
  body.public-dark.page-public-post .post-modern-page .post-detail .wd-post-actions-bar .wd-top-inline-form .wd-icon-btn.icon-only{
    min-width:38px !important;
    height:32px !important;
    min-height:32px !important;
    padding-inline:8px !important;
    font-size:.78rem !important;
  }
}


/* ==================== Ver.1305 - 작품 작성/수정 배우 선택 모달 dark theme ====================
   - actor_picker_v2.js는 modal을 document.body 아래에 붙이므로 `.work-form-page .ap-modal`로는 잡히지 않는다.
   - public dark shell 범위에서 ap-modal/ap-issues/ap-card/ap-button을 dark pair로 잠가
     미등록 배우 후보 확인 화면의 흰 배경 + 흐린 글자 문제를 보정한다.
   - 배우 확인/선택 JS, hidden fields, 신규 생성/선택/페이징 계약은 변경하지 않는다.
*/
body.public-dark .ap-modal{
  color-scheme:dark;
  color:#e5edf8;
  font-family:inherit;
}
body.public-dark .ap-modal__backdrop{
  background:rgba(2,6,23,.76);
  backdrop-filter:blur(7px);
}
body.public-dark .ap-modal__panel{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(12,18,32,.98));
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 26px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:#e5edf8;
}
body.public-dark .ap-modal__head{
  border-bottom-color:rgba(148,163,184,.22);
  background:rgba(15,23,42,.88);
}
body.public-dark .ap-modal__title{
  color:#f8fafc;
  font-weight:900;
  letter-spacing:-.02em;
}
body.public-dark .ap-modal__close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(15,23,42,.72);
  color:#f8fafc;
  opacity:1;
}
body.public-dark .ap-modal__body{
  background:transparent;
}
body.public-dark .ap-modal__hint,
body.public-dark .ap-modal__count,
body.public-dark .ap-modal__empty,
body.public-dark .ap-modal__loading,
body.public-dark .ap-card__kana,
body.public-dark .ap-card__extra{
  color:#aab8cc;
  opacity:1;
}
body.public-dark .ap-modal__tools{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.90));
  border-bottom:1px solid rgba(148,163,184,.16);
}
body.public-dark .ap-modal__search{
  border:1px solid rgba(96,165,250,.38);
  background:#0f172a;
  color:#f8fafc;
  box-shadow:0 0 0 4px rgba(59,130,246,.10);
}
body.public-dark .ap-modal__search::placeholder{
  color:#94a3b8;
}
body.public-dark .ap-modal__grid{
  color:#e5edf8;
}
body.public-dark .ap-card{
  background:#182538;
  border-color:rgba(148,163,184,.28);
  color:#e5edf8;
  box-shadow:none;
}
body.public-dark .ap-card:hover,
body.public-dark .ap-card:focus-visible{
  border-color:rgba(96,165,250,.64);
  background:#20314a;
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}
body.public-dark .ap-card__img{
  background:#0b1120;
  border-color:rgba(148,163,184,.28);
}
body.public-dark .ap-card__name{
  color:#f8fafc;
}
body.public-dark .ap-modal__footer{
  border-top-color:rgba(148,163,184,.18);
}
body.public-dark .ap-modal__pager,
body.public-dark .ap-modal__ghost,
body.public-dark .ap-modal__close2,
body.public-dark .ap-issue__btn{
  border:1px solid rgba(96,165,250,.34);
  background:rgba(15,23,42,.92);
  color:#dbeafe;
  font-weight:850;
  -webkit-text-fill-color:currentColor;
  box-shadow:none;
}
body.public-dark .ap-modal__pager:hover,
body.public-dark .ap-modal__ghost:hover,
body.public-dark .ap-modal__close2:hover,
body.public-dark .ap-issue__btn:hover{
  background:rgba(30,41,59,.98);
  border-color:rgba(96,165,250,.58);
  color:#fff;
}
body.public-dark .ap-modal__pager:disabled{
  background:rgba(30,41,59,.68);
  border-color:rgba(148,163,184,.18);
  color:#7f8da3;
  opacity:1;
}
body.public-dark .work-form-page .ap-btn,
body.public-dark .work-form-page .ap-chip,
body.public-dark .work-form-page .ap-issues,
body.public-dark .work-form-page .ap-issue{
  color-scheme:dark;
  -webkit-text-fill-color:currentColor;
}
body.public-dark .work-form-page .ap-chip{
  background:#20314a;
  border-color:rgba(148,163,184,.32);
  color:#e5edf8;
}
body.public-dark .work-form-page .ap-chip__img{
  background:#0b1120;
  border-color:rgba(148,163,184,.28);
}
body.public-dark .work-form-page .ap-chip__name{
  color:#f8fafc;
}
body.public-dark .work-form-page .ap-chip__sub,
body.public-dark .work-form-page .ap-issues__head span,
body.public-dark .work-form-page .ap-issue__desc{
  color:#aab8cc;
  opacity:1;
}
body.public-dark .work-form-page .ap-chip__x{
  color:#e5edf8;
  opacity:.86;
}
body.public-dark .work-form-page .ap-issues{
  background:linear-gradient(180deg, rgba(120,53,15,.36), rgba(15,23,42,.86));
  border-color:rgba(251,191,36,.34);
  color:#e5edf8;
}
body.public-dark .work-form-page .ap-issues__head strong{
  color:#fef3c7;
}
body.public-dark .work-form-page .ap-issue{
  background:#182538;
  border-color:rgba(148,163,184,.28);
}
body.public-dark .work-form-page .ap-issue__title{
  color:#f8fafc;
}
body.public-dark .work-form-page .ap-btn{
  background:rgba(15,23,42,.92);
  border-color:rgba(96,165,250,.34);
  color:#dbeafe;
  font-weight:850;
}
body.public-dark .work-form-page .ap-btn:disabled{
  background:rgba(30,41,59,.70);
  border-color:rgba(148,163,184,.20);
  color:#8796ad;
  opacity:1;
}
@media (max-width:720px){
  body.public-dark .ap-modal__panel{
    width:calc(100vw - 18px);
    max-height:calc(100vh - 30px);
    margin:15px auto 0;
    border-radius:18px;
  }
  body.public-dark .ap-modal__head{
    padding:12px 14px;
  }
  body.public-dark .ap-modal__body{
    padding:12px 12px 14px;
  }
  body.public-dark .ap-modal__grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  body.public-dark .ap-card{
    padding:9px;
    border-radius:13px;
  }
  body.public-dark .ap-modal__footer-left,
  body.public-dark .ap-modal__footer-right{
    gap:6px;
  }
  body.public-dark .ap-modal__pager,
  body.public-dark .ap-modal__ghost,
  body.public-dark .ap-modal__close2{
    min-height:38px;
    padding-inline:10px;
  }
}


/* =============================================
   Ver.1309 - 홈/통합검색/배우상세 대표이미지 비율 복원
   - 대표이미지(rep_image)를 쓰는 홈 작품 카드, 통합검색 작품 카드, 배우 상세 출연작은 작품 대표이미지 기준 1771/1250 프레임으로 통일한다.
   - 통합검색 배우 카드는 배우 이미지 기준 3/4 프레임으로 복원해 정사각형 crop을 막는다.
   - data-wd-smart-trim-box/data-wd-smart-trim을 지원해 흰색 외곽 매트는 표시 단계에서만 잘라내며 원본 파일/DB는 변경하지 않는다.
   - References: MDN object-fit/object-position, MDN aspect-ratio.
   ============================================= */
.home .home-worktile__img,
.search-page .works-grid.search-results-grid .work-thumb,
.actor-detail-page .actor-film-thumb{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1771 / 1250 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

.home .home-worktile__img > img,
.search-page .works-grid.search-results-grid .work-cover,
.search-page .works-grid.search-results-grid .work-thumb > img,
.actor-detail-page .actor-film-thumb > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:1771 / 1250 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.home .home-worktile__img.is-wd-matte-trimmed,
.search-page .works-grid.search-results-grid .work-thumb.is-wd-matte-trimmed,
.actor-detail-page .actor-film-thumb.is-wd-matte-trimmed{
  aspect-ratio:var(--wd-smart-trim-aspect) !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

.home .home-worktile__img.is-wd-matte-trimmed > img.is-wd-matte-trimmed-img,
.search-page .works-grid.search-results-grid .work-thumb.is-wd-matte-trimmed > img.is-wd-matte-trimmed-img,
.actor-detail-page .actor-film-thumb.is-wd-matte-trimmed > img.is-wd-matte-trimmed-img{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  z-index:1;
  width:var(--wd-smart-trim-width) !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  transform:translate(var(--wd-smart-trim-x), var(--wd-smart-trim-y)) !important;
  transform-origin:0 0 !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.home .home-worktile__img.is-wd-matte-trimmed .home-worktile__tag,
.home .home-worktile__img.is-wd-matte-trimmed .home-worktile__subtitle,
.search-page .work-thumb.is-wd-matte-trimmed .work-badge-stack,
.search-page .work-thumb.is-wd-matte-trimmed .work-badge{
  z-index:4 !important;
}

.search-page .actors-view-grid .actor-grid.search-results-grid .actor-thumb-grid{
  display:block !important;
  width:100% !important;
  aspect-ratio:3 / 4 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

.search-page .actors-view-grid .actor-grid.search-results-grid .actor-thumb-grid img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center top !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

.search-page .search-card .actor-thumb-grid-empty{
  min-height:0 !important;
  height:100% !important;
  aspect-ratio:3 / 4 !important;
}

@media (max-width:560px){
  .search-page .works-grid.search-results-grid,
  .search-page .actors-view-grid .actor-grid.search-results-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
}

/* =============================================
   Ver.1314 - 대표이미지 고정 프레임 중앙 정렬 보정
   - 홈/작품목록/메이커/통합검색/배우상세 출연작 썸네일은 이미지 원본 비율과 무관하게 같은 프레임 높이를 유지한다.
   - object-fit: contain + object-position:center 로 이미지 전체를 중앙에 놓고, 남는 영역은 블랙테마 썸네일 배경색으로 채운다.
   - smart matte trim 적용 후에도 컨테이너 aspect-ratio를 이미지 crop 비율로 바꾸지 않아 grid row/card 높이가 밀리지 않는다.
   - References: MDN object-fit/object-position, MDN aspect-ratio.
   ============================================= */
:is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .actor-detail-page .actor-film-thumb
){
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:1771 / 1250 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

:is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .actor-detail-page .actor-film-thumb
) > :is(img, .work-cover){
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

:is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .actor-detail-page .actor-film-thumb
).is-wd-matte-trimmed{
  aspect-ratio:1771 / 1250 !important;
  height:auto !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
}

:is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .actor-detail-page .actor-film-thumb
)[data-wd-smart-trim-mode="fixed-contain"] > img.is-wd-matte-trimmed-img{
  position:absolute !important;
  left:var(--wd-smart-trim-left, 0%) !important;
  top:var(--wd-smart-trim-top, 0%) !important;
  z-index:1;
  width:var(--wd-smart-trim-width, 100%) !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  transform:none !important;
  transform-origin:0 0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

:is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .actor-detail-page .actor-film-thumb
).is-wd-matte-trimmed :is(.home-worktile__tag, .home-worktile__subtitle, .work-badge-stack, .work-badge){
  z-index:4 !important;
}

@media (forced-colors: active){
  :is(
    .home .home-worktile__img,
    .work-list-page .works-category-grid .work-thumb,
    .maker-detail-page .works-category-grid .work-thumb,
    .search-page .works-grid.search-results-grid .work-thumb,
    .actor-detail-page .actor-film-thumb
  ),
  :is(
    .home .home-worktile__img,
    .work-list-page .works-category-grid .work-thumb,
    .maker-detail-page .works-category-grid .work-thumb,
    .search-page .works-grid.search-results-grid .work-thumb,
    .actor-detail-page .actor-film-thumb
  ) > :is(img, .work-cover){
    forced-color-adjust:auto;
  }
}

/* =============================================
   Ver.1339 - 모바일 배우상세 출연작 대표이미지 가로 레일
   - 대표이미지(rep_image)는 작은 그리드보다 큰 단일 레일 카드가 읽기 쉽다.
   - MDN overflow-x/scroll-snap 기준으로 모바일에서 옆으로 밀어 다음 작품을 본다.
   - 데스크톱 출연작 wrap/pager 계약은 유지한다.
   ============================================= */
@media (max-width:720px){
  .actor-detail-page .actor-film-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    margin-top:12px !important;
    margin-inline:-4px !important;
    padding:2px 4px 12px !important;
  }

  .actor-detail-page .actor-film-item{
    flex:0 0 clamp(218px, 72vw, 292px) !important;
    width:auto !important;
    min-width:0 !important;
    scroll-snap-align:start;
    padding:8px !important;
    border:1px solid rgba(148,163,184,.28) !important;
    border-radius:18px !important;
    background:rgba(15,23,42,.78) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.32) !important;
  }

  .actor-detail-page .actor-film-thumb{
    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.24) !important;
    box-shadow:0 10px 22px rgba(0,0,0,.28) !important;
  }

  .actor-detail-page .actor-film-code{
    margin-top:9px !important;
    font-size:.94rem !important;
    line-height:1.25 !important;
    color:#bfdbfe !important;
    -webkit-text-fill-color:#bfdbfe !important;
  }

  .actor-detail-page .actor-film-meta{
    font-size:.78rem !important;
    color:#94a3b8 !important;
    -webkit-text-fill-color:#94a3b8 !important;
  }
}


/* =============================================
   Ver.1343 - 모바일 배우상세 출연작 대표이미지 세로 비율 복구
   - 배우 상세 출연작은 w.rep_image를 사용하므로 커버형 1771/1250 가로 프레임이 아니라
     대표이미지 기준 세로 프레임으로 표시한다.
   - 1343 기준 샘플 대표이미지/기존 rep 자산은 588x800 비율이며,
     object-fit:contain + scroll-snap 모바일 레일 계약은 유지한다.
   - References: MDN aspect-ratio, MDN scroll-snap-type.
   ============================================= */
@media (max-width:720px){
  .actor-detail-page .actor-film-item{
    flex-basis:clamp(176px, 54vw, 236px) !important;
  }

  .actor-detail-page .actor-film-thumb,
  .actor-detail-page .actor-film-thumb.is-wd-matte-trimmed{
    aspect-ratio:588 / 800 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .actor-detail-page .actor-film-thumb > img,
  .actor-detail-page .actor-film-thumb > img.is-wd-matte-trimmed-img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .actor-detail-page .actor-film-thumb[data-wd-smart-trim-mode="fixed-contain"] > img.is-wd-matte-trimmed-img{
    height:auto !important;
    max-height:none !important;
  }
}