@import url("https://fonts.googleapis.com/css2?family=Iansui&family=LXGW+WenKai+TC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@400;700&family=Zhi+Mang+Xing&display=swap");

@font-face {
  font-family: "Huiwen Kai Local";
  src: url("./fonts/Traditional%20Chinese/%E5%8C%AF%E6%96%87%E6%AD%A3%E6%A5%B7.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Huiwen Fangsong Local";
  src: url("./fonts/Traditional%20Chinese/%E5%8C%AF%E6%96%87%E4%BB%BF%E5%AE%8B.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Banma Local";
  src: url("./fonts/Traditional%20Chinese/%E6%96%91%E9%A6%AC%E5%AD%97%E9%A1%9E/%E5%88%9B%E5%AE%A2%E8%B4%B4%E7%8F%AD%E9%A9%AC%E5%AD%97%E7%B1%BB.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "TW Kai R2";
  src: url("https://pub-3f200825d4784f99832c55c3f6e54e24.r2.dev/traditional/tw-kai/TW-Kai-98_1.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "TW Sung R2";
  src: url("https://pub-3f200825d4784f99832c55c3f6e54e24.r2.dev/traditional/tw-sung/TW-Sung-98_1.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #27231f;
  --muted: #756f68;
  --paper: #fffdf8;
  --edge: #d8cab8;
  --accent: #9b2f25;
  --grid: rgba(155, 47, 37, .42);
  --cell: 74px;
  --guide-opacity: .28;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(39, 35, 31, .04) 1px, transparent 1px),
    linear-gradient(#f4efe6, #e9dfd1);
  background-size: 28px 28px, auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
}

.panel {
  padding: 22px;
  background: rgba(255, 253, 248, .94);
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seal {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border: 2px solid #7f2119;
  font-family: "BiauKai", "DFKai-SB", "KaiTi", serif;
  font-size: 30px;
}

h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.modeNav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.modeNav a {
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge);
  border-radius: 6px;
  color: var(--ink);
  background: #fffaf0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.modeNav a.is-active {
  border-color: #7f2119;
  color: #fff;
  background: var(--accent);
}

label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: #4b443d;
}

textarea,
select,
input {
  width: 100%;
  border: 1px solid var(--edge);
  background: #fffaf0;
  color: var(--ink);
  border-radius: 6px;
  font: inherit;
}

textarea {
  resize: vertical;
  min-height: 150px;
  padding: 10px;
  line-height: 1.55;
}

select,
input[type="number"] {
  height: 40px;
  padding: 0 10px;
}

input[type="range"] { accent-color: var(--accent); }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
}

button {
  height: 42px;
  border: 1px solid #7f2119;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

button + button {
  border-color: var(--edge);
  background: #fffaf0;
  color: var(--ink);
}

.previewArea {
  overflow: auto;
  padding: 28px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
}

.previewToolbar {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 8px 24px rgba(56, 43, 29, .12);
}

.previewToolbar button {
  width: 76px;
  height: 34px;
  font-size: 13px;
}

.previewToolbar button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

#pageStatus {
  min-width: 54px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.previewWrap {
  overflow: auto;
  padding: 0;
  display: grid;
  justify-items: center;
}

.sheet {
  width: var(--paper-width);
  height: var(--paper-height);
  margin: 0;
  padding-top: var(--page-top);
  padding-right: var(--page-right);
  padding-bottom: var(--page-bottom);
  padding-left: var(--binding-edge);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 50px rgba(56, 43, 29, .18);
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), var(--cell));
  align-content: start;
  position: relative;
  direction: ltr;
  writing-mode: horizontal-tb;
  break-after: page;
  page-break-after: always;
}

.sheet:last-child {
  break-after: auto;
  page-break-after: auto;
}

.sheet:not(.is-active) {
  display: none;
}

.pageNo {
  position: absolute;
  right: 6mm;
  bottom: 3mm;
  color: rgba(39, 35, 31, .45);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.paper-a5 {
  --paper-width: 148mm;
  --paper-height: 210mm;
  --page-top: 5mm;
  --page-right: 5mm;
  --page-bottom: 5mm;
  --binding-edge: 12mm;
  --cell: 58px;
  page: sheet-a5;
}

.paper-a4 {
  --paper-width: 210mm;
  --paper-height: 297mm;
  --page-top: 6mm;
  --page-right: 6mm;
  --page-bottom: 6mm;
  --binding-edge: 14mm;
  --cell: 74px;
  page: sheet-a4;
}

.paper-a3 {
  --paper-width: 297mm;
  --paper-height: 420mm;
  --page-top: 8mm;
  --page-right: 8mm;
  --page-bottom: 8mm;
  --binding-edge: 18mm;
  --cell: 98px;
  page: sheet-a3;
}

.layout-single {
  justify-content: center;
  align-content: center;
}

.layout-double {
  justify-content: center;
  align-content: center;
  row-gap: 8mm;
}

.layout-quad {
  justify-content: center;
  align-content: center;
  gap: 8mm;
}

.paper-a5.layout-single { --cell: 124mm; }
.paper-a4.layout-single { --cell: 176mm; }
.paper-a3.layout-single { --cell: 256mm; }

.paper-a5.layout-double { --cell: 91mm; }
.paper-a4.layout-double { --cell: 132mm; }
.paper-a3.layout-double { --cell: 190mm; }

.paper-a5.layout-quad { --cell: 62mm; }
.paper-a4.layout-quad { --cell: 88mm; }
.paper-a3.layout-quad { --cell: 128mm; }

.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  border: 1px solid var(--grid);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cell.field {
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px));
}

.cell.rice {
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(45deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px));
}

.cell.none { border-color: transparent; }

.guide,
.practice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * .69);
  line-height: 1;
  font-family: var(--font-family);
}

.guide {
  opacity: var(--guide-opacity);
  color: var(--ink);
}

.practice { color: transparent; }

.font-huiwen-kai { --font-family: "Huiwen Kai Local", "BiauKai", "DFKai-SB", serif; }
.font-huiwen-fangsong { --font-family: "Huiwen Fangsong Local", "Songti TC", "Noto Serif TC", serif; }
.font-banma { --font-family: "Banma Local", "Huiwen Kai Local", serif; }
.font-tw-kai { --font-family: "TW Kai R2", "Huiwen Kai Local", "BiauKai", serif; }
.font-tw-sung { --font-family: "TW Sung R2", "Noto Serif TC", "Songti TC", serif; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .panel { border-right: 0; border-bottom: 1px solid var(--edge); }
  .previewArea { padding: 14px; }
  .sheet {
    min-width: 0;
    padding: 12px 8px 8px 18px;
    --cell: min(10.8vw, 58px);
  }
}

@media print {
  @page sheet-a5 { size: A5 portrait; margin: 0; }
  @page sheet-a4 { size: A4 portrait; margin: 0; }
  @page sheet-a3 { size: A3 portrait; margin: 0; }

  html,
  body {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .panel { display: none; }
  .app { display: block; }
  .previewArea { display: block; padding: 0; overflow: visible; }
  .previewToolbar { display: none; }
  .previewWrap { padding: 0; overflow: visible; }
  .sheet {
    display: grid !important;
    width: calc(var(--paper-width) - 1mm);
    height: calc(var(--paper-height) - 1mm);
    margin: 0;
    border: 0;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .pageNo { display: none; }
}