/* =====================================================================
   v231 — 전투필드 폭을 5장 기준으로 축소 + 숨김 스크롤 유지

   목적
   1) v230에서 화면 전체로 넓어진 우측 전투영역을 다시 축소한다.
   2) 우측 전투필드는 카드 5장이 딱 들어가는 폭만 확보한다.
   3) 핸드 카드와 전투필드 카드 크기는 동일하게 유지한다.
   4) 세로 스크롤은 유지하되 스크롤바는 계속 숨긴다.
   ===================================================================== */
@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview){
    --v231-field-gap:2px;
    --v231-left-col-w:401px;
    /* 5장의 동일 카드 + 4개의 2px 간격 + lane padding 16px + board padding 12px + 여유 1px */
    --v231-battle-col-w:685px;
    --v231-app-w:1094px;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .app,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .app[style]{
    display:grid!important;
    grid-template-columns:var(--v231-left-col-w) var(--v231-battle-col-w)!important;
    column-gap:0!important;
    gap:0!important;
    width:var(--v231-app-w)!important;
    min-width:var(--v231-app-w)!important;
    max-width:var(--v231-app-w)!important;
    height:100vh!important;
    min-height:720px!important;
    margin:0!important;
    padding:4px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel{
    width:var(--v231-battle-col-w)!important;
    min-width:var(--v231-battle-col-w)!important;
    max-width:var(--v231-battle-col-w)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:calc(100vh - 8px)!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .boardwrap{
    position:relative!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:8px 6px 20px!important;
    gap:6px!important;
    overflow:visible!important;
    box-sizing:border-box!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>.hq-battle-row,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.hq-defense-lane,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.enemy-hq-row,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.ally-hq-row,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>#enemyBaseDefenseLane,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>#allyBaseDefenseLane,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout>.board>.lane[data-row]{
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  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,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot{
    flex:0 0 var(--v216-card-w,129.789px)!important;
    width:var(--v216-card-w,129.789px)!important;
    min-width:var(--v216-card-w,129.789px)!important;
    max-width:var(--v216-card-w,129.789px)!important;
    height:var(--v216-card-h,201.894px)!important;
    min-height:var(--v216-card-h,201.894px)!important;
    max-height:var(--v216-card-h,201.894px)!important;
    aspect-ratio:2.7 / 4.2!important;
    box-sizing:border-box!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slots,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-battlefield-grid{
    display:grid!important;
    height:var(--v216-card-h,201.894px)!important;
    min-height:var(--v216-card-h,201.894px)!important;
    max-height:var(--v216-card-h,201.894px)!important;
    padding:0!important;
    gap:var(--v231-field-gap)!important;
    justify-content:center!important;
    justify-items:center!important;
    align-items:stretch!important;
    align-content:stretch!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slots.n5,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-battlefield-grid{
    grid-template-columns:repeat(5,var(--v216-card-w,129.789px))!important;
    width:calc((var(--v216-card-w,129.789px) * 5) + (var(--v231-field-gap) * 4))!important;
    min-width:calc((var(--v216-card-w,129.789px) * 5) + (var(--v231-field-gap) * 4))!important;
    max-width:calc((var(--v216-card-w,129.789px) * 5) + (var(--v231-field-gap) * 4))!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slots.n4{
    grid-template-columns:repeat(4,var(--v216-card-w,129.789px))!important;
    width:calc((var(--v216-card-w,129.789px) * 4) + (var(--v231-field-gap) * 3))!important;
    min-width:calc((var(--v216-card-w,129.789px) * 4) + (var(--v231-field-gap) * 3))!important;
    max-width:calc((var(--v216-card-w,129.789px) * 4) + (var(--v231-field-gap) * 3))!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slots.n3{
    grid-template-columns:repeat(3,var(--v216-card-w,129.789px))!important;
    width:calc((var(--v216-card-w,129.789px) * 3) + (var(--v231-field-gap) * 2))!important;
    min-width:calc((var(--v216-card-w,129.789px) * 3) + (var(--v231-field-gap) * 2))!important;
    max-width:calc((var(--v216-card-w,129.789px) * 3) + (var(--v231-field-gap) * 2))!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slots.n2{
    grid-template-columns:repeat(2,var(--v216-card-w,129.789px))!important;
    width:calc((var(--v216-card-w,129.789px) * 2) + var(--v231-field-gap))!important;
    min-width:calc((var(--v216-card-w,129.789px) * 2) + var(--v231-field-gap))!important;
    max-width:calc((var(--v216-card-w,129.789px) * 2) + var(--v231-field-gap))!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slot,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot{
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  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,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot>.base-unit{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    box-sizing:border-box!important;
  }
}