/* /meta/map/items.css
   Items Modal - Fantasy(B) theme (PC base)
   - 9-slice: /meta/map/img/ibox9_B
   - Layout: left 2x3 slots + pager, right detail card
*/

/* =========================================
   Theme variables
   ========================================= */
:root{
  --ibox_tl: url("/meta/map/img/ibox9_B/ibox_tl.png");
  --ibox_tr: url("/meta/map/img/ibox9_B/ibox_tr.png");
  --ibox_bl: url("/meta/map/img/ibox9_B/ibox_bl.png");
  --ibox_br: url("/meta/map/img/ibox9_B/ibox_br.png");
  --ibox_t : url("/meta/map/img/ibox9_B/ibox_t.png");
  --ibox_b : url("/meta/map/img/ibox9_B/ibox_b.png");
  --ibox_l : url("/meta/map/img/ibox9_B/ibox_l.png");
  --ibox_r : url("/meta/map/img/ibox9_B/ibox_r.png");
  --ibox_c : url("/meta/map/img/ibox9_B/ibox_c.png");

  /* 9-slice実寸 */
  --ibox-slice: 96px;   /* 角/辺の厚み */
  --ibox-center: 64px;  /* 中央タイル */

  --ibox-fg: #f3efe6;
  --ibox-muted: rgba(243,239,230,.75);
  --ibox-line: rgba(255,255,255,.18);
  --ibox-gold: rgba(255,210,120,.85);
}

/* =========================================
   Overlay base
   ========================================= */
#kmv-items-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font: 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;

  /* クリック座標の安定（transform下の要素で事故りにくい） */
  touch-action: manipulation;
}
#kmv-items-modal.is-open{ display:flex; }

#kmv-items-modal .kmv-items-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

/* =========================================
   Theme tuning（微調整はここ）
   ========================================= */
#kmv-items-modal.kmv-theme-fantasy{
  /* ✅ 枠の内側に収める安全領域 */
  --safe-x: clamp(66px, 6.8vw, 110px);
  --safe-top: clamp(64px, 6.6vw, 108px);
  --safe-bottom: clamp(96px, 9.0vw, 140px);

  /* ✅ 全体を少し下へ（上ギリギリ回避） */
  --content-shift-y: 14px;

  /* ✅ 左右カラム間の距離 */
  --col-gap: 34px;

  /* ✅ タブだけ下げる量（小さくすると上へ） */
  --tabs-drop: 34px;

  /* ✅ タブを下げた分、Bodyの上にだけ空間を作る（重要） */
  --body-top-extra: 16px; /* 14〜28で微調整（おすすめ18〜22） */

  /* ✅ ページャ：+で下へ / -で上へ（独立調整） */
  --pager-shift: 12px;

  /* ✅ 中央タイル（ibox_c）を内側起点でオフセット（右/下へ） */
  --c-shift-x: 14px; /* 右へ + */
  --c-shift-y: 12px; /* 下へ + */

  /* ✅ グラデ/発光も同じ量で動かす（質感を揃える） */
  --style-shift-x: 14px;
  --style-shift-y: 12px;

  /* レイアウト */
  --kmv-left-col: clamp(360px, 42vw, 520px);
  --kmv-right-col: clamp(320px, 38vw, 520px);

  --kmv-slot-w: clamp(160px, 18vw, 220px);
  --kmv-slot-pad: 12px;
  --kmv-slot-frame: 92px;
  --kmv-slot-icon: 84px;

  --kmv-detail-icon: 170px;
  --kmv-bar-w: 220px;

  /* =========================================
     PC: ブラウザーゲーム式 “丸ごと縮小追従”
     - パネルは基準サイズで描画（9-slice崩さない）
     - 画面が足りない時だけ scale で縮める
     ========================================= */
  --panel-w: 1040;  /* pxは後で付ける（数値） */
  --panel-h: 760;
  --pad: 48;        /* modal padding 24px * 2 */

  --vw: calc(100vw - (var(--pad) * 1px));
  --vh: calc(100vh - (var(--pad) * 1px));

  --sx: calc(var(--vw) / (var(--panel-w) * 1px));
  --sy: calc(var(--vh) / (var(--panel-h) * 1px));
  --kmv-scale: min(1, var(--sx), var(--sy));
}

/* =========================================
   Panel (9-slice)
   ========================================= */
#kmv-items-modal.kmv-theme-fantasy .kmv-items-panel{
  position: relative;

  /* ✅ 重要：常に“基準サイズ固定” → 見た目はscaleで縮める */
  width: calc(var(--panel-w) * 1px);
  height: calc(var(--panel-h) * 1px);
  max-width: none;
  max-height: none;

  display:flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ibox-fg);

  background-image:
    var(--ibox_tl),
    var(--ibox_tr),
    var(--ibox_bl),
    var(--ibox_br),
    var(--ibox_t),
    var(--ibox_b),
    var(--ibox_l),
    var(--ibox_r),
    var(--ibox_c),
    radial-gradient(1200px 700px at 20% 10%, rgba(255,240,190,.06), transparent 55%),
    radial-gradient(1000px 600px at 85% 30%, rgba(255,190,90,.07), transparent 55%);

  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat,
    no-repeat, no-repeat;

  background-size:
    var(--ibox-slice) var(--ibox-slice),
    var(--ibox-slice) var(--ibox-slice),
    var(--ibox-slice) var(--ibox-slice),
    var(--ibox-slice) var(--ibox-slice),

    calc(100% - (2 * var(--ibox-slice))) var(--ibox-slice),
    calc(100% - (2 * var(--ibox-slice))) var(--ibox-slice),

    var(--ibox-slice) calc(100% - (2 * var(--ibox-slice))),
    var(--ibox-slice) calc(100% - (2 * var(--ibox-slice))),

    var(--ibox-center) var(--ibox-center),

    cover, cover;

  /* ✅ 重要：ibox_c（9番目）と最後2つだけ“内側起点+オフセット” */
  background-position:
    left top, right top, left bottom, right bottom,
    center top, center bottom,
    left center, right center,

    /* 9: ibox_c（中央タイル） */
    calc(var(--ibox-slice) + var(--c-shift-x)) calc(var(--ibox-slice) + var(--c-shift-y)),

    /* 10-11: 発光/質感 */
    calc(50% + var(--style-shift-x)) calc(50% + var(--style-shift-y)),
    calc(50% + var(--style-shift-x)) calc(50% + var(--style-shift-y));

  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);

  /* ✅ 足りない時だけ縮小して収める */
  transform: scale(var(--kmv-scale));
  transform-origin: center center;
  will-change: transform;
}

/* =========================================
   Header
   ========================================= */
#kmv-items-modal .kmv-items-head{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap: 14px;

  /* ✅ 枠内に収める */
  padding-left: var(--safe-x);
  padding-right: var(--safe-x);
  padding-top: calc(var(--safe-top) * 0.55);

  /* ✅ ヘッダーは肥大化させない（重要） */
  padding-bottom: 8px;

  transform: translateY(var(--content-shift-y));
}

/* ✅ 「アイテムBOX」文字は画像があるので消す */
#kmv-items-modal .kmv-items-title{
  display:none !important;
}

#kmv-items-modal .kmv-items-tabs{
  display:flex;
  gap: 10px;
  margin-left: 0;
  position: relative;

  /* ✅ タブだけ確実に上げ下げ（変数） */
  transform: translateY(var(--tabs-drop)) !important;
}

#kmv-items-modal .kmv-tab{
  appearance: none;
  border: 1px solid rgba(255,210,120,.25);
  background: linear-gradient(180deg, rgba(70,45,20,.7), rgba(30,18,10,.75));
  color: rgba(243,239,230,.92);
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}
#kmv-items-modal .kmv-tab.is-active{
  border-color: rgba(255,210,120,.55);
  box-shadow: 0 0 0 2px rgba(255,210,120,.15) inset;
}

#kmv-items-modal .kmv-items-x{
  margin-left:auto;
  appearance:none;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(10,10,10,.25);
  color: var(--ibox-fg);
  width: 36px;
  height: 32px;
  border-radius: 8px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

/* =========================================
   Body layout
   ========================================= */
#kmv-items-modal .kmv-items-body{
  display:grid;
  grid-template-columns:
    minmax(360px, var(--kmv-left-col))
    minmax(320px, var(--kmv-right-col));
  gap: var(--col-gap);

  /* ✅ 枠内に収める */
  padding-left: var(--safe-x);
  padding-right: var(--safe-x);
  padding-bottom: var(--safe-bottom);

  /* ✅ タブを下げた分の“逃げ”はBody上で確保する */
  padding-top: calc(10px + var(--body-top-extra));

  transform: translateY(var(--content-shift-y));

  min-height: 0;
  align-items: start;
}

/* 左右カラム */
#kmv-items-modal .kmv-items-left,
#kmv-items-modal .kmv-items-right{
  min-height: 0;
}

/* ✅ 右カラム食い込み防止 */
#kmv-items-modal .kmv-items-right{
  padding-left: 10px;
}

/* ✅ 左カラムをflex化 → pagerが必ず下 */
#kmv-items-modal .kmv-items-left{
  display:flex;
  flex-direction: column;
}

/* section title */
#kmv-items-modal .kmv-items-section-title{
  font-weight: 900;
  margin: 6px 0 10px;
  color: rgba(243,239,230,.92);
}

/* slots grid 2x3 */
#kmv-items-modal .kmv-items-grid{
  display:grid;
  grid-template-columns: repeat(2, var(--kmv-slot-w));
  gap: 14px;
  justify-content: start;

  flex: 1;
  align-content: start;

  /* ✅ pagerに近づけすぎない最低余白 */
  padding-bottom: 12px;
}

/* slot */
#kmv-items-modal .kmv-slot{
  width: var(--kmv-slot-w);
  padding: var(--kmv-slot-pad);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(30,18,10,.55), rgba(18,10,6,.62));
  cursor: pointer;
  text-align:center;
}
#kmv-items-modal .kmv-slot.is-selected{
  border-color: rgba(255,210,120,.45);
  box-shadow: 0 0 0 2px rgba(255,210,120,.14) inset;
}
#kmv-items-modal .kmv-slot.is-empty{
  opacity: .35;
  cursor: default;
}

#kmv-items-modal .kmv-slot-frame{
  width: var(--kmv-slot-frame);
  height: var(--kmv-slot-frame);
  border-radius: 10px;
  border: 1px solid rgba(255,210,120,.22);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
}

#kmv-items-modal .kmv-slot-icon{
  width: var(--kmv-slot-icon);
  height: var(--kmv-slot-icon);
  border-radius: 10px;
  overflow:hidden;
  background: rgba(10,10,10,.25);
  display:grid;
  place-items:center;
}
#kmv-items-modal .kmv-slot-icon img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

#kmv-items-modal .kmv-slot-meta{ width: 100%; }
#kmv-items-modal .kmv-slot-name{ display:none; }
#kmv-items-modal .kmv-slot-count{
  font-weight: 900;
  font-size: 13px;
  color: rgba(243,239,230,.85);
}

/* pager */
#kmv-items-modal .kmv-items-pager{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  margin-top: auto;
  padding-top: 6px;

  /* ✅ ページャだけ独立で上下（+で下がる） */
  transform: translateY(var(--pager-shift)) !important;
}

#kmv-items-modal .kmv-page{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(243,239,230,.9);
  padding: 7px 12px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 900;
}
#kmv-items-modal .kmv-page:disabled{
  opacity: .35;
  cursor: default;
}
#kmv-items-modal.kmv-onepage .kmv-page{ opacity: .35; }

#kmv-items-modal .kmv-page-ind{
  color: rgba(243,239,230,.8);
  font-weight: 900;
}

/* =========================================
   Detail card (right)
   ========================================= */
#kmv-items-modal .kmv-detail-card{
  border-radius: 14px;
  border: 1px solid rgba(255,210,120,.18);
  background: linear-gradient(180deg, rgba(40,25,14,.45), rgba(20,12,8,.55));
  padding: 14px;
  min-height: 260px;
}

#kmv-items-modal .kmv-detail-head{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: rgba(243,239,230,.95);
  margin-bottom: 10px;
}
#kmv-items-modal .kmv-detail-star{ color: rgba(255,210,120,.85); }
#kmv-items-modal .kmv-detail-name{ font-size: 16px; }

#kmv-items-modal .kmv-detail-main{
  display:grid;
  grid-template-columns: var(--kmv-detail-icon) 1fr;
  gap: 14px;
  align-items:center;
}

#kmv-items-modal .kmv-detail-icon{
  width: var(--kmv-detail-icon);
  height: var(--kmv-detail-icon);
  border-radius: 14px;
  border: 1px solid rgba(255,210,120,.22);
  background: rgba(0,0,0,.16);
  overflow:hidden;
  display:grid;
  place-items:center;
}
#kmv-items-modal .kmv-detail-icon img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

#kmv-items-modal .kmv-detail-progress{
  flex:1;
  min-width: 0;
}
#kmv-items-modal .kmv-detail-count{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

#kmv-items-modal .kmv-bar{
  width: var(--kmv-bar-w);
  max-width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
#kmv-items-modal .kmv-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, rgba(255,220,140,.95), rgba(255,180,60,.8));
  width: 0%;
}

#kmv-items-modal .kmv-detail-desc{
  margin-top: 10px;
  color: rgba(243,239,230,.82);
  font-weight: 800;
}

#kmv-items-modal .kmv-detail-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

#kmv-items-modal .kmv-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(243,239,230,.92);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
}
#kmv-items-modal .kmv-btn:disabled{
  opacity: .35;
  cursor: default;
}
#kmv-items-modal .kmv-btn-primary{
  border-color: rgba(255,210,120,.28);
  background: linear-gradient(180deg, rgba(70,45,20,.75), rgba(30,18,10,.75));
}
/* 完成品タブだけ：右側の拡大表示の縦サイズを増やす */
#kmv-items-modal[data-kmv-tab="complete"]{
  --kmv-detail-icon-h: 300px; /* ←ここを増減（例: 240 / 280 / 320） */
}

/* もし items.css 側が別名の変数を使ってる場合の保険（両方書いとく） */
#kmv-items-modal[data-kmv-tab="complete"]{
  --kmv-detail-icon: 200px;
}

/* さらに安全策：実体にも当てる（変数が効かないCSS構造の時の保険） */
#kmv-items-modal[data-kmv-tab="complete"] .kmv-detail-icon{
  height: var(--kmv-detail-icon-h, 260px);
}
#kmv-items-modal[data-kmv-tab="complete"] .kmv-detail-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 完成品タブだけ：画像の下に 1/1 & バーを落とす */
#kmv-items-modal[data-kmv-tab="complete"] .kmv-detail-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#kmv-items-modal[data-kmv-tab="complete"] .kmv-detail-progress{
  width: min(320px, 92%);
}