/* entity-hub.css — L2 actress hub + L1 index page styles */

/* ---- stats strip ---- */
.dlc-eh-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
.dlc-eh-stats .s {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 8px 14px;
  flex: 1 1 auto;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.dlc-eh-stats .s .v {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.dlc-eh-stats .s .k {
  font-size: 11px;
  color: #6c757d;
  margin-top: 2px;
}
.dlc-eh-stats .s.sale .v { color: #dc3545; }
.dlc-eh-stats .s.min .v  { color: #007bff; }

/* ---- genre chips ---- */
.dlc-eh-genre {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 4px;
  font-size: 12px;
}
.dlc-eh-genre .gtag { color: #6c757d; }
.dlc-eh-genre .g {
  background: #eef4ff;
  color: #0056b3;
  border-radius: 14px;
  padding: 3px 10px;
}

/* ---- genre chips category breakdown ---- */
.dlc-eh-genre-cats { margin:8px 0; font-size:12px; }
.dlc-eh-genre-cats .gtag { color: #6c757d; display:block; margin-bottom:4px; }
.dlc-eh-gcat { display:flex; align-items:flex-start; gap:8px; margin:5px 0; }
.dlc-eh-gcat-name { font-size:11px; font-weight:600; color:#495057; flex:0 0 5.5em; padding-top:2px; }
/* 横棒グラフ: ジャンル名を棒にオーバーレイ */
.dlc-eh-gbars { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.dlc-eh-gbar-track { position:relative; height:18px; background:#eef1f5; border-radius:4px; overflow:hidden; }
.dlc-eh-gbar-fill { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#a5d8ff,#4dabf7); }
.dlc-eh-gbar-name { position:absolute; left:8px; top:0; line-height:18px; font-size:11px; font-weight:600; color:#1a3b5d; white-space:nowrap; z-index:1; }
.dlc-eh-gbar-pct { position:absolute; right:7px; top:0; line-height:18px; font-size:10px; font-weight:700; color:#1c4f80; z-index:1; }
.dlc-eh-genre-cats .g {
  background: #eef4ff;
  color: #0056b3;
  border-radius: 14px;
  padding: 3px 10px;
}

/* ---- section heading ---- */
.dlc-eh-sec {
  font-size: 13px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 24px 0 6px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 4px;
}

/* ---- release chart container ---- */
.dlc-eh-chart {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
}
.dlc-eh-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* ---- spark bar chart ---- */
.dlc-eh-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
  min-width: max-content;
}
.dlc-eh-col {
  width: 14px;
  display: flex;
  flex-direction: column-reverse;
  flex: 0 0 14px;
}
.dlc-eh-col .solo {
  background: #007bff;
  border-radius: 0 0 2px 2px;
}
.dlc-eh-col .kik {
  background: #f4a6c8;
  border-radius: 2px 2px 0 0;
}

/* ---- axis row ---- */
.dlc-eh-axis {
  display: flex;
  gap: 4px;
  min-width: max-content;
  margin-top: 3px;
  height: 14px;
}
.dlc-eh-axis .yr {
  position: relative;
  width: 14px;
  flex: 0 0 14px;
}
.dlc-eh-axis .yr span {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-size: 10px;
  color: #6c757d;
}
/* ① 作品内訳 単体 vs 企画: 全体作品数に対する 1 本の横棒 (モック準拠) */
.dlc-eh-brk { margin-top: 12px; }
.dlc-eh-brk-cap { font-size: 12px; color: #868e96; margin-bottom: 4px; }
.dlc-eh-brk-bar { display: flex; height: 20px; border-radius: 5px; overflow: hidden; font-size: 11px; color: #fff; font-weight: 700; }
.dlc-eh-brk-bar .a { background: #007bff; display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; }
.dlc-eh-brk-bar .b { background: #f4a6c8; display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; }

/* ---- chart legend ---- */
.dlc-eh-legend {
  font-size: 11px;
  color: #6c757d;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.dlc-eh-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 3px;
}

/* ---- works grid (reuses dlc-grid from responsive.css) ---- */
.dlc-eh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
/* ---- works "年代別" view: one row per year, horizontal-scroll strip ---- */
#eh-works-grid.dlc-eh-view-year {
  display: block;
}
.dlc-eh-yearrow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}
.dlc-eh-yearrow .dlc-eh-yearlbl {
  flex: 0 0 60px;
  font-weight: 800;
  font-size: 14px;
  color: #495057;
  background: #f1f3f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dlc-eh-yearrow .dlc-eh-yearlbl small {
  font-weight: 400;
  font-size: 10px;
  color: #868e96;
}
.dlc-eh-yearrow .dlc-eh-yearstrip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.dlc-eh-yearrow .dlc-eh-yearstrip .dlc-eh-work {
  flex: 0 0 150px;
}

/* ---- breadcrumb ---- */
.dlc-entity-hub .crumb,
.dlc-entity-index .crumb {
  font-size: 12px;
  color: #6c757d;
  padding: 14px 0 6px;
}
.dlc-entity-hub .crumb a,
.dlc-entity-index .crumb a {
  color: #007bff;
  text-decoration: none;
}

/* ---- h1 / sub ---- */
.dlc-entity-hub h1,
.dlc-entity-index h1 {
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 2px;
}
.dlc-entity-hub .sub,
.dlc-entity-index .sub {
  color: #6c757d;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ---- L2 hub header: avatar circle ---- */
.dlc-eh-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e83e8c, #fd7e14);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 10px;
  flex-shrink: 0;
}
.dlc-eh-avatar.has-img {
  background-color: transparent;
}

/* ---- L2 hub: h1 row wraps avatar + title + follow ---- */
.dlc-eh-h1-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.dlc-eh-h1-row h1 {
  margin: 0;
  flex: 1 1 auto;
}

/* ---- follow button (inline) ---- */
.dlc-entity-hub .dlc-follow-btn {
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #e83e8c;
  color: #e83e8c;
  background: #fff;
  border-radius: 20px;
  padding: 3px 14px;
  margin-left: 8px;
  vertical-align: middle;
  cursor: pointer;
}

/* ---- L2 hub follow button: ☆/★ glyph treatment (matches L1 dlc-ei-star) ---- */
/* OFF: ☆ grey outline, ON: ★ gold filled. Button has no text node on L2. */
.dlc-entity-hub .dlc-follow-btn.dlc-eh-star {
  border: none;
  background: transparent;
  color: #adb5bd;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 0;
}
.dlc-entity-hub .dlc-follow-btn.dlc-eh-star::before { content: "\2606"; }  /* ☆ */
.dlc-entity-hub .dlc-follow-btn.dlc-eh-star.dlc-follow-active {
  color: #ffd700;
}
.dlc-entity-hub .dlc-follow-btn.dlc-eh-star.dlc-follow-active::before { content: "\2605"; }  /* ★ */

/* ---- ① release chart footer (totals) ---- */
.dlc-eh-chart-footer {
  font-size: 12px;
  color: #6c757d;
  margin-top: 6px;
  text-align: right;
}

/* ---- ① chart tooltip overlay (tap/click to show month breakdown) ---- */
.dlc-eh-bar-tip {
  font-size: 11px;
  color: #495057;
  background: rgba(255,255,255,.95);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
  min-height: 18px;
  text-align: center;
  transition: opacity .15s;
}

/* ---- related link row ---- */
.dlc-entity-hub .rel {
  margin-top: 20px;
  font-size: 13px;
}
.dlc-entity-hub .rel a {
  color: #007bff;
  text-decoration: none;
}

/* ---- L1 index: search + sort/facet controls ---- */
.dlc-ei-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 4px;
}
.dlc-ei-search {
  flex: 1 1 200px;
  min-width: 160px;
}
.dlc-ei-search input {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 13px;
}
.dlc-ei-seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dlc-ei-seg a {
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: #343a40;
  text-decoration: none;
}
.dlc-ei-seg a.on {
  background: #212529;
  color: #fff;
  border-color: #212529;
}
.dlc-ei-sortnote {
  font-size: 11px;
  color: #6c757d;
  margin: 0 0 8px;
}
.dlc-ei-facets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.dlc-ei-facets .f {
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: #343a40;
  text-decoration: none;
}
.dlc-ei-facets .f.on {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* ---- L1 index card grid ---- */
.dlc-ei-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.dlc-ei-card {
  position: relative;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s;
}
.dlc-ei-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.dlc-ei-link {
  display: block;
  text-decoration: none;
  color: #212529;
}
.dlc-ei-link:hover {
  text-decoration: none;
  color: #212529;
}
/* avatar circle (first-char fallback; JS swaps in bg-image) */
.dlc-ei-card .av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #e83e8c, #fd7e14);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  overflow: hidden;
}
.dlc-ei-card .av.has-img {
  background-color: transparent;
}
.dlc-ei-card .nm {
  display: block;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlc-ei-card .meta {
  display: block;
  font-size: 12px;
  color: #6c757d;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dlc-ei-card .meta.date {
  font-size: 11px;
  color: #adb5bd;
  margin-top: 1px;
}
.dlc-ei-card .row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
}
.dlc-ei-card .min { color: #007bff; font-weight: 700; }
.dlc-ei-card .sale {
  background: #fde7ea;
  color: #dc3545;
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 700;
}
.dlc-ei-card .saleflag {
  position: absolute;
  top: 8px;
  left: 10px;
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 6px;
}
/* follow ☆/★ — top-right, sits above the card link.
   Glyph is provided by ::before so OFF vs ON is unmistakable:
   OFF = ☆ (grey outline), ON = ★ (gold filled). The button has no text node. */
.dlc-ei-card .dlc-ei-star {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  border: none;
  background: transparent;
  color: #adb5bd;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.dlc-ei-card .dlc-ei-star::before { content: "\2606"; }  /* ☆ */
/* Active (followed): gold filled ★. Specificity 0,3,0 beats the base
   `.dlc-follow-btn.dlc-follow-active{color:#ffd700}` (0,2,0) and the OFF rule above. */
.dlc-ei-card .dlc-ei-star.dlc-follow-active {
  color: #ffd700;
}
.dlc-ei-card .dlc-ei-star.dlc-follow-active::before { content: "\2605"; }  /* ★ */

/* ---- pager ---- */
.dlc-entity-index .pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 22px 0;
}
.dlc-entity-index .pager a {
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 13px;
  text-decoration: none;
  color: #007bff;
  background: #fff;
}
.dlc-entity-index .pager span {
  border: 1px solid #007bff;
  background: #007bff;
  color: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 13px;
}

/* ---- card price overrides for entity hub grid ---- */
.dlc-eh-grid .dlc-card-price-del {
  font-size: 11px;
  color: #adb5bd;
  text-decoration: line-through;
  margin-right: 3px;
}
.dlc-eh-grid .dlc-card-price {
  color: #dc3545;
  font-weight: 800;
  font-size: 14px;
}
.dlc-eh-grid .dlc-card-price-regular {
  font-weight: 700;
  font-size: 14px;
}
/* %OFF バッジは base (.dlc-card-price-off = 白文字 on 赤背景) をそのまま使う。
   旧 override は color:#dc3545 だけ変えて背景を残したため「赤文字 on 赤背景＝
   中身不可視の赤四角」になっていた (2026-06-08 修正、ランキング表示と統一)。 */
.dlc-eh-grid .dlc-card-date {
  font-size: 10px;
  color: #adb5bd;
  margin-top: 2px;
}

/* ---- L2 works grid: list-card parity (img wrap / badges / actions) ---- */
.dlc-eh-grid .dlc-card-img-wrap {
  position: relative;
  display: block;
}
.dlc-eh-grid .dlc-card-img-wrap img {
  display: block;
  width: 100%;
  cursor: pointer;  /* サムネは公式(affiliate)への遷移リンク (lightbox 廃止) */
}
.dlc-eh-discontinued {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
}
.dlc-eh-grid .dlc-card-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.dlc-eh-grid .dlc-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- works filter / sort / view controls ---- */
.dlc-eh-works-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}
.dlc-eh-works-controls .dlc-ei-seg {
  gap: 6px;
}
.dlc-ei-seg-btn {
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: #343a40;
  cursor: pointer;
}
.dlc-ei-seg-btn.is-on {
  background: #212529;
  color: #fff;
  border-color: #212529;
}

/* ---- ranking pills row (stats strip 直後) ---- */
.dlc-eh-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.dlc-eh-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}
.dlc-eh-pill-rankin { background: #fff3cd; color: #7a5b00; }
.dlc-eh-pill-actrank { background: #ffe0f0; color: #a01a6b; }

/* ---- per-work rank badge (img-wrap overlay) ---- */
.dlc-eh-rankpill {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #fff3cd;
  color: #7a5b00;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 3px;
}
.dlc-eh-rankpill .best { color: #b08900; font-size: 10px; }

/* ---- year-grouped view ---- */
.dlc-eh-grid-year {
  display: block;
}
.dlc-eh-grid-year .dlc-eh-work {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 36px) / 4);
  min-width: 140px;
  margin: 0 12px 12px 0;
}
.dlc-eh-year-head {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 800;
  color: #343a40;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #e9ecef;
}

/* ---- ③ ranking trend chart ---- */
.dlc-eh-rank-trend { margin: 16px 0 0; }
.dlc-eh-rank-trend-canvas { display:flex; align-items:flex-start; overflow:visible; }
.eh-rt-yaxis { flex:0 0 auto; }
.eh-rt-yaxis-svg { display:block; }
.eh-rt-plot { overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-width:0; }
.eh-rt-thumb { cursor:pointer; }
.eh-rt-zoom { position:fixed; z-index:9999; pointer-events:none; box-shadow:0 2px 12px rgba(0,0,0,.3); border-radius:4px; background:#fff; padding:2px; }
.eh-rt-zoom img { display:block; width:320px; height:auto; border-radius:3px; }
.eh-rt-svg { display: block; }
.eh-rt-grid { stroke: #eee; stroke-width: 1; }
.eh-rt-ylbl, .eh-rt-xlbl { font-size: 9px; fill: #999; text-anchor: middle; }
.eh-rt-ylbl { text-anchor: end; }
.eh-rt-entity-seg { stroke: #d6336c; stroke-width: 2; fill: none; }
.eh-rt-entity-dot { fill: #d6336c; }
.eh-rt-product-seg { stroke: #f08c00; stroke-width: 2; fill: none; }
.eh-rt-product-dot { fill: #f08c00; }
.eh-rt-ranklbl { font-size: 9px; font-weight: 700; }
.eh-rt-entity-ranklbl { fill: #d6336c; }
.eh-rt-product-ranklbl { fill: #f08c00; }
.eh-rt-thumb.dlc-ranking-card-thumb { cursor: pointer; }
.eh-rt-reldot { fill: #adb5bd; }
.dlc-eh-rank-legend { margin: 4px 0 6px; }
.dlc-eh-rank-legend label { font-size: 12px; margin-right: 12px; cursor: pointer; }
.dlc-eh-rank-note { font-size: 11px; color: #868e96; margin-top: 6px; }
.eh-rt-unmeasured { fill:#f1f3f5; }

/* ---- ② price×month bubble chart ---- */
.dlc-eh-pb-canvas { display:flex; align-items:flex-start; overflow:visible; }
.eh-pb-yaxis { flex:0 0 auto; } .eh-pb-yaxis-svg { display:block; }
.eh-pb-plot { overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-width:0; }
.eh-pb-grid { stroke:#eee; stroke-width:1; }
.eh-pb-ylbl { font-size:9px; fill:#999; text-anchor:end; }
.eh-pb-xlbl { font-size:9px; fill:#999; text-anchor:middle; }
.dlc-eh-pb-legend { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:4px 0 6px; font-size:12px; }
.eh-pb-leg { cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.eh-pb-swatch { display:inline-block; width:11px; height:11px; border-radius:50%; }
.eh-pb-leg-note { color:#868e96; font-size:11px; }
.dlc-eh-pb-note { font-size:11px; color:#868e96; margin-top:6px; }
/* #6 works 価格 種別ラベル */
.dlc-eh-dprice { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.dlc-eh-dtype { font-size:10px; font-weight:700; color:#495057; background:#f1f3f5; border-radius:3px; padding:0 4px; min-width:1.8em; text-align:center; }