@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* テーブル見出しの強調と行間 */
.styled-table.table--matter thead th {
  background: var(--surface-2, #f6fafe);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.styled-table.table--matter td,
.styled-table.table--matter th[class~="class-tag"] {
  line-height: 1.9;
  vertical-align: top;
  padding-block: 0.8rem;
}

/* 左列（命令名）の視認性 */
.w-class { width: 32%; }
.w-matter { width: 68%; }

.class-tag .tag {
  display: inline-block;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--accent, #0ea5e9) 15%, white);
  border: 1px solid color-mix(in oklab, var(--accent, #0ea5e9) 45%, white);
}

/* 行間のゆとり（スマホ） */
@media (max-width: 640px) {
  .styled-table.table--matter td,
  .styled-table.table--matter th[class~="class-tag"] {
    padding-block: 0.9rem;
  }
  .table-container.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* アクセシビリティ補助：スクリーンリーダー専用 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,1px,1px); white-space: nowrap; border: 0;
}


/* h3の上を詰める（最小インパクト） */
.callout.definition .callout-title { margin-top: 0.2rem; }

/* PCはそのまま。スマホ幅だけ“スリム版”に */
@media (max-width: 480px) {
  .class-tag .tag{
    /* 太っちょの主犯：過度な丸み＆厚い塗り */
    border-radius: 12px;                 /* 9999px → 12px 程度に */
    padding: 0.25rem 0.5rem;             /* 余白をスリム化 */
    font-weight: 600;                    /* 700 → 600で圧迫感を軽減 */
    line-height: 1.5;                    /* 行間で“塊感”を抑える */
    background: color-mix(in oklab, var(--accent, #0ea5e9) 6%, white); /* 塗り薄く */
    border: 1px solid color-mix(in oklab, var(--accent, #0ea5e9) 35%, white);
  }
  /* 括弧内が折り返して縦に太るのを緩和（任意） */
  .class-tag .tag br{ display:none; }  /* 1行化して高さを出さない */
}

  /* 括弧内が折り返して縦に太るのを緩和（任意） */
#emergency-stop-order .mini-note {
  margin-top: .4rem;
  font-size: .95em;
  color: #334155;
}
#emergency-stop-order .examples {
  margin: .4rem 0 0;
  padding-left: 1.2em;
  line-height: 1.8;
}
#emergency-stop-order .examples li { margin: .15rem 0; }

/* 小見出し下の導入文 */
#fine-or-detention .lead {
  margin-block: .4rem .8rem;
  line-height: 1.9;
}

/* リストの見た目（2段までのレスポンシブ） */
.violation-list {
  display: grid;
  gap: .55rem .9rem;
  grid-template-columns: 1fr;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) {
  .violation-list { grid-template-columns: 1fr 1fr; }
}

/* キーワード強調のチップ（スマホはスリム） */
.tag-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .18rem .5rem;
  font-size: .92em;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent, #0ea5e9) 6%, white);
  border: 1px solid color-mix(in oklab, var(--accent, #0ea5e9) 35%, white);
  vertical-align: baseline;
}
@media (max-width: 480px) {
  .tag-badge { border-radius: 10px; padding: .14rem .45rem; }
}

/* 小さな注釈（折返し時の圧迫感を軽減） */
.note-sub {
  margin-left: .25rem;
  color: #475569;
  font-size: .9em;
}

/* コールアウト（リスト版） */
.callout.list {
  border-left: 4px solid var(--accent, #0ea5e9);
  background: color-mix(in oklab, var(--accent, #0ea5e9) 8%, white);
  border-radius: .75rem;
  padding: .9rem 1rem;
}

/* 表のパディングと行間を最適化 */
#revocation-or-suspension .styled-table.table--matter td,
#revocation-or-suspension .styled-table.table--matter th[class~="class-tag"]{
  line-height: 1.9;
  padding-block: .7rem;
}

/* タグの視認性（スマホはスリム） */
#revocation-or-suspension .class-tag .tag{
  display:inline-block;
  border-radius:12px;
  padding:.22rem .55rem;
  background: color-mix(in oklab, var(--accent, #0ea5e9) 8%, white);
  border:1px solid color-mix(in oklab, var(--accent, #0ea5e9) 40%, white);
  font-weight:600;
}
@media (max-width:480px){
  #revocation-or-suspension .class-tag .tag{ border-radius:10px; padding:.18rem .5rem; }
}

/* SR-only（キャプション用） */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* パディングと行間を最適化 */
#suspension-order .styled-table.table--matter td,
#suspension-order .styled-table.table--matter th[class~="class-tag"]{
  line-height: 1.9;
  padding-block: .7rem;
}

/* タグの視認性（PCは存在感、スマホはスリム） */
#suspension-order .class-tag .tag{
  display:inline-block;
  border-radius:12px;
  padding:.22rem .55rem;
  background: color-mix(in oklab, var(--accent, #0ea5e9) 8%, white);
  border:1px solid color-mix(in oklab, var(--accent, #0ea5e9) 40%, white);
  font-weight:600;
}
@media (max-width:480px){
  #suspension-order .class-tag .tag{ border-radius:10px; padding:.18rem .5rem; }
}

/* SR-only（キャプション用） */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}

#on-site-inspection .callout { 
  padding: .9rem 1rem; 
  border-radius: .75rem; 
  line-height: 1.9;
}
#on-site-inspection .callout.definition {
  border-left: 4px solid var(--accent, #0ea5e9);
  background: color-mix(in oklab, var(--accent, #0ea5e9) 8%, white);
}
#on-site-inspection .callout.note {
  border-left: 4px solid #16a34a;
  background: color-mix(in oklab, #16a34a 8%, white);
}

#on-site-inspection .examples {
  margin: .4rem 0 0;
  padding-left: 1.2em;
}
#on-site-inspection .examples li { margin: .15rem 0; }

#on-site-inspection .mini-note {
  margin-top: .4rem;
  font-size: .95em;
  color: #334155;
}

#on-site-inspection .memo {
  margin-top: .6rem;
  padding: .7rem .9rem;
  border: 1px dashed #94a3b8;
  border-radius: .6rem;
  background: #f8fafc;
  color: #334155;
}

#on-site-inspection .exam-notes .compact li {
  margin-block: .35rem;
  line-height: 1.8;
}

/* SR-onlyユーティリティ（他箇所と統一） */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,1px,1px); white-space:nowrap; border:0;
}