/* =====================================================================
   v226 — 카드 헤더, 전투열, 아이템 수치, 연출 화면 보정
   ===================================================================== */

/* 1) 핸드 카드의 종류/이름 순서를 전투필드와 동일하게 고정한다.
   game.css의 오래된 grid-column 규칙이 핸드 이름을 첫 칸으로 보내던 문제 보정. */
#hand.hand .card .card-title-area>.card-kind-ribbon,
.mobile-hand-mount #hand.hand .card .card-title-area>.card-kind-ribbon{
  grid-column:1!important;
  grid-row:1!important;
  order:0!important;
}
#hand.hand .card .card-title-area>.card-name-text,
.mobile-hand-mount #hand.hand .card .card-title-area>.card-name-text{
  grid-column:2!important;
  grid-row:1!important;
  order:1!important;
}

/* 2) PC 전투열 오른쪽 테두리가 잘리지 않도록 표시 여유를 확보한다. */
@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview) .app,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .app[style]{
    grid-template-columns:401px minmax(838px,1fr)!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel{
    box-sizing:border-box!important;
    padding-right:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .boardwrap{
    box-sizing:border-box!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:visible!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.lane,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.river{
    box-sizing:border-box!important;
  }
}

/* 3) 아이템은 공격/방어/체력 증가값만 0, +2, +3 형식으로 표시한다. */
#hand.hand .card.item-stat-card{
  grid-template-rows:var(--v226-card-head,25.2px) minmax(0,1fr) 31px!important;
}
#hand.hand .card.item-stat-card .cstats{
  display:block!important;
  min-height:31px!important;
  height:31px!important;
  max-height:31px!important;
}
#hand.hand .card.item-stat-card .card-stat-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:100%!important;
}
#hand.hand .card.item-stat-card .item-bonus-cell b{
  display:block!important;
  font-size:19px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}

/* 4) 실제 카드 연출 화면을 관리자 미리보기 프레임과 같은 320 × 170 크기로 표시. */
@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-body{
    box-sizing:border-box!important;
    height:212px!important;
    min-height:212px!important;
    max-height:212px!important;
    padding:6px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-card.action-view-mode{
    grid-template-columns:320px!important;
    grid-template-rows:24px 170px!important;
    justify-content:center!important;
    align-content:start!important;
    gap:5px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-stage{
    box-sizing:border-box!important;
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
    height:170px!important;
    min-height:170px!important;
    max-height:170px!important;
    justify-self:center!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-stage>.hq-card-scene.left-effect-preview-scene{
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
    height:170px!important;
    min-height:170px!important;
    max-height:170px!important;
  }
}

/* 5) 개별 연출 설정은 프레임 위의 '실제 본진 크기 미리보기' 제목 박스를 표시하지 않는다. */
#batchSettingsModal[data-settings-mode="individual"] .event-image-setting .event-hq-preview-frame>.hq-title,
#batchSettingsModal[data-settings-mode="individual"] .event-image-setting .event-hq-preview-frame>.hq-subtitle{
  display:none!important;
}

/* 6) 카드 종류·이름 글씨 확대, 상단 이름표시 칸 5% 확대(24px → 25.2px). */
:root{--v226-card-head:25.2px}
#hand.hand .card .card-title-area,
.mobile-hand-mount #hand.hand .card .card-title-area,
.battlefield-layout .unit .card-title-area{
  grid-template-columns:36px minmax(0,1fr)!important;
  height:var(--v226-card-head)!important;
  min-height:var(--v226-card-head)!important;
  max-height:var(--v226-card-head)!important;
}
#hand.hand .card .card-kind-ribbon,
.mobile-hand-mount #hand.hand .card .card-kind-ribbon,
.battlefield-layout .unit .card-kind-ribbon{
  min-width:36px!important;
  font-size:9px!important;
}
#hand.hand .card .card-name-text,
.mobile-hand-mount #hand.hand .card .card-name-text,
.battlefield-layout .unit .field-unit-name{
  font-size:13px!important;
  letter-spacing:-.045em!important;
}

@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand .card,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slot>.unit,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot>.unit{
    grid-template-rows:var(--v226-card-head) minmax(0,1fr) 31px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand .card.utility-card:not(.item-stat-card){
    grid-template-rows:var(--v226-card-head) minmax(0,1fr) 42px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-kind-ribbon,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .card-kind-ribbon{
    font-size:9px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-name-text,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .field-unit-name{
    font-size:13px!important;
  }
}

@media (max-width:850px){
  .mobile-hand-mount #hand.hand .card .card-title-area,
  .battlefield-layout .unit .card-title-area{
    grid-template-columns:32px minmax(0,1fr)!important;
  }
  .mobile-hand-mount #hand.hand .card .card-kind-ribbon,
  .battlefield-layout .unit .card-kind-ribbon{
    min-width:32px!important;
    font-size:8px!important;
  }
  .mobile-hand-mount #hand.hand .card .card-name-text,
  .battlefield-layout .unit .field-unit-name{
    font-size:10px!important;
  }
  .mobile-hand-mount #hand.hand .card.item-stat-card .item-bonus-cell b{
    font-size:12px!important;
  }
}

/* 높은 특이도의 이전 패치 규칙보다 우선 적용되도록 최종 확정값을 다시 선언한다. */
@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-title-area,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .card-title-area{
    grid-template-columns:36px minmax(0,1fr)!important;
    height:var(--v226-card-head)!important;
    min-height:var(--v226-card-head)!important;
    max-height:var(--v226-card-head)!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-kind-ribbon,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .card-kind-ribbon{
    grid-column:1!important;
    grid-row:1!important;
    min-width:36px!important;
    font-size:9px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-name-text,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .field-unit-name{
    grid-column:2!important;
    grid-row:1!important;
    font-size:13px!important;
    letter-spacing:-.045em!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card.item-stat-card .cstats{
    display:block!important;
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card.item-stat-card .item-bonus-cell b{
    display:block!important;
    font-size:19px!important;
    font-weight:1000!important;
    line-height:1!important;
  }
}

@media (max-width:850px){
  body #hand.hand .card .card-title-area,
  body .mobile-hand-mount #hand.hand .card .card-title-area,
  body .battlefield-layout .unit .card-title-area{
    height:var(--v226-card-head)!important;
    min-height:var(--v226-card-head)!important;
    max-height:var(--v226-card-head)!important;
  }
  body .mobile-hand-mount #hand.hand .card .card-kind-ribbon{
    grid-column:1!important;
    grid-row:1!important;
  }
  body .mobile-hand-mount #hand.hand .card .card-name-text{
    grid-column:2!important;
    grid-row:1!important;
  }
}