@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

/* CSS変数定義 - Bootstrap 3準拠のカラーパレット */
:root {
  /* ブランドカラー */
  --color-primary: #337ab7;      /* Bootstrap primary blue */
  --color-success: #5cb85c;      /* Bootstrap success green */
  --color-info: #5bc0de;         /* Bootstrap info cyan */
  --color-warning: #f0ad4e;      /* Bootstrap warning orange */
  --color-danger: #d9534f;       /* Bootstrap danger red */

  /* グレースケール */
  --color-text-primary: #333;    /* メインテキスト */
  --color-text-secondary: #555;  /* セカンダリテキスト */
  --color-text-muted: #777;      /* 薄いテキスト */
  --color-text-light: #999;      /* さらに薄いテキスト */

  /* 背景色 */
  --color-bg-white: #fff;        /* 白背景 */
  --color-bg-light: #f9f9f9;     /* 明るい背景 */
  --color-bg-lighter: #f5f5f5;   /* さらに明るい背景 */

  /* ボーダー */
  --color-border-light: #e3e3e3; /* 明るいボーダー */
  --color-border-medium: #ddd;   /* 中間ボーダー */
  --color-border-dark: #666;     /* 濃いボーダー */

  /* エラー/警告（レガシー） */
  --color-error-legacy: #a94442; /* 旧エラー色 */
  --color-error-light: #f2dede; /* 明るいエラー色 */

  /* フォントサイズ */
  --font-size-base: 15px;

  /* フォントファミリー */
  --font-family-base: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,
                      "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo,
                      "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  /* レスポンシブブレークポイント - Bootstrap 3準拠 */
  --breakpoint-xs: 480px;   /* Extra small devices (phones) */
  --breakpoint-sm: 768px;   /* Small devices (tablets) */
  --breakpoint-md: 992px;   /* Medium devices (desktops) */
  --breakpoint-lg: 1200px;  /* Large devices (large desktops) */
}

body {
  /* font-size: 150%; */
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  padding-top: 100px;
}

/* 英語版は視認性の高いフォントを使用（フォントサイズは日本語と同じ15px） */
:lang(en) body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif,
               "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo;
  font-size: var(--font-size-base); /* 15px - 日本語と同じ */
}

/* テキストエリアのスタイル */
#text,
#revised-text {
  width: 100% !important;
  resize: vertical; /* 縦方向のみリサイズ可能 */
  font-size: 15px;
  line-height: 1.5;
}

/* 英語版のテキストエリアも同じフォントファミリーを使用 */
:lang(en) #text,
:lang(en) #revised-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; /* 日本語と同じサイズ */
}

/* ナビゲーションバーの高さ設定 */
.navbar-fixed-top {
  min-height: 70px; /* ナビゲーションバーの最小高さを設定 */
}

/* Medium devices and below (tablets and phones) - Bootstrap 3: max-width: 991px */
@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
    position: relative;
    float: right;
    margin-right: 15px;
    margin-top: 25px; /* ロゴの高さに合わせて調整 */
    margin-bottom: 0;
    padding: 9px 10px;
  }

  /* コンパクトなハンバーガーメニュー */
  .navbar-collapse {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .collapse.in{
      display:block !important;
      max-height: initial;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li {
    margin: 0;
    padding: 0;
    height: auto;
  }

  .navbar-nav>li>a {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: normal;
    min-height: auto;
    height: auto;
    margin: 0;
  }
  .collapse.in{
    display:block !important;
  }
}


.navbar-brand{
  height:auto; 
  max-width:80%;
  font-size:140%;
  padding: 15px; /* 標準のパディングを明示的に設定 */
}

.navbar-brand img{
  max-width:390px;
  margin: 0; /* マージンをリセット */
}

/* Small devices and below (phones) - Bootstrap 3: max-width: 767px */
@media (max-width: 767px) {
  .navbar-brand img{
    max-width:290px;
  }
}

/* Extra small devices (very small phones) - Bootstrap 3: max-width: 480px */
@media (max-width: 480px) {
  .navbar-brand img{
    max-width:240px;
  }
}

/* Medium devices and above (desktops) - Bootstrap 3: min-width: 992px */
@media (min-width: 992px) {
  .navbar-nav li a {
    padding:0 15px;
  }
}

#textdata_table td, #conjdata_table id{
  line-height:200%;
}

#textdata_tbody, #conjdata_tbody, #vocabdata_tbody {
  display:block;
  height:500px;
  overflow:auto;
}

#textdata_thead, #textdata_tbody tr, #conjdata_thead, #conjdata_tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;
}

#vocabdata_thead, #vocabdata_tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;
}

#textdata_thead, #conjdata_thead, #vocabdata_thead {
  width: calc( 100% - 1em ); /* scrollbar is average 1em/16px width, remove it from thead width */
}

/* テーブルの行間を広げて可読性を向上 */
table td,
table th {
  line-height: 1.7;
}

#textdata_table, #conjdata_table {
  width:100%;
  max-width: 100%;
  border-top: solid 2px lightgray;
  border-bottom: solid 2px lightgray;
}

#vocabdata_table {
  width:100%;
  max-width: 100%;
  border-bottom: solid 2px lightgray;
}

.advice_panel{
  font-weight: bold;
  margin-top:1.5em;
  padding-bottom:0.5em;
}

p.positive{
  color: var(--color-text-muted);
}

p.neutral{
  color: var(--color-text-muted); 
}

p.negative{
  color: var(--color-error-legacy); 
}

pre.wrap {
  overflow: auto;
  word-wrap: normal;
  white-space: pre-wrap;
}

div.badge{
  padding: 20px;
  border: 6px solid var(--color-error-light);
  border-radius: 6px;
  font-size: 2.4em;
  color: black;
  background: white;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* レベルごとの背景色 - 評価表の背景色と一致、ボーダーは白 */
div.badge.level-入門 {
  background-color: #d9edf7;
  border-color: white;
}

div.badge.level-初級 {
  background-color: #dff0d8;
  border-color: white;
}

div.badge.level-中級 {
  background-color: #fcf8e3;
  border-color: white;
}

div.badge.level-上級 {
  background-color: #f2dede;
  border-color: white;
}

div.badge.level-超級 {
  background-color: #E8E8E8;
  border-color: white;
}

div.badge_small{
  padding: 20px;
  font-size: 1.8em;
  color: black;
  background: white;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

#evaluation h4, #logical_structure h4{
  margin-bottom: 1em;
}

/* コンテナの最大幅を広げる */
.container {
  max-width: 1400px;
  margin: 0 auto;
  width: 95%;
}

.navbar.navbar-default .container {
  max-width: 1400px;
  margin: 0 auto;
}

/* デスクトップ表示のナビゲーションリンク高さ - Bootstrap 3: min-width: 992px */
@media (min-width: 992px) {
  .navbar-nav li a {
    line-height: 78px;
  }
}

/* モバイル表示のナビゲーションリンク高さ - Bootstrap 3: max-width: 991px */
@media (max-width: 991px) {
  .navbar-nav li a {
    line-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* ハンバーガーメニュー展開時のリスト項目の高さを指定 */
  .navbar-collapse .navbar-nav.navbar-right li {
    height: auto;
    padding: 0;
    margin: 0;
  }
  
  /* リンク内の余白を減らす */
  .navbar-collapse .navbar-nav.navbar-right li a {
    padding: 8px 15px;
    margin: 0;
  }
}

div#shortened_url{
  font-size: 4vw;
}

h3#prompt_title{
  margin-bottom:20px;
}

h3#current_prompt{
  line-height:140%;
}

#vocab_cloud {
  width: 100%;
  height:px;
  border:0;
  overflow: auto;
  overflow-y: hidden;
}

#vocab_cloud svg {
  width: 100%;
  max-width: 1200px;
  height:600px;
  border:0;
}

#hierarchy_panel a.pagelink {
  text-decoration: none;
  color: inherit;
}

#hierarchy_panel .category_tree {
  width: 100%;
  max-width: 1200px;
  height:1000px;
  overflow: auto;
}

#hierarchy_panel .node {
  cursor: pointer;
}

/* #category_tree .node circle { */
/*   fill: #fff; */
/*   stroke: steelblue; */
/*   stroke-width: 1.5px; */
/* } */

/* #category_tree .link { */
/*   fill: none; */
/*   stroke: #555; */
/*   stroke-opacity: 0.6; */
/*   stroke-width: 1.5px; */
/* } */

#vnetwork_container {
  width: 100%;
  max-width: 1200px;
  height:1010px;
  border:0;
  /* overflow: auto; */
  overflow: no-display;
}

#vnetwork_container svg {
  width: 100%;
  max-width: 1200px;
  height:1000px;
  border:1px solid lightgray;
  background-color: white; 
}

#vnetwork_container line.linkSelected {
  stroke: tomato;
  stroke-opacity: 0.8;
}

#vnetwork_container line.linkHidden {
  stroke: #999;
  stroke-opacity: 0.2;
}

#vnetwork_container circle.nodeHidden, #vnetwork_container text.nodeHidden {
  stroke-opacity: 0.2;
  opacity: 0.2;
}

#vnetwork_container circle.selected, #vnetwork_container text.selected {
  stroke-opacity: 1.0;
  opacity: 1.0;
}

#vnetwork_container circle.associated, #vnetwork_container text.associated {
  stroke-opacity: 1.0;
  opacity: 1.0;
}

.panel-body label{
  color:#666;
}

.panel-body label.checkbox-inline{
  color: black;
}


ul.nav.nav-tabs li a {
  font-weight: bold;
  color: var(--color-border-dark);
}

ul.nav.nav-tabs li.active a {
  font-weight: bold;
  color: black;
}

label.checkbox-inline span{
  font-weight: bold;
}

span.morph {
  color: black !important;
}

.btn-sm, .btn-group-sm > .btn {
  font-size: 14px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-weight: bold;
}

.label {
  font-size: 100%;
}

.open_toggle {
  font-weight: bold;
  color: var(--color-primary);
}

.open_toggle:hover {
  cursor: pointer;
}

.footer_blank {
  height: 50px;
}

#link_q_and_a:hover {
  cursor: pointer;
}

#footer {
  height: 50px;
}

/* AI診断タブのスタイル */
#ai-diagnostics-tab {
  padding-top: 0;
}

/* AIタブの説明ウェル */
#ai-diagnostics-info .well {
  background-color: var(--color-bg-lighter);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

/* AI診断説明のリスト項目 */
#ai-diagnostics-info .well ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

#ai-diagnostics-info .well ul li {
  margin-bottom: 5px;
}

/* AI診断説明のパラグラフ */
#ai-diagnostics-info .well p {
  margin-bottom: 10px;
}

/* アラート要素全般の行間設定 */
.alert {
  line-height: 1.6;
}

.alert ul {
  line-height: 1.7;
  margin-top: 8px;
  margin-bottom: 4px;
}

.alert ul li {
  margin-bottom: 4px;
}

.alert p {
  line-height: 1.6;
  margin-bottom: 4px;
}

.alert p:last-child {
  margin-bottom: 0;
}

#ai-diagnostics {
  margin-bottom: 20px;
}

#ai-diagnostics .panel-title {
  color: var(--color-text-primary);
  font-weight: normal;
}

#ai-diagnostics-buttons, 
#ai-diagnostics-result-buttons {
  margin-top: 25px;
}

/* ボタン間のマージン */
#run-diagnostics {
  margin-left: 10px;
}

#ai-diagnostics-content .panel {
  margin-bottom: 20px;
  border: none;
  box-shadow: none;
}

#ai-diagnostics-content .panel-heading {
  padding: 10px 15px;
  border-radius: 4px;
}

#ai-diagnostics-content .panel-body {
  padding: 15px;
}

/* AI診断：リライト差分ハイライト */
/* オリジナルテキストで削除された部分（黄色系） */
.diff-deleted {
  background-color: #fff3cd; /* 柔らかい黄色背景 */
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #856404; /* 濃い茶色テキスト（視認性向上） */
}

/* AIリライトで追加された部分（緑系） */
.diff-added {
  background-color: #d4edda; /* 柔らかい緑背景 */
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #155724; /* 濃い緑テキスト（視認性向上） */
}

/* 後方互換性のため（既存のクラス名も残す） */
.diff-highlight {
  background-color: #fff3cd;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #856404;
}

/* AI診断：全体評価の見出しハイライト */
.evaluation-heading {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  margin-right: 8px;
}

.heading-overall {
  background-color: #e3f2fd; /* 淡い青 */
  color: #1565c0;
}

.heading-natural {
  background-color: #e8f5e9; /* 淡い緑 */
  color: #2e7d32;
}

.heading-clarity {
  background-color: #fff9e6; /* 淡い黄 */
  color: #f57c00;
}

.heading-logic {
  background-color: #f3e5f5; /* 淡い紫 */
  color: #7b1fa2;
}

.heading-evidence {
  background-color: #fff3e0; /* 淡いオレンジ */
  color: #e65100;
}

/* AI診断：文法フィードバックのエラーマーカー（未使用） */
.feedback-error-marker {
  background-color: #ffe6e6; /* 淡い赤 */
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #c62828;
}

/* AI診断：文法フィードバックの正しい表現マーカー */
.feedback-correct-phrase {
  background-color: #d4edda; /* 淡い緑 */
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #155724;
}

#ai-diagnostics-content table {
  margin-bottom: 0;
}

#ai-diagnostics-loading {
  padding: 20px;
  margin-bottom: 20px;
}

/* ピュアCSSローディングスピナー */
.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 20px auto;
  border: 5px solid rgba(51, 122, 183, 0.2);
  border-radius: 50%;
  border-top: 5px solid var(--color-primary);
  border-bottom: 5px solid var(--color-primary);
  -webkit-animation: pure-spinner 1.5s linear infinite;
  animation: pure-spinner 1.5s linear infinite;
}

@-webkit-keyframes pure-spinner {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes pure-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* AI診断結果のスタイル */
.ai-diagnostics-result .panel {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid var(--color-border-medium);
  margin-bottom: 20px;
}

.ai-diagnostics-result .panel-primary .panel-heading {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.ai-diagnostics-result .panel-info .panel-heading {
  background-color: var(--color-info);
  color: white;
  border-color: var(--color-info);
}

.ai-diagnostics-result .panel-success .panel-heading {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

/* ボタンとラベルの縦方向中央配置修正 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 34px;
  padding-left: 12px;
  padding-right: 12px;
}

.label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

/* ボタンサイズ別の高さ設定 */
.btn-lg {
  min-height: 46px;
  padding-left: 16px;
  padding-right: 16px;
}

.btn-sm {
  min-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

.btn-xs {
  min-height: 22px;
  padding-left: 5px;
  padding-right: 5px;
}

/* アイコン付きボタンの調整 */
.btn .glyphicon,
.btn .fa {
  vertical-align: middle;
  margin-right: 0.25em;
}

/* ラベルの文字位置調整 */
.label {
  font-weight: normal;
}

/* ボタンとラベルが並んでいる場合の調整 */
.btn + .label,
.label + .btn {
  margin-left: 5px;
}

.ai-diagnostics-result .panel-title {
  font-size: 14px;
  font-weight: bold;
  color: white !important;
  margin-top: 0;
  margin-bottom: 0;
}

.ai-diagnostics-result .panel-body {
  padding: 15px;
  background-color: white;
}

.ai-diagnostics-result p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.ai-diagnostics-result table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.ai-diagnostics-result .table-bordered {
  border: 1px solid var(--color-border-medium);
}

.ai-diagnostics-result .table-bordered > thead > tr > th,
.ai-diagnostics-result .table-bordered > tbody > tr > th,
.ai-diagnostics-result .table-bordered > thead > tr > td,
.ai-diagnostics-result .table-bordered > tbody > tr > td {
  border: 1px solid var(--color-border-medium);
  padding: 8px;
  vertical-align: top;
}

.ai-diagnostics-result th {
  background-color: var(--color-bg-light);
  font-weight: bold;
  text-align: left;
}

/* AIリライトテキストのコピー防止 */
.no-select {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
  -khtml-user-select: none !important;
}

.no-select p,
.no-select span,
.no-select div {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Speaking ボタンのアイコン中央配置 */
#speaking {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#speaker_icon {
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important; /* アイコンを上に1px移動 */
}

/* ========================================
   Utility Classes - Phase 1 Inline Style Migration
   ======================================== */

/* Spacing Utilities */
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-40 { margin-bottom: 40px !important; }
.ml-10 { margin-left: 10px !important; }
.mr-15 { margin-right: 15px !important; }
.p-1em { padding: 1em !important; }
.pr-15 { padding-right: 15px !important; }
.p-0 { padding: 0 !important; }
.p-15 { padding: 15px !important; }

/* Flexbox Utilities */
.flex-center { 
  display: flex !important; 
  align-items: center !important; 
}
.flex-between { 
  display: flex !important; 
  justify-content: space-between !important; 
  align-items: center !important; 
}
.ml-auto { margin-left: auto !important; }

/* Display Utilities */
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { 
  display: inline-flex !important; 
  align-items: center !important; 
}

/* Text Utilities */
.text-bold { font-weight: bold !important; }
.text-gray-bold { 
  color: #696969 !important; 
  font-weight: bold !important; 
}
.text-center { text-align: center !important; }

/* Component-Specific Classes */

/* Layout Components */
.footer-bg-light { background-color: var(--color-bg-lighter) !important; }
.footer-text-padding { 
  padding-top: 1em !important; 
  padding-bottom: 1em !important; 
  margin-bottom: 0 !important; 
}

/* Well Components */
.well {
  line-height: 1.8;
}
.well-prompt { padding: 1em !important; }
.well-no-margin { margin-bottom: 0 !important; }
.well-info-box {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
.well-padding { padding: 15px !important; }

/* Header Components */
.input-header-flex { 
  margin-bottom: 15px !important; 
  display: flex !important; 
  align-items: center !important; 
}
.prompt-heading { font-weight: bold !important; }
.message-label { 
  height: 30px !important; 
  line-height: 30px !important; 
  display: inline-flex !important; 
  align-items: center !important; 
}
.header-controls-right { 
  margin-left: auto !important; 
  display: flex !important; 
  align-items: center !important; 
}

/* Navigation Components */
.nav-tabs-margin { margin: 10px 0px 10px 0px !important; }

/* Button Components */
.btn-text-bold { font-weight: bold !important; }
.btn-group-inline { 
  margin-left: 10px !important; 
  display: inline-block !important; 
}

/* Form Components */
.target-input { 
  width: 80px !important; 
  margin-right: 15px !important; 
}
.target-input-large { 
  width: 5em !important; 
  font-size: 140% !important; 
}
.diagnostic-selector { 
  min-width: 300px !important; 
  display: inline-block !important; 
  vertical-align: middle !important; 
}
.checkbox-aligned { margin-top: 7px !important; }
.prompt-textarea { font-size: 130% !important; }
.range-cohesion { width: 240px !important; }

/* Statistics Display */
.stat-value { 
  font-size: 20px !important; 
  color: var(--color-primary) !important; 
}

/* Chart Components */
.chart-numchar { 
  height: 140px !important; 
  width: 100% !important; 
}
.chart-diagnostic { 
  width: 100% !important; 
  height: 140px !important; 
}

/* Icon Components */
.toggle-icon { color: #666 !important; }

/* Tool Components */
.tool-heading-primary { color: var(--color-primary) !important; }

/* Panel Components */
.col-panel-left { 
  padding: 0 !important; 
  padding-right: 15px !important; 
}
.col-panel-right { 
  padding: 0 !important; 
  padding-right: 15px !important; 
}
.loading-container { 
  margin: 20px auto !important; 
  text-align: center !important; 
}
.vnetwork-legend { margin-bottom: 20px !important; }

/* Readability Table - Column Widths */
.readability-col-score { 
  width: 20% !important; 
  text-align: center !important; 
}
.readability-col-level { 
  width: 20% !important; 
  text-align: center !important; 
}
.readability-col-features { 
  width: 60% !important; 
  text-align: center !important; 
}

/* Readability Levels - Background Colors */
.level-introductory { 
  background-color: #E5F2E5 !important; 
  text-align: center !important; 
}
.level-elementary { 
  background-color: #C8E6C9 !important; 
  text-align: center !important; 
}
.level-pre-intermediate { 
  background-color: #FFF9C4 !important; 
  text-align: center !important; 
}
.level-intermediate { 
  background-color: #FFE082 !important; 
  text-align: center !important; 
}
.level-pre-advanced { 
  background-color: #FFCC80 !important; 
  text-align: center !important; 
}
.level-advanced { 
  background-color: #FFAB91 !important; 
  text-align: center !important; 
}
.level-proficient { 
  background-color: #EF9A9A !important; 
  text-align: center !important; 
}

/* Vocabulary Levels - Background Colors */
.vocab-level-1 { background-color: #E5F2E5 !important; }
.vocab-level-2 { background-color: #C8E6C9 !important; }
.vocab-level-3 { background-color: #FFF9C4 !important; }
.vocab-level-4 { background-color: #FFE082 !important; }
.vocab-level-5 { background-color: #FFCC80 !important; }
.vocab-level-6 { background-color: #FFAB91 !important; }

/* Function Expression Levels - Border Styles */
.function-level-1 { border-bottom: solid 3px #abced8 !important; }
.function-level-2 { border-bottom: solid 3px #f7c873 !important; }
.function-level-3 { border-bottom: solid 3px #ea8685 !important; }

/* Conjunction Types - Background Colors */
.conj-junsetsu { background-color: #ffffe0 !important; }
.conj-gyakusetsu { background-color: #F0E68C !important; }
.conj-ruikei { background-color: #e6e6fa !important; }
.conj-tenkei { background-color: #ffa07a !important; }
.conj-hosoku { background-color: #f5deb3 !important; }
.conj-setsuzoku { background-color: #ffb6c1 !important; }
.conj-tenkan { background-color: #00ced1 !important; }
.conj-teisei { background-color: #90ee90 !important; }
.conj-taihiteki { background-color: #ffdab9 !important; }
.conj-tsuika { background-color: #dda0dd !important; }
.conj-zentei { background-color: #87ceeb !important; }


/* Tab Icon Colors - カラフルで視認性の高い配色 */
.tab-icon-info { color: #3498db !important; }        /* テキスト情報: 明るい青 */
.tab-icon-evaluation { color: #2ecc71 !important; }  /* テキスト評価: 緑 */
.tab-icon-ai { color: #9b59b6 !important; }          /* AI診断: 紫 */
.tab-icon-vocab { color: #e67e22 !important; }       /* 語彙情報: オレンジ */
.tab-icon-conj { color: #e74c3c !important; }        /* 接続表現: 赤 */
.tab-icon-cloud { color: #1abc9c !important; }       /* ワードクラウド: ターコイズ */
.tab-icon-list { color: #f39c12 !important; }        /* 語彙リスト: 濃いオレンジ */
.tab-icon-network { color: #16a085 !important; }     /* 語彙ネットワーク: 濃いターコイズ */
.tab-icon-hierarchy { color: #8e44ad !important; }   /* 意味階層図: 濃い紫 */

/* 入力テキスト統計の横並びレイアウト（レスポンシブ） */
.stats-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.stats-horizontal li {
  flex: 1 1 auto;
  min-width: 150px;
  white-space: nowrap;
}

/* 狭い画面では縦並び */
@media (max-width: 576px) {
  .stats-horizontal {
    flex-direction: column;
    gap: 8px;
  }

  .stats-horizontal li {
    min-width: 0;
  }
}