/*
 * rule/style.css
 * デジタル庁デザインシステム(DADS)のトークン・コンポーネントCSS
 * (assets/dads/tokens.css, base.css, components.css) を前提としたレイアウトCSS。
 * e-Gov法令検索の条文表示画面(https://laws.e-gov.go.jp/law/...)のレイアウト・配色・
 * タイポグラフィに準拠。レスポンシブブレークポイント(768px)は既存サイトの挙動を維持。
 */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* law-infoの実測高さ。ルール名や条文番号が長く2行以上に折り返す場合に
   main-content等のクリッピングを防ぐため、JS(ResizeObserver)が実際の
   高さに書き換える。JS実行前/非対応環境向けの初期値として72pxを設定する。 */
:root {
  --law-info-h: 72px;
  /* 条文の字下げの単位: 本文(15px)の全角1字分。見出しの文字サイズが違っても字下げはこの単位で揃える */
  --law-zw: 15px;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-style: normal;
  line-height: 1.7;
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
}

/* ===== ヘッダー(e-Govに準じた薄い白ヘッダー) ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1000;
  background: var(--color-neutral-white);
  border-bottom: 1px solid var(--color-neutral-solid-gray-200);
  box-sizing: border-box;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding: 0 20px;
}

.site-header__logo {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-primitive-light-blue-900);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.top-nav .dads-link {
  font-size: 13px;
}

/* デスクトップではheader-actions自体を非表示にする(空のflexアイテムとして
   gapの余白だけが残ってしまうため、子要素だけでなく親ごと隠す) */
.header-actions {
  display: none;
  align-items: center;
  gap: 4px;
}

/* ===== law-info(e-Govの「施行日・現行」メタバー相当) ===== */
.law-info {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  background: var(--color-neutral-white);
  border-bottom: 1px solid var(--color-neutral-solid-gray-200);
  z-index: 999;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 36px;
  height: 36px;
  font-size: 13px;
}
.law-info .law-info-icon {
  flex-shrink: 0;
  color: var(--color-neutral-solid-gray-600);
}
.law-info p {
  margin: 0;
  color: var(--color-neutral-solid-gray-700);
}
.law-info .dads-chip-label {
  min-height: auto;
  padding: 1px 8px;
  font-size: 12px;
}
.law-info .law-info-error {
  width: 100%;
}

/* =====================================================================
   law-info: index.htmlのルール一覧行(.rule-item)と全く同じ書式に揃えたバリエーション
   (body.law-info-v2 が付いたページにのみ適用。展開は段階的に行うため、まずは
   R0701001.htmlにのみ適用する) */
body.law-info-v2 .law-info {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: auto;
  min-height: 72px;
  padding: 8px 20px;
  gap: 4px;
}
.law-info .rule-item__row1 {
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}
.law-info .rule-item__icon {
  position: absolute;
  left: 0;
  top: 0.3em;
  color: var(--color-neutral-solid-gray-500);
}
.law-info .rule-item__title {
  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-neutral-solid-gray-900);
}
.law-info .rule-item__number {
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  margin-left: 0.4em;
}
.law-info .rule-item__category.dads-chip-label {
  border-radius: 0;
  min-height: auto;
  padding: 1px 5px;
  font-size: calc(11 / 16 * 1rem);
  line-height: 1.4;
  margin-left: 0.5em;
  white-space: nowrap;
}
.law-info .rule-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 24px;
}
.law-info .rule-date {
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
}

body.law-info-v2 .container {
  height: calc(100vh - 44px - var(--law-info-h) - 40px);
  height: calc(100dvh - 44px - var(--law-info-h) - 40px);
  margin-top: calc(44px + var(--law-info-h)); /* header(44px) + law-info(実測) */
}

/* ===== メイン構造 ===== */
.container {
  display: flex;
  width: 100%;
  /* モバイルではアドレスバーの表示/非表示で100vhが変動し、固定ヘッダー/フッターと
     ズレて2段階スクロールや下部の見切れが起きるため、動的ビューポート単位(dvh)を使う。
     dvh未対応ブラウザ向けにvh版を先に書いて上書きさせるフォールバックにしている。 */
  height: calc(100vh - 44px - 36px - 40px);
  height: calc(100dvh - 44px - 36px - 40px);
  margin: 80px 0 40px 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* ===== サイドバー(目次) ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 15vw;
  min-width: 210px;
  max-width: 340px;
  flex-shrink: 0;
  background: var(--color-neutral-white);
  border-right: 1px solid var(--color-neutral-solid-gray-200);
  padding: 18px 16px;
  height: 100%;
  overflow-y: auto;
}

.dads-toc__heading {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--color-neutral-solid-gray-700);
}

.sidebar .dads-list {
  font-size: 13.5px;
}
.sidebar .dads-list li {
  position: relative;
}

/* e-Govの目次はネスト階層に関わらずマーカー(・/◦)を表示しない */
.sidebar .dads-list,
.sidebar .dads-list .dads-list {
  list-style: none !important;
}

.sidebar__footer {
  display: none;
}

/* e-Govの目次は黒文字・ホバー時のみ青(dads-linkの常時青色を上書き) */
.sidebar a.dads-link:any-link {
  color: var(--color-neutral-solid-gray-900);
  text-decoration: none;
}
.sidebar a.dads-link:visited {
  color: var(--color-neutral-solid-gray-900);
}
@media (hover: hover) {
  .sidebar a.dads-link:hover {
    color: var(--color-key-900);
    text-decoration: underline;
  }
}
.sidebar > .dads-toc > .dads-list > li > a.dads-link {
  font-weight: bold;
}

/* 親項目(子ulを持つli)の三角形トグル */
.sidebar-toggle {
  font-size: 0.7em;
  display: inline-block;
  width: 1em;
  margin-right: 0.2em;
  vertical-align: middle;
  color: var(--color-neutral-solid-gray-500);
  cursor: pointer;
  user-select: none;
}

.sidebar .sidebar-close {
  display: none;
}

/* ===== 本文エリア ===== */
.main-content {
  flex: 1 1 0;
  padding: 28px 48px 40px;
  background: var(--color-neutral-white);
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

.law-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.law-title {
  margin: 12px 0 28px;
}
/* ルール番号: 本文と同じ文字サイズ、0字 */
.law-title .law-number {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--color-neutral-solid-gray-900);
}
.law-title h1 {
  margin-left: calc(var(--law-zw) * 3); /* 題名: 3字下げ */
  font-size: 24px;
  font-weight: bold;
  color: var(--color-neutral-solid-gray-900);
}

.dads-form-control-label {
  font-size: 13px;
}

.law-header .dads-form-control-label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.law-header .dads-form-control-label__label {
  font-weight: normal;
}

.preamble, .chapter {
  margin-top: 28px;
}

.article {
  margin-top: 14px;
}

/* 章 (h2): e-Govに準じ中央揃え・プレーンな黒太字 */
.preamble > h2,
.chapter > h2 {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 16px;
  margin-left: calc(var(--law-zw) * 3); /* 3字下げ */
  text-align: left;
  color: var(--color-neutral-solid-gray-900);
}
.preamble > h2:empty,
.chapter > h2:empty {
  display: none;
}

/* 節 (h3) */
.chapter > h3 {
  font-size: 15.5px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 22px;
  margin-left: calc(var(--law-zw) * 4); /* 4字下げ */
  color: var(--color-neutral-solid-gray-900);
}

/* 款 (h4) */
.chapter > h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 18px;
  margin-left: calc(var(--law-zw) * 5); /* 5字下げ */
  color: var(--color-neutral-solid-gray-800);
}

.article h5 {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-neutral-solid-gray-900);
  margin: 0 0 6px;
}
.article h5:empty {
  display: none;
}

.article p {
  display: block;
  font-size: 15px;
  margin: 0;
}

/* 条文の各行(rule-scripts.htmlが項・号等を判定してクラスを付ける)。
   字下げは本文の全角1字(1em = --law-zw)を単位に、1行目をtext-indent、折り返しをpadding-leftで表す */
.law-line {
  display: block;
  font-size: 15px;
  margin: 0;
}
.law-line--plain    { padding-left: 0;   text-indent: 1em; }  /* 前文・附則等の本文: 1字下げ、折り返し0字 */
.law-line--single   { padding-left: 1em; text-indent: 1em; }  /* 項が1つだけの本文: 2字下げ、折り返し1字 */
.law-line--kou      { padding-left: 1em; text-indent: -1em; } /* 項(①…): 0字、折り返し1字 */
.law-line--kou-cont { padding-left: 1em; text-indent: 0; }    /* 項に続く番号なしの段落: 1字 */
.law-line--gou      { padding-left: 2em; text-indent: -1em; } /* 号(一…): 1字下げ、折り返し2字 */
.law-line--saibun   { padding-left: 3em; text-indent: -1em; } /* 号の細分(イ…): 2字下げ、折り返し3字 */

/* 非一般条文の表示チェックボックス: 条文番号の直後にインラインで表示 */
.article label.dads-checkbox.show-non-general {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.6em;
}

/* ===== フッター ===== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 13px;
  background: var(--color-neutral-white);
  border-top: 1px solid var(--color-neutral-solid-gray-200);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 40px;
  box-sizing: border-box;
}

.site-footer .footer-left,
.site-footer .footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer p {
  margin: 0;
  color: var(--color-neutral-solid-gray-600);
}

/* ===== 印刷 ===== */
@media print {
  body * {
    visibility: hidden !important;
  }
  .law-info, .main-content, .site-footer,
  .law-info *, .main-content *, .site-footer * {
    visibility: visible !important;
  }
  .law-info, .main-content, .site-footer {
    position: static !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-neutral-white) !important;
  }

  /* main-contentは画面表示用にheight固定+overflow-y:autoの内部スクロール領域と
     なっており、祖先の.containerもoverflow:hiddenで高さを固定しているため、
     visibilityの切り替えだけでは印刷時に条文が見切れる。印刷時はこのクリッピング
     連鎖を解除し、内容の実際の高さぶんだけ紙面に流し込む。 */
  html, body {
    height: auto !important;
    overflow: visible !important;
  }
  .container {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    /* margin-topは本来、固定表示のheader/law-infoの下に隠れないための
       余白だが、印刷時はlaw-infoをposition: staticで通常のflowに戻して
       いるため、この余白がそのまま二重に効いて大きな空白になってしまう。
       flow内で自然につながるよう0にする。 */
    margin: 0 !important;
  }
  .main-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* サイドバー(目次)や一般参加者向けトグル、非一般条文の表示チェックボックス、
     フッターの印刷ボタンは操作用UIであり紙面には不要なため非表示にする */
  .sidebar,
  .law-header,
  .sidebar-toggle,
  .show-non-general,
  #print-btn {
    display: none !important;
  }

  /* law-headerを非表示にしても見出し(law-title)自身の上下マージンは
     そのまま残るため、law-infoとルール本文の間の余白を詰める */
  .law-title {
    margin: 0 0 12px !important;
  }
}

/* ====== レスポンシブ対応: 768px以下 ====== */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    height: 48px;
  }
  .site-header__inner {
    padding: 0 12px;
  }
  .site-header__logo {
    font-size: 16px;
    max-width: 55vw;
  }
  .top-nav {
    display: none;
  }

  .header-actions {
    display: flex;
  }
  #toc-toggle-btn {
    display: inline-flex;
  }
  #drawer-menu-btn {
    display: inline-flex;
  }

  .law-info {
    top: 48px;
    flex-wrap: wrap;
    height: auto;
    min-height: 40px;
    padding: 6px 12px;
    row-gap: 4px;
  }
  .law-info p {
    font-size: 12px;
  }

  .container {
    height: calc(100vh - 48px - 44px - 40px);
    height: calc(100dvh - 48px - 44px - 40px);
    margin: 92px 0 40px 0;
  }

  body.law-info-v2 .law-info {
    min-height: 72px;
    padding: 8px 12px;
  }
  body.law-info-v2 .container {
    height: calc(100vh - 48px - var(--law-info-h) - 40px);
    height: calc(100dvh - 48px - var(--law-info-h) - 40px);
    margin: calc(48px + var(--law-info-h)) 0 40px 0; /* header(48px) + law-info(実測) */
  }

  .main-content {
    padding: 20px;
  }

  .law-title h1 {
    font-size: 19px;
  }

  /* サイドバー(目次): モバイルではe-Gov同様に画面全体を覆うフルスクリーン表示に切り替える */
  .sidebar {
    display: none;
    position: fixed;
    inset: 0;
    top: 48px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    border-right: 0;
    padding: 16px 20px 0;
    z-index: 3500;
    overflow: hidden;
  }
  .sidebar.open {
    display: flex;
  }
  .dads-toc {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .dads-toc__heading {
    flex: 0 0 auto;
  }
  .dads-toc > .dads-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
  }
  .sidebar__footer {
    display: flex;
    flex: 0 0 auto;
    padding: 12px 0 16px;
    border-top: 1px solid var(--color-neutral-solid-gray-200);
  }
  .sidebar__footer .dads-button,
  .sidebar .sidebar-close {
    display: flex;
    width: 100%;
  }

  /* law-info(施行日・ルール名バー)を隠さないよう、目次はその下から開始する */
  body.law-info-v2 .sidebar {
    top: calc(48px + var(--law-info-h)); /* header(48px) + law-info(実測) */
    height: calc(100vh - 48px - var(--law-info-h));
    height: calc(100dvh - 48px - var(--law-info-h));
  }

  .site-footer {
    height: 40px;
    font-size: 12px;
    padding: 0 12px;
  }

  body.sidebar-open {
    overflow: hidden;
  }
}

/* 769px以上では目次ボタン・ハンバーガーは非表示、サイドバーは常時表示 */
@media (min-width: 769px) {
  #toc-toggle-btn,
  #drawer-menu-btn {
    display: none !important;
  }
  .sidebar {
    display: flex !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .sidebar .sidebar-close {
    display: none !important;
  }
}

/* =====================================================================
   PC表示時、右端の余白を除去
   main-content内で完結する内部スクロール構成(ヘッダー/フッター固定)は維持する。
   html要素はoverflow-xがhiddenのためoverflow-yが暗黙にautoとなり、DADSの
   scrollbar-gutter:stable(base.css)が常時ガター分の余白を確保してしまうため、
   実際にスクロールバーが必要な時だけ余白が生じるように戻す(style_index.cssと同様の挙動)。
   ===================================================================== */
html {
  scrollbar-gutter: auto;
}