/* index3_overrides.css - index3.cssの上書き用 */

/* 共通: post-style-card の余白（デスクトップ） */
:root{
  --index3-post-style-card-padding-desktop: 24px 40px 32px 40px;
  --index3-layout-bg-neutral: #f3f4f6; /* PC/モバイル共通の薄いグレー */
}

/*
  party-bar-fill の 0% 起点（左端）を、ラベル文字数に依存せず常に揃える。
  party-bar-row を grid 化し、ラベル列を固定幅にする。
*/

.party-bar-list{
  --party-box-width: 44px; /* 4文字コード(PILG等)も入る */
  --party-bar-gap: 8px;
  position: relative;
  background: transparent !important;
}

.party-bar-list::before{
  content: '';
  position: absolute;
  top: var(--party-bar-line-top, 0px);
  bottom: var(--party-bar-line-bottom, 0px);
  /* JS で party-bar-fill の左端(px)を計測し、--party-bar-zero-x に入れる */
  left: var(--party-bar-zero-x, calc(var(--party-box-width) + var(--party-bar-gap)));
  width: 1px;
  background: rgba(148, 163, 184, 0.55);
  pointer-events: none;
  z-index: 0;
}

.party-bar-list > *{
  position: relative;
  z-index: 1;
}

.party-bar-list .party-bar-row{
  display: grid;
  grid-template-columns: var(--party-box-width) 1fr;
  align-items: center;
  column-gap: var(--party-bar-gap);
}

.party-bar-list .party-box{
  width: var(--party-box-width);
  min-width: var(--party-box-width);
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* type-party-layout も party-bar-fill の起点・余白を統一（party-chart-layout と揃える見た目） */
.type-party-layout .party-bar-list{
  --party-box-width: 44px;
}

.type-party-layout .party-bar-list .party-bar-row{
  column-gap: var(--party-bar-gap);
}

/*
  余白を優先して削る（最小値まで）→ それ以降はグラフ側が縮む、の順序にする。
  - padding/gap を clamp で最小値つきに
  - flex item に min-width:0 を入れて「縮まない」問題を回避
*/

/* index3: type-party-layout */
.type-party-layout{
  background: var(--layout-bg, var(--index3-layout-bg-neutral));

  /* 余白の最小値を確保（ここまでは余白優先で削れる） */
  --tp-gap: clamp(8px, 2vw, 24px);
  --tp-pad-x: clamp(8px, 1.6vw, 16px);
  --tp-pad-y: clamp(10px, 1.9vw, 16px);
  gap: var(--tp-gap);
  padding: var(--tp-pad-y) var(--tp-pad-x);
  width: 100%;
}

/* type-card-mini を非表示（必要に応じて is-compact を付ける運用） */
.type-party-layout.is-compact .type-card-mini{
  display: none !important;
}

.type-party-layout.is-compact{
  justify-content: center;
}

.type-party-layout .type-card-mini{
  /* 表示する場合も、必要なら縮みうるように */
  flex: 0 0 auto;
}

.type-party-layout .post-style-card{
  min-width: 0;
  max-width: 100%;
  flex: 1 1 0;
}

.type-party-layout .party-bar-list{
  width: 100%;
  max-width: min(560px, 100%);
  min-width: 0;
}

/* index3: party-chart-layout（縦棒グラフ） */
.party-chart-layout{
  background: var(--layout-bg, var(--index3-layout-bg-neutral));

  --pc-gap: clamp(8px, 2vw, 24px);
  --pc-pad-x: clamp(10px, 2vw, 24px);
  --pc-pad-y: clamp(10px, 2.4vw, 24px);
  gap: var(--pc-gap);
  padding: var(--pc-pad-y) var(--pc-pad-x);
  width: 100%;
  /* アイテム数が少ない場合に余白だけで伸びないように（index3.cssのmin-height:320pxを上書き） */
  min-height: 0;
}

.party-chart-layout .party-bar-list{
  /* index3.css の min-height:240px を解除（スクロール上限max-heightは維持） */
  min-height: 0;
}

.party-chart-layout .post-style-card{
  min-width: 0;
  max-width: 100%;
  flex: 1 1 0;
}

/* type-party-layout の post-style-card 余白は party-chart-layout と完全に同一にする */
@media (min-width: 769px) {
  .type-party-layout .post-style-card,
  .party-chart-layout .post-style-card{
    padding: var(--index3-post-style-card-padding-desktop);
  }
}

.party-chart-layout .vbar-chart{
  width: 100%;
  max-width: min(560px, 100%);
  /* 余白が削れた後に詰める対象 */
  gap: clamp(4px, 1.2vw, 8px);
  padding: clamp(10px, 2vw, 16px) clamp(10px, 2vw, 16px) 0 clamp(10px, 2vw, 16px);
}

.party-chart-layout .vbar-col{
  min-width: clamp(14px, 1.8vw, 36px);
}

.party-chart-layout .vbar-label{
  width: clamp(18px, 2vw, 28px);
  height: clamp(18px, 2vw, 28px);
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
}

/* モバイルでもPC同等の枠（index3.cssの border:none 等を確実に打ち消す） */
@media (max-width: 768px) {
  .type-party-layout,
  .party-chart-layout{
    border: 2px solid var(--layout-color, #94a3b8) !important;
    border-top: 5px solid var(--layout-color, #94a3b8) !important;
    /* iOS Safari等で color-mix が未対応でも枠影が出るフォールバック */
    box-shadow: 4px 4px 0 rgba(148, 163, 184, 0.30) !important;
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--layout-color, #94a3b8) 30%, transparent) !important;
    background: var(--layout-bg, var(--index3-layout-bg-neutral)) !important;
  }
}