/* layoutmaker と maker で共通のテキスト要素スタイル */

.text-element {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  user-select: none;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  z-index: 2;
  overflow: visible;
}
.text-element .el-text {
  writing-mode: vertical-rl;
  font-family: "MS PMincho", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  color: inherit;
  line-height: 1em;
  pointer-events: none;
  display: flex;
  flex-direction: row; /* vertical-rl では row = 上→下 */
  flex-wrap: nowrap;
  align-items: center;
}
.text-element .el-text .el-char {
  flex-shrink: 0;
  /* 漢字画像（CSSマスク）を縮小したときのアンチエイリアスを保つ */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.text-element .el-text .el-bonji {
  flex-shrink: 0;
  height: auto;
  display: block;
  width: 2em;
  margin-top: -0.5em;
  margin-bottom: 0.05em;
  padding: 0;
}
/* 梵字を含む要素は要素全体を上端揃えにして、梵字の上の余白を消す */
.text-element.has-bonji {
  align-items: flex-start;
}
.text-element.horizontal .el-text { writing-mode: horizontal-tb; }

/* 揃え: 縦書きの場合 align-items で上下制御 */
.text-element.align-center  { align-items: center; }
.text-element.align-left    { align-items: flex-start; }
.text-element.align-right   { align-items: flex-end; }
.text-element.align-justify { align-items: stretch; }
.text-element.align-justify .el-text {
  justify-content: space-between;
  height: 100%;
}
/* 横書きの場合 justify-content で左右制御 */
.text-element.horizontal.align-center  { justify-content: center; align-items: flex-start; }
.text-element.horizontal.align-left    { justify-content: flex-start; align-items: flex-start; }
.text-element.horizontal.align-right   { justify-content: flex-end; align-items: flex-start; }
.text-element.horizontal.align-justify { justify-content: stretch; align-items: flex-start; }
.text-element.horizontal.align-justify .el-text {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

/* maker.html プレビュー専用: 茶色系の位牌で金文字が見にくいので、
   文字と梵字に黒の細い縁取り（drop-shadow を四方向）を付ける。
   注文画像キャプチャ時には body.maker-preview-mode を一時的に外して
   この効果を抑止する（出力には縁取りが乗らないように）。 */
/* .el-char は transform: scale + will-change: transform でコンポジット層になっており、
   その上に filter: drop-shadow を当てても効かないため、親の .el-text に filter を当てる。
   .el-bonji も同様（中身が span.el-bonji なので親 .el-text に効果が乗る）。 */
body.maker-preview-mode .text-element .el-text {
  /* 方向オフセットありの drop-shadow を重ねると累積で偏ってしまうため、
     オフセット 0 + blur のみを複数回重ねて均等な黒ハロを出す。 */
  filter:
    drop-shadow(0 0 0.025em #000)
    drop-shadow(0 0 0.025em #000)
    drop-shadow(0 0 0.025em #000);
}