@font-face {
  font-family: "GenRyuMin SB";
  src: url(/assets/GenRyuMin-SB-6df60c9f98b78b04a0b9a290005ba5961810011db79b9ea3b86bfbbbbdd4bce2.ttc) format("truetype");
}
@font-face {
  font-family: "GenRyuMin R";
  src: url(/assets/GenRyuMin-R-1a4dfe3b244728bf1e8edc0bd43f1c5def8ea3a19e9f13b8dedfcf73589d88b5.ttc) format("truetype");
}
@font-face {
  font-family: "FallbackMain";
  src: url(/assets/SelfMadeForExtB-SB-5c240d901d39397ab329bb2a43ed60d155556ab072ad99c604a842187078bebb.ttf) format("truetype");
}
@font-face {
  font-family: "FallbackNote";
  src: url(/assets/SelfMadeForExtB-e0c0387a1d4b97f28d193b7d9b6e93e7541b0cea0c2db84ca77ba251f71d4717.ttf) format("truetype");
}

:root {
  --color-basic:         #F7EFE3;
  --color-text:          #3E1E00;
  --color-punc-m:        #3E1E00;
  --color-zhsh:          #7E0F09;
  --color-punc-n:        #7E0F09;
  --color-qu2-m:         #7E0F09;
  --color-quo-n:         #3E1E00;
  --color-v00-n:         #3E1E00;
  --color-v01-n:         #D9341D;
  --color-notes:         #3E1E00;
  --color-punc-p:        #3E1E00;
  --color-mis:           #E6E6E6;
  --color-yin:           #7B7C7D;
  --color-frame:         #D9341D;
  --color-links-link:    #D9341D;
  --color-links-visited: #AD7207;
  --color-links-hover:   #3E1E00;
  --color-unavailable:   #7B7C7D;
  --color-toggled:       #D9341D;
  --color-btn-border:    #CCCCCC;
  --color-btn-box-shadow:#FFFFFF;
  --color-btn-grad1:     #F7EFE3;
  --color-btn-grad2:     #F2E8D8;
  --color-for-test:      #000000;
  --offset-main-marks: 1.15em;
  --offset-p-marks:    1.25em;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header, footer {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-family: "GenRyuMin SB";
  background-color: var(--color-basic);
}

.links {
  font-family: "GenRyuMin SB";
  text-decoration: none;
}
.links:link {
  color: var(--color-links-link);
}
.links:visited {
  color: var(--color-links-visited);
}
.links:hover {
  color: var(--color-links-hover);
}
/* footer */

.footer-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

a.btn {
  position: relative;
  display: block;
  margin: 0 .15em;
  padding: .5em 1em;
  border-radius: .5em;
  letter-spacing: .2em;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  user-select: none;
/*-webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;*/
  transition: all .3s;
/*-webkit-transition: all .3s;*/
  cursor: pointer;
}

.btn.btn-footer, .btn.btn-footer-dead {
  border: 1px solid var(--color-btn-border);
/*-webkit-box-shadow: inset 0 1px 1px var(--color-btn-box-shadow);*/
  background: linear-gradient(to bottom, var(--color-btn-grad1) 0%, var(--color-btn-grad2) 100%);
/*background: -webkit-linear-gradient(top, var(--color-btn-grad1) 0%, var(--color-btn-grad2) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-btn-grad1)), to(var(--color-btn-grad2)));*/
  box-shadow: inset 0 1px 1px var(--color-btn-box-shadow);
}

.btn.btn-footer:hover {
  background: linear-gradient(to top, var(--color-btn-grad1) 0%, var(--color-btn-grad2) 100%);
/*background: -webkit-linear-gradient(bottom, var(--color-btn-grad1) 0%, var(--color-btn-grad2) 100%);
  background: -webkit-gradient(linear, left bottom, left top, from(var(--color-btn-grad1)), to(var(--color-btn-grad2)));*/
}

.btn.btn-icon {
  display: inline-block;
  width: 1em;
  margin: 0 .2em;
  text-align: center;
}

.btn.btn-footer-dead {
  cursor: not-allowed;
  pointer-events: none;
}

.unavailable {
  color: var(--color-unavailable)
}
/* header */

ul, li {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tgl-name {
  display: flex;
  justify-content: center;
  margin: 0 .75em;
  font-size: .6em;
  color: var(--color-text);
}

.toggle-parts {
  justify-content: center;
}

.toggle-container {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.toggle-container .toggle {
  display: none;
}

.toggle-container .toggle-btn {
  margin: 0;
  box-sizing: border-box;
}

.toggle-container .toggle-btn::selection {
  background: var(--color-basic);
}

.toggle-container .toggle + .toggle-btn {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: .75em;
  margin: 0;
  padding: 2px;
  transition: all .2s ease;
  outline: 0;
  cursor: pointer;
  border: 2px solid var(--color-unavailable);
  border-radius: .4em;
  background: var(--color-basic);
  user-select: none;
}

.toggle-container .toggle + .toggle-btn::after,
.toggle-container .toggle + .toggle-btn::before {
  position: relative;
  display: block;
  width: 50%;
  height: 100%;
  content: "";
}

.toggle-container .toggle + .toggle-btn::after {
  left: 0;
  transition: all .2s ease;
  border-radius: .40em;
  background: var(--color-unavailable);
}

.toggle-container .toggle + .toggle-btn::before {
  display: none;
}

.toggle-container .toggle:checked + .toggle-btn {
  border: 2px solid var(--color-toggled);
}

.toggle-container .toggle:checked + .toggle-btn::after {
  left: 50%;
  background: var(--color-toggled);
}

.disabled-toggle {
  cursor: not-allowed !important;
  opacity: .5;
}

.header-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  padding: 0;
}

.header-logo {
  width: 1.5em;
  margin: 0 .15em 0 .3em;
}
/* textarea / input */

textarea {
  width: 60em;
  height: 100%;
  padding: .25em;
  font-family: "Noto Sans TC";
  font-size: .5em;
  color: var(--color-text);
  writing-mode: horizontal-tb;
  background-color: whitesmoke;
  resize: none;
}

.input-box {
  display: flex;
  align-items: center;
}

.typeset {
  margin-bottom: .5em;
  font-family: "GenRyuMin R";
  font-size: .5em;
}
/* main */

.main-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 85vh;
  border-style: solid none solid none;
  border-color: var(--color-frame);
  background-color: var(--color-basic);
  letter-spacing: .1em;
  color: var(--color-text);
  writing-mode: vertical-rl;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.main-page::-webkit-scrollbar {
  display: none;            /* Safari and Chrome */
}

.row-container {
  display: grid;
  grid-template-areas:
      "part00 part01 part03 part04 part06 part07 part09 part10 part12"
      "part00 part02 part03 part05 part06 part08 part09 part11 part12";
  grid-template-rows: .6em .6em;
  row-gap: .3em;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 .15em;
}

.main-text {
  font-family: "GenRyuMin SB", "FallbackMain", "FallbackNote","SimSun", "宋体", "SimSun-ExtB", sans-serif;
  transform: scaleX(110%);
}
.main-punc {
  font-family: "GenRyuMin SB";
  color: var(--color-punc-m);
  transform: scaleX(90%) translate(0.75em, 0.35em);
}

.note-text {
  font-family: "GenRyuMin R", "FallbackNote", "SimSun", "宋体", "SimSun-ExtB", sans-serif;
  color: var(--color-zhsh);
  transform: scaleX(60%);
}
.note-punc {
  font-family: "GenRyuMin R";
  color: var(--color-quo-n);
  transform: scaleX(60%) translate(0.65em, 0.35em);
}

.fallback-character {
/*color: var(--???);/*debug*/
}

.main-text.part00, .main-punc.part00 { grid-area: part00; }
.main-text.part03, .main-punc.part03 { grid-area: part03; }
.main-text.part06, .main-punc.part06 { grid-area: part06; }
.main-text.part09, .main-punc.part09 { grid-area: part09; }
.main-text.part12, .main-punc.part12 { grid-area: part12; }

.note-text.part01, .note-punc.part01 { grid-area: part01; }
.note-text.part02, .note-punc.part02 { grid-area: part02; }
.note-text.part04, .note-punc.part04 { grid-area: part04; }
.note-text.part05, .note-punc.part05 { grid-area: part05; }
.note-text.part07, .note-punc.part07 { grid-area: part07; }
.note-text.part08, .note-punc.part08 { grid-area: part08; }
.note-text.part10, .note-punc.part10 { grid-area: part10; }
.note-text.part11, .note-punc.part11 { grid-area: part11; }
p span {
  backface-visibility: hidden;
  contain: layout style paint;
  will-change: transform;
}

/* 陰文 */
.mark_yin {
  position: relative;
  z-index: 1;
  color: var(--color-basic);
}
.mark_yin::after {
  position: absolute;
  top: -.05em;
  z-index: -1;
  height: 100%;
  width: 100%;
  border-radius: .25em;
  background-color: var(--color-yin);
  content: "";
}

/* 衍文 */
.mark_mis {
  color: var(--color-mis);
}

/* 小字 */
.mark_1_4 {
  display: inline-block;
  color: var(--color-qu2-m);
  transform: scaleX(65%) translateX(0.30em);
}

/* 引號 */
.mark_quo,
.mark_qu2,
.mark_v00,
.mark_v01 {
  display:  inline-block;
  position: relative;
}
.mark_quo::after,
.mark_qu2::after,
.mark_v00::after,
.mark_v01::after {
  position: absolute;
  top: 0;
  right: var(--offset-main-marks);
  z-index: -5;
  height: 100%;
  width: .6em;
/*background-image: in color_theme.js */
  background-position: center 0;
  background-size: 100% 1.1em;
  background-repeat: repeat-y;
  transform: translateX(0.3em);
  content: "";
}

.main-text .mark_qu2 {
  color: var(--color-qu2-m);
}

.note-text .mark_quo,
.note-text .mark_qu2 {
  color: var(--color-quo-n);
}
.note-text .mark_quo::after,
.note-text .mark_qu2::after {
  background-image: none;
}

.note-text .mark_v00 {
  color: var(--color-v00-n);
}

.note-text .mark_v01 {
  color: var(--color-v01-n);
}

.main-text .mark_qu2::after,
.note-text .mark_v00::after,
.note-text .mark_v01::after {
  z-index: -3;
}

/* 專名書名號 */
.punc_non,
.punc_tit {
  display:  inline-block;
  position: relative;
}
.punc_non::after,
.punc_tit::after {
  position: absolute;
  top: 5%; /* 上下間隔 */
  right: var(--offset-main-marks); /* 記號間距 */
  z-index: -1;
  height: 90%; /* 長度 */
  background-size: 100%;
  content: "";
}

/* 專名號 */
.punc_non::after {
  width: 1.5px;
  min-width: 1px;
}
.main-text .punc_non::after {
  background-image: linear-gradient(var(--color-punc-m), var(--color-punc-m));
}
.note-text .punc_non::after {
  background-image: linear-gradient(var(--color-punc-n), var(--color-punc-n));
}
.note-text .mark_quo .punc_non::after {
  background-image: linear-gradient(var(--color-quo-n), var(--color-quo-n));
}
.note-text .mark_v00 .punc_non::after {
  background-image: linear-gradient(var(--color-text), var(--color-text));
}
.note-text .mark_v01 .punc_non::after {
  background-image: linear-gradient(var(--color-v01-n), var(--color-v01-n));
}

/* 書名號 */
.punc_tit::after {
  width: 5px;
/*background-image: in color_theme.js */
  background-size: 100% 12.5px;
  background-repeat: repeat-y;
  transform: translateX(.07em); /* 書名專名對齊 */
}
.note-text .punc_tit::after {
  width: 4.5px;
  background-size: 100% 8px;
}

/* 遮蓋層 */
.main-text .mark_quo .mark_qu2::before,
.main-text .mark_quo .punc_non::before,
.main-text .mark_quo .punc_tit::before,
.note-text .mark_v00 .punc_non::before,
.note-text .mark_v00 .punc_tit::before,
.note-text .mark_v01 .punc_non::before,
.note-text .mark_v01 .punc_tit::before,
p .mark_quo .punc_non::before,
p .mark_quo .punc_tit::before {
  position: absolute;
  top: 5%;
  right: var(--offset-main-marks);
  width: 12px;
  height: 90%;
  background-color: var(--color-basic);
  background-size: 100%;
  transform: translateX(.1em);
  content: "";
}
.main-text .mark_quo .punc_non::before,
.main-text .mark_quo .punc_tit::before,
.note-text .mark_v00 .punc_non::before,
.note-text .mark_v00 .punc_tit::before,
.note-text .mark_v01 .punc_non::before,
.note-text .mark_v01 .punc_tit::before,
p .mark_quo .punc_non::before,
p .mark_quo .punc_tit::before {
  z-index: -2;
}
.main-text .mark_qu2::before {
  z-index: -4;
}

/* 筆記 */
.mark_qu2 {
  color: var(--color-qu2-m)
}

p .mark_quo::after,
p .mark_qu2::after,
p .punc_non::after,
p .punc_tit::after {
  right: var(--offset-p-marks);
}
p .mark_quo::after,
p .mark_qu2::after {
  background-size: 100% 1.1em;
  transform: translateX(.2em);
}
p .mark_qu2::after {
  z-index: -3;
}

p .punc_non::after {
  width:     0.8px;
  min-width: 0.8px;
  background-image: linear-gradient(var(--color-punc-p), var(--color-punc-p));
  transform: translateX(-0.07em); /* 書名專對齊 */
}

p .punc_tit::after {
  width: 3px;
  background-size: 100% 6px;
  transform: translateX(0em);
}

/* 隱藏 */
.hidden-punc {
  display: none !important;
}
.hidden-mark {
  color: inherit !important;
}
.hidden-mark::after {
  background-image: none !important;
}
/* p */

.main-container > p, .sub-container > p {
  position: relative;
  z-index: 0;
  margin: 6em .5em 0 .5em;
  font-family: "GenRyuMin R";
  font-size: .5em;
  line-height: 1.6em;
  letter-spacing: .1em;
  color: var(--color-notes);
  white-space-collapse: preserve-breaks;
}

.footer-copyright > p {
  align-items: center;
  font-family: "Averia Serif Libre", serif;
  text-align: center;
  color: var(--color-text);
}

.icon-links {
  display: inline-block;
  color: var(--color-text);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */