/* ランキング全体のレイアウト */
.piece-ranking-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.3rem 1rem 3rem;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden !important;
  width: 100%;
  box-sizing: border-box !important;
  position: relative !important;
  touch-action: pan-y pinch-zoom !important;
}

.fp-search-section {
  margin: 8px 0 24px;
}

.piece-ranking-wrapper > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.piece-ranking-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: left;
  color: #333;
  line-height: 1.2;
}

/* ===== お知らせセクション ===== */
.piabase-notices {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe4cc 100%);
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

.piabase-notices-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #e65100;
  display: flex;
  align-items: center;
  gap: 8px;
}

.piabase-notice-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.piabase-notice-item:last-child {
  margin-bottom: 0;
}

.piabase-notice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.piabase-notice-date {
  font-size: 0.85rem;
  color: #666;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.piabase-notice-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: #333;
  flex: 1;
  min-width: 200px;
}

.piabase-notice-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

.piabase-notice-content p {
  margin: 0.5em 0;
}

.piabase-notice-content p:first-child {
  margin-top: 0;
}

.piabase-notice-content p:last-child {
  margin-bottom: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .piabase-notices {
    padding: 16px;
    margin-bottom: 20px;
  }

  .piabase-notices-title {
    font-size: 1.2rem;
  }

  .piabase-notice-item {
    padding: 12px;
  }

  .piabase-notice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .piabase-notice-title {
    font-size: 1rem;
    min-width: 0;
  }

  .piabase-notice-content {
    font-size: 0.9rem;
  }
}

/* ===== 新しい検索バー ===== */
.piece-search-bar {
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow-x: hidden !important;
  width: 100%;
  box-sizing: border-box !important;
  position: relative !important;
  touch-action: pan-y pinch-zoom !important;
}

.piece-search-bar > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== 検索ローディング ===== */
.piece-search-loading {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 10000;
}

.piece-search-loading.is-visible {
  display: flex;
}

.piece-search-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.piece-search-loading__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(25, 118, 210, 0.2);
  border-top-color: #1976d2;
  animation: pieceSearchSpin 0.8s linear infinite;
}

.piece-search-loading__text {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

@keyframes pieceSearchSpin {
  to {
    transform: rotate(360deg);
  }
}


.piece-search-form {
  margin-bottom: 12px;
}

.piece-search-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.piece-search-inline-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.piece-search-more-row {
  margin-top: 10px;
}

.piece-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
  max-width: 100%;
}

.piece-search-input:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.piece-search-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  background: #6E4CD6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.piece-search-btn:hover {
  background: #4f28b2;
}

.piece-search-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.piece-filter-open-btn {
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.piece-filter-open-btn:hover {
  background: #ebebeb;
  border-color: #c2c2c2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.piece-filter-open-btn-inline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.piece-active-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(74, 108, 247, 0.1);
  color: #4a6cf7;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.piece-sort-wrapper {
  position: relative;
  display: inline-block;
}

.piece-sort-select {
  padding: 8px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sort-label {
  padding: 8px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s;
  pointer-events: none;
}

.piece-sort-wrapper:hover .sort-label {
  border-color: #999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== 絞り込みモーダル ===== */
.piece-filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.piece-filter-modal.is-open {
  display: block;
}

.piece-filter-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.piece-filter-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.piece-filter-modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.piece-filter-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.piece-filter-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  text-decoration: none;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.piece-filter-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.piece-filter-modal-body {
  padding: 20px 24px;
}

.piece-filter-group {
  margin-bottom: 16px;
}

.piece-filter-group:last-child {
  margin-bottom: 0;
}

.piece-filter-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.piece-filter-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
  max-width: 100%;
}

.piece-filter-select-inline {
  margin: 0;
}

.piece-filter-select:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.piece-search-input-modal {
  margin: 0;
}

.duration-range-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.duration-input {
  display: flex;
  gap: 6px;
  align-items: center;
}

.piece-filter-select-sm {
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
  width: 80px;
}

.duration-separator {
  color: #666;
}

.piece-filter-modal-close-row {
  padding: 0 24px 12px;
  display: flex;
  justify-content: center;
}

.piece-filter-modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: #666;
  border: none;
  border-radius: 0;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.piece-filter-modal-close-btn:hover {
  background: transparent;
  color: #333;
}

.piece-filter-modal-footer {
  padding: 14px 24px 10px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 12px;
}

.piece-filter-apply-btn {
  flex: 1;
  padding: 12px;
  background: #6E4CD6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.piece-filter-apply-btn:hover {
  background: #4f28b2;
}

.piece-filter-clear-btn {
  flex: 1;
  padding: 12px;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.piece-filter-clear-btn:hover {
  background: #ebebeb;
  border-color: #c2c2c2;
  color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .piece-search-input-wrapper {
    gap: 6px;
  }

  .piece-search-inline-filters {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .piece-search-input {
    width: 100%;
    font-size: 16px;
    padding: 10px 12px;
  }

  .piece-search-btn {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  .piece-search-controls {
    flex-direction: row;
    gap: 6px;
  }

  .piece-search-more-row {
    margin-top: 8px;
  }

  .piece-filter-open-btn {
    flex: 1;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .piece-sort-wrapper {
    flex: 1;
  }

  .piece-sort-select {
    opacity: 1;
    position: static;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    box-sizing: border-box;
  }

  .sort-label {
    display: none;
  }

  .piece-filter-modal-content {
    width: 95%;
    max-height: 84vh;
  }

  .piece-filter-modal-header {
    padding: 12px 16px 10px;
  }

  .piece-filter-modal-body {
    padding: 14px 16px 12px;
  }

  .piece-filter-group {
    margin-bottom: 12px;
  }

  .piece-filter-group label {
    margin-bottom: 5px;
  }

  .piece-filter-select,
  .piece-search-input-modal {
    padding: 9px 12px;
    font-size: 14px;
  }

  .piece-filter-select-sm {
    padding: 7px 10px;
    font-size: 14px;
    width: 74px;
  }

  .duration-range-wrapper {
    gap: 8px;
  }

  .piece-filter-modal-footer {
    padding: 12px 16px 8px;
    gap: 8px;
  }

  .piece-filter-apply-btn,
  .piece-filter-clear-btn {
    padding: 10px;
    font-size: 15px;
  }

  .piece-filter-modal-close-row {
    padding: 0 16px 10px;
  }

  .duration-range-wrapper {
    flex-wrap: wrap;
  }
}

/* テーブル全体 */
.piece-ranking-table-wrapper {
  overflow-x: auto;
}

.piece-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.piece-ranking-table thead th {
  background: #f5f5f5;
  padding: 0.6rem 0.7rem;
  border-bottom: 2px solid #ddd;
  text-align: left;
  white-space: nowrap;
}

.piece-ranking-table tbody td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #eee;
}

/* 行のストライプ */
.piece-ranking-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* ホバー時のハイライト */
.piece-ranking-table tbody tr:hover {
  background: #f0f7ff;
}

/* リンク */
.piece-ranking-table a {
  color: #1a4c8f;
  text-decoration: none;
}

.piece-ranking-table a:hover {
  text-decoration: underline;
}

/* メーター共通 */
.meter {
  position: relative;
  height: 14px;              /* ★ 高さを復活させる */
  background: #eee;          /* ★ 背景（ゲージの土台） */
  border-radius: 999px;
  overflow: hidden;          /* はみ出し防止 */
}

/* 実際に色が付くバー部分 */
.meter-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease-out;
}

/* メカニック（難易度）バーの色（デフォルト） */
.meter-diff {
  background: #c0504d;
}

/* 難易度バーの色分け */
.meter-diff.diff-high {
  /* 高難度（赤系） */
  background: #c0392b;
}

.meter-diff.diff-mid {
  /* 中程度（オレンジ系） */
  background: #e67e22;
}

.meter-diff.diff-low {
  /* 低め（青系） */
  background: #2980b9;
}

/* 表現バーの色 */
.meter-expr {
  background: #4f81bd;
}

/* メーター上の数値ラベル（中央寄せ） */
.meter-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  pointer-events: none; /* クリックを邪魔しない */
}

/* 曲詳細ページのメーターを少し高く、数字を大きく */
.piece-detail-score-meter .meter {
  height: 20px;
}

.piece-detail-score-meter .meter-label {
  font-size: 16px;
  font-weight: 700;
}

/* 総合スコア */
.score-text {
  font-weight: 700;
  font-size: 0.95rem;
}

/* スマホ向け調整 */
@media (max-width: 768px) {
  .piece-ranking-wrapper {
    padding: 1.5rem 0.5rem 2.5rem;
  }

  .piece-ranking-title,
  .fp-search-title {
    font-size: 1.6rem;
  }

  .piece-ranking-table {
    font-size: 0.8rem;
  }

  .piece-ranking-table thead th,
  .piece-ranking-table tbody td {
    padding: 0.4rem 0.5rem;
  }

  .meter {
    height: 12px;
  }

  .meter-label {
    font-size: 0.65rem;
  }
}

/* ===== 個別ページ（single-piece） ===== */

.piece-detail-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1rem 3rem;
}

.piece-detail-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.piece-detail-composer {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.3rem;
}

.piece-detail-composer a {
  color: #667eea;
  text-decoration: none;
  transition: all 0.2s;
}

.piece-detail-composer a:hover {
  color: #764ba2;
  text-decoration: underline;
}

.piece-detail-title {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1.4;
}

.piece-detail-title-en {
  font-size: 1.1rem;
  color: #999;
  font-weight: 400;
  display: block;
  margin-top: 8px;
}

.piece-detail-category {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: #555;
}

.piece-detail-section {
  margin-top: 2rem;
}

.piece-detail-section-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border-left: 4px solid #4f81bd;
  padding-left: 0.6rem;
}

.piece-detail-scores {
  margin-top: 1rem;
}

.piece-detail-score-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.piece-detail-score-label {
  font-size: 0.95rem;
  font-weight: 600;
}

.piece-detail-score-row-total {
  margin-top: 0.8rem;
}

.piece-detail-score-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.piece-detail-comment {
  font-size: 0.95rem;
  line-height: 1.7;
}

.piece-detail-body {
  margin-top: 1rem;
}

.piece-detail-footer {
  margin-top: 2.5rem;
}

.piece-detail-back-link {
  font-size: 0.9rem;
  text-decoration: none;
  color: #1a4c8f;
}

.piece-detail-back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .piece-detail-score-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

.piece-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.piece-pagination button {
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  cursor: pointer;
}

.piece-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.piece-pagination #page-info {
  white-space: nowrap;
}

.piece-pagination {
  margin-top: 1rem;
  text-align: center;
}

.piece-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: auto !important;
  min-height: unset !important;
  line-height: 1 !important;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.piece-pagination .page-numbers.dots {
  border: none !important;
  background: none !important;
  padding: 0 0.1rem;
  color: #999;
  cursor: default;
}

.piece-pagination .page-numbers.current {
  background: #4f81bd;
  color: #fff;
  border-color: #4f81bd;
}

.piece-pagination .page-numbers:hover {
  background: #f0f7ff;
}

.piece-detail-video {
  max-width: 900px;
  margin: 2rem auto;
}

.piece-detail-video-inner iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

/* ===== single-piece 追加スタイル ===== */

.piece-detail-title-ja{
  margin-top: 0.35rem;
  font-size: 1rem;
  color: #555;
}

.piece-detail-video-list{
  display: grid;
  gap: 1rem;
}

.piece-link-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
}

.piece-link-item a{
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid #cfd6df;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  color: #1a4c8f;
  background: #f8fbff;
}

.piece-link-item a:hover{
  background: #f0f7ff;
}

.pia-rating-thanks{
  margin: 0.8rem 0 1rem;
  font-weight: 700;
}

/* ===== Single piece: Responsive (SP first) ===== */
/* 追記するだけでOK。既存CSSは触らない想定 */

.piece-detail-wrapper {
  max-width: 100%;
}

/* YouTube等の埋め込みがはみ出さないように */
.piece-detail-video-inner iframe,
.piece-detail-video-inner video,
.piece-detail-video-inner embed,
.piece-detail-video-inner object {
  max-width: 100%;
}

/* Gutenberg / oEmbed も念のため */
.wp-block-embed,
.wp-block-embed__wrapper {
  max-width: 100%;
}

/* 768px以下（スマホ/タブレット） */
@media (max-width: 768px) {
  .piece-detail-wrapper {
    padding: 0 16px;
  }

  .piece-detail-header {
    margin-bottom: 16px;
  }

  .piece-detail-composer {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .piece-detail-title {
    font-size: 28px; /* 大きすぎる場合は24でもOK */
    line-height: 1.2;
    margin: 6px 0 8px;
  }

  .piece-detail-title-en {
    font-size: 0.95rem;
    margin-top: 6px;
  }

  .piece-detail-category {
    font-size: 13px;
  }

  /* セクションタイトルの余白 */
  .piece-detail-section-title {
    margin: 18px 0 10px;
  }

  /* スコア行：横並びレイアウト（ラベル左・バー右） */
  .piece-detail-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .piece-detail-score-label {
    width: auto;
    min-width: 36px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .piece-detail-score-meter {
    width: 100%;
    flex: 1;
  }

  /* メーターをスマホ向けに少し太く */
  .meter {
    position: relative;
  }

  .meter-bar {
    height: 14px;
    border-radius: 999px;
  }

  .meter-label {
    font-size: 12px;
  }

  /* 曲詳細のメーターを太くして点数を見やすく */
  .piece-detail-score-meter .meter {
    height: 26px;
  }

  .piece-detail-score-meter .meter-label {
    font-size: 15px;
    font-weight: 700;
  }

  /* 総合スコア表示 */
  .piece-detail-score-row-total {
    display: flex;
  }

  .piece-detail-score-value {
    font-size: 28px;
    margin-top: 6px;
  }

  /* YouTube：16:9で固定してSPで見やすく */
  .piece-detail-video-inner {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 12px;
  }

  .piece-detail-video-inner iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* コメント本文の横余白・文字サイズ調整 */
  .piece-detail-comment,
  .piece-detail-body {
    font-size: 15px;
    line-height: 1.8;
  }

  /* 戻るリンク：タップしやすく */
  .piece-detail-back-link {
    display: inline-block;
    padding: 10px 0;
  }
}

/* 480px以下（小さめスマホ） */
@media (max-width: 480px) {
  .piece-detail-wrapper {
    padding: 0 12px;
  }

  .piece-detail-title {
    font-size: 24px;
  }

  .piece-detail-score-value {
    font-size: 26px;
  }

  .meter-bar {
    height: 12px;
  }

  .piece-detail-comment,
  .piece-detail-body {
    font-size: 14.5px;
  }
}

/* ==========================================
   Single piece mobile optimization (追記)
   ========================================== */

/* コンテンツ幅と余白をスマホ基準に */
@media (max-width: 768px) {
  .piece-detail-wrapper {
    padding: 0 14px !important;
  }

  .piece-detail {
    max-width: 100% !important;
  }

  /* 見出し・基本情報を引き締め */
  .piece-detail-composer {
    font-size: 12px !important;
    letter-spacing: 0.06em;
    margin: 0 0 4px !important;
    opacity: 0.8;
  }

  .piece-detail-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }

  .piece-detail-title-en {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  .piece-detail-category {
    font-size: 13px !important;
    margin: 0 0 10px !important;
  }

  /* セクションの詰まり調整 */
  .piece-detail-section-title {
    font-size: 16px !important;
    margin: 18px 0 10px !important;
  }

  .piece-detail-scores,
  .piece-detail-section,
  .piece-detail-video {
    margin-top: 18px !important;
  }

  /* 管理者スコア：ラベル左・バー右の横並び */
  .piece-detail-score-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }

  .piece-detail-score-label {
    width: auto !important;
    min-width: 32px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .piece-detail-score-meter {
    width: 100% !important;
    flex: 1 !important;
  }

  /* メーターを少し太くして見やすく */
  .meter-bar {
    height: 14px !important;
    border-radius: 999px;
  }

  .meter-label {
    font-size: 12px !important;
  }

  /* 曲詳細のメーターを太くして点数を見やすく */
  .piece-detail-score-meter .meter {
    height: 26px !important;
  }

  .piece-detail-score-meter .meter-label {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* 総合スコアの視認性 */
  .piece-detail-score-row-total {
    margin-top: 14px !important;
  }

  .piece-detail-score-value {
    font-size: 26px !important;
    margin-top: 6px !important;
  }

  /* YouTube：スマホで100%幅＆16:9固定（はみ出し防止） */
  .piece-detail-video-inner {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 12px;
  }
  .piece-detail-video-inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* コメント本文：スマホで読みやすく */
  .piece-detail-comment,
  .piece-detail-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  /* ======================================
     ユーザー印象（スライダー）をスマホ向けに
     ※ class名が不明でも効きやすいように広めに当てる
     ====================================== */

  /* 印象エリアの中の range は基本フル幅にする */
  .piece-detail-wrapper input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 8px !important;
  }

  /* ラベル＋数値が横詰まりなら縦に逃がす */
  .piece-detail-wrapper label {
    display: block;
  }

  /* 「印象を送信する」ボタン：タップしやすく */
  .piece-detail-wrapper button,
  .piece-detail-wrapper input[type="submit"] {
    width: 100% !important;
    max-width: 420px;
    /*padding: 12px 14px !important;*/
    font-size: 16px !important;
    border-radius: 10px;
  }

  /* 「技術/表現」行の余白を確保（行が詰まるのを防止） */
  .piece-detail-wrapper .pia-rating-row,
  .piece-detail-wrapper .rating-row,
  .piece-detail-wrapper .user-rating-row {
    margin: 10px 0 !important;
  }
}

/* さらに小さいスマホ */
@media (max-width: 480px) {
  .piece-detail-wrapper {
    padding: 0 12px !important;
  }

  .piece-detail-title {
    font-size: 20px !important;
  }

  .piece-detail-score-value {
    font-size: 24px !important;
  }
}

/* ==========================================
   Ranking list (page-piece-ranking) Responsive
   ========================================== */

/* ランキング全体：スマホ対応 */
@media (max-width: 768px) {
  .piece-ranking-wrapper {
    padding: 0 14px;
    overflow-x: hidden;
  }

  .piece-ranking-title,
  .fp-search-title {
    font-size: 22px;
    margin-bottom: 14px;
  }

  .piece-ranking-item,
  .piece-ranking-item-main,
  .piece-info-line {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* テーブル → スマホはカード表示に変形 */
@media (max-width: 768px) {
  .piece-ranking-table-wrapper {
    overflow: visible; /* 横スクロールを消す */
  }

  .piece-ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* カード間の隙間 */
  }

  .piece-ranking-table thead {
    display: none; /* ヘッダは隠す */
  }

  .piece-ranking-table tr {
    display: block;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px;
  }

  .piece-ranking-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
  }

  /* 左側ラベル */
  .piece-ranking-table td::before {
    content: attr(data-label);
    font-size: 12px;
    opacity: 0.75;
    flex: 0 0 5em;
  }

  /* 曲名は目立たせる */
  .piece-ranking-table td[data-label="曲名"] {
    flex-direction: column;
    align-items: flex-start;
  }

  .piece-ranking-table td[data-label="曲名"]::before {
    margin-bottom: 6px;
  }

  .piece-ranking-table td[data-label="曲名"] a {
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
  }

  /* meter はスマホで横幅いっぱいに */
  .piece-ranking-table td[data-label="技術"],
  .piece-ranking-table td[data-label="表現"] {
    flex-direction: column;
    align-items: flex-start;
  }

  .piece-ranking-table td[data-label="技術"]::before,
  .piece-ranking-table td[data-label="表現"]::before {
    margin-bottom: 6px;
  }

  .piece-ranking-table td .meter {
    width: 100%;
  }

  .piece-ranking-table td .meter-bar {
    height: 12px;
    border-radius: 999px;
  }

  .piece-ranking-table td .meter-label {
    font-size: 12px;
  }

  /* 総合スコアは右寄せで視認性UP */
  .piece-ranking-table .score-text {
    font-size: 18px;
    font-weight: 700;
  }
}

/* さらに小さめ端末 */
@media (max-width: 480px) {
  .piece-ranking-wrapper {
    padding: 0 12px;
  }

  .piece-ranking-table tr {
    padding: 10px;
  }

  .piece-ranking-table td::before {
    flex-basis: 4.5em;
  }
}

/* ==========================================
   Ranking card tuning (SP)
   ========================================== */
@media (max-width: 768px) {
  /* カード全体を少し締める */
  .piece-ranking-table {
    border-spacing: 0 12px;
  }

  .piece-ranking-table tr {
    padding: 14px 14px 12px;
    border-radius: 14px;
  }

  /* 各行の余白を減らして読みやすく */
  .piece-ranking-table td {
    padding: 6px 0;
    gap: 10px;
  }

  /* 左ラベル（順位/作曲家/技術…）を読みやすく */
  .piece-ranking-table td::before {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    flex: 0 0 4.2em; /* ラベル列を少し細くして右側を広げる */
  }

  /* 右側の値（作曲家名・順位など） */
  .piece-ranking-table td {
    font-size: 15px;
  }

  /* 曲名：カードの主役にする */
  .piece-ranking-table td[data-label="曲名"] {
    padding-top: 4px;
    padding-bottom: 10px;
  }

  .piece-ranking-table td[data-label="曲名"] a {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
  }

  /* 曲名の“左ラベル”は少し小さくでOK */
  .piece-ranking-table td[data-label="曲名"]::before {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
    margin-bottom: 6px;
  }

  /* 技術・表現：間延びしてたのを詰める */
  .piece-ranking-table td[data-label="技術"],
  .piece-ranking-table td[data-label="表現"] {
    padding-top: 2px;
    padding-bottom: 8px;
  }

  .piece-ranking-table td[data-label="技術"]::before,
  .piece-ranking-table td[data-label="表現"]::before {
    margin-bottom: 4px;
  }

  /* meter：太さ＆数値の視認性アップ */
  .piece-ranking-table td .meter {
    width: 100%;
  }

  .piece-ranking-table td .meter-bar {
    height: 14px;
  }

  .piece-ranking-table td .meter-label {
    font-size: 12px;
    font-weight: 700;
  }

  /* 総合：右寄せで強調（“締まって見える”） */
  .piece-ranking-table td[data-label="総合"] {
    align-items: baseline;
    padding-top: 10px;
  }

  .piece-ranking-table td[data-label="総合"]::before {
    font-size: 13px;
    opacity: 0.85;
  }

  .piece-ranking-table .score-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  /* 順位は小さくても良いけど、見失わないよう太字 */
  .piece-ranking-table td[data-label="順位"] {
    font-weight: 700;
  }
}

/* 小さめスマホはさらに微調整 */
@media (max-width: 480px) {
  .piece-ranking-table tr {
    padding: 12px;
  }

  .piece-ranking-table td::before {
    flex-basis: 3.8em;
    font-size: 12.5px;
  }

  .piece-ranking-table td {
    font-size: 14.5px;
  }

  .piece-ranking-table td[data-label="曲名"] a {
    font-size: 16px;
  }

  .piece-ranking-table .score-text {
    font-size: 21px;
  }
}

/* ==========================================
   Ranking card: Feminine / Elegant (SP)
   ========================================== */
@media (max-width: 768px) {
  /* 全体の余白を少し増やして“上品”に */
  .piece-ranking-wrapper {
    padding: 0 14px;
  }

  /* カードを柔らかく（角丸＋薄い影） */
  .piece-ranking-table {
    border-spacing: 0 14px;
  }

  .piece-ranking-table tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  }

  /* 行の見た目を“項目一覧”じゃなく“カード情報”っぽく */
  .piece-ranking-table td {
    padding: 6px 0;
    gap: 8px;
  }

  /* 左ラベルを極力消して“スッキリ”させる（女性向け） */
  .piece-ranking-table td::before {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.55;
    flex: 0 0 auto;
    margin-right: 8px;
  }

  /* ① 曲名：主役（大きく、2行までで綺麗に） */
  .piece-ranking-table td[data-label="曲名"] {
    padding-top: 2px;
    padding-bottom: 10px;
  }

  .piece-ranking-table td[data-label="曲名"]::before {
    display: none; /* 「曲名」ラベルを消す */
  }

  .piece-ranking-table td[data-label="曲名"] a {
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* 2行まで */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-decoration: none;
    word-break: break-word;
  }

  /* ② 順位＋作曲家：小さな“タグ”風にまとめて控えめに */
  .piece-ranking-table td[data-label="順位"],
  .piece-ranking-table td[data-label="作曲家"] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    margin: 0 10px 8px 0;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
  }

  /* タグ風（やりすぎない程度） */
  .piece-ranking-table td[data-label="順位"] {
    background: rgba(0,0,0,0.035);
    border-radius: 999px;
    padding: 6px 10px;
  }
  .piece-ranking-table td[data-label="作曲家"] {
    background: rgba(0,0,0,0.03);
    border-radius: 999px;
    padding: 6px 10px;
  }

  /* タグはラベル文字を消す（順位/作曲家の左ラベル不要） */
  .piece-ranking-table td[data-label="順位"]::before,
  .piece-ranking-table td[data-label="作曲家"]::before {
    display: none;
  }

  /* ③ 技術/表現：見やすく短く、ラベルは控えめ */
  .piece-ranking-table td[data-label="技術"],
  .piece-ranking-table td[data-label="表現"] {
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .piece-ranking-table td[data-label="技術"]::before,
  .piece-ranking-table td[data-label="表現"]::before {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
  }

  .piece-ranking-table td[data-label="技術"],
  .piece-ranking-table td[data-label="表現"] {
    flex-direction: column;
    align-items: flex-start;
  }

  .piece-ranking-table td .meter {
    width: 100%;
  }

  .piece-ranking-table td .meter-bar {
    height: 12px;
    border-radius: 999px;
  }

  /* 数値は小さめで上品に */
  .piece-ranking-table td .meter-label {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
  }

  /* ④ 総合：主役（右下に大きく“締め”） */
  .piece-ranking-table td[data-label="総合"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 8px;
  }

  .piece-ranking-table td[data-label="総合"]::before {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
  }

  .piece-ranking-table .score-text {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.02em;
  }
}

/* 小さめスマホ */
@media (max-width: 480px) {
  .piece-ranking-table tr {
    padding: 12px 12px 10px;
    border-radius: 14px;
  }

  .piece-ranking-table td[data-label="曲名"] a {
    font-size: 17px;
  }

  .piece-ranking-table .score-text {
    font-size: 23px;
  }
}

/* ==========================================
   Single: User rating list (Tabelog-ish)
   ========================================== */
.pia-rating-list {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  background: #fff;
}

.pia-rating-list-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 10px;
}

.pia-rating-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pia-rating-item {
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.05);
}

.pia-rating-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pia-rating-user {
  font-weight: 800;
  font-size: 14px;
}

.pia-rating-date {
  font-size: 12px;
  opacity: 0.7;
  white-space: nowrap;
}

.pia-rating-item-scores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pia-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.pia-rating-more {
  margin-top: 10px;
  text-align: right;
}
.pia-rating-more-link {
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 480px) {
  .pia-rating-list { padding: 12px; }
  .pia-rating-item { padding: 10px; }
}

/* ===== User comment input ===== */
.pia-comment-row { margin-top: 12px; }
.pia-comment-row label { display:block; font-weight:700; margin-bottom:6px; }
.pia-comment-row textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  background: #fff;
}
.pia-comment-help {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
  text-align: right;
}

/* ==========================================
   CRITICAL MOBILE FIXES (強制適用)
   ========================================== */

/* スマホで基本レイアウトを強制的に調整 */
@media (max-width: 768px) {
  /* ページ全体の余白を調整 */
  .piece-ranking-wrapper,
  .piece-detail-wrapper {
    padding: 16px 12px !important;
    max-width: 100% !important;
  }

  /* タイトルサイズ調整 */
  .piece-ranking-title,
  .fp-search-title,
  .piece-detail-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  .piece-detail-title-en {
    font-size: 14px !important;
    margin-top: 6px !important;
  }

  .piece-detail-composer {
    font-size: 13px !important;
  }

  .piece-detail-category {
    font-size: 14px !important;
  }

  /* セクションタイトル */
  .piece-detail-section-title {
    font-size: 18px !important;
    margin: 1px 0 1px !important;
  }

  /* ボタン全般を大きく */
  button,
  .pia-flag-btn,
  .piece-rate-button,
  .pia-submit {
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }

  /* リンクもタップしやすく */
  a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* テーブルを完全にカード型に変換（強制） */
@media (max-width: 768px) {
  .piece-ranking-table-wrapper {
    overflow: visible !important;
  }

  .piece-ranking-table {
    display: block !important;
    width: 100% !important;
  }

  .piece-ranking-table thead {
    display: none !important;
  }

  .piece-ranking-table tbody {
    display: block !important;
  }

  .piece-ranking-table tr {
    display: block !important;
    margin-bottom: 16px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  .piece-ranking-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border: none !important;
    font-size: 15px !important;
  }

  /* data-labelを表示 */
  .piece-ranking-table td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #666 !important;
    min-width: 80px !important;
  }

  /* 曲名セルは特別扱い */
  .piece-ranking-table td[data-label="曲名"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .piece-ranking-table td[data-label="曲名"]::before {
    margin-bottom: 8px !important;
  }

  .piece-ranking-table td[data-label="曲名"] a {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1976d2 !important;
  }

  /* 技術・表現も縦積み */
  .piece-ranking-table td[data-label="技術"],
  .piece-ranking-table td[data-label="表現"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .piece-ranking-table td[data-label="技術"]::before,
  .piece-ranking-table td[data-label="表現"]::before {
    margin-bottom: 6px !important;
  }

  .piece-ranking-table td .meter {
    width: 100% !important;
    height: 16px !important;
  }

  .piece-ranking-table td .meter-label {
    font-size: 13px !important;
  }

  /* 総合スコアを目立たせる */
  .piece-ranking-table td[data-label="総合"] {
    border-top: 2px solid #e0e0e0 !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
  }

  .piece-ranking-table .score-text {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1976d2 !important;
  }

  /* クイックフラグボタン */
  .pia-quick-flags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .pia-quick-btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
  }

  /* ステータスカウント */
  .pia-status-counts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }

  .pia-count {
    font-size: 13px !important;
    padding: 4px 8px !important;
  }
}

/* ===== YouTube 横スクロール ===== */
.piece-detail-video-list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 4px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.piece-detail-video-inner {
  flex: 0 0 85%;
  max-width: 85%;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  background: #000;
}

/* iframe 比率維持（16:9） */
.piece-detail-video-inner iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* PCでは少し小さめ */
@media (min-width: 769px) {
  .piece-detail-video-inner {
    flex: 0 0 48%;
    max-width: 48%;
  }
}

/* 自分の印象をハイライト */
.pia-rating-item.is-mine {
  border: 2px solid rgba(30, 120, 255, 0.35);
  background: rgba(30, 120, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.pia-mine-badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(30, 120, 255, 0.12);
  border: 1px solid rgba(30, 120, 255, 0.25);
}

.pia-growth-mini{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}
.pia-growth-mini-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-weight:700;
}
.pia-growth-mini-label{
  opacity:.75;
  font-weight:800;
}
.pia-growth-mini-sub{
  margin-top:6px;
  font-size: 12px;
  opacity:.75;
}

.mypage-growth-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.mypage-growth-item{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.mypage-growth-head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.mypage-growth-title{ font-weight:800; text-decoration:none; }
.mypage-growth-date{ font-size:12px; opacity:.7; }
.mypage-growth-scores{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

.pia-rating-row.is-current-user{
  border: 2px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

.pia-video-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
}

.pia-video-card{
  flex: 0 0 85%;
  max-width: 85%;
}

/* =========================
   みんなの印象 / あなたの印象（新UI）
========================= */

.pia-ratings-list {
  margin-top: 14px;
}

.pia-rating-row {
  padding: 12px 0;
  border-top: 1px solid #eee;
}

.pia-rating-row:first-child {
  border-top: none;
}

.pia-rating-row.is-current-user {
  background: rgba(255, 192, 203, 0.15); /* うっすらピンク */
  border-radius: 10px;
  padding: 12px 10px;
}

.pia-rating-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.pia-rating-user {
  font-weight: 700;
  font-size: 15px;
}

.pia-rating-date {
  font-size: 12px;
  opacity: 0.7;
}

.pia-rating-scores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 6px;
}

.pia-rating-score {
  font-size: 14px;
  line-height: 1.5;
}

.pia-rating-comment {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* フォーム部分 */
.pia-rating-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.pia-rating-form label {
  font-size: 14px;
  font-weight: 700;
}

.pia-rating-form input[type="range"] {
  width: 220px;
  max-width: 60vw;
}

.pia-rating-form textarea {
  width: 100%;
  max-width: 620px;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.pia-rating-form button,
.pia-rating-form input[type="submit"] {
  margin-top: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: #ff6ea8;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* =========================
   PiaBase flags (favorite/played/want)
========================= */
.pia-flags {
  margin: 22px 0;
}

.pia-flags-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pia-flag-form {
  margin: 0;
}

.pia-flag-btn {
  appearance: none;
  border: 1px solid #e7e7e7;
  background: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease;
}

.pia-flag-btn:active {
  transform: translateY(1px);
}

.pia-flag-btn.is-on {
  background: rgba(255, 110, 168, 0.14);
  border-color: rgba(255, 110, 168, 0.35);
  box-shadow: 0 4px 14px rgba(255, 110, 168, 0.18);
}

.pia-flag-btn.is-off:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.pia-flags-login {
  margin-top: 10px;
  opacity: .85;
}

/* =========================
   My Page
========================= */
.mypage-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 16px;
}

.mypage-header {
  margin-bottom: 14px;
}

.mypage-title {
  font-size: 26px;
  margin: 0 0 6px;
}

.mypage-subtitle {
  margin: 0;
  opacity: .75;
}

.mypage-section {
  margin: 18px 0 26px;
}

.mypage-section-title {
  font-size: 18px;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 4px solid rgba(0, 0, 0, 0.12);
}

.mypage-profile-box {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.mypage-profile-name {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}

.mypage-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  opacity: .85;
  font-size: 14px;
}

.mypage-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 8px;
}

.mypage-tab {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #eee;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
}

.mypage-tab:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.mypage-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mypage-card {
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: all 0.2s;
}

.mypage-card:hover {
  border-color: #1976d2;
}

.mypage-card-link {
  display: block;
  text-decoration: none;
  color: #1976d2;
  padding: 12px 12px;
  transition: all 0.2s;
}

.mypage-card-link:hover {
  color: #764ba2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.mypage-card-composer {
  font-size: 12px;
  letter-spacing: .06em;
  color: #666;
  margin-bottom: 6px;
}

.mypage-card-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 6px;
  color: inherit;
}

.mypage-card-category {
  font-size: 12px;
  opacity: .75;
}

.mypage-empty {
  opacity: .75;
  background: rgba(0,0,0,0.03);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,0.08);
}

.mypage-login-link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 110, 168, 0.14);
  border: 1px solid rgba(255, 110, 168, 0.35);
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 640px) {
  .mypage-cards {
    grid-template-columns: 1fr;
  }
}


/* ===== ランキング一覧：クイック更新ボタン ===== */
.pia-quick-flags{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pia-quick-form{
  display: inline-block;
  margin: 0;
}

.pia-quick-btn{
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

/* メッセージ（既存JSで使う） */
.pia-flags-message{
  margin: 10px 0 0;
  font-size: 13px;
}
.pia-flags-message.is-success{ opacity: 0.95; }
.pia-flags-message.is-error{ opacity: 0.95; }

/* 検索結果件数 */
.piece-ranking-result-count {
  margin: 24px 0 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: 8px;
  font-size: 1rem;
  color: #333;
}

.piece-ranking-result-count strong {
  color: #667eea;
  font-weight: 700;
  font-size: 1.1em;
}

@media (max-width: 768px) {
  .piece-ranking-result-count {
    margin: 16px 0 12px;
    padding: 10px 14px;
    font-size: 0.95rem;
  }
}

/* ==========================================
   新しいリスト形式のスタイル
   ========================================== */
.piece-ranking-list-wrapper {
  margin-top: 16px;
}

.piece-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.piece-ranking-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s;
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box !important;
  max-width: 100%;
  width: 100%;
  overflow-x: hidden !important;
  position: relative !important;
  touch-action: pan-y pinch-zoom !important;
}

.piece-ranking-item > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.piece-ranking-item:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.piece-ranking-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

/* 情報行（作曲家：曲名 演奏時間） */
.piece-info-line {
  display: block;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* スコア行（Mec, Exp, TS） */
.piece-scores-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.piece-scores-line.badges {
  gap: 10px;
}

.piece-scores-line .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.06);
}

.piece-scores-line .badge .k {
  opacity: 0.95;
}

.piece-scores-line .badge .v {
  font-variant-numeric: tabular-nums;
}

.piece-scores-line .b-total {
  background: #EFE8F8;
  color: #6E5A9E;
  border-color: rgba(110,90,158,0.22);
}

.piece-scores-line .b-tech {
  background: #F5E6E2;
  color: #A05544;
  border-color: rgba(160,85,68,0.22);
}

.piece-scores-line .b-exp {
  background: #E6EEF6;
  color: #4F6F91;
  border-color: rgba(79,111,145,0.22);
}

/* 作曲家リンク */
.piece-composer-link,
.piece-composer-name {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}

.piece-composer-link:hover {
  color: #1976d2;
  text-decoration: underline;
}

/* セパレータ */
.piece-separator {
  color: #999;
  margin: 0 2px;
  font-size: 17px;
}

/* 曲名リンク */
.piece-title-link {
  color: #1976d2;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
}

.piece-title-link:hover {
  text-decoration: underline;
}

/* 英語タイトル */
.piece-title-en {
  color: #666;
  font-size: 14px;
}

/* 曲種 */
.piece-category {
  color: #999;
  font-size: 13px;
}

/* 演奏時間 */
.piece-duration {
  color: #999;
  font-size: 13px;
  margin-left: 10px;
}

@media (min-width: 769px) {
  .piece-title-link::after {
    content: "";
    display: block;
    height: 0;
  }

  .piece-category,
  .piece-duration {
    display: inline-block;
    margin-top: 4px;
  }
}

/* 技術スコア */
.piece-score-mech {
  display: inline-block;
  padding: 4px 10px;
  background: #c0504d;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
}

/* 表現スコア */
.piece-score-expr {
  display: inline-block;
  padding: 4px 10px;
  background: #4f81bd;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
}

/* 総合スコア（TS） */
.piece-score-total {
  display: inline-block;
  padding: 4px 10px;
  background: #9b59b6;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
}

/* お気に入りボタン */
.piece-ranking-favorite-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.15s ease;
  padding: 0;
}

.piece-ranking-favorite-btn:hover {
  transform: scale(1.1);
}

.piece-ranking-favorite-btn:active {
  transform: scale(0.95);
}

.piece-ranking-favorite-btn.is-off .favorite-icon {
  color: #ccc;
}

.piece-ranking-favorite-btn.is-off:hover .favorite-icon {
  color: #ff6ea8;
}

.piece-ranking-favorite-btn.is-on .favorite-icon {
  color: #ff6ea8;
  font-size: 24px;
}

.piece-ranking-favorite-btn .favorite-icon {
  display: block;
  line-height: 1;
  font-size: 24px;
  transition: color 0.2s ease;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .piece-ranking-item {
    font-size: 14px;
    padding: 12px 14px;
  }

  .piece-info-line {
    font-size: 14px;
  }

  .piece-composer-link,
  .piece-composer-name {
    font-size: 16px;
  }

  .piece-separator {
    font-size: 16px;
  }

  .piece-title-link {
    font-size: 16px;
  }

  .piece-title-en {
    font-size: 13px;
  }

  .piece-scores-line {
    gap: 6px;
  }

  .piece-score-mech,
  .piece-score-expr,
  .piece-score-total {
    font-size: 12px;
    padding: 4px 8px;
  }

  .piece-ranking-favorite-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

}