/* Zenkaku 専用：原稿用紙のマス目、送信済の判子、赤ペンの下線、レポートの見本 */

/* ロゴの「全角」は、1字ずつマス目に入れる */
.logo-cells {
  display: inline-flex;
  margin-left: 10px;
  vertical-align: 0.1em;
}

.logo-cells span {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: 0.72em;
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.logo-cells span + span {
  border-left: 0;
}

/* 見出しの赤ペン（手で引いたような下線） */
.redpen {
  white-space: nowrap;
  padding-bottom: 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 38 4, 74 12, 112 7 S 172 3, 197 8' fill='none' stroke='%23c8361f' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat left bottom / 100% 0.32em;
}

/* Fig. 1：入力欄を原稿用紙のマス目で見せる */
.fig1 {
  margin: 0;
  --cell: 30px;
}

.fig1-panel {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 22px 22px 18px;
}

.genko {
  display: flex;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: 1.15rem;
  line-height: 1;
}

.genko span {
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  margin: 0 -1px -1px 0;
}

.genko .composing {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  text-decoration: underline dotted;
  text-underline-offset: 5px;
}

.genko .caret {
  position: relative;
}

.genko .caret::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: var(--ink);
}

.cands {
  list-style: none;
  /* 変換中の「し」の真下に出す（6マス目の後ろ。マス目は 1px ずつ重ねている） */
  margin: 10px 0 0 calc(6 * (var(--cell) - 1px));
  padding: 0;
  width: 9.5em;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}

.cands li {
  display: flex;
  gap: 10px;
  padding: 4px 10px;
}

.cands li span {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  align-self: center;
}

.cands .on {
  background: var(--ink);
  color: var(--paper);
}

.cands .on span {
  color: var(--paper);
}

.fig1-key {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}

kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  padding: 3px 9px 2px;
  border: 1px solid var(--ink-3);
  border-bottom-width: 3px;
  border-radius: 3px;
  background: var(--paper);
  margin-right: 8px;
}

.fig1-then {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 16px 0 10px;
}

.fig1-chat {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 26px 22px 22px;
  min-height: 112px;
}

.bubble {
  width: fit-content;
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 14px 14px 14px 3px;
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 1.05rem;
}

/* 判子：朱肉で押したように少し傾けて、輪を二重にする */
.hanko {
  position: absolute;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  rotate: -11deg;
  display: grid;
  place-items: center;
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  border: 2px solid var(--accent-text);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4.5px var(--accent-text);
  color: var(--accent-text);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.88;
}

/* Fig. 2：レポートの見本（紙が2枚重なっているように見せる） */
.report {
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: 7px 7px 0 -1px var(--paper), 7px 7px 0 0 var(--rule);
  padding: 28px 30px 26px;
  font-size: 0.95rem;
  max-width: 680px;
}

.report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
}

.report-env {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin: 10px 0 4px;
}

.report-issue {
  padding: 18px 0 4px;
  border-bottom: 1px solid var(--rule);
}

.report-issue h4,
.report-issue h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 12px;
}

.sev {
  display: inline-block;
  vertical-align: 0.2em;
  margin-right: 8px;
  padding: 2px 6px 1px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
}

.sev-high {
  border-color: var(--accent);
  color: var(--accent-text);
}

.report-issue dl {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0 0 14px;
}

.report-issue dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.report-issue dd {
  margin: 0;
}

.report-issue dd ol {
  margin: 0;
  padding-left: 1.3em;
}

/* 会社ごとのレポートのページでは、見本より広く使い、コード例を本文の幅に収める */
.report-full {
  max-width: none;
  margin: 32px 0 48px;
}

.report-full .code {
  margin: 0 0 18px;
}

.report-more {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .fig1 {
    --cell: 24px;
  }

  .fig1-panel,
  .fig1-chat {
    padding-left: 16px;
    padding-right: 16px;
  }

  .genko {
    font-size: 0.95rem;
  }

  .hanko {
    width: 4em;
    height: 4em;
    font-size: 0.8rem;
    right: 14px;
  }

  .report {
    padding: 22px 18px;
  }
}

/* 英文の中の短い日本語（例：仕様書）は途中で改行しない */
.report span[lang="ja"],
.fig1-key span[lang="ja"],
.fig-caption span[lang="ja"] {
  white-space: nowrap;
}

/* 運営者の紹介（/about） */

.name-ja {
  display: block;
  margin-top: 0.35em;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.prose ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 1.05rem;
}

.prose li + li {
  margin-top: 0.35em;
}

.portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-left: auto;
  border: 1px solid var(--rule);
  padding: 8px;
  background: var(--paper-2);
}

@media (max-width: 960px) {
  .portrait {
    max-width: 220px;
    margin-left: 0;
  }
}