@charset "UTF-8";

/* ============================================================
   原稿用紙ツール
   Layout note: the sheet is built with ordinary horizontal flex
   (columns right-to-left, cells top-to-bottom) and `writing-mode`
   is applied ONLY to each square. Putting writing-mode on the
   sheet transposes the flex axes and lays the columns out as rows.
   ============================================================ */

:root {
  /* --gy-cell-fit is recomputed in JS so one whole 20x20 sheet fits the
     viewport height. The narrow and print blocks below redefine
     --gy-cell outright, so they ignore the fitted value. */
  --gy-cell-fit: 40px;
  --gy-cell: var(--gy-cell-fit);
  --gy-paper: #fffdf6;
  --gy-rule: #c9a06a;
  --gy-rule-soft: #e6cfae;
  --gy-frame: #b98b52;
  --gy-ink: #23201c;
  --gy-bg: #f6f4ef;
  --gy-line: #e4e1d9;
  --gy-text: #2f2b26;
  --gy-muted: #7a726a;
  --gy-accent: #a8632a;
}

body { background: var(--gy-bg); color: var(--gy-text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.compact-navbar { min-height: 54px; }
.compact-navbar .container { min-height: 54px; }
.logo-link { text-decoration: none; }

/* ---------- App bar ----------
   Pinned below the site navbar so the character / sheet / save
   counters stay visible while writing down a long manuscript.
   --gy-navbar-h is measured at runtime (the navbar height differs
   between breakpoints). */
.gy-appbar {
  position: sticky;
  top: var(--gy-navbar-h, 0px);
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--gy-line);
}
.gy-appbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
}
.gy-brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.gy-brand-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1.5px solid var(--gy-frame);
  border-radius: 9px;
  background: var(--gy-paper);
  color: var(--gy-frame);
}
.gy-brand-icon svg { display: block; }
.gy-brand h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.gy-brand p { margin: 0.1rem 0 0; color: var(--gy-muted); font-size: 0.82rem; }

.gy-meters {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--gy-muted);
}
.gy-meters > span { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.gy-meters strong { color: var(--gy-text); font-size: 1.05rem; font-weight: 700; }
.gy-meter-sep { width: 1px; height: 18px; background: var(--gy-line); }
#save-state { color: #15803d; font-weight: 600; }
#save-state.is-error { color: #dc2626; }
#last-saved { font-size: 0.78rem; }

.tool-breadcrumb { padding: 0.5rem 0 0.15rem; }

/* ---------- Toolbar ---------- */
.gy-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.gy-toolbar-group { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.gy-toolbar-spacer { flex: 1 1 auto; }

.gy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--gy-line);
  border-radius: 8px;
  background: #fff;
  color: var(--gy-text);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.gy-btn:hover { border-color: var(--gy-frame); color: var(--gy-accent); }
.gy-btn svg { display: block; flex: none; }
.gy-btn-icon { padding: 0.5rem 0.65rem; }

.gy-autoformat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gy-text);
  cursor: pointer;
  user-select: none;
}
.gy-autoformat input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gy-accent);
  cursor: pointer;
}
.gy-hint {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--gy-line);
  border-radius: 50%;
  color: var(--gy-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: help;
}

.gy-more-wrap { position: relative; }
.gy-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 0.35rem;
  border: 1px solid var(--gy-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(35, 32, 28, 0.12);
}
.gy-more-menu[hidden] { display: none; }
.gy-more-menu button {
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font-size: 0.85rem;
  color: var(--gy-text);
}
.gy-more-menu button:hover { background: #f6f2ec; }

/* ---------- Title / name ---------- */
.gy-docbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.25rem 0 0.75rem;
}
.gy-field { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 320px; min-width: 0; }
.gy-field label { flex: none; font-size: 0.86rem; font-weight: 700; color: var(--gy-text); }
.gy-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--gy-line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}
.gy-field input:focus { outline: none; border-color: var(--gy-frame); box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.14); }

/* Surname and given name are separate fields: the square between them
   mirrors the blank square the manuscript leaves between the two. */
.gy-name-inputs { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
.gy-name-inputs input { flex: 1 1 50%; min-width: 0; }
.gy-name-gap {
  flex: none;
  color: var(--gy-rule);
  font-size: 0.8rem;
  line-height: 1;
  user-select: none;
}

/* ---------- Sheets ---------- */
.gy-canvas {
  overflow-x: auto;
  padding: 0 0 2.5rem;
  -webkit-overflow-scrolling: touch;
  /* Vertical Japanese starts at the right edge, so when the sheet is
     wider than the screen the scroll must start there, not on the
     blank left columns. `.gy-pages` resets the direction so the flex
     column order below is unaffected. */
  direction: rtl;
}
.gy-pages {
  direction: ltr;
  position: relative; /* anchor for the hidden input */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.gy-sheet-row { display: flex; align-items: flex-start; gap: 0.85rem; }
.gy-sheet-label {
  flex: none;
  margin-top: 0.15rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--gy-line);
  border-radius: 999px;
  background: #fff;
  color: var(--gy-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.gy-sheet {
  position: relative;
  display: flex;
  flex-direction: row-reverse; /* columns run right to left */
  flex: none;
  border: 1.5px solid var(--gy-frame);
  background: var(--gy-paper);
  box-shadow: 0 1px 4px rgba(35, 32, 28, 0.07);
}

.gy-col {
  display: flex;
  flex-direction: column; /* squares run top to bottom */
  border-left: 1px solid var(--gy-rule);
}
.gy-col:last-child { border-left: none; }
.gy-col-name { border-left-color: var(--gy-frame); }

.gy-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gy-cell);
  height: var(--gy-cell);
  box-sizing: border-box;
  border-bottom: 1px dotted var(--gy-rule-soft);
  /* vertical orientation applies per square, never to the sheet */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  font-size: calc(var(--gy-cell) * 0.7);
  line-height: 1;
  color: var(--gy-ink);
}
.gy-col .gy-cell:last-child { border-bottom: none; }
.gy-cell-empty { cursor: text; }

/* kinsoku fold: the pushed-back character shares the previous square */
.gy-cell-fold > span {
  display: block;
  transform: scale(0.54);
  white-space: nowrap;
}

.gy-cell.is-selected { background: rgba(168, 99, 42, 0.16); }
.gy-cell.is-caret {
  box-shadow: inset 0 0 0 2px var(--gy-accent);
  animation: gy-blink 1.1s step-start infinite;
}
@keyframes gy-blink { 50% { box-shadow: inset 0 0 0 2px transparent; } }

/* traditional centre fold mark (魚尾) */
.gy-fold-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--gy-cell) * 0.46);
  height: calc(var(--gy-cell) * 0.32);
  transform: translate(-50%, -50%);
  background: var(--gy-frame);
  opacity: 0.75;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%);
  pointer-events: none;
}

/* The real text surface: focused and IME-capable, but renders
   nothing. It is moved onto the caret square after every render so
   the IME candidate window opens where the user is writing. */
.gy-input {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--gy-cell);
  height: var(--gy-cell);
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  resize: none;
  overflow: hidden;
  font-size: 16px; /* keeps iOS from zooming on focus */
  line-height: 1;
}
.gy-input::selection { background: transparent; }

/* ---------- Supporting content ---------- */
.gy-section { padding: 2.75rem 0 0; }
.gy-section h2 { margin: 0 0 1.15rem; font-size: clamp(1.25rem, 2.6vw, 1.65rem); }
.gy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.gy-grid article { padding: 1.15rem; border: 1px solid var(--gy-line); border-radius: 12px; background: #fff; }
.gy-grid article > span { color: var(--gy-accent); font-size: 0.72rem; font-weight: 800; }
.gy-grid h3 { margin: 0.35rem 0 0.45rem; font-size: 1rem; }
.gy-grid p { margin: 0; color: var(--gy-muted); font-size: 0.84rem; line-height: 1.75; }

.gy-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; list-style: none; counter-reset: steps; }
.gy-steps li { position: relative; padding: 0.9rem 1rem 0.9rem 3.1rem; counter-increment: steps; border-left: 3px solid var(--gy-frame); background: #fff; }
.gy-steps li::before { position: absolute; top: 0.85rem; left: 0.85rem; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--gy-accent); color: #fff; content: counter(steps); font-size: 0.75rem; font-weight: 800; }
.gy-steps strong, .gy-steps span { display: block; }
.gy-steps span { margin-top: 0.3rem; color: var(--gy-muted); font-size: 0.8rem; line-height: 1.6; }

.gy-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.gy-related a { display: flex; min-height: 88px; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1px solid var(--gy-line); border-radius: 10px; background: #fff; color: var(--gy-text); text-decoration: none; }
.gy-related a:hover { border-color: var(--gy-frame); background: #fdf9f3; }
.gy-related span { margin-top: 0.35rem; color: var(--gy-muted); font-size: 0.78rem; }

.gy-outro { padding-bottom: 3rem; }

/* ---------- Toast ---------- */
.gy-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: rgba(35, 32, 28, 0.92);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(35, 32, 28, 0.25);
}
.gy-toast[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --gy-cell: 34px; }
  .gy-steps, .gy-related { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Keep squares large enough to read and type into; the canvas
     scrolls horizontally rather than shrinking the sheet away. */
  :root { --gy-cell: 30px; }
  .compact-navbar .nav-menu { display: none; }
  .gy-appbar-inner { align-items: flex-start; flex-direction: column; gap: 0.6rem; }
  .gy-meters { font-size: 0.8rem; gap: 0.6rem; }
  .gy-field { flex: 1 1 100%; }
  .gy-toolbar-spacer { display: none; }
  /* stack the label above the sheet, aligned to the right edge so it
     is visible at the initial (right-anchored) scroll position */
  .gy-sheet-row { flex-direction: column; align-items: flex-end; gap: 0.4rem; }
}

/* ---------- Print ---------- */
@media print {
  .navbar,
  .site-footer,
  .gy-appbar,
  .gy-toolbar,
  .gy-docbar,
  .gy-sheet-label,
  .gy-input,
  .gy-toast,
  .gy-section,
  .gy-outro,
  .trust-badges,
  .tool-breadcrumb {
    display: none !important;
  }

  @page { size: A4 portrait; margin: 12mm; }

  /* 20 squares must fit the printable width of A4 (~186mm) */
  :root { --gy-cell: 32px; }
  body { background: #fff; }
  .gy-canvas { overflow: visible; padding: 0; }
  .gy-pages { display: block; width: auto; min-width: 0; padding: 0; }
  .gy-sheet-row { display: block; }
  .gy-sheet {
    /* block-level flex containers stretch to the page width, which would
       blow past A4; pin the sheet to its 20 squares and centre it */
    width: max-content;
    margin: 0 auto;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .gy-sheet-row:last-child .gy-sheet {
    break-after: auto;
    page-break-after: auto;
  }
}