/* Interactive Line Chart Base */
/* ===== Chart Base ===== */

.ilc-chart{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
  cursor:pointer;
}

.ilc-chart.is-large{
  height:80vh;
  cursor:default;
}

/* ===== SVG Layer ===== */

.ilc-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

/* ===== Axis ===== */

.ilc-axis{
  stroke:rgba(255,255,255,0.2);
  stroke-width:1;
}

/* ===== Line ===== */

.ilc-line{
  fill:none;
  stroke:#ff7a00;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}

/* ===== Point ===== */

.ilc-point{
  fill:#ff7a00;
  stroke:#fff;
  stroke-width:2;
  cursor:pointer;
  transition:transform .15s ease, fill .15s ease;
}

.ilc-point:hover{
  transform:scale(1.15);
  fill:#ff9d3d;
}

/* ===== Tooltip ===== */

.ilc-tooltip{
  position:absolute;
  z-index:10;
  min-width:120px;
  background:#fff;
  color:#333;
  font-size:12px;
  padding:8px 10px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-130%) scale(.96);
  transition:all .15s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
}

.ilc-tooltip.is-active{
  opacity:1;
  transform:translate(-50%,-140%) scale(1);
}

.ilc-tooltip-title{
  font-weight:600;
  margin-bottom:2px;
}

.ilc-tooltip-desc{
  font-size:11px;
  color:#666;
}

/* ===== Modal ===== */

/* ===== mycareerscore.html ページ固有 ===== */

#mycareerscore-page { padding-top: 72px; }

/* ===== about.html #mycareerscore セクション（黒帯・グリッド） ===== */
/* レイアウト定義はstyle.cssに集約 */

body[data-page="about-mycareerscore"] .page-eyebrow {
  background: var(--text-main);
  padding: 1.5rem 0 0;
}
body[data-page="about-mycareerscore"] .page-eyebrow-no-crumb { padding-bottom: 0; }
body[data-page="about-mycareerscore"] .page-eyebrow-title { color: #fff; margin-bottom: 0; }
body[data-page="about-mycareerscore"] .section-label { margin-top: 0.5rem; }
body[data-page="about-mycareerscore"] .breadcrumb a { color: rgba(255,255,255,0.55); }
body[data-page="about-mycareerscore"] .breadcrumb-sep { color: rgba(255,255,255,0.55); opacity: 1; }

body[data-page="about-mycareerscore"] #mycareerscore-section {
  background: var(--text-main);
  padding: 0.75rem 0 2rem;
}

.mycareerscore-rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0;
}

#mycareerscore-detail-chart {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px;
}
.ilc-chart-main {
  width: 100%;
}
body[data-page="about"] .ilc-canvas-wrap { height: 170px; }
body[data-page="about-mycareerscore"] .ilc-canvas-wrap { height: 180px; }

/* ===== mycareerscoreテーブル ===== */

/* ── ロゴセル（article.cssに定義なし → mycareerscore固有） ── */
.mcs-tbl-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--body-bg);
  border: 1px solid var(--line-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-sub);
  overflow: hidden;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mcs-tbl-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ── 開始年セル（article.cssのtd:first-childを上書き） ── */
#mcsTable td.mcs-tbl-year {
  font-size: 0.75rem;
  color: var(--text-sub);
  white-space: nowrap;
}

/* ── 会社名セル（article.cssのtd colorを上書き） ── */
#mcsTable td.mcs-tbl-org {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.82rem;
}

/* ── 概要セル ── */
#mcsTable td.mcs-tbl-summary {
  color: var(--text-main);
  font-size: 0.78rem;
}

/* ── 自己評価スコアセル ── */
#mcsTable td.mcs-tbl-score {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
#mcsTable td.mcs-tbl-score.self { color: var(--accent); }

/* ── AI評価テキストセル ── */
#mcsTable td.mcs-tbl-ai-text {
  color: var(--text-main);
  font-size: 0.78rem;
  line-height: 1.5;
}
#mcsTable td.mcs-ai-pending {
  font-size: 0.7rem;
  color: var(--text-sub);
  font-style: italic;
}

/* ── スマホ：列の表示制御 ── */
@media (max-width: 767px) {
  .mcs-col-summary,
  .mcs-col-self,
  .mcs-col-ai { display: none; }
  #mcsTable tbody tr { cursor: pointer; }
  #mcsTable tbody tr:active { background: var(--accent-light); }
}

/* ===== スマホ用モーダル（lf-modal） ===== */

#mcsModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,19,0.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#mcsModal.open { display: flex; }
.mcs-modal-box {
  background: var(--container-bg);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  width: 300px;
  max-width: 88vw;
  text-align: center;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.mcs-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(20,20,19,0.08);
  border: none;
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-main);
  display: flex; align-items: center; justify-content: center;
}
.mcs-modal-logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--body-bg);
  border: 1px solid var(--line-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: var(--text-sub);
  margin: 0 auto 0.75rem;
  text-transform: uppercase;
  overflow: hidden;
}
.mcs-modal-logo img { width: 100%; height: 100%; object-fit: contain; }
.mcs-modal-org {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}
.mcs-modal-summary {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-bottom: 1.25rem;
}
.mcs-modal-scores {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}
.mcs-modal-score-block { text-align: center; }
.mcs-modal-score-lbl {
  font-size: 0.72rem;
  color: var(--text-sub);
  margin-bottom: 0.25rem;
}
.mcs-modal-score-num {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.mcs-modal-score-num.self {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.mcs-modal-score-num.ai { color: var(--text-main); }

/* ===== Controls & Legend ===== */

.ilc-controls {
  padding: 8px 10px 4px;
}

.ilc-switch-group {
  display: flex;
  gap: 4px;
}

.ilc-switch-btn {
  font-size: 11px;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.ilc-switch-btn.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.ilc-switch-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
}

.ilc-legend {
  display: flex;
  gap: 12px;
  padding: 4px 10px 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.ilc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ilc-legend-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}
.ilc-legend-swatch-dashed {
  width: 16px;
  height: 0;
  border-top: 2px dashed #4285f4;
}

/* ===== Canvas Wrap ===== */

.ilc-canvas-wrap {
  position: relative;
  width: 100%;
}
.ilc-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===== Tooltip (Chart.js版) ===== */

.ilc-tip {
  position: fixed;
  z-index: 100;
  background: var(--container-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.15s;
  min-width: 120px;
}
.ilc-tip.visible { opacity: 1; }
.ilc-tip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ilc-tip-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--body-bg);
  border: 1px solid var(--line-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-sub);
  flex-shrink: 0;
}
.ilc-tip-period {
  font-size: 10px;
  color: var(--text-sub);
}
.ilc-tip-org {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}

/* 黒背景内（タイトル帯）のリスト色：article.cssのarticle-body liを上書き */
.page-eyebrow .article-body li,
.page-eyebrow .article-body ol li {
  color: rgba(255,255,255,0.65);
}
.page-eyebrow .article-body .list-disc li::before {
  color: rgba(255,255,255,0.65);
}
/* 黒背景内のsection-label */
body[data-page="about-mycareerscore"] .page-eyebrow .section-label {
  color: var(--accent);
}
/* リスト左端の縦線（ブラウザデフォルトborder除去） */
body[data-page="about-mycareerscore"] .page-eyebrow .article-body ul,
body[data-page="about-mycareerscore"] .page-eyebrow .article-body ol {
  border: none;
  padding-left: 1.5rem;
}
/* パンくず最終spanを白に */
body[data-page="about-mycareerscore"] .breadcrumb span {
  color: rgba(255,255,255,0.55);
}
/* リード文・ol liを白に */
body[data-page="about-mycareerscore"] .page-eyebrow .article-body p {
  color: rgba(255,255,255,0.75);
}
/* スコア算出方法：見出し・サブ見出し */
.mcs-score-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 0.5rem;
}
.mcs-score-sub {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent) !important;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}
/* ===== mycareerscore一覧表：article.cssをIDセレクタで上書き ===== */

#mcsTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--body-bg);
}

#mcsTable-wrap {
  overflow-y: scroll;
  max-height: 40vh;
  margin-left: 0;
  border-radius: 0;
  border: none;
}

#mcsTable td {
  color: var(--text-main);
  font-size: 0.82rem;
  vertical-align: top;
  line-height: 1.5;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--panel-border);
}
#mcsTable tbody tr:last-child td { border-bottom: none; }
#mcsTable tbody tr:hover td { background: var(--body-bg); }

/* ロゴ列：現状は非表示（STORY等で再利用時に外す） */
.mcs-col-logo { display: none; }
/* チャートホバー時の行ハイライト */
#mcsTable tbody tr.mcs-row-highlight td { background: rgba(66,185,222,0.15); }
/* 黒背景内のarticle-rule：白線に上書き */
body[data-page="about-mycareerscore"] .page-eyebrow .article-rule {
  border-top-color: rgba(255,255,255,0.3);
}