@charset "utf-8";

main{
    display: flex;
    min-height: 100vh;
}
header{
    background-color: #d3d3d3;
    border: 10px ridge #000000;
}
.main{
    width: 85%;
    background-color: #f5f5f5;
    text-align: left;
    border: 10px ridge #000000;
}
table{
    border:solid 2px #000000;
    border-collapse:  collapse;
}
th{
    border:solid 2px #000000;
    background-color: #d3d3d3;
}
td{
    border:solid 1px #000000;
    background-color: #f5f5f5;
}
.side{
    width: 15%;
    background-color: #f5f5f5;
    border: 10px ridge #000000;
}
footer{
    background-color: #d3d3d3;
    border: 10px ridge #000000;
}
/* --- 追加: 銘柄名ソート用（クリック可能 + 矢印表示） --- */
th[data-key="name"]{
  cursor: pointer;
  user-select: none;
  padding-right: 1.6em;
}
th[data-key="name"].sorted-asc::after{ content: " ▲"; }
th[data-key="name"].sorted-desc::after{ content: " ▼"; }
/* --- 追加: ページャ（20件超えで表示） --- */
.pager{
  margin: 10px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pager-btn{
  border: 2px solid #000000;
  background-color: #d3d3d3;
  border-radius: 6px;
  padding: 4px 10px;
}
.pager-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.pager-label{
  background-color: #f5f5f5;
  border: 1px solid #000000;
  padding: 2px 8px;
}