/*
 * 한국어のページだけの細かい直し（docs/多言語の決まり.md 4.・12.）。tailwind のビルドは通さない＝手で書く
 * 共通の土台（横書き・書体・word-break: keep-all）は style.css の html[lang="ko"]。ここはページごとの直しだけ
 * 段階3 ml-pages-kr（2026-10-20）
 */

/* トップの見出し「아이들의 황금시대. / 쇼와의 그리움을 다음 세대에.」を1文ずつの行に（英語の html[lang="en"] .vbox__line と同じ） */
html[lang="ko"] .vbox__line { display: block; text-wrap: balance; }

/* 橘曙覧の世界：短歌の訳の下に添えた原文（lang="ja"）を小さく・薄く（英語の .tanka-ro と同じ見え方） */
html[lang="ko"] .tanka span[lang="ja"] { display: inline-block; margin-top: 8px; color: var(--color-mute); font-size: 0.75em; letter-spacing: 0.04em; line-height: 1.8; }

/* about：作品目録（PC は日本語の縦書きの27列＝右から左の並び。横書きの3列に＝英語の html[lang="en"] .toc と同じ。スマホは共通の2列のまま） */
@media (min-width: 768px) {
  html[lang="ko"] .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; row-gap: 0; direction: ltr; }
  html[lang="ko"] .toc li { writing-mode: horizontal-tb; justify-self: stretch; padding: 10px 0; border-bottom: 1px dotted var(--color-line); font-size: 18px; letter-spacing: 0.01em; line-height: 1.5; }
  html[lang="ko"] .toc li small { display: block; margin: 2px 0 0; font-size: 15px; }
}

/* ---- 共通：段落の間（縦書き用の margin-right を横の段落の間に。繁體中文 tw.css と同じ） ---- */
html[lang="ko"] .vbox__text p + p { margin: 1.1em 0 0; }
html[lang="ko"] .cross__text p + p { margin: 1em 0 0; }

/* ---- トップ：ステートメント・交互の3章・相談の帯の見出しは、折れるときに釣り合いよく ---- */
html[lang="ko"] :is(.cross__catch, .cta__catch) { text-wrap: balance; }
html[lang="ko"] .vbox__en { text-align: left; }
/* 1200px 以上：右の細い列のまま「아이들의／황금시대.／쇼와의／그리움을…」と1語ずつ折れた＝1文を1行に */
@media (min-width: 1200px) {
  html[lang="ko"] .vbox__head { flex: 0 0 auto; align-items: flex-start; gap: 22px; }
  html[lang="ko"] .vbox__ttl { font-size: 32px; letter-spacing: 0.02em; line-height: 1.7; white-space: nowrap; }
}

/* ---- トップ：交互の3章（1200px 以上）。縦書きの列の並び（右に題・左に本文）のままでは題が細い列で「어느／얼굴이나／낯이／익습니다.」と1語ずつ折れた
   ＝英語・繁體中文と同じく、見出しの下に本文の縦の並び（写真との左右はそのまま） ---- */
@media (min-width: 1200px) {
  html[lang="ko"] .cross__body { flex-direction: column; align-items: flex-start; gap: 28px; width: 600px; }
  html[lang="ko"] .cross__sec:nth-child(even) .cross__body { justify-content: flex-start; }
  html[lang="ko"] .cross__head { align-items: flex-start; gap: 18px; }
  html[lang="ko"] .cross__label { flex-direction: row; align-items: baseline; gap: 14px; }
  html[lang="ko"] .cross__catch { font-size: 32px; letter-spacing: 0.02em; line-height: 1.5; }
  html[lang="ko"] .cross__text { padding-top: 0; font-size: 18px; line-height: 2; }
}

/* ---- 共通の部品：お問い合わせの帯（.cta）。PC のキャッチ「먼저,<br>이야기를 들려주세요.」が細い列で「이야기를／들려주세요.」と折れた
   ＝テンプレートの <br> の所だけで折る（2行） ---- */
@media (min-width: 1024px) {
  html[lang="ko"] .cta .vttl__jp { white-space: nowrap; }
  html[lang="ko"] .cta__catch { flex: 0 0 auto; font-size: 27px; letter-spacing: 0.02em; line-height: 1.6; white-space: nowrap; }
}

/* ---- about：詩「그 시절」（連の間をあける＝縦書き用の margin-right を外す。繁體中文 tw.css と同じ） ---- */
html[lang="ko"] .poem__ttl + .poem__body { margin: 22px 0 0; }
html[lang="ko"] .poem__body p + p { margin: 1.3em 0 0; }
html[lang="ko"] .poem__body p.is-wide { margin: 2.4em 0 0; }

/* ---- about：章（右に題・左に写真はそのまま。英字の小見出し「Home」が題「살다」の上に離れて出た＝題を上・小見出しを下、左そろえ） ---- */
html[lang="ko"] .chap__ttl { order: -1; }
@media (min-width: 768px) {
  html[lang="ko"] .chap__head { flex: 0 0 210px; align-items: flex-start; gap: 12px; }
  html[lang="ko"] .chap__lead { margin-top: 8px; line-height: 1.9; }
}
/* 作品の題（〈무릎베개(ひざまくら)〉）：和文用の字間で括弧の中の読みが次の行へ回っていた */
html[lang="ko"] .gal figcaption b { letter-spacing: 0.01em; line-height: 1.5; }

/* ---- 語の途中で折らない（스마트폰で「위탁 판／매」「매달 우／편으로」と語の途中で折れた） ----
   共通の html[lang="ko"] body の keep-all を、style.css の p・li・dd・dt・td・th・figcaption { word-break: normal }（767px 以下）と
   word-break: auto-phrase（日本語だけ効く＝韓国語では normal と同じ）の要素が打ち消していた＝韓国語のページではそれらも keep-all に */
html[lang="ko"] :is(p, li, dd, dt, h1, h2, h3, figcaption, summary, td, th, .cta__catch, .tanka, .quote__text, .card__ttl, .pager__ttl, .post__ttl, .flow__ttl, .duo__ttl, .item__ttl, .gal__text) { word-break: keep-all; }

/* 見出しは折れるときに釣り合いよく（about の章の題「돌고 도는／계절」・活用事例の題・案内の帯の題で最後の行に1語だけ残った） */
html[lang="ko"] :is(h2, h3, .link-banner__ttl) { text-wrap: balance; }

/* ---- スマホ ---- */
/* トップ「법인·사업자 여러분께」の2列のカードのボタン「자세히 보기(일본어)」：390px で「(일／본어)」と括弧の中で折れた
   ＝ボタンの字間と左右の余白を詰める（style.css の 767px 以下の .more は !important）。入らない幅は語の間・括弧の前で折る */
@media (max-width: 767px) {
  html[lang="ko"] .biz .card .more { gap: 6px !important; padding-left: 10px !important; padding-right: 8px !important; letter-spacing: 0 !important; font-size: 14px !important; word-break: keep-all; overflow-wrap: normal; }
}

/* ---- lease/showa-expo：七つのテーマ（PC は縦書きの7列の箱。横書きの「생활과 자연」「기술·창의·지혜」が箱の幅いっぱい・6つ目の箱だけ広がった
   ＝箱の幅をそろえ、字を小さくして中に収める。「기술·창의·지혜」は中黒の後ろで折る（中黒の前で「·지혜」と折れた＝テンプレートで中黒の前に &#8288;（語をつなぐ）を入れた）。767px 以下は日本語と同じ2列） ---- */
@media (min-width: 768px) {
  html[lang="ko"] .parts li { flex: 1 1 0; min-width: 0; padding: 26px 8px 22px; }
  html[lang="ko"] .parts .t { min-height: 3em; font-size: 19px; letter-spacing: 0.02em; line-height: 1.5; text-align: center; text-wrap: balance; }
}

/* 段階7 の直し（2026-10-21・確認 M1）：/kr/products/・/kr/products/photobook/ の 320px で、お店の方へのバナーの題「《사진 이야기 쇼와의 아이들》」（span.nw）が
   カードより広く（約 290px）右に 6px はみ出して切れた＝375px より狭い幅では題の中の折らない固まりも語の切れ目（空き）で折ってよい（keep-all のまま＝語の途中では折らない） */
@media (max-width: 374px) {
  html[lang="ko"] .link-banner__ttl .nw { white-space: normal; }
}