/* 写し（手で直さない）: ITSN-ServiceHTML の assets/css/phrase-wrap.css（sha256 9be57e4acfb0192623ea4c5dd88be4d7e507738165443313b160e35f4b93c6ed）。元を直して node ops/sync-phrase-wrap.mjs --site <この作業場所> で作り直す */
/* ==========================================================================
   ページの先頭の見出し・ラベル・リード文の改行（2026-10-08 PM 指示 #11）
   --------------------------------------------------------------------------
   使い方: 先頭の見出し（h1）と、その上のラベル・下のリード文の要素に class="pw" を付け、
           ops/phrase-wrap.mjs を実行する（文節の切れ目に <wbr> が入る）。
   - 日本語・中国語・韓国語: <wbr>・空白・句読点の後ろ以外では折らない（keep-all）。
     1 つの文節が行の幅より長いときだけ、文節の中で折る（overflow-wrap: break-word）。
     anywhere にしない（見出しの balance が、語の中で折れる前提で行の長さを決めてしまうため）。
   - 見出し（h1）は行の長さをそろえる（balance）。ラベル・リード文は最後の行を短くしすぎない（pretty）。
   - .pw-p（ops/phrase-wrap.mjs が付ける）: 1 つの文節。文節の途中では折らない。
     文節が行の幅より長いときだけ、文節の中で、ふつうの日本語の決まり（行の頭に句読点・小書きの字を
     置かない）で折れる（inline-block の幅は行の幅を超えない）。
   - .pw-w（ops/phrase-wrap.mjs が付ける）: 6 字以上の文節の中の 1 語。文節が行の幅より長いときは、
     語と語の間で折れる（「監視／カメラ」。「カ／メラ」にしない）。
   - .pw-u（ops/phrase-wrap.mjs が付ける）: 「ICM-EventInsight」「Wi-Fi」「株式会社ＩＴＳＮ」のように、
     途中で折らない語（white-space: nowrap）。
   文字の大きさ・色・余白は変えない。変わるのは行の分かれる位置だけ。
   ========================================================================== */
/* .pwc（2026-10-08 PM指示 #9 本題 1・開発SE-A）: .pw と同じ折り方の決まりだけを使い、ops/phrase-wrap.mjs の印（<wbr>・<span>）は入れない。
   印の inline-block は、Web フォントが届いたときに文節ごと行を移るので、行の数が変わって下が動く（/threadmanager/ の先頭で CLS が 0.01 → 0.05〜0.12）。
   印が無くても変な改行が 0 件の所（測って確かめた所）だけに使う。 */
.pw,
.pwc {
  line-break: strict;
  text-wrap: pretty;
}
h1.pw,
h1.pwc {
  text-wrap: balance;
}
.pw:lang(ja),
.pw:lang(zh),
.pw:lang(ko),
.pwc:lang(ja),
.pwc:lang(zh),
.pwc:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pw-p {
  display: inline-block;
  word-break: normal;
}
.pw-w {
  display: inline-block;
}
/* 途中で折らない語は inline のまま nowrap にする。inline-block にすると、語の前後が必ず折ってよい所になり、
   「…co.jp／.」「…co.jp／에서」のように句点や助詞だけが次の行に残る（2026-10-08 PM 指示 #12 本題 7 で直した）。 */
.pw-u {
  white-space: nowrap;
}
/* 9〜11 字の文節の中の補助の <wbr>（ops/phrase-wrap.mjs が付ける）は、画面の幅が 768px 以上では使わない。
   広い画面では、その長さの文節は行に収まるので、文節の途中で割らない。 */
@media (min-width: 768px) {
  .pw-s {
    display: none;
  }
}
/* 見出しのグラデーションの文字（.accent。background-clip: text と color: transparent）の中では、
   inline-block にしない。inline-block が 2 行に折れると、上の行にグラデーションが塗られず、
   文字が見えなくなるため。.accent の中は、<wbr> と keep-all だけで文節の途中で折らない。 */
.pw .accent .pw-p,
.pw .accent .pw-w,
.pw .accent .pw-u {
  display: inline;
  word-break: inherit;
}
/* .accent の中の、途中で折らない語（「Cloud-Based」など）は、行をまたがせない。
   ただし、見出しの全部が 1 語（「ICM-EventInsight」など）のときは、画面の幅より長いことがあるので、
   はみ出さないように語の中で折れるままにする。 */
.pw .accent .pw-u {
  white-space: nowrap;
}
.pw .accent .pw-u:only-child {
  white-space: normal;
}
/* 製品名だけの見出し（「ICM-EventInsight」「ICM-ThreatGuard」）は、画面の幅が 400px 以下のときだけ
   字を画面の幅に合わせて小さくし、1 行に収める（2026-10-08 PM 指示 #12 本題 7。ほかの幅・ほかの要素は変えない）。
   36px のままでは語の幅が約 348px あり、320px・375px の画面の見出しの幅（280px・335px）に収まらない。 */
@media (max-width: 400px) {
  h1.pw .iev-hero__wordmark,
  h1.pw .itg-hero__wordmark {
    font-size: 8.6vw;
  }
  h1.pw .iev-hero__wordmark .pw-u,
  h1.pw .itg-hero__wordmark .pw-u {
    white-space: nowrap;
  }
}
/* 長い見出し（class="pw pw-fit"）は、画面の幅が 400px 以下のときだけ、字を画面の幅の 9% にする。
   400px のときちょうど 36px（400px を超える幅の字の大きさ）になるので、段差が出ない。
   /solutions/hospital/ の見出しが、320px で 7 行になるのを 5 行にするために付けた（2026-10-08 PM 指示 #15 本題 2）。 */
@media (max-width: 400px) {
  h1.pw.pw-fit {
    font-size: 9vw;
  }
}