/* Final work_detail.css
   - Actor-page width parity by variables: --frame-max / --frame-pad (fallback included)
   - Prevents global flex/float collisions
   - Cover size controlled
   - Responsive 1→2→3 behavior
   - Gallery auto grid
   - Smaller fonts for easier work
*/

:root{
  --wd-page-max: 1300px;
  --wd-page-pad: var(--frame-pad, 14px);

  --wd-card-bg: var(--card-bg, #f3f4f6);
  --wd-card-border: var(--card-border, #e5e7eb);
  --wd-chip-bg: var(--chip-bg, #e5e7eb);
  --wd-btn-bg: var(--btn-bg, #ffffff);
  --wd-text: var(--text-color, #111827);
}

/* Frame (width same as actor page, structure independent) */
.work-detail-frame{
  display:block !important;
  float:none !important;
  clear:both !important;

  width: 100% !important;
  max-width: var(--wd-page-max) !important;
  margin: 0 auto !important;
  padding: 18px var(--wd-page-pad) 40px !important;
}

/* Local reset */
.work-detail, .work-detail *{ box-sizing: border-box; }
.work-detail{
  display:block !important;
  float:none !important;
  clear:both !important;

  width: 100% !important;
  color: var(--wd-text);
  font-size: 13px;
  line-height: 1.55;
}

/* Cards */
.work-detail .wd-card,
.work-detail .wd-title-card{
  background: var(--wd-card-bg);
  border: 1px solid var(--wd-card-border);
  border-radius: 14px;
}

.work-detail .wd-title-card{
  display:flex !important;
  gap:10px;
  align-items:center;
  padding: 12px 14px;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   One-line CTA + Review modal (match actor detail UI)
   - Work: one-line only (no comments thread)
   - Uses same rv-* namespace for visual parity
------------------------------------------------------------ */

.work-detail .wd-oneline-cta{display:flex;justify-content:center;margin-top:10px;}
.work-detail .rv-write-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  height:auto;
  min-width:0;
  padding:.55em 1.15em;
  border-radius:999px;
  border:0;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:.95rem;
  line-height:1.1;
  cursor:pointer;
  white-space:nowrap;
}
.work-detail .rv-write-btn:hover{filter:brightness(0.98);}

/* Review modal (rv- namespace only) */
.rv-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;}
.rv-modal.open{display:flex;}
.rv-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.rv-modal-panel{position:relative;width:min(640px,92vw);background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 40px rgba(0,0,0,.18);padding:14px;}
.rv-modal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.rv-modal-title{font-weight:900;font-size:16px;}
.rv-modal-close{border:0;background:#f3f4f6;border-radius:10px;width:36px;height:36px;font-weight:900;cursor:pointer;}
.rv-form{display:grid;gap:10px;}
.rv-textarea{width:100%;min-height:92px;border-radius:12px;border:1px solid #e5e7eb;padding:10px 12px;font-size:14px;resize:vertical;}
.rv-counter{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6b7280;font-weight:800;}
.rv-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rv-score-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #eef2f7;border-radius:12px;padding:10px 12px;}
.rv-score-row label{font-weight:900;font-size:13px;color:#111;}
.rv-score-row select{min-width:64px;height:32px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-weight:900;padding:0 10px;}
.rv-avg{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;background:#eef2ff;border:1px solid #c7d2fe;padding:10px 12px;}
.rv-avg .k{font-weight:900;font-size:13px;color:#111;}
.rv-avg .v{font-weight:900;font-size:14px;color:#1d4ed8;}
.rv-submit{height:42px;border-radius:12px;border:0;background:#111;color:#fff;font-weight:900;font-size:14px;cursor:pointer;}
.rv-submit:disabled{opacity:.6;cursor:not-allowed;}
.rv-error{font-size:12px;color:#ef4444;font-weight:900;min-height:16px;}

.work-detail .wd-badge{
  font-weight:900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--wd-chip-bg);
  border: 1px solid var(--wd-card-border);
}

.work-detail .wd-title{
  font-size: 18px;
  margin:0;
  line-height:1.3;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;       /* no wrap */
  overflow: hidden;          /* clip */
  text-overflow: ellipsis;   /* ... */
}

.work-detail .wd-title-row{min-width:0;}
.work-detail .wd-title-line{display:flex;gap:10px;align-items:center;min-width:0;}
.work-detail .wd-code-chip{font-size: 22px; font-weight: 800; color: #2563eb; background: transparent; border: none; padding: 0; margin-right: 10px;}

/* Top grid */
.work-detail .wd-top-grid{
  display:grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(260px, 340px) !important;
  grid-template-rows: auto auto auto !important;
  gap: 16px !important;
  align-items:start !important;
  margin-bottom: 12px;
  /* 레이아웃 헌법: DOM/그리드/폭/마진 고정. 추가 포지셔닝은 금지(기본 흐름 사용). */
}

/* place items into 2-row geometry to match sample */
.work-detail .wd-left-col{ grid-column: 1; grid-row: 1 / span 3; }
.work-detail .wd-center-col{ grid-column: 2; grid-row: 1 / span 2; display:grid; gap:16px; align-content:start; min-width:0; }
.work-detail .wd-eval{ grid-column: 3; grid-row: 1 / span 2; }
/* 스크린샷은 중앙 컬럼만(요구사항) : wd-center-col 안에 존재 */
/* 한줄평은 스크린샷 아래에서 가운데+우 span(요구사항) */
.work-detail .wd-oneline{ grid-column: 2 / 4; grid-row: 3; }

.work-detail .wd-left-col{display:grid;gap:16px;align-content:start;}
.work-detail .wd-eval{min-width:0;}

.work-detail .wd-desc{min-width:0;}
.work-detail .wd-shots{min-width:0;}

.work-detail .wd-card{ padding:12px; }

/* Cover */
.work-detail .wd-media-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* 샘플 cover.jpg (가로 1.6) 기준 */
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}

.work-detail .wd-cover{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

.work-detail .wd-cover-placeholder{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ca3af;
  font-weight:900;
}

.work-detail .wd-play{
  position:absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  font-size: 12px;
}

/* Meta rows */
.work-detail .wd-meta{
  min-width:0;
}

.work-detail .wd-meta-split{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) clamp(260px, 28vw, 340px);
  column-gap: 28px;
  row-gap: 14px;
  align-items:start;
}

@media (max-width: 980px){
  .work-detail .wd-meta-split{ grid-template-columns: 1fr; }
}

.work-detail .wd-meta-left{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.work-detail .wd-meta-right{
  min-width:0;
}

.work-detail .wd-meta-row{
  display:grid !important;
  grid-template-columns: 110px minmax(0, 1fr) !important;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

.work-detail .wd-meta-row .k{ font-weight:900; opacity:.85; }
.work-detail .wd-meta-row .v{ min-width:0; word-break: break-word; }

/* 출연(배우 카드) 정렬: '출연' 라벨은 위, 카드 그리드는 아래 */
.work-detail .wd-meta-row-actors{
  display:block !important;
}
.work-detail .wd-meta-row-actors .k{
  display:block;
  margin-bottom: 6px;
}
.work-detail .wd-meta-row-actors .v{
  display:block;
}

/* Tags */
.work-detail .wd-tags{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  padding-top: 8px;
}

.work-detail .wd-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--wd-card-border);
  background: var(--wd-chip-bg);
  font-size: 12px;
}

/* Buttons */
.work-detail .wd-actions{
  display:flex !important;
  gap: 8px;
  padding-top: 10px;
}

.work-detail .wd-btn{
  text-decoration:none;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--wd-card-border);
  background: var(--wd-btn-bg);
  font-weight:900;
  font-size: 12px;
}
.work-detail .wd-btn-outline{ background: transparent; }

/* Description & gallery */
.work-detail .wd-section-title{ font-weight:900; margin-bottom: 10px; font-size: 13px; }
.work-detail .wd-desc-text{
  white-space: pre-wrap;
  word-break: break-word;

  /* 긴 본문으로 레이아웃이 밀리는 문제 방지: 프레임 내부 스크롤 */
  max-height: clamp(240px, 42vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 10px; /* 스크롤바 겹침 방지 */
}

/* Center screenshots (genre slot replacement) */
.work-detail .wd-mt{ margin-top: 14px; }
.work-detail .wd-shot-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3*3 */
  gap: 10px !important;
}
.work-detail .wd-shot.is-hidden{ display:none; }
.work-detail .wd-more-wrap{ display:flex; justify-content:center; margin-top:10px; }
.work-detail .wd-more-btn{ height:38px; min-width:160px; border-radius:999px; border:1px solid rgba(0,0,0,.18); background:#fff; font-weight:900; cursor:pointer; }
.work-detail .wd-more-btn:hover{ filter:brightness(0.97); }
.work-detail .wd-shot{
  width:100%;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--wd-card-border);
  background:#111;
}
.work-detail .wd-shot img{
  width:100%;
  height: 110px;
  object-fit: contain; /* 스크린샷은 잘라내지 않음 */
  background:#000;
  display:block;
}


/* Screenshot viewer (dialog) - FIX: prevent cropping, fit inside viewport
   - Full-viewport dialog + center-fit image
   - Tap image to advance (JS), tap backdrop to close
*/
.work-detail .wd-shot-dialog{
  border: none;
  padding: 0;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
}
.work-detail .wd-shot-dialog::backdrop{ background: rgba(0,0,0,.78); }

.work-detail .wd-shot-dialog-inner{
  width: 100%;
  height: 100%;
  padding: min(4vh, 22px) min(4vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer; /* tap to go next */
  box-sizing: border-box;
}

.work-detail .wd-shot-dialog-inner img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}


/* 출연 배우 카드(요구사항)
   - 한 줄에 3명
   - 이미지(1:1) + 하부에 이름만
*/
.work-detail .wd-actor-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.work-detail .wd-actor-card{
  display:block;
  text-decoration:none;
  color:inherit;
  text-align:center;
}
.work-detail .wd-actor-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--wd-card-border);
  background: var(--wd-chip-bg);
  display:block;
}
.work-detail .wd-actor-name{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-detail .wd-thumbs{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

.work-detail .wd-thumb{
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--wd-card-border);
  background:#111;
}

.work-detail .wd-thumb img{
  width:100%;
  height: 92px;
  /* ✅ 스크린샷 썸네일은 '자르지 않음' (요청: 잘림 현상 제거)
     - object-fit: contain 으로 전체가 보이게 하고, 남는 영역은 배경색으로 처리
  */
  object-fit: contain;
  background:#000;
  display:block;
}

/* ===== 대표 이미지(홈 썸네일) 선택 배지 ===== */
.rep-badge{
  position:absolute;
  right:8px;
  top:8px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  user-select:none;
}
.rep-badge.is-active{
  background:rgba(31,166,74,.9);
  border-color:rgba(31,166,74,.95);
}

.work-detail .wd-gallery-help{
  margin-top: 8px;
  font-size: 12px;
  opacity: .7;
}

/* Responsive steps */
@media (max-width: 1100px){
  .work-detail .wd-top-grid{
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  }
  /* 2-column collapse: stack right cards under */
  .work-detail .wd-left-col{ grid-column: 1; grid-row: auto; }
  .work-detail .wd-center-col{ grid-column: 2; grid-row: auto; }
  .work-detail .wd-eval{ grid-column: 1 / -1; grid-row: auto; }
  .work-detail .wd-oneline{ grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 900px){
  .work-detail{ font-size: 12.5px; }
  .work-detail .wd-top-grid{ grid-template-columns: 1fr !important; }
  .work-detail .wd-left-col,
  .work-detail .wd-center-col,
  .work-detail .wd-eval,
  .work-detail .wd-oneline{ grid-column: auto; grid-row: auto; }
  .work-detail .wd-shot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .work-detail .wd-thumbs{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
}

@media (max-width: 520px){
  .work-detail-frame{ padding: 14px var(--wd-page-pad) 32px !important; }
  .work-detail .wd-shot-grid{ grid-template-columns: 1fr !important; }
  .work-detail .wd-thumb img{ height: 84px; }
  .work-detail .wd-shot img{ height: 96px; }
}

/* ===== Title badge + icon actions ===== */
.wd-title-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wd-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.wd-code-badge{
  /* ✅ 상품번호 강조(박스 제거): 같은 텍스트 흐름으로 보이되 색으로만 강조 */
  /* (중복/회귀 방지) 어디에서든 '배지 박스' 스타일이 재주입되어도 박스가 생기지 않게 강제 */
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:#1fa64a;
  font-weight:900;
  font-size:inherit;
  line-height:inherit;
  padding:0;
  border-radius:0;
  white-space:nowrap;
}
.wd-code-sep{ opacity:.65; font-weight:700; }
.wd-title{margin:0;min-width:0}
.wd-actions{display:flex;gap:10px;align-items:center}

/* 버튼 기본: 아이콘/라벨 모두 대응 */
.wd-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#111;
  cursor:pointer;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-0.2px;
}

/* 아이콘만 쓰는 버튼(목록/수정) */
.wd-icon-btn.icon-only{ width:42px; padding:0; }

/* SVG 아이콘 크기(너무 작게 보이는 문제 보정) */
.wd-icon-btn svg{ width:20px; height:20px; }

/* 포커스 접근성 */
.wd-icon-btn:focus-visible{
  outline:3px solid rgba(30,110,255,.35);
  outline-offset:2px;
}

/* ===== 대표이미지(홈 썸네일용) 선택 뱃지 ===== */
.rep-badge{
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.25);
  cursor:pointer;
  user-select:none;
}
.rep-badge.is-active{
  background:rgba(31,166,74,0.95);
  border-color:rgba(31,166,74,1);
}
.wd-icon-btn:hover{filter:brightness(0.97)}

/* 삭제 버튼은 '삭제'임이 한눈에 보이도록 강하게 */
.wd-icon-btn.danger{
  color:#c81e1e;
  border-color:rgba(200,30,30,.35);
  background:rgba(220,38,38,.10);
}
.wd-icon-btn.danger:hover{filter:brightness(0.95)}
.wd-icon-form{display:inline;margin:0}

/* ===== Eval button under cover ===== */
.wd-eval-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

/* small pill button used for subtitle chips etc */
.wd-mini-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:800;
  font-size:13px;
}

/* ===== Review section ===== */
.wd-review{margin-top:14px;padding:14px;display:block}
.wd-review-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wd-review-title{font-size:18px;font-weight:900}
.wd-review-meta{opacity:.8;font-size:14px;display:flex;gap:8px;align-items:baseline}
.wd-review-form{margin-top:10px;display:grid;gap:10px}
.wd-review-row{display:grid;gap:6px}
.wd-review-label{font-weight:800;font-size:14px}
.wd-review-select{max-width:140px;padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.15)}
.wd-review-textarea{padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.15);resize:vertical}
.wd-review-actions{display:flex;justify-content:flex-end}
.wd-review-submit{padding:10px 14px;border-radius:12px;border:0;background:#1fa64a;color:#fff;font-weight:900;cursor:pointer}
.wd-review-list{margin-top:12px;display:grid;gap:10px}
.wd-review-item{padding:10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.7);scroll-margin-top:90px}
.wd-review-item-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.wd-review-author{font-weight:900}
.wd-review-star{font-weight:900}
.wd-review-date{opacity:.7;font-size:12px}
.wd-review-content{margin-top:6px;white-space:pre-wrap}

/* work detail one-line header */
.work-detail .wd-oneline{ position:relative; padding-bottom: 56px; }
.wd-oneline-head{display:block;margin-bottom:10px}
.wd-oneline-head .wd-section-title{display:block}
.wd-oneline-head .rv-write-btn{
  position:absolute;
  left:50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin:0;
  z-index: 2;
}

/* thumbs + avg pill (list right area) */
.wd-rv-vote{border:0;background:transparent;cursor:pointer;font-weight:800;padding:4px 6px;border-radius:8px}
.wd-rv-vote:hover{background:rgba(0,0,0,.06)}
.wd-rv-vote:disabled{opacity:.6;cursor:default}
.wd-rv-avg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;padding:0 10px;border-radius:10px;border:1px solid rgba(60,120,255,.35);background:rgba(60,120,255,.10);color:#1a5cff;font-weight:900}

/* Rating stars */
.wd-eval-btn-below{display:inline-block;margin-top:10px;}
.wd-stars{display:flex;gap:6px;align-items:center;user-select:none;}
.wd-star{font-size:28px;line-height:1;cursor:pointer;color:#888;}
.wd-star.is-on{color:#f3b000;}
.wd-stars[data-locked="1"] .wd-star{cursor:default;opacity:.85;}
.wd-rating-note{font-size:13px;color:#666;margin-top:6px;}

/* ---- Review form visibility hardening ---- */
.wd-review-form{ display:block; }
.wd-review-row{ display:flex; gap:12px; align-items:flex-start; margin-top:10px; }
.wd-review-label{ min-width:64px; font-weight:900; }
.wd-review-textarea{
  display:block;
  width:100%;
  min-height:96px;
  padding:12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  background:#fff;
  outline:none;
  resize:vertical;
  font-size:14px;
  line-height:1.4;
}
.wd-review-textarea:focus{ border-color: rgba(0,0,0,.35); }
.wd-subtitles{ display:flex; flex-wrap:wrap; gap:8px; }
.wd-muted{ color:#777; font-weight:700; padding:4px 0; }

/* ===== Ver.0216: subtitle file block next to screenshots (under evaluation) =====
   - sizing is font-based (rem/em) so it scales with typography
   - no grid/DOM layout changes, only component styling
*/
.wd-subfile-card{
  margin-top: 12px;
  padding: 12px;
}
.wd-subfile-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.wd-subfile-title{ font-weight:900; letter-spacing:-0.2px; }
.wd-subfile-list{ display:flex; flex-direction:column; gap:10px; }
.wd-subfile-item{
  display:flex;
  align-items:center;
  gap:.75em;
  padding:.70em .90em;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  min-height: 3.0em;
}
.wd-subfile-item:hover{ border-color: rgba(0,0,0,.22); }
.wd-subfile-ico{
  width: 2.35em;
  height: 2.35em;
  flex: 0 0 auto;
  display:block;
}
.wd-subfile-name{
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
  width: 100%;
}

/* ===== Ver.0189 additions: cover-under actions + meta split + eval graph + one-line ===== */

.work-detail .wd-under-cover{ padding-top: 10px; display:flex; justify-content:center; }
.work-detail .wd-fav-form{ width:100%; display:flex; justify-content:center; }
.work-detail .wd-fav-btn{
  width: auto;
  max-width: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .6em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--wd-card-border);
  background: #111;
  color:#fff;
  font-weight:900;
  font-size: .95rem;
  line-height: 1.1;
  cursor:pointer;
  white-space: nowrap;
}
.work-detail .wd-fav-btn.active{
  background: #0f8a3b;
  border-color: #0f8a3b;
}
.work-detail .wd-fav-btn:hover{ filter: brightness(0.98); }

/* meta left/right (1:1) */
.work-detail .wd-meta{ display:block !important; }
.work-detail .wd-meta-split{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 900px){
  .work-detail .wd-meta-split{ grid-template-columns: 1fr; }
}

.work-detail .wd-meta-left{ display:flex; flex-direction:column; gap:6px; }
.work-detail .wd-meta-right{ min-width:0; }

.work-detail .wd-graph-head{ display:flex; flex-direction:column; gap:4px; margin-bottom: 10px; }
.work-detail .wd-graph-title{ font-weight:900; font-size:14px; }
.work-detail .wd-graph-sub{ font-weight:800; font-size:12px; color:#6b7280; }

/* radial graph (reused style language from actor page) */
.work-detail .wd-radial{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.work-detail .wd-radial-svg{ width: 260px; height: 260px; max-width: 100%; }
.work-detail .u-bg{ stroke: rgba(0,0,0,.08); stroke-width: 10; fill: none; }
.work-detail .u-ring{ stroke: #ff4b6e; stroke-width: 10; fill:none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.work-detail .u-ring.r0{ stroke:#111; opacity:.22; }
.work-detail .u-ring.r1{ opacity:1; }
.work-detail .u-ring.r2{ opacity:.85; }
.work-detail .u-ring.r3{ opacity:.70; }
.work-detail .u-ring.r4{ opacity:.55; }
.work-detail .u-ring[data-label="종합"]{ stroke:#ff8a00; opacity:1; }
.work-detail .radial-center-text{ font-weight:900; fill:#111; text-anchor:middle; }
.work-detail .radial-center-sub{ font-weight:900; fill:#6b7280; text-anchor:middle; }

.work-detail .wd-legend{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; width:100%; }
.work-detail .legend-item{ border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:10px 12px; background:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.work-detail .legend-item .l{ font-size:12px; font-weight:900; }
.work-detail .legend-item .v{ font-size:14px; font-weight:900; }
.work-detail .wd-graph-note{ margin-top: 6px; font-size:12px; }

/* one-line card (right, row2) */
.work-detail .wd-oneline{ min-width:0; }
.work-detail .wd-oneline-text{ font-size: 14px; font-weight: 800; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

/* ------------------------------------------------------------
   Bottom area (sample)
   - Best row (horizontal)
   - Frame2 (1:1) : Similar works | Related posts
------------------------------------------------------------ */

.work-detail .wd-bottom{ margin-top: 18px; }
.work-detail .wd-bottom-title{ font-weight:900; font-size:16px; margin: 6px 0 10px; }

.work-detail .wd-best-row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
}
.work-detail .wd-best-card{
  flex:0 0 auto;
  width: 130px;
  text-decoration:none;
  color:inherit;
  scroll-snap-align: start;
}
.work-detail .wd-best-thumb{
  width:100%;
  /* Best works thumbnail: portrait (narrow & tall) */
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#111;
}
.work-detail .wd-best-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.work-detail .wd-best-empty{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-weight:900; }
.work-detail .wd-best-code{ margin-top:8px; font-weight:900; font-size:12px; text-align:center; color:#2563eb; }

.work-detail .wd-frame2{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.work-detail .wd-frame-card{
  background: var(--wd-card-bg);
  border: 1px solid var(--wd-card-border);
  border-radius: 14px;
  padding: 12px;
  min-width:0;
}
.work-detail .wd-frame-card h3{ margin:0 0 6px; font-weight:900; font-size:15px; }
.work-detail .wd-frame-sub{ opacity:.75; font-size:12px; margin-bottom:10px; font-weight:800; }

.work-detail .wd-sim-grid{ display:flex; flex-wrap: wrap; gap:10px; }
.work-detail .wd-sim-item{ flex:0 0 auto; width:130px; text-decoration:none; color:inherit; }
.work-detail .wd-sim-thumb{ width:100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow:hidden; border:1px solid rgba(0,0,0,.08); background:#111; }
.work-detail .wd-sim-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.work-detail .wd-sim-code{ margin-top:8px; font-weight:900; font-size:12px; text-align:center; color:#2563eb; }

/* ---- Meta pills (genre/tag) ---- */
.wd-pill-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wd-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  /* Visible on light backgrounds (meta box) */
  border: 1px solid rgba(0,0,0,0.14);
  background: #f4f6f8;
  color: #2b2f36;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.wd-pill:hover{
  background: #e9edf2;
}

.wd-pill-genre{ }
.wd-pill-tag{ }
.wd-pill-series{
  background: #eef3ff;
  color: #1f2a44;
  border: 1px solid rgba(26,115,232,0.28);
}

/* ===== Work detail: evaluation distribution toggle (scoped) ===== */
.wd-eval .wd-dist-card{margin-top:12px;}
.wd-eval .wd-dist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px;}
.wd-eval .wd-dist-head .t{font-size:13px;font-weight:900;}
.wd-eval .wd-dist-head .r{display:flex;align-items:center;gap:10px;}
.wd-eval .wd-dist-head .m{font-size:12px;color:#6b7280;font-weight:800;}
.wd-eval .wd-dist-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.10);background:#fff;color:#111;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;cursor:pointer;}
.wd-eval .wd-dist-toggle:hover{filter:brightness(0.98);}
.wd-eval .wd-dist-toggle .chev{font-weight:900;opacity:.7;}
.wd-eval .wd-dist-body[hidden]{display:none !important;}
.wd-eval .wd-dist-list{display:grid;gap:12px;}
.wd-eval .wd-dist-item{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px 12px;background:#fff;}
.wd-eval .wd-dist-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.wd-eval .wd-dist-label{font-size:12px;font-weight:900;}
.wd-eval .wd-dist-avg{font-size:12px;color:#111;font-weight:900;}
.wd-eval .wd-dist-meta{font-size:11px;color:#6b7280;font-weight:800;margin-top:2px;}
.wd-eval .wd-dist-bars{display:grid;grid-template-columns:repeat(10, 1fr);gap:6px;align-items:end;height:54px;}
.wd-eval .wd-dist-bars span{display:block;border-radius:10px;background:rgba(255,75,110,.22);height:6px;}
.wd-eval .wd-dist-bars span.i0{background:rgba(17,17,17,.08);}
.wd-eval .wd-dist-axis{display:grid;grid-template-columns:repeat(10, 1fr);gap:6px;margin-top:6px;font-size:10px;color:#6b7280;font-weight:800;}
.wd-eval .wd-dist-axis span{display:block;text-align:center;}

/* 작품 추천/별로 (베스트 작품 상단 중앙, 좌중우 전체 폭) */
.work-detail .wd-wide{width:100%;}
.work-detail .wd-work-vote{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin: 10px 0 18px 0;
}

.work-detail .wd-work-vote form{
  margin: 0;
}

.work-detail .wd-vote-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width: 170px;
  height: 54px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

.work-detail .wd-vote-up{
  background: #ff6b6b;
  color: #fff;
}

.work-detail .wd-vote-down{
  background: #2f2f2f;
  color: #fff;
}

.work-detail .wd-vote-text{
  font-size: 13px;
  line-height: 1.1;
}

.work-detail .wd-vote-count{
  margin-top: 2px;
  font-size: 12px;
  opacity: .95;
}