@media screen {
  /*
   * 印刷用DOMを display:none にすると BadgeStaticText の autoScale 計測が 0 幅になり、
   * 画面プレビューと印刷/PDFで文字サイズがずれる。
   * 画面外に置いて常時レイアウトさせ、同じ計測結果を使う。
   */
  #print-area {
    display: block;
    position: fixed;
    left: -100000px;
    top: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .print-page { position: relative; overflow: hidden; box-sizing: border-box; }
}

/* Keep preview and physical/PDF output colors identical. */
html,
body,
#print-area,
#print-area *,
.print-page,
.print-page *,
.badge-print-container,
.badge-print-container * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/*
 * Font-size values are user-facing points, matching Word/PowerPoint.
 * The current compressed runtime still writes the numeric value as CSS px,
 * so scale only the rendered text by 96/72 (= 4/3). Override the legacy
 * auto-fit transform as well: a specified point size must not silently shrink.
 */
.badge-print-text > div,
#root .z-10[style*="white-space: pre-wrap"] > div {
  transform: scale(1) !important;
  scale: 1.3333333333;
}

/* Current compressed runtime still renders the old unit caption. */
#root .grid.grid-cols-2.gap-2.mt-2.text-xs > div:nth-child(4) > label {
  font-size: 0;
}
#root .grid.grid-cols-2.gap-2.mt-2.text-xs > div:nth-child(4) > label::after {
  content: 'サイズ (pt)';
  font-size: 12px;
}

/* Keep the visible release identifier aligned with this release. */
#app-build-badge {
  font-size: 0 !important;
}
#app-build-badge::after {
  content: 'BUILD 20260822-11';
  font-size: 10px;
}

@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; display: block; pointer-events: auto; }
  .print-page { page-break-after: always; position: relative; overflow: hidden; box-sizing: border-box; background-color: white; }
  .print-page:last-child { page-break-after: auto; }
  html, body { margin: 0; padding: 0; }
}

.badge-print-container { box-sizing: border-box; position: relative; overflow: hidden; border: 1px dashed #e5e7eb; }
.badge-print-bg { position: absolute; top: 0; left: 0; transform-origin: top left; max-width: none; z-index: -1; }
.badge-print-text { position: absolute; white-space: pre-wrap; transform-origin: top left; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Mobile layout */
@media (max-width: 767px) {
  html,
  body,
  #root {
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #root > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Editor panel */
  #root > div > div.w-80 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    border-right: 0 !important;
  }

  #root > div > div.w-80 > div.flex-1 {
    overflow: visible !important;
  }

  /* Preview area sits below the editor instead of squeezing beside it. */
  #root > div > div.flex-1.bg-gray-200 {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70vh;
    padding: 16px !important;
    overflow: auto !important;
  }

  /* Header */
  #root h1 {
    min-width: 0;
    font-size: 18px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
  }

  /* Prevent labels and controls from collapsing into vertical text. */
  #root button,
  #root label,
  #root span,
  #root select,
  #root input,
  #root textarea,
  #root h1,
  #root h2,
  #root p {
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  #root button,
  #root select,
  #root input {
    min-width: 0;
  }

  /* View/zoom toolbar */
  #root .fixed.top-4.right-4 {
    position: sticky !important;
    top: 8px !important;
    right: auto !important;
    left: auto !important;
    width: calc(100% - 8px) !important;
    max-width: none !important;
    margin: 0 auto 16px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    white-space: normal !important;
  }

  #root .fixed.top-4.right-4 > div {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #root .fixed.top-4.right-4 button {
    min-height: 40px;
    white-space: nowrap !important;
  }

  #root .fixed.top-4.right-4 input[type='range'] {
    flex: 1 1 120px;
    width: auto !important;
  }

  /* Do not reserve desktop toolbar spacing. */
  #root .mt-12 {
    margin-top: 0 !important;
  }

  /* Forms remain readable on narrow screens. */
  #root .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .p-4 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 420px) {
  #root .grid-cols-2,
  #root .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  #root > div > div.flex-1.bg-gray-200 {
    padding: 10px !important;
  }
}