.chessboard,.coordinates.files{display:grid;grid-template-columns:repeat(8,60px)}.coordinates.files,.ranks{font-weight:700;font-size:18px;color:#333;text-align:center}.chessboard,.coordinates.files{grid-template-columns:repeat(8,60px)}.chessboard{grid-template-rows:repeat(8,60px);margin-bottom:20px}.chessboard>div{width:60px;height:60px;transition:background-color .3s;cursor:pointer}.chessboard>div:hover{background-color:#a4d4ff;box-shadow:0 0 8px #2cceff}.board-with-ranks span,.coordinates.files span{background-color:#deb887}.board-wrapper{display:inline-block;user-select:none;font-family:Arial,sans-serif}.coordinates.files{margin-left:27.5px;margin-bottom:5px}.board-with-ranks{display:flex;align-items:start}.chessboard,.ranks{display:grid;grid-template-rows:repeat(8,60px)}.board-with-ranks span{width:21px}.ranks{margin-right:5px;line-height:60px}.chessboard{width:480px;height:480px;border:2px solid #333}.square{width:60px;height:60px;position:relative}.white{background-color:#eeeed2}.black{background-color:#769656}.all{width:40px;height:40px;position:absolute;top:10px;left:10px;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;user-select:none}.black,.piecedisplay,.white{position:relative}.all.wp{background-image:url('Chess_plt45.svg.png')}.all.wk{background-image:url('Chess_klt45.svg.png')}.all.wq{background-image:url('Chess_qlt45.svg.png')}.all.wr{background-image:url('Chess_rlt45.svg.png')}.all.wb{background-image:url('Chess_blt45.svg.png')}.all.wn{background-image:url('Chess_nlt45.svg.png')}.all.bp{background-image:url('Chess_pdt45.svg.png')}.all.bk{background-image:url('Chess_kdt45.svg.png')}.all.bq{background-image:url('Chess_qdt45.svg.png')}.all.br{background-image:url('Chess_rdt45.svg.png')}.all.bb{background-image:url('Chess_bdt45.svg.png')}.all.bn{background-image:url('Chess_ndt45.svg.png')}.black,.white{width:60px;height:60px}
.chessboard {

    display: grid;

    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    width: 480px;
    height: 480px;
    border: 2px solid #333;
    margin-bottom: 20px;
  }
  
  .chessboard > div {
    width: 60px;
    height: 60px;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  
  /* 흰 칸 */
  .white {
    background-color: #eeeed2;
  }
  
  /* 검은 칸 */
  .black {
    background-color: #769656;
  }
  
  /* 호버 시 칸 강조 */
  .chessboard > div:hover {
    background-color: #a4d4ff; /* 연한 하늘색 강조 */
    box-shadow: 0 0 8px #2cceff;
  }
  
  /* 좌표 스타일 */
  .board-wrapper {
    display: inline-block;
    user-select: none;
    font-family: Arial, sans-serif;
  }
  
  /* 파일(a~h) 표시 (체스판 아래) */
  .coordinates.files {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    margin-left: 27.5px; /* 왼쪽 랭크 숫자 공간만큼 여유 */
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    text-align: center;
  }
  
  /* 랭크(8~1) 표시 (체스판 왼쪽) */
  .board-with-ranks {
    display: flex;
    align-items: start;
  }
  .board-with-ranks span{background-color: burlywood;width: 21px;}
  .coordinates.files span{background-color: burlywood;}
  .ranks {
    display: grid;
    grid-template-rows: repeat(8, 60px);
    margin-right: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    line-height: 60px;
    text-align: center;
  }
  
  .chessboard {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    width: 480px;
    height: 480px;
    border: 2px solid #333;
  }
  
  .square {
    width: 60px;
    height: 60px;
    position: relative;
  }
  
  .white {
    background-color: #eeeed2;
  }
  
  .black {
    background-color: #769656;
  }
  
  .all {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    user-select: none;
  }
  
  .all.wp {
    background-image: url('Chess_plt45.svg.png');
  }
  .all.wk {
    background-image: url('Chess_klt45.svg.png');
  }
  .all.wq {
    background-image: url('Chess_qlt45.svg.png');
  }
  .all.wr {
    background-image: url('Chess_rlt45.svg.png');
  }
  .all.wb {
    background-image: url('Chess_blt45.svg.png');
  }
  .all.wn {
    background-image: url('Chess_nlt45.svg.png');
  }
  
  .all.bp {
    background-image: url('Chess_pdt45.svg.png');
  }
  .all.bk {
    background-image: url('Chess_kdt45.svg.png');
  }
  .all.bq {
    background-image: url('Chess_qdt45.svg.png');
  }
  .all.br {
    background-image: url('Chess_rdt45.svg.png');
  }
  .all.bb {
    background-image: url('Chess_bdt45.svg.png');
  }
  .all.bn {
    background-image: url('Chess_ndt45.svg.png');
  }

  
  
  .white {
    position: relative;
    width: 60px;
    height: 60px;
  }
  .black {
    position: relative;
    width: 60px;
    height: 60px;
  }
  
  .piecedisplay{
    position: relative;
  }