/* ===============================
   VSED Common Stylesheet
   Academic journal–like layout (for legacy HTML)
   - Works with mokuji-common.css loaded before this file
   - Designed for EN/JA toggle pages (section.vs-sec)
   =============================== */

/* ---- Base typography ---- */
body {
  line-height: 1.6;              /* academic, not too loose */
  color: #111;
  background: #fff;
}

/* Prefer Mincho for body text (JP), fall back safely */
body,
section.vs-sec p,
section.vs-sec li {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    "Times New Roman",
    serif;
  font-size: 15px;
}

/* ---- Main content width ---- */
main,
.container {
  max-width: 1120px;             /* tuned for PC */
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* ---- Wide PC (27"+) ---- */
@media (min-width: 1400px) {
  main,
  .container {
    max-width: 1280px;
  }
}

/* ---- Section spacing ---- */
section.vs-sec {
  margin-bottom: 2.2em;
}

/* ---- Headings ---- */
section.vs-sec > h2,
section.vs-sec > h3 {
  font-family:
    "Yu Gothic Medium",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2.4em;
  margin-bottom: 1.1em;
}

/* Avoid too much space just after a section title */
section.vs-sec > h2 + p,
section.vs-sec > h3 + p {
  margin-top: 0.4em;
}

/* ---- Paragraphs ---- */
section.vs-sec p {
  margin: 0.7em 0;
  text-align: justify;           /* academic feel */
}

/* ---- Lists ---- */
section.vs-sec ul,
section.vs-sec ol {
  margin: 0.6em 0 0.8em 1.6em;
}

section.vs-sec li {
  margin: 0.3em 0;
}

/* =================================================
   Table titles & Source lines (CSS-only, no HTML edits)
   =================================================
   Many legacy VSED pages use standalone <i> lines:
     <i>Table 1: ...</i>
     <i>Source: ...</i>
   We style those "standalone italics" as journal captions,
   while keeping inline italics inside paragraphs unchanged.
*/

/* Standalone italic lines in a language block look like captions */
section.vs-sec .langblock > i,
section.vs-sec .langblock > center > i {
  display: block;
  font-style: italic;
  font-size: 0.92em;             /* slightly smaller for captions */
  line-height: 1.35;
  margin: 1.1em 0 0.45em 0;       /* title-to-table spacing */
  color: #111;
}

/* If a paragraph contains only an <i>, treat it as caption/source line */
section.vs-sec p > i:only-child {
  display: block;
  font-style: italic;
  font-size: 0.85em;             /* Source line smaller */
  line-height: 1.35;
  margin: 0.45em 0 0.9em 0;
  color: #333;
}

/* Inline italics inside body text should remain normal size/color */
section.vs-sec p i,
section.vs-sec li i {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* =================================================
   Tables (critical for VSED)
   ================================================= */

/* Fix legacy <center> wrappers so they don't affect layout */
section.vs-sec center {
  display: block;
  text-align: initial;
}

/* Table base */
section.vs-sec table {
  margin: 1.2em auto;
  border-collapse: collapse;
  font-size: 0.93em;
  width: 100% !important;        /* override mokuji-common.css */
  max-width: 100%;
  table-layout: fixed;           /* prevent overflow by long content */
  box-sizing: border-box;
}

/* Cancel negative margins inherited from mokuji-common.css */
section.vs-sec table {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header & data cells (override mokuji-common.css) */
section.vs-sec table th,
section.vs-sec table td {
  padding: 3px 6px !important;   /* compact rows */
  line-height: 1.25;
  vertical-align: middle;
}

/* Header row slightly looser for readability */
section.vs-sec table thead th {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-weight: 600;
}

/* First column (country/product names): keep it narrower */
section.vs-sec table th:first-child,
section.vs-sec table td:first-child {
  width: 120px;
  min-width: 100px;
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: left;
  white-space: normal;           /* allow wrap */
  word-break: break-word;
  font-weight: 500;
}

/* Native <caption> support (if present) */
section.vs-sec caption {
  caption-side: bottom;
  font-size: 0.85em;
  margin-top: 0.4em;
  color: #333;
}

/* ---- Notes / sources (explicit classes if used) ---- */
.note,
.source,
p.small {
  font-size: 0.85em;
  line-height: 1.5;
  color: #333;
}

/* ---- Links ---- */
section.vs-sec a {
  color: #003366;
  text-decoration: none;
}

section.vs-sec a:hover {
  text-decoration: underline;
}

/* ---- Fixed header compatibility ---- */
.vs-header {
  font-family:
    "Yu Gothic Medium",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
}

/* ---- Print (journal style) ---- */
@media print {
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  main,
  .container {
    max-width: 100%;
    padding: 0;
  }

  .vs-header,
  .controls,
  .toc {
    display: none !important;
  }

  section.vs-sec {
    page-break-inside: avoid;
  }

  section.vs-sec table {
    page-break-inside: avoid;
  }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  main,
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  body {
    font-size: 14px;
  }

  /* Mobile: allow horizontal scroll for wide tables */
  section.vs-sec table {
    display: block;
    overflow-x: auto;
  }
}

/* 原文に存在しない Intro 見出しは表示しない */
.section-intro{
  display:none;
}
body.lang-en .langblock.ja, body.lang-en .langblock.vi { display:none; }
body.lang-ja .langblock.en, body.lang-ja .langblock.vi { display:none; }
body.lang-vi .langblock.en, body.lang-vi .langblock.ja { display:none; }

body.lang-en .langblock.en,
body.lang-ja .langblock.ja,
body.lang-vi .langblock.vi { display:block; }


/* ---- Table overflow fix (keep tables inside the content box) ----
   Background:
   - mokuji-common.css sometimes applies negative/forced margins to tables (e.g. body table { margin-left:32px !important; margin-right:-32px; })
   - Some original HTML tables are wrapped by <center> or in overflow containers.
   Policy:
   - Force tables to fit the container width.
   - Allow cell text to wrap (especially the first column labels) so the table can shrink.
   NOTE:
   - Appended at the end so it wins in the cascade.
*/
section.vs-sec table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

section.vs-sec th,
section.vs-sec td{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* === Paper title (EN / JA) === */
h1.vs-paper-title{
  font-weight: 700;
  text-align: center;

  /* ↓ ここが本題 */
  font-size: 1.6em;      /* h2 より明確に大きく */
  line-height: 1.35;
  margin: 0.6em 0 1.2em;
}
/* === iOS Safari dark-mode text visibility fix (FINAL) === */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {

  html, body {
    background-color: #111 !important;
    color: #eee !important;
    -webkit-text-fill-color: #eee !important;
  }

  /* 文章が入る全コンテナを強制的に継承 */
  main, article, section,
  .vs-sec, .vs-frag,
  .langblock, .langblock * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* p / li / td が消える事故を完全封鎖 */
  p, li, dt, dd, td, th, span, div, small {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
}