Add: ボイボ寮キャラクターの呼称表

src/components/layout.scss

@@ -841,3 +841,220 @@ $dropdown-item-active-background-color: $primary;
     opacity: 1;
   }
 }
+
+$call-names-border: 1px solid gray;
+$call-names-cell-height: 80px;
+$call-names-cell-width: 150px;
+$call-names-cell-width-column: 180px;
+
+.call-names-wrapper {
+  // sticky にするために明示的に高さを指定
+  height: calc(100vh - 52px /* navbar の高さ */);
+  overflow: auto;
+
+  section {
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: max-content;
+    padding: 20px;
+  }
+
+  // キャラの呼称表
+  .call-names {
+    width: auto;
+
+    table {
+      width: 100%;
+      padding: 0;
+      margin: 0 auto;
+      border-collapse: separate;
+      table-layout: fixed;
+      border: none;
+    }
+
+    th {
+      position: sticky;
+      top: 0;
+      left: 0;
+    }
+
+    th,
+    td {
+      height: $call-names-cell-height;
+      width: $call-names-cell-width;
+      padding: 5px;
+
+      // FIXME:
+      // `table td:not([align]), table th:not([align])`セレクター によって
+      // text-align: inherit になっている
+      text-align: center !important;
+
+      vertical-align: middle;
+      border: none;
+
+      &.you {
+        border-left: $call-names-border;
+      }
+    }
+
+    // はみ出すときは省略して表示, ホバーで全文表示
+    td {
+      cursor: pointer;
+
+      div {
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+
+        p {
+          height: 100%;
+          width: 100%;
+
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          &:hover {
+            // NOTE: ちらつくので border ではなく outline
+            outline: 2px solid;
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+
+    thead > tr {
+      th {
+        background: white;
+        border-bottom: $call-names-border;
+
+        &.origin {
+          width: $call-names-cell-width-column;
+          z-index: 1;
+          border-right: $call-names-border;
+        }
+
+        a {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          text-align: center;
+          justify-content: center;
+          align-items: center;
+
+          p {
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        @include mobile {
+          &.origin {
+            width: 100px;
+          }
+        }
+      }
+    }
+
+    tbody > tr {
+      th {
+        border-right: $call-names-border;
+        width: $call-names-cell-width-column;
+
+        a {
+          display: flex;
+          gap: 20px;
+          text-align: center;
+          justify-content: flex-start;
+          align-items: center;
+
+          // キャラクター名
+          p {
+            width: calc($call-names-cell-width-column - 50px);
+            white-space: normal;
+            text-align: left;
+            justify-content: flex-end;
+          }
+        }
+
+        &:hover {
+          a p {
+            text-decoration: underline;
+          }
+        }
+
+        @include mobile {
+          width: 100px;
+          a {
+            justify-content: center;
+            p {
+              display: none;
+            }
+          }
+        }
+      }
+
+      td {
+        p {
+          user-select: all;
+
+          &.me,
+          &.unknown {
+            color: gray;
+          }
+        }
+
+        &:has(.unknown) {
+          cursor: not-allowed;
+
+          p {
+            outline: none;
+            user-select: none;
+          }
+        }
+
+        &:has(.me) {
+          background: white;
+        }
+      }
+    }
+
+    .origin {
+      padding: 0;
+
+      p {
+        font-weight: normal;
+
+        &:nth-child(1) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          padding: 10px;
+        }
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 10px;
+        }
+      }
+
+      div {
+        height: 100%;
+        width: 100%;
+        // workaround: 斜線の描画
+        background: linear-gradient(
+          to right top,
+          transparent calc(50% - 0.5px),
+          gray 50%,
+          gray calc(50% + 0.5px),
+          transparent calc(50% + 1px)
+        );
+      }
+    }
+  }
+}