/*
 * style.css — Phase 18 以降の補助スタイル
 *
 * 基底（リセット・タイポ・ヘッダー・タブ・カード・ボタン・フォーム・
 * テーブル基本・KPI・モーダル・トップ画面・会社選択など）は
 * brand.css に集約。
 *
 * このファイルは brand.css でカバーできない「機能固有の細部」だけを残す。
 *   - plan-table の編集セル・小計行・コメントアイコン・コピー機能
 *   - 固変トグルボタン
 *   - メモ欄・メモ履歴
 *   - 耐用年数表モーダル
 *   - 仕訳明細モーダル内テーブル
 *   - cell-clickable など細かい挙動
 *
 * すべての色は brand.css の CSS 変数（--brand-* / --ink-* / --state-*）を参照する。
 */


/* =========================================================================
 * 計画詳細セクション — 旧サイドバー廃止後の補助
 * ========================================================================= */

/* plan-sidebar 関連は段階5 で完全廃止される。
   過渡期に display:none で隠す保険として残す。 */
.plan-sidebar { display: none !important; }


/* =========================================================================
 * 損益計画テーブル（plan-table）
 * ========================================================================= */

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-13);
}

.plan-table th {
  background: var(--bg-base);
  color: var(--ink-2);
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-weight: var(--weight-medium);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--ink-4);
}

.plan-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--hairline);
}

.plan-col-code { width: 70px; text-align: center; }
.plan-col-name { width: 160px; }
.plan-col-year { width: 110px; text-align: right; }


/* ----- 編集可能セル ----- */
.plan-cell-edit { padding: 2px 4px !important; }

/* Phase 21 QA修正：brand.css の箱型 input 既定（padding 8px/12px）が
   計画セルでは幅を食い、6桁＋カンマの末尾が見切れる。セル内はコンパクトに上書き */
.plan-table input.plan-input,
.plan-table .plan-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  min-height: 28px;
  text-align: right;
  font-size: 12.5px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--color-surface);
  color: var(--ink-1);
  transition: border-color 0.15s;
}
.plan-table input.plan-input:focus,
.plan-table .plan-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-tint);
}


/* ----- 小計・税率・前年実績行 ----- */
.plan-subtotal-row td {
  padding: 6px 8px !important;
  border-bottom: var(--rule-strong);
  border-top: var(--hairline);
  text-align: right;
  font-weight: var(--weight-bold);
}
.plan-subtotal-row td:nth-child(2) { text-align: left; }

.plan-rate-row td {
  text-align: right;
  color: var(--ink-2);
  font-size: var(--font-12);
}

.plan-tax-rate-input-cell { text-align: center !important; }
.plan-tax-rate-input {
  width: 70px;
  padding: 3px 6px;
  text-align: right;
  font-size: var(--font-13);
  border: none;
  border-bottom: 1px solid var(--ink-4);
  background: transparent;
  color: var(--ink-1);
}
.plan-tax-rate-input:focus {
  outline: none;
  border-bottom-color: var(--brand-ink);
  border-bottom-width: 2px;
}


/* ----- 前年実績列 ----- */
.plan-prior {
  background: var(--bg-base) !important;
  color: var(--ink-2) !important;
}
.plan-prior-cell {
  text-align: right;
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-size: var(--font-12);
}
.plan-prior-clickable { cursor: pointer; }
.plan-prior-clickable:hover {
  background: var(--ink-5);
  text-decoration: underline;
}


/* ----- 操作列 ----- */
.plan-col-action {
  width: 40px;
  text-align: center;
  padding: 2px !important;
}
.plan-hide-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: var(--font-14);
  padding: 2px 6px;
  border-radius: var(--radius);
}
.plan-hide-btn:hover {
  background: var(--bg-subtle);
  color: var(--state-warn);
}
.plan-show-btn {
  border: 1px solid var(--ink-4);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: var(--font-12);
  padding: 2px 8px;
  border-radius: var(--radius);
}
.plan-show-btn:hover {
  background: var(--brand-ink);
  color: var(--bg-surface);
  border-color: var(--brand-ink);
}

.plan-hidden-row {
  opacity: 0.5;
  background: var(--bg-subtle);
}


/* ----- 入力方式バッジ（直接入力／前年同額／対前年比／科目連動）
   Phase 21：デザイン準拠のチップ型。種別ごとに塗り・枠で判別 ----- */
.plan-method-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--ink-2);
  white-space: nowrap;
}
.plan-method-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.method-direct { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.method-prior  { background: #F0EFE9; color: var(--color-text-sub); }
.method-yoy    { background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-primary-tint-border); }
.method-linked { background: var(--color-surface); color: var(--color-text-sub); border-color: var(--color-border); }


/* ----- セル上部のコメント・コピー機能 ----- */
.plan-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
  margin-bottom: 1px;
}
.plan-comment-icon {
  font-size: 10px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s;
  color: var(--ink-3);
}
.plan-comment-icon:hover { opacity: 1; color: var(--ink-1); }
.plan-comment-icon.has-comment { opacity: 1; color: var(--brand-accent); }

.plan-copy-right-btn {
  font-size: 10px;
  cursor: pointer;
  color: var(--ink-3);
  padding: 0 3px;
  border-radius: var(--radius);
  transition: all 0.15s;
}
.plan-copy-right-btn:hover {
  background: var(--brand-ink);
  color: var(--bg-surface);
}


/* ----- 横コピーポップオーバー ----- */
.plan-copy-popover {
  background: var(--bg-surface);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  padding: var(--space-3);
  min-width: 200px;
  font-size: var(--font-13);
}
.plan-copy-popover-title {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
  font-size: var(--font-12);
  color: var(--ink-2);
}
.plan-copy-popover button {
  background: var(--brand-ink);
  color: var(--bg-surface);
  border: none;
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--font-12);
  font-family: var(--font-sans-jp);
}
.plan-copy-popover button:hover {
  background: var(--ink-2);
}
.plan-copy-popover-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.plan-copy-popover-row input {
  padding: 3px 6px;
  border: none;
  border-bottom: 1px solid var(--ink-4);
  border-radius: 0;
  text-align: right;
  background: transparent;
  font-family: var(--font-sans-jp);
}


/* ----- 専門家コメントカード（背景グラデーション・装飾アイコンを廃止） ----- */
.plan-expert-card {
  background: var(--bg-subtle);
  border: var(--hairline);
  border-left: 3px solid var(--brand-accent);
}
.plan-expert-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.plan-expert-title {
  font-size: var(--font-15);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
}
.plan-expert-body {
  line-height: var(--line-body);
  color: var(--ink-1);
  font-size: var(--font-14);
}
.plan-expert-body p { margin-bottom: var(--space-2); }
.plan-expert-body p:last-child { margin-bottom: 0; }


/* ----- 販売計画 行スタイル ----- */
/* 入力時に売上行と原価行を見分けやすくする色分け（2026-07-05 平井様要望）
   売上（分類）行＝ティール淡、原価行＝ベージュ。トークンはブランド正規 */
.sales-rev-row td {
  background: var(--color-primary-tint);
}
.sales-cost-row td {
  background: var(--color-surface-alt);
  border-bottom: var(--hairline) !important;
  color: var(--ink-2);
}
.sales-gross-row td {
  border-bottom: var(--rule-strong) !important;
  padding: 6px 8px !important;
  font-weight: var(--weight-bold);
}
.plan-rate-input {
  text-align: center;
  border-color: var(--ink-4) !important;
}
.sales-acct-sel {
  font-size: var(--font-12);
  padding: 3px 6px;
  border: none;
  border-bottom: 1px solid var(--ink-4);
  background: transparent;
  border-radius: 0;
}


/* ----- 年度ヘッダーのコメントアイコン ----- */
.plan-fy-comment-icon {
  font-size: 11px;
  cursor: pointer;
  opacity: 0.4;
  vertical-align: middle;
  color: var(--ink-3);
}
.plan-fy-comment-icon:hover { opacity: 1; color: var(--ink-1); }
.plan-fy-comment-icon.has-comment { opacity: 1; color: var(--brand-accent); }


/* =========================================================================
 * 固変トグルボタン
 * ========================================================================= */

.th-category {
  text-align: center !important;
  min-width: 50px;
}
.cell-toggle {
  text-align: center !important;
  padding: 4px 6px !important;
}

.category-toggle {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--ink-4);
  background: transparent;
  border-radius: var(--radius);
  font-size: var(--font-12);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans-jp);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
  color: var(--ink-2);
}
.category-toggle:hover {
  border-color: var(--ink-1);
  color: var(--ink-1);
}
.category-toggle:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* 変動／固定の意味は文字でも分かるが、形（縦罫線）でも差をつける */
.toggle-variable {
  color: var(--ink-1);
  border-color: var(--ink-3);
}
.toggle-fixed {
  color: var(--ink-1);
  border-color: var(--ink-1);
  font-weight: var(--weight-bold);
}


/* =========================================================================
 * クリック可能セル
 * ========================================================================= */

.cell-clickable {
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.cell-clickable:hover {
  background: var(--color-primary-tint) !important;
}
.cell-clickable .cell-hint {
  display: none;
  font-size: 10px;
  margin-left: 4px;
  color: var(--ink-3);
}
.cell-clickable:hover .cell-hint {
  display: inline;
}
.cell-zero { color: var(--ink-4); }


/* =========================================================================
 * 仕訳明細モーダル内テーブル
 * ========================================================================= */

.modal-table-wrap {
  overflow-y: auto;
  flex: 1;
  padding: 0 var(--space-5);
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-13);
  margin-top: var(--space-3);
}
.modal-table thead th {
  background: var(--bg-base);
  color: var(--ink-2);
  padding: var(--space-2);
  text-align: left;
  position: sticky;
  top: 0;
  white-space: nowrap;
  font-size: var(--font-12);
  border-bottom: 1px solid var(--ink-4);
  font-weight: var(--weight-medium);
}
.modal-table thead th:nth-child(3) { text-align: right; }
.modal-table tbody td {
  padding: 7px 10px;
  border-bottom: var(--hairline);
  vertical-align: top;
}
.modal-table tbody td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}
.modal-table tbody tr:hover td {
  background: var(--bg-subtle);
}
.desc-cell {
  color: var(--ink-2);
  font-size: var(--font-12);
  max-width: 200px;
  word-break: break-all;
}


/* =========================================================================
 * メモ欄（仕訳モーダル内）
 * ========================================================================= */

.modal-memo {
  padding: var(--space-4) var(--space-5);
  border-top: var(--hairline);
  flex-shrink: 0;
  background: var(--bg-base);
}

.memo-label {
  font-size: var(--font-13);
  font-weight: var(--weight-medium);
  color: var(--ink-2);
  margin-bottom: var(--space-1);
}

.memo-textarea {
  width: 100%;
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-14);
  font-family: var(--font-sans-jp);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  background: var(--bg-surface);
}
.memo-textarea:focus {
  border-color: var(--brand-ink);
}

.memo-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.memo-saved-msg {
  font-size: var(--font-13);
  color: var(--ink-2);
}


/* ----- セル内メモ件数バッジ（琥珀・ピル型） ----- */
.memo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #FFF;
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--font-num);
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}

.memo-count-label {
  font-size: var(--font-12);
  color: var(--ink-3);
  font-weight: var(--weight-regular);
  margin-left: 4px;
}


/* ----- メモ履歴一覧 ----- */
.memo-history {
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: var(--space-2);
}
.memo-empty {
  text-align: center;
  color: var(--ink-3);
  font-size: var(--font-13);
  padding: var(--space-3) 0;
}
.memo-item {
  background: var(--bg-surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.memo-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.memo-item-date {
  font-size: 11px;
  color: var(--ink-3);
}
.memo-delete-btn {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: var(--radius);
  transition: color 0.15s;
}
.memo-delete-btn:hover {
  color: var(--state-warn);
}
.memo-item-content {
  font-size: var(--font-13);
  color: var(--ink-1);
  line-height: var(--line-body);
  white-space: pre-wrap;
  word-break: break-word;
}


/* =========================================================================
 * 耐用年数表モーダル
 * ========================================================================= */

.ul-table-group { margin-bottom: var(--space-4); }
.ul-table-cat {
  font-size: var(--font-13);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  background: var(--bg-base);
  border-bottom: 1px solid var(--ink-4);
  padding: var(--space-2) var(--space-3);
}
.ul-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-12);
  border-bottom: var(--hairline);
}
.ul-table th {
  background: var(--bg-base);
  padding: 5px 8px;
  font-weight: var(--weight-medium);
  border-bottom: var(--hairline);
  font-size: var(--font-12);
  color: var(--ink-2);
}
.ul-table td {
  padding: 4px 8px;
  border-bottom: var(--hairline);
  vertical-align: top;
}
.ul-structure {
  background: var(--bg-subtle);
  font-weight: var(--weight-medium);
  color: var(--ink-1);
}
.ul-row {
  cursor: pointer;
  transition: background 0.15s;
}
.ul-row:hover {
  background: var(--bg-subtle);
}


/* ----- 中古資産ボタン ----- */
.btn-used-asset {
  background: transparent;
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-sans-jp);
  transition: border-color 0.15s, color 0.15s;
}
.btn-used-asset:hover {
  border-color: var(--ink-1);
  color: var(--ink-1);
}
.btn-used-asset.active {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
  background: var(--bg-subtle);
}
.btn-used-asset-calc {
  background: var(--brand-ink);
  color: var(--bg-surface);
  border: none;
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans-jp);
}
.btn-used-asset-calc:hover {
  background: var(--ink-2);
}

#useful-life-overlay {
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


/* =========================================================================
 * 年度切替・データ取込・取込済み一覧
 * ========================================================================= */

.fy-active {
  border-color: var(--brand-ink) !important;
  background: var(--bg-subtle) !important;
}
.fy-current-badge {
  display: inline-block;
  font-size: 11px;
  background: transparent;
  color: var(--ink-1);
  border: 1px solid var(--ink-1);
  padding: 1px 8px;
  border-radius: var(--radius);
  margin-left: 8px;
  vertical-align: middle;
  font-weight: var(--weight-medium);
}

.company-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  transition: background 0.15s, border-color 0.15s;
}
.company-item:hover {
  background: var(--bg-subtle);
}
.company-item.company-active {
  border-color: var(--brand-ink);
  background: var(--bg-subtle);
}
.company-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.company-name {
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  font-size: var(--font-15);
}
.company-meta {
  font-size: var(--font-12);
  color: var(--ink-2);
}
.company-actions {
  display: flex;
  gap: var(--space-2);
}


/* =========================================================================
 * ファイルドロップゾーン
 * ========================================================================= */

.file-drop-zone {
  border: 2px dashed var(--color-primary-tint-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--color-surface);
}
.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}
.drop-icon {
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.drop-text {
  font-size: var(--font-15);
  color: var(--ink-1);
}
.drop-sub {
  font-size: var(--font-13);
  color: var(--ink-2);
}
.file-name {
  margin-top: var(--space-3);
  color: var(--ink-1);
  font-size: var(--font-14);
  font-weight: var(--weight-medium);
}


/* =========================================================================
 * KPI コメントカラム
 * ========================================================================= */

/* Phase 21：変動コメントは KPI カード群の下に全幅カードで置く（デザイン準拠） */
.kpi-comments-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: var(--space-4);
  align-items: stretch;
}
.kpi-comments-row .kpi-grid {
  margin-bottom: 0;
}
.kpi-comments {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 20px;
  font-size: var(--font-13);
  line-height: 1.75;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.kpi-comments:empty { display: none; }
/* 琥珀の吹き出しアイコン枠（HTML は JS 側で生成） */
.kpi-comments-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kpi-comments-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi-comments-title {
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  margin-bottom: 0;
  font-size: var(--font-13);
}
.kpi-comment-item {
  padding: 1px 0;
  color: var(--color-text);
}
.kpi-comment-up {
  color: var(--color-negative);
}
.kpi-comment-up:not(:empty)::before { content: "▲ "; font-size: 0.85em; }
.kpi-comment-down {
  color: var(--ink-2);
}
.kpi-comment-down:not(:empty)::before { content: "▽ "; font-size: 0.85em; }


/* =========================================================================
 * セクションヘッダー（背景色を持つ表）
 * ========================================================================= */

/* 行動計画テーブルなど、過渡的にインライン style="background:var(--bg-subtle)" が
   残るヘッダー行に対応する保険。次回以降の改修で HTML 側を整理する。 */
.data-table thead tr[style*="background"] th {
  background: var(--bg-base) !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid var(--ink-4) !important;
}


/* =========================================================================
 * ストラック図（Phase 20 / v140）
 * 損益ストラック図・貸借ストラック図を Web タブ内に SVG で描画する。
 * 配置は KPI カードグリッドの直下、月次 Chart.js グラフの上。
 * 月次セレクタで「期間累計／各月単月」（PL）、「期末／各月末」（BS）を切替。
 * Phase 18 ミニマル基調：余白多め・横罫線のみ・Tabular Numerals 強制。
 * ========================================================================= */
.struct-card {
  background: var(--color-surface);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.struct-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.struct-title {
  font-size: var(--font-15, 15px);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  margin: 0;
}
.struct-sub {
  font-size: var(--font-12, 12px);
  color: var(--ink-3);
  margin-left: var(--space-2);
  font-weight: normal;
}
.struct-period {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-12, 12px);
  color: var(--ink-2);
}
.struct-period select {
  padding: 4px 8px;
  font-size: var(--font-12, 12px);
  border: 1px solid var(--ink-5);
  background: #fff;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums lining-nums;
}
.struct-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.struct-wrap svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Phase 20 v=142：図と数字を横並びにする本体（PL のみ採用） */
.struct-body {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  flex-wrap: wrap;
}
.struct-body .struct-wrap {
  flex: 1 1 360px;
  min-width: 280px;
}
.struct-summary {
  flex: 1 1 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-1);
  padding: 0 var(--space-3);
}
/* eyebrow（単位表示）— 小さなアクセント */
.struct-summary .ss-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-11, 11px);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ink-5);
}
.struct-summary .ss-head .ss-unit {
  font-feature-settings: "tnum";
}
.struct-summary .row {
  display: grid;
  grid-template-columns: 1fr auto 56px;
  align-items: baseline;
  gap: var(--space-2);
  padding: 4px 0;
  font-size: var(--font-13, 13px);
}
/* 控除項目：左インデント・薄文字・小さめ */
.struct-summary .row.indent {
  padding-left: 14px;
  padding-top: 2px;
  padding-bottom: 4px;
  color: var(--ink-3);
  font-size: var(--font-12, 12px);
}
.struct-summary .row.indent .val {
  color: var(--ink-2);
}
/* 中小計：細罫線＋やや太・本文サイズ */
.struct-summary .row.sub {
  border-top: 1px solid var(--ink-5);
  margin-top: 4px;
  padding-top: 8px;
  font-weight: var(--weight-bold, 600);
  font-size: var(--font-14, 14px);
}
/* 主要小計（営業利益・経常利益）：太罫線＋大きめ・余白厚 */
.struct-summary .row.major {
  border-top: 2px solid var(--ink-3);
  margin-top: 6px;
  padding-top: 10px;
  padding-bottom: 4px;
  font-weight: var(--weight-bold, 700);
  font-size: var(--font-15, 15px);
}
.struct-summary .row.major + .row.indent {
  padding-top: 6px;
}
.struct-summary .row .label {
  grid-column: 1;
  white-space: nowrap;
}
.struct-summary .row .val {
  grid-column: 2;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum";
}
.struct-summary .row .rate {
  grid-column: 3;
  text-align: right;
  font-size: var(--font-11, 11px);
  color: var(--ink-3);
  font-weight: normal;
}
/* マイナス時の強調（営業利益赤字など） */
.struct-summary .row.warn .val,
.struct-summary .row.warn .label {
  color: var(--color-negative);
}
/* 指標エリア（流動比率・当座比率・自己資本比率）— BS 右ペイン下部 */
.struct-summary .metrics {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--ink-3);
}
.struct-summary .metrics .row.metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 5px 0;
  font-size: var(--font-13, 13px);
}
.struct-summary .metrics .row.metric .label {
  color: var(--ink-2);
  font-weight: normal;
}
.struct-summary .metrics .row.metric .val {
  font-weight: var(--weight-bold, 700);
  color: var(--ink-1);
  font-size: var(--font-14, 14px);
  text-align: right;
}
.struct-summary .metrics .row.metric .rate {
  display: none;
}
@media (max-width: 760px) {
  .struct-body { flex-direction: column; }
  .struct-summary { padding: 0; }
}
.struct-legend {
  font-size: var(--font-12, 12px);
  color: var(--ink-2);
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.struct-legend .lg-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

/* =========================================================================
 * Phase 21 追加：合計列の面・取込3ステップ・取込履歴・年度ドロップダウン補助
 * ========================================================================= */

/* 月次表・明細表の合計列（最終列）を薄く面で分ける（デザイン準拠） */
#monthly-table th:last-child,
#bs-monthly-table th:last-child,
#detail-table th:last-child,
#bs-detail-table th:last-child {
  background: #EFEDE0;
  font-weight: 700;
}
#monthly-table td:last-child,
#bs-monthly-table td:last-child,
#detail-table td:last-child,
#bs-detail-table td:last-child {
  background: var(--color-surface-dim);
  font-weight: 700;
}

/* セクション見出し横の説明文と単位表示 */
.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.section-header h2 { margin-bottom: 0; }
.section-lead {
  font-size: 12.5px;
  color: var(--color-text-sub);
}
.section-unit {
  margin-left: auto;
  font-size: var(--font-12);
  font-weight: var(--weight-medium);
  color: var(--color-text-sub);
}
.section-header .section-meta { width: 100%; }

/* 取込3ステップガイド */
.import-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: var(--space-4);
}
.import-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.import-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.import-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-13);
  font-weight: 700;
  font-family: var(--font-num);
  flex: none;
}
.import-step-title {
  font-size: var(--font-14);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
}
.import-step-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-sub);
}

/* 取込履歴テーブルの状態チップ */
.import-status-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.import-status-chip.balance {
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
}


/* =========================================================================
 * レスポンシブ補助
 * ========================================================================= */

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== 管理画面（会社×同期状態・ローカル専用） ===== */
.header-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 8px);
  color: var(--color-text-sub);
  flex: none;
}
.header-admin-btn:hover { color: var(--ink-1); background: var(--color-surface-alt); }
.header-admin-btn svg { width: 17px; height: 17px; }

#admin-table .admin-sub { font-size: 11px; color: var(--color-text-sub); margin-top: 2px; }
.admin-diff {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
/* 遅れ＝琥珀（注記色）。深紅は使わない（警告色は他機能で使用中） */
.admin-diff-behind  { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.admin-diff-unknown { background: var(--color-surface-alt); color: var(--color-accent-dark); }
.admin-diff-latest  { color: var(--color-text-sub); }
.admin-diff-unpublished { color: var(--color-text-sub); opacity: .6; }

/* Phase B：行内同期ボタン＋進行表示 */
.admin-sync-cell { min-width: 150px; }
.admin-sync-btn { white-space: nowrap; }
.admin-sync-running {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-sub);
  white-space: nowrap;
}
.admin-spinner { width: 13px; height: 13px; margin-right: 0; }
.admin-sync-line {
  font-size: 11px;
  color: var(--color-text-sub);
  margin-top: 3px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sync-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-negative);
  margin-bottom: 4px;
}

/* Phase C：タブ・検索・アーカイブ・…メニュー */
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-search {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 200px;
}
.admin-search:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.admin-row-archived td { opacity: .55; }
.admin-row-archived td.admin-sync-cell { opacity: 1; }
.admin-kind-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
  vertical-align: 1px;
}
.admin-sync-cell { position: relative; }
.admin-sync-slot { display: inline-block; }
.admin-menu-btn {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-sub);
  cursor: pointer;
}
.admin-menu-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.admin-menu {
  position: absolute;
  right: 8px;
  top: calc(100% - 6px);
  z-index: 30;
  min-width: 150px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.admin-menu-item {
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.admin-menu-item:hover { background: var(--color-surface-alt); }

/* Phase D：ポータル公開設定＋追加ウィザード */
.admin-portal-card { margin-top: 16px; }
.admin-portal-lead {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 4px 0 12px;
}
.admin-portal-meta {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 8px;
}
.admin-portal-add { margin-top: 12px; }
.admin-portal-status-on  { font-size: 12px; font-weight: 600; color: var(--color-primary); }
.admin-portal-status-off { font-size: 12px; font-weight: 600; color: var(--color-text-sub); }
#portal-wizard-body { padding: 16px 20px 20px; }
.portal-wizard-field { margin-bottom: 12px; }
.portal-wizard-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
  margin-bottom: 4px;
}
.portal-wizard-field input,
.portal-wizard-field select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}
.portal-wizard-hint {
  font-size: 11px;
  color: var(--color-text-sub);
  margin-top: 3px;
}
.portal-wizard-done {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.portal-checklist {
  font-size: 12px;
  line-height: 1.7;
  background: var(--color-surface-alt);
  border-radius: 8px;
  padding: 12px 14px;
  white-space: pre-wrap;
  max-height: 320px;
  overflow: auto;
  margin: 8px 0 12px;
}

/* Phase E：連絡先メール（表示⇄編集をセル内で切り替え） */
.admin-contact-cell { white-space: nowrap; }
.admin-contact-value { font-size: 13px; color: var(--color-text); }
.admin-contact-empty { font-size: 12px; color: var(--color-text-sub); opacity: .7; }
.admin-contact-edit {
  font: inherit;
  font-size: 12px;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-sub);
  cursor: pointer;
}
.admin-contact-edit:hover { background: var(--color-surface-alt); color: var(--color-text); }
.admin-contact-input {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  width: 190px;
}
.admin-contact-actions { margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.admin-contact-cancel {
  font: inherit;
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--color-text-sub);
  cursor: pointer;
  padding: 2px 4px;
}
.admin-contact-cancel:hover { color: var(--color-text); text-decoration: underline; }

/* Phase E：招待（状態バッジ＋送信／再送ボタン＋開封確認） */
.admin-invite-cell { white-space: nowrap; }
.admin-invite-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 6px;
  white-space: nowrap;
}
.admin-invite-none    { color: var(--color-text-sub); opacity: .7; }
.admin-invite-sent    { background: var(--color-surface-alt); color: var(--color-accent-dark); }
.admin-invite-viewed  { color: var(--color-primary); }
.admin-invite-expired { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.admin-invite-check {
  font: inherit;
  font-size: 12px;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-sub);
  cursor: pointer;
}
.admin-invite-check:hover { background: var(--color-surface-alt); color: var(--color-text); }
.admin-invite-send:disabled { opacity: .5; cursor: not-allowed; }

/* Phase F：自己サービス変更後の現在ログインID表示 */
.admin-invite-loginid {
  display: block;
  font-size: 11px;
  color: var(--color-text-sub);
  margin: 4px 0;
}
.admin-invite-loginid .admin-invite-check { margin-left: 6px; }

/* ポータル：仮パスワードのまま放置されていないかの全画面案内
   （バナー方式は実機で見落とされたため、ダッシュボードより先に見える全画面表示に変更） */
.portal-pwd-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-surface, #f6f5f2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portal-pwd-setup-card {
  max-width: 420px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
  text-align: center;
  box-sizing: border-box;
}
.portal-pwd-setup-card h2 { font-size: 18px; margin: 0 0 12px; }
.portal-pwd-setup-card p {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: 0 0 20px;
  line-height: 1.7;
}
.portal-pwd-setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.portal-pwd-setup-change {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--color-primary, #2a2a2a);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.portal-pwd-setup-later {
  font: inherit;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--color-text-sub);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* ===== 表示切替＋表示期間（「◯月まで」）ツールバー ===== */
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.toolbar-row .view-toggle { margin-bottom: 0; }
.through-select {
  font-size: 13px;
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.through-select select {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-family: var(--font-sans-jp);
  font-size: 13px;
  color: var(--ink-1);
  background: var(--color-surface);
  cursor: pointer;
}

/* ===== 未分類の科目（取込後の分類先割当） ===== */
.unresolved-note {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 4px 0 12px;
}
#unresolved-table td { vertical-align: middle; }
.unresolved-select {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-family: var(--font-sans-jp);
  font-size: 13px;
  color: var(--ink-1);
  background: var(--color-surface);
  cursor: pointer;
  min-width: 180px;
}

/* ===== 宿題・進行案件ダッシュボード（Phase 1） ===== */
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tasks-summary { display: flex; gap: 8px; }
.task-sum {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.task-sum-over { color: var(--color-negative); border-color: var(--color-negative); background: var(--color-negative-tint); }
.tasks-add-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tasks-add-row input[type="text"]:first-child { flex: 1; min-width: 220px; }
.tasks-add-row input, .tasks-add-row select {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}
.tasks-add-row input:focus, .tasks-add-row select:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
#tasks-table .task-check-cell { width: 36px; text-align: center; }
#tasks-table .task-check-cell input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary); }
.task-title { font-weight: 500; }
.task-title-done { text-decoration: line-through; color: var(--color-text-sub); }
.task-row-closed td { opacity: .6; }
.task-sub { font-size: 11px; color: var(--color-text-sub); margin-top: 2px; }
.task-dropped-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
}
.task-due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-due-over { color: var(--color-negative); font-weight: 600; }
.task-due-soon { color: var(--color-accent-dark); font-weight: 600; }
.task-prio-high { color: var(--color-negative); font-weight: 600; }
.task-src { font-size: 12px; color: var(--color-text-sub); }
.task-op-cell { white-space: nowrap; }
.task-op-btn {
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  margin-right: 4px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-sub);
  cursor: pointer;
}
.task-op-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.task-op-del:hover { color: var(--color-negative); border-color: var(--color-negative); }

/* 宿題：brand.css の入力幅100%既定に負けないよう横並びを固定＋左寄せ */
#tasks-table th, #tasks-table td { text-align: left; }
#tasks-table .task-check-cell { text-align: center; }
.tasks-add-row input, .tasks-add-row select { width: auto; }
.tasks-add-row #task-add-title { flex: 1 1 260px; }
.tasks-add-row #task-add-owner { flex: 0 0 130px; }
.tasks-add-row #task-add-due { flex: 0 0 160px; }
.tasks-add-row #task-add-priority { flex: 0 0 72px; }

/* ===== 宿題：カード型ダッシュボード（祐 進行案件ダッシュボード準拠・v=193） ===== */
.tasks-tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.task-tile {
  font: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top-width: 3px;
  border-radius: 8px;
  padding: 10px 18px 9px;
  min-width: 104px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.task-tile:hover { background: var(--color-surface-alt); }
.task-tile.active { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.task-tile-num { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.task-tile-label { font-size: 12px; color: var(--color-text-sub); margin-top: 1px; }
.tile-open    { border-top-color: var(--color-primary); }
.tile-open .task-tile-num { color: var(--color-primary); }
.tile-over    { border-top-color: var(--color-negative); }
.tile-over .task-tile-num { color: var(--color-negative); }
.tile-done    { border-top-color: var(--color-border); }
.tile-done .task-tile-num { color: var(--color-text-sub); }
.tile-dropped { border-top-color: var(--color-border); }
.tile-dropped .task-tile-num { color: var(--color-text-sub); opacity: .7; }

.task-banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-negative-tint);
  border-left: 4px solid var(--color-negative);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
}
.task-banner strong { color: var(--color-negative); font-size: 15px; white-space: nowrap; }
.task-banner-title { font-weight: 600; }
.task-banner-meta { font-size: 12px; color: var(--color-text-sub); }

.tasks-toolbar .tasks-add-row { margin-bottom: 0; flex: 1; }
.tasks-toolbar #tasks-search { flex: 0 0 200px; }

.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.task-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.task-card-done, .task-card-dropped { border-left-color: var(--color-border); }
.task-card-done .task-sub, .task-card-dropped .task-sub { opacity: .8; }
.task-card-over { border-left-color: var(--color-negative); }
.task-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.task-card-head .task-title { font-size: 14px; font-weight: 600; line-height: 1.45; }
.task-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.task-badge-open    { background: var(--color-primary-tint, #E3F0EE); color: var(--color-primary); }
.task-badge-done    { background: var(--color-surface-alt); color: var(--color-text-sub); }
.task-badge-dropped { background: var(--color-surface-alt); color: var(--color-text-sub); opacity: .8; }
.task-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.task-chip {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
  white-space: nowrap;
}
.task-chip.task-due-over { background: var(--color-negative-tint); color: var(--color-negative); }
.task-chip.task-due-soon { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.task-chip-high { background: var(--color-negative-tint); color: var(--color-negative); }
.task-chip-src { font-weight: 500; }
.task-card .task-sub { margin-top: 8px; white-space: normal; }
.task-card-foot {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--color-text-sub);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
}
.task-card-foot strong { color: var(--color-text); font-weight: 600; }
.task-stale { color: var(--color-accent-dark); font-weight: 600; }
.task-card-actions { display: flex; gap: 6px; margin-top: 9px; }
.task-op-done { color: var(--color-primary); border-color: var(--color-primary); }
.task-op-done:hover { background: var(--color-primary); color: #fff; }
.tasks-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-sub);
  font-size: 13px;
  padding: 36px 0;
}

/* ===== 宿題：重要度×緊急度マトリックス（v=194） ===== */
.tasks-view-toggle { margin-bottom: 12px; }
.matrix-hint { font-size: 12px; color: var(--color-text-sub); margin: 2px 0 10px; }
.matrix-grid {
  display: grid;
  grid-template-columns: 26px 1fr 1fr;
  grid-template-rows: auto minmax(180px, auto) minmax(180px, auto);
  gap: 10px;
}
.matrix-corner { }
.matrix-axis-x {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: .06em;
}
.matrix-axis-y {
  display: flex;
  align-items: center;
  justify-content: center;
}
.matrix-axis-y span {
  writing-mode: vertical-rl;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: .18em;
}
.matrix-quad {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top-width: 3px;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.quad-do       { border-top-color: var(--color-negative); }
.quad-plan     { border-top-color: var(--color-primary); }
.quad-delegate { border-top-color: var(--color-accent, #DD9A2F); }
.quad-later    { border-top-color: var(--color-border); }
.matrix-quad-title {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 9px;
}
.quad-do .matrix-quad-title       { color: var(--color-negative); }
.quad-plan .matrix-quad-title     { color: var(--color-primary); }
.quad-delegate .matrix-quad-title { color: var(--color-accent-dark); }
.quad-later .matrix-quad-title    { color: var(--color-text-sub); }
.matrix-quad-body { display: flex; flex-direction: column; gap: 6px; }
.matrix-quad-hover { outline: 2px dashed var(--color-primary); outline-offset: -3px; }
.matrix-chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  background: var(--bg-base, #FAF9F4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: grab;
}
.matrix-chip:active { cursor: grabbing; }
.matrix-chip-over { border-left: 3px solid var(--color-negative); }
.matrix-chip-owner {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
}
.matrix-quad-empty { color: var(--color-text-sub); opacity: .5; font-size: 12px; padding: 4px 2px; }

/* ===== 宿題 Phase 2：社長のポータル操作＋社長の痕跡（琥珀） ===== */
/* 社長の手が入った印は琥珀で統一（design_tasks_portal.md §2） */
.task-sub-president {
  color: var(--color-accent-dark);
  background: var(--color-accent-tint);
  border-radius: 6px;
  padding: 3px 8px;
}
.task-president-mark { color: var(--color-accent-dark); font-weight: 600; }
.matrix-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-left: 4px;
  flex: none;
}

/* 社長の一言コメント：カード内インライン展開 */
.task-comment-editor { margin-top: 8px; }
.task-comment-editor textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.task-comment-editor-row { display: flex; gap: 6px; margin-top: 6px; }

/* ===== 相談コーナー（ポータル専用・宿題タブ内） ===== */
.consult-card { margin-top: 20px; }
.consult-head h3 { margin: 0 0 4px; font-size: 16px; color: var(--color-primary); }
.consult-lead { margin: 0 0 10px; font-size: 12.5px; color: var(--color-text-sub); }
.consult-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 2px;
}
.consult-messages:empty { display: none; }
.consult-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.consult-msg-user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #FFF;
  border-bottom-right-radius: 4px;
}
.consult-msg-bot {
  align-self: flex-start;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.consult-msg-typing {
  align-self: flex-start;
  color: var(--color-text-sub);
  font-size: 12.5px;
}
.consult-msg-escalate {
  align-self: flex-start;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  font-size: 12.5px;
  font-weight: 600;
}
.consult-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.consult-input-row textarea {
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.consult-input-row button { flex: none; }
.consult-note { margin: 8px 0 0; font-size: 11px; color: var(--color-text-sub); }

/* スマホ（ポータル）：ボタンのタップ領域を確保 */
@media (max-width: 960px) {
  .portal-mode .task-op-btn { padding: 10px 14px; font-size: 14px; }
  .portal-mode .consult-msg { max-width: 95%; }
}