/* myfansデータ（/data/・/data/suitei/。2026-11-04） */
.data-search { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.data-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font-size: 1rem; }
.data-search .btn { flex: none; }

.data-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.data-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text); font-size: var(--fs-sm); text-decoration: none; }
.data-chips a:hover, .data-chips a:focus-visible { border-color: var(--secondary); }

.data-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 641px) { .data-works { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.data-work { min-width: 0; }
.data-work__thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.data-work__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.data-work__thumb:hover img { transform: scale(1.04); }
.data-work__rank { position: absolute; left: 4px; top: 4px; min-width: 22px; padding: 1px 6px; border-radius: 4px; background: var(--primary); color: #fff; font-size: 0.75rem; font-family: var(--font-number); text-align: center; }
.data-work__price { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: #fff; font-size: 0.75rem; }
.data-work__creator { display: block; margin-top: 4px; color: var(--text-sub); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.data-work__creator:hover { color: var(--text); }

.data-tabs { margin-top: var(--space-3); }
.data-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.data-tabs__labels { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
.data-tabs__label { flex: none; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-sub); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.data-tabs__panel { display: none; margin-top: var(--space-3); }
.data-tabs__note { color: var(--text-muted); font-size: var(--fs-xs); margin: 0 0 var(--space-2); }
.data-tabs__more { margin-top: var(--space-2); font-size: var(--fs-sm); }
#data-tab-osusume:checked ~ .data-tabs__panel--osusume,
#data-tab-suitei:checked ~ .data-tabs__panel--suitei,
#data-tab-yomareteiru:checked ~ .data-tabs__panel--yomareteiru,
#data-tab-follower:checked ~ .data-tabs__panel--follower,
#data-tab-yasui:checked ~ .data-tabs__panel--yasui,
#data-tab-shinchaku:checked ~ .data-tabs__panel--shinchaku { display: block; }
#data-tab-osusume:checked ~ .data-tabs__labels .data-tabs__label--osusume,
#data-tab-suitei:checked ~ .data-tabs__labels .data-tabs__label--suitei,
#data-tab-yomareteiru:checked ~ .data-tabs__labels .data-tabs__label--yomareteiru,
#data-tab-follower:checked ~ .data-tabs__labels .data-tabs__label--follower,
#data-tab-yasui:checked ~ .data-tabs__labels .data-tabs__label--yasui,
#data-tab-shinchaku:checked ~ .data-tabs__labels .data-tabs__label--shinchaku { border-color: var(--primary); background: var(--primary); color: #fff; }

.data-rank { list-style: none; padding: 0; margin: 0; }
.data-rank__row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.data-rank__no { flex: none; width: 24px; text-align: center; font-family: var(--font-number); color: var(--secondary); }
.data-rank__who { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; color: var(--text); text-decoration: none; }
.data-rank__who .creator-avatar { grid-row: 1 / 3; }
.data-rank__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.data-rank__metric { color: var(--text-sub); font-size: var(--fs-xs); }
.data-rank .outbound { flex: none; }
.data-rank .outbound__button { padding: 6px 12px; min-height: 0; font-size: var(--fs-sm); }
.creator-avatar--sm { width: 40px; height: 40px; font-size: 1.1rem; }

.data-purposes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
@media (min-width: 641px) { .data-purposes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.data-purposes a { display: block; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.data-purposes a:hover, .data-purposes a:focus-visible { border-color: var(--secondary); }

.data-articles { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.data-articles li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.data-articles__date { flex: none; color: var(--text-muted); font-size: var(--fs-xs); font-family: var(--font-number); }

.data-note { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--fs-xs); }
.data-method h2 { margin-top: var(--space-5); }
.data-method ol, .data-method ul { padding-left: 1.4em; }
.data-method li { margin: var(--space-1) 0; }

/* ---- 2026-11-04 夜: サムネイルを大きく（オーナー指示「最重要なのはサムネイル」） ---- */
.data-chips__label { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-sub); }
.data-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.data-head .section-title { margin-bottom: 0; }
.data-head__more { flex: none; color: var(--primary); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.data-small { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-xs); text-align: right; }

.dw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-top: var(--space-3); }
@media (min-width: 900px) { .dw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dw { min-width: 0; display: flex; flex-direction: column; }
.dw__thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.dw__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.dw__thumb:hover img { transform: scale(1.04); }
.dw__no { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; font-family: var(--font-number); }
.dw__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem; font-family: var(--font-number); }
.dw__deal { position: absolute; right: 6px; top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; }
.dw__creator { margin-top: 6px; color: var(--text); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.dw__meta { display: flex; gap: var(--space-2); margin: 2px 0 0; color: var(--text-sub); font-size: var(--fs-xs); }
.dw__price { color: var(--text); font-family: var(--font-number); }
.dw__price s { color: var(--text-muted); }
.dw__btn { margin-top: var(--space-2); width: 100%; justify-content: center; text-align: center; padding: 10px 8px; font-size: var(--fs-sm); }

.data-scroller { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-3) 0 var(--space-2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.dn { position: relative; flex: none; width: 150px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--surface-2); scroll-snap-align: start; }
@media (min-width: 641px) { .dn { width: 190px; } }
.dn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dc { flex: none; width: 150px; color: var(--text); text-decoration: none; scroll-snap-align: start; }
@media (min-width: 641px) { .dc { width: 190px; } }
.dc__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.dc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.dc:hover .dc__img img { transform: scale(1.04); }
.dc__initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3rem; color: var(--text-muted); }
.dc__name { display: block; margin-top: 6px; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc__sub, .dc__metric { display: block; color: var(--text-sub); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc__metric { color: var(--secondary); }

.data-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--primary); border-radius: 12px; color: var(--text); text-decoration: none; }
.data-banner strong { flex: 1 1 100%; font-size: var(--fs-lg); }
.data-banner span:not(.btn) { flex: 1 1 200px; color: var(--text-sub); font-size: var(--fs-sm); }
.data-chips--lg a { padding: 10px 16px; font-size: var(--fs-sm); }

.da-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-top: var(--space-3); }
@media (min-width: 900px) { .da-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.da { color: var(--text); text-decoration: none; min-width: 0; }
.da__img { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.da__img--1 { grid-template-columns: 1fr; }
.da__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.da__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-weight: 700; font-size: var(--fs-sm); line-height: 1.5; }
.da:hover .da__title { color: var(--primary); }
.da__date { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

/* PC では広く使う（ほかのページは 720px。サムネイルを大きく見せるため） */
.container.data-page { max-width: 1120px; }

/* クリエイターのカードを並べる（/creator/ など。2026-11-04） */
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-top: var(--space-3); }
@media (min-width: 560px) { .dc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dc-grid .dc { width: auto; min-width: 0; }

/* ほかのページに差し込む /data/ の欄（includes/data-sections.php） */
.data-embed { margin: var(--space-6) 0; }
.data-banner--data { margin-top: var(--space-5); background: linear-gradient(135deg, rgba(255, 46, 136, 0.14), rgba(165, 146, 255, 0.12)); }

/* ファーストビューで作品の表紙を見せる（2026-11-04 オーナー指示）: 見出しまわりを詰める */
.data-page.type-page { padding-top: var(--space-3); }
.data-h1 { font-size: var(--fs-xl); margin: 0; }
.data-lead { margin-top: var(--space-1); font-size: var(--fs-sm); }
.data-page .data-search { margin-top: var(--space-3); }
.data-page .data-search input { padding: 8px 12px; }
.data-page header + .type-section, .data-page header + .rising { margin-top: var(--space-4); padding-top: 0; }
@media (max-width: 640px) { .data-lead { display: none; } }