/* ============================================================
     M3 カラートークン（app-001 / app-004 準拠）
  ============================================================ */
  :root {
    --md-bg:              #FFFFFF;
    --md-surface:         #F4F4F4;
    --md-on-surface:      #1C1B1F;
    --md-outline:         #E0E0E0;
    --md-outline-variant: #C4C4C4;
    --md-on-variant:      #6B6B6B;
    --md-primary:         #0F4C81;
    --md-primary-bg:      #E8F0F8;
    --md-error:           #B3261E;
    --md-error-bg:        #FFF5F5;
    --md-success:         #1E6B32;
    --md-success-bg:      #F0FFF4;
    --md-warning:         #B07E1A;
    --md-warning-bg:      #FFF8E5;
    --md-elevation-1:     0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    --md-elevation-2:     0 3px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --md-font:            'Noto Sans JP', sans-serif;
    --md-r-xs:            4px;
    --md-r-sm:            8px;
    --md-r-md:            16px;
    --md-r-full:          100px;
    --t:                  0.15s ease;
  }

  /* ============================================================
     リセット・ベース
  ============================================================ */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--md-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--md-on-surface);
    background: #F8F8F8;
    min-height: 100vh;
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: var(--md-font); }

  /* ============================================================
     ヘッダー
  ============================================================ */
  .app-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: var(--md-bg);
    border-bottom: 1px solid var(--md-outline);
  }

  .app-bar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .app-bar__logo-placeholder {
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: 0.05em;
  }

  .app-bar__title {
    font-size: 13px;
    font-weight: 400;
    color: var(--md-on-variant);
  }

  .app-bar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 16px;
  }
  .app-bar__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--md-r-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-variant);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: var(--md-font);
    transition: background var(--t), color var(--t);
  }
  .app-bar__nav-link:hover {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }
  .app-bar__nav-link.is-active {
    background: var(--md-on-surface);
    color: var(--md-bg);
  }

  /* 通知ベル */
  .app-bar__notif {
    position: relative;
    margin-right: 12px;
  }
  .app-bar__notif-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--md-on-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background var(--t), color var(--t);
  }
  .app-bar__notif-btn:hover {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }
  .app-bar__notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--md-r-full);
    background: var(--md-error);
    color: var(--md-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  .notif-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 16px);
    max-height: 500px;
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    box-shadow: var(--md-elevation-2);
    z-index: 200;
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .notif-dropdown.is-visible { display: flex; }
  .notif-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-surface);
  }
  .notif-dropdown__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
  }
  .notif-dropdown__list {
    flex: 1;
    overflow-y: auto;
    max-height: 440px;
  }
  .notif-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--md-on-variant);
  }
  .notif-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline);
    cursor: pointer;
    transition: background var(--t);
  }
  .notif-item:hover { background: var(--md-surface); }
  .notif-item.is-unread {
    background: rgba(15, 76, 129, 0.05);
  }
  .notif-item.is-unread .notif-item__title {
    font-weight: 700;
  }
  .notif-item.is-unread::before {
    content: '';
    position: absolute;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--md-primary);
    margin-top: 16px;
  }
  .notif-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-surface);
    font-size: 14px;
  }
  .notif-item__icon--mention { background: var(--md-primary-bg); }
  .notif-item__icon--delay { background: var(--md-error-bg); }
  .notif-item__main {
    min-width: 0;
  }
  .notif-item__title {
    font-size: 12px;
    color: var(--md-on-surface);
    margin-bottom: 2px;
  }
  .notif-item__msg {
    font-size: 11px;
    color: var(--md-on-variant);
    line-height: 1.4;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .notif-item__time {
    font-size: 10px;
    color: var(--md-on-variant);
    margin-top: 4px;
  }

  .app-bar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--md-on-variant);
  }

  .app-bar__user-name {
    color: var(--md-on-surface);
    font-weight: 500;
  }

  .app-bar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--md-primary-bg);
    color: var(--md-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
  }

  /* ============================================================
     メインレイアウト
  ============================================================ */
  .main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .page-header__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--md-on-surface);
    letter-spacing: 0.01em;
  }

  .page-header__subtitle {
    font-size: 13px;
    color: var(--md-on-variant);
    margin-top: 4px;
  }

  /* ============================================================
     Surface（M3カード）
  ============================================================ */
  .surface {
    background: var(--md-bg);
    border-radius: var(--md-r-md);
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--md-outline);
    padding: 24px;
  }

  .surface--flat {
    box-shadow: none;
  }

  /* ============================================================
     タブ（フィルタ切替）
  ============================================================ */
  .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--md-outline);
    overflow-x: auto;
  }

  .tab {
    flex-shrink: 0;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-variant);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--t), border-color var(--t);
    margin-bottom: -1px;
  }

  .tab:hover {
    color: var(--md-on-surface);
  }

  .tab.is-active {
    color: var(--md-on-surface);
    border-bottom-color: var(--md-on-surface);
  }

  .tab__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: var(--md-surface);
    border-radius: var(--md-r-full);
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
  }

  .tab.is-active .tab__count {
    background: var(--md-on-surface);
    color: var(--md-bg);
  }

  /* ============================================================
     M3 Buttons
  ============================================================ */
  .btn-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--md-bg);
    background: var(--md-on-surface);
    border: none;
    border-radius: var(--md-r-full);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: opacity var(--t), box-shadow var(--t);
    white-space: nowrap;
  }

  .btn-filled:hover:not(:disabled) {
    opacity: 0.85;
    box-shadow: var(--md-elevation-2);
  }

  .btn-filled:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  .btn-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--md-on-surface);
    background: var(--md-bg);
    border: 1.5px solid var(--md-on-surface);
    border-radius: var(--md-r-full);
    cursor: pointer;
    transition: opacity var(--t), background var(--t);
    white-space: nowrap;
  }

  .btn-outlined:hover:not(:disabled) {
    opacity: 0.85;
    background: var(--md-surface);
  }

  .btn-outlined:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
    background: transparent;
    border: none;
    border-radius: var(--md-r-sm);
    cursor: pointer;
    transition: background var(--t);
  }

  .btn-text:hover:not(:disabled) {
    background: var(--md-surface);
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #B5B5B5;
    transition: background var(--t), color var(--t);
    flex-shrink: 0;
  }

  .btn-icon:hover:not(:disabled) {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }

  .btn-icon:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  /* SVGアイコンサイズ統一 */
  .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2;
  }

  .icon--sm { width: 16px; height: 16px; }
  .icon--lg { width: 22px; height: 22px; }

  /* ============================================================
     バッジ（公開範囲ラベル等）
  ============================================================ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--md-r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .badge--private {
    background: var(--md-surface);
    color: var(--md-on-variant);
  }

  .badge--internal {
    background: var(--md-primary-bg);
    color: var(--md-primary);
  }

  .badge--shared {
    background: var(--md-success-bg);
    color: var(--md-success);
  }

  .badge--admin {
    background: var(--md-warning-bg);
    color: var(--md-warning);
  }

  /* ============================================================
     WBSカード一覧
  ============================================================ */
  .wbs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }

  .wbs-card {
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    position: relative;
  }

  .wbs-card:hover {
    border-color: var(--md-on-surface);
    box-shadow: var(--md-elevation-2);
    transform: translateY(-1px);
  }

  .wbs-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .wbs-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-on-surface);
    line-height: 1.4;
    word-break: break-word;
  }

  .wbs-card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }

  .wbs-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--md-on-variant);
  }

  .wbs-card__meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .wbs-card__meta-row--export {
    color: var(--md-success);
    font-weight: 500;
  }

  .wbs-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--md-outline);
  }

  .wbs-card__owner {
    font-size: 12px;
    color: var(--md-on-variant);
  }

  .wbs-card__actions {
    display: flex;
    gap: 4px;
  }

  /* ============================================================
     新規作成カード（一覧の先頭に常設）
  ============================================================ */
  .wbs-card--new {
    background: var(--md-surface);
    border: 1.5px dashed var(--md-outline-variant);
    align-items: center;
    justify-content: center;
    min-height: 140px;
    color: var(--md-on-variant);
    transition: border-color var(--t), background var(--t), color var(--t);
  }

  .wbs-card--new:hover {
    border-color: var(--md-on-surface);
    background: var(--md-bg);
    color: var(--md-on-surface);
    box-shadow: none;
    transform: none;
  }

  .wbs-card--new__plus {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--md-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    border: 1.5px solid currentColor;
  }

  .wbs-card--new__label {
    font-size: 13px;
    font-weight: 600;
  }

  /* ============================================================
     エンプティステート
  ============================================================ */
  .empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--md-on-variant);
  }

  .empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--md-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--md-outline-variant);
  }

  .empty-state__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 6px;
  }

  .empty-state__text {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* ============================================================
     スケルトンローダー（一覧読み込み中）
  ============================================================ */
  @keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
  }

  .skeleton {
    background: linear-gradient(90deg, #EEE 25%, #F8F8F8 37%, #EEE 63%);
    background-size: 800px 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--md-r-sm);
  }

  .skeleton-card {
    height: 140px;
    border-radius: var(--md-r-md);
  }

  /* ============================================================
     エラーバナー
  ============================================================ */
  .error-banner {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--md-error-bg);
    border: 1px solid #F5C6CB;
    border-radius: var(--md-r-xs);
    color: var(--md-error);
    font-size: 13px;
    line-height: 1.5;
  }

  .error-banner.is-visible { display: flex; }

  /* ============================================================
     ローディングオーバーレイ
  ============================================================ */
  @keyframes rotate {
    to { transform: rotate(360deg); }
  }

  .loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
  }

  .loading-overlay.is-visible { display: flex; }

  .loading-overlay__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--md-outline);
    border-top-color: var(--md-on-surface);
    border-radius: 50%;
    animation: rotate 0.9s linear infinite;
  }

  .loading-overlay__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--md-on-surface);
  }

  /* ============================================================
     スナックバー（短いお知らせ）
  ============================================================ */
  .snackbar {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--md-on-surface);
    color: var(--md-bg);
    padding: 12px 20px;
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--md-elevation-2);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .snackbar.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .snackbar__actions {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .snackbar__action {
    background: transparent;
    border: none;
    color: #93C5FD;
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--md-r-xs);
    cursor: pointer;
    transition: background var(--t);
    text-decoration: none;
  }
  .snackbar__action:hover {
    background: rgba(255,255,255,0.1);
  }

  /* ============================================================
     ページ表示制御
  ============================================================ */
  .page {
    display: none;
    flex-direction: column;
    gap: 24px;
  }

  .page.is-active {
    display: flex;
  }

  /* ============================================================
     エディタ：ツールバー
  ============================================================ */
  .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
  }

  .editor-toolbar__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: var(--md-r-sm);
    color: var(--md-on-variant);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--t), color var(--t);
  }

  .editor-toolbar__back:hover {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }

  .editor-toolbar__title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--md-on-surface);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .editor-toolbar__role {
    font-size: 11px;
    color: var(--md-on-variant);
    padding: 4px 10px;
    background: var(--md-surface);
    border-radius: var(--md-r-full);
  }

  /* 自動保存ステータス（画面右下の固定インジケータ） */
  .autosave-indicator {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 150;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    box-shadow: var(--md-elevation-1);
    font-size: 12px;
    font-weight: 500;
    color: var(--md-on-variant);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: color var(--t), border-color var(--t);
    min-width: 150px;
    justify-content: center;
  }
  .autosave-indicator.is-visible {
    display: inline-flex;
  }
  .autosave-indicator.is-saving {
    color: var(--md-on-surface);
  }
  .autosave-indicator.is-error {
    color: var(--md-error);
    border-color: var(--md-error);
    background: var(--md-error-bg);
  }
  .autosave-indicator.is-pending {
    color: var(--md-on-variant);
    font-style: italic;
  }
  .autosave-indicator.is-saved {
    color: var(--md-success);
    border-color: var(--md-success);
  }
  .autosave-indicator__spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--md-outline);
    border-top-color: var(--md-on-surface);
    border-radius: 50%;
    animation: rotate 0.9s linear infinite;
    flex-shrink: 0;
  }
  .autosave-indicator__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .autosave-indicator__retry {
    font-size: 12px;
    color: var(--md-error);
    background: transparent;
    border: none;
    padding: 0 0 0 4px;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--md-font);
    font-weight: 700;
  }
  @media (max-width: 600px) {
    .autosave-indicator { right: 12px; bottom: 12px; padding: 8px 12px; }
  }

  /* ============================================================
     エディタ：プロジェクト情報フォーム
  ============================================================ */
  .form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
  }

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

  .text-field {
    position: relative;
  }

  .text-field__input {
    width: 100%;
    padding: 18px 12px 8px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 14px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    background: var(--md-bg);
    outline: none;
    transition: border-color var(--t);
    appearance: none;
    -webkit-appearance: none;
  }

  .text-field__input:focus {
    border-width: 2px;
    border-color: var(--md-on-surface);
    padding: 18px 11px 8px 11px;
  }

  textarea.text-field__input {
    resize: vertical;
    min-height: 76px;
    line-height: 1.5;
  }

  .text-field__select {
    width: 100%;
    padding: 18px 36px 8px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 14px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    background: var(--md-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231C1B1F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    outline: none;
    transition: border-color var(--t);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .text-field__select:focus {
    border-width: 2px;
    border-color: var(--md-on-surface);
    padding: 18px 35px 8px 11px;
  }

  .text-field__label {
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 11px;
    color: var(--md-on-variant);
    background: var(--md-bg);
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
  }

  .text-field__input:focus ~ .text-field__label,
  .text-field__select:focus ~ .text-field__label {
    color: var(--md-on-surface);
  }

  .text-field--full {
    grid-column: 1 / -1;
  }

  /* 最終出力リンク表示 */
  .last-export-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--md-success-bg);
    border: 1px solid #B8E0C5;
    border-radius: var(--md-r-sm);
    font-size: 12px;
    color: var(--md-success);
    flex-wrap: wrap;
  }
  .last-export-row__label {
    font-weight: 700;
    flex-shrink: 0;
  }
  .last-export-row__link {
    color: var(--md-success);
    text-decoration: underline;
    word-break: break-all;
    flex: 1;
    min-width: 0;
  }
  .last-export-row__link:hover {
    opacity: 0.8;
  }
  .last-export-row__copy {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--md-success);
  }
  .last-export-row__copy:hover {
    background: rgba(30, 107, 50, 0.08);
  }

  /* ============================================================
     エディタ：カテゴリ + タスクテーブル
  ============================================================ */
  .categories-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .category {
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    overflow: hidden;
  }

  .category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline);
  }

  .category-name {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    font-family: var(--md-font);
    border-radius: var(--md-r-xs);
    outline: none;
    transition: background var(--t), border-color var(--t);
  }

  .category-name:hover {
    background: var(--md-bg);
  }

  .category-name:focus {
    background: var(--md-bg);
    border-color: var(--md-on-surface);
  }

  .category-actions {
    display: flex;
    gap: 2px;
    width: 36px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100%;
  }

  .task-table-wrap {
    overflow-x: auto;
  }

  .task-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
  }

  .task-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    padding: 8px 10px;
    background: var(--md-bg);
    border-bottom: 1px solid var(--md-outline);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .task-table tbody tr {
    border-bottom: 1px solid var(--md-outline);
  }

  .task-table tbody tr:last-child {
    border-bottom: none;
  }

  .task-table td {
    padding: 6px 8px;
    vertical-align: middle;
  }

  .task-table td:first-child {
    padding-left: 12px;
  }

  /* タスク行のセル幅 */
  .task-table th[data-col="type"],
  .task-table td[data-col="type"] { width: 110px; }
  .task-table th[data-col="name"],
  .task-table td[data-col="name"] { min-width: 200px; }
  .task-table th[data-col="assignee"],
  .task-table td[data-col="assignee"] { width: 160px; }
  .task-table th[data-col="date"],
  .task-table td[data-col="date"] { width: 130px; }
  .task-table th[data-col="status"],
  .task-table td[data-col="status"] { width: 110px; }
  .task-table th[data-col="progress"],
  .task-table td[data-col="progress"] { width: 80px; }
  .task-table th[data-col="actions"],
  .task-table td[data-col="actions"] { width: 110px; text-align: right; padding-right: 12px; }

  /* コンパクトな入力フィールド（タスク行用） */
  .cell-input,
  .cell-select {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    outline: none;
    transition: border-color var(--t), background var(--t);
  }

  .cell-input:hover,
  .cell-select:hover {
    background-color: var(--md-surface);
  }

  .cell-input:focus,
  .cell-select:focus {
    border-color: var(--md-on-surface);
    background-color: var(--md-bg);
  }

  .cell-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
  }

  .cell-input--num {
    text-align: right;
  }

  /* テキストエリア型のセル：複数行入力可能だが、デフォルトは単一行のように見える */
  .cell-textarea {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    outline: none;
    resize: none;
    overflow: hidden;
    line-height: 1.35;
    white-space: pre;
    transition: border-color var(--t), background-color var(--t);
    box-sizing: border-box;
  }

  .cell-textarea:hover {
    background-color: var(--md-surface);
  }

  /* フォーカス時：絶対配置で下方向に展開（行高を崩さない） */
  .cell-textarea:focus {
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    min-height: 32px;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    z-index: 10;
    border-color: var(--md-on-surface);
    background-color: var(--md-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* ステータス：ピル表示（select を楕円形に色付け） */
  .task-cell[data-col="status"] {
    justify-content: center;
  }

  .task-cell[data-col="status"] .cell-select {
    width: auto;
    min-width: 76px;
    max-width: 100%;
    height: 26px;
    padding: 0 22px 0 12px;
    border: none;
    border-radius: var(--md-r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background-position: right 6px center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
  }

  .task-cell[data-col="status"] .cell-select:hover {
    filter: brightness(0.95);
    background-repeat: no-repeat;
  }

  .task-cell[data-col="status"] .cell-select:focus {
    outline: 2px solid rgba(0, 0, 0, 0.18);
    outline-offset: 1px;
    border: none;
  }

  /* 未着手 - 灰色 */
  .task-row[data-status="未着手"] [data-field="status"] {
    background-color: #ECECEC;
    color: #5A5A5A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
  /* 進行中 - 緑 */
  .task-row[data-status="進行中"] [data-field="status"] {
    background-color: #DCF1E1;
    color: #1E6B32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%231E6B32' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
  /* 完了 - 青 */
  .task-row[data-status="完了"] [data-field="status"] {
    background-color: #DCEAF7;
    color: #0F4C81;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%230F4C81' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
  /* 遅延 - 赤 */
  .task-row[data-status="遅延"] [data-field="status"] {
    background-color: #FBE0E0;
    color: #B3261E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23B3261E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }
  /* 保留 - 黒 */
  .task-row[data-status="保留"] [data-field="status"] {
    background-color: #2C2C2C;
    color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }

  /* タスクの種別: マイルストーン行は薄く色付け */
  .task-row[data-type="milestone"] {
    background: var(--md-warning-bg);
  }

  .task-row[data-type="milestone"] .cell-input,
  .task-row[data-type="milestone"] .cell-select {
    background: transparent;
  }

  .task-row[data-type="milestone"] .cell-input:hover,
  .task-row[data-type="milestone"] .cell-select:hover {
    background: rgba(255,255,255,0.5);
  }

  /* ステータスごとの左ボーダー（視認性） */
  .task-row .status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
    background: var(--md-outline-variant);
  }

  .task-row[data-status="進行中"] .status-indicator { background: var(--md-primary); }
  .task-row[data-status="完了"]   .status-indicator { background: var(--md-success); }
  .task-row[data-status="遅延"]   .status-indicator { background: var(--md-error); }
  .task-row[data-status="保留"]   .status-indicator { background: var(--md-warning); }

  .task-row__action-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
  }

  .add-task-row {
    display: flex;
    justify-content: flex-start;
    padding: 10px 12px;
    background: var(--md-bg);
    border-top: 1px solid var(--md-outline);
  }

  /* カテゴリ追加ボタンの行 */
  .add-category-row {
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }

  /* 読み取り専用 */
  .editor.is-readonly .cell-input,
  .editor.is-readonly .cell-select,
  .editor.is-readonly .text-field__input,
  .editor.is-readonly .text-field__select,
  .editor.is-readonly .category-name {
    pointer-events: none;
    background: var(--md-surface);
    color: var(--md-on-variant);
  }

  .editor.is-readonly .category-actions,
  .editor.is-readonly .task-row__action-cell,
  .editor.is-readonly .add-task-row,
  .editor.is-readonly .add-category-row {
    display: none;
  }

  /* ============================================================
     ガントビュー：ツールバー
  ============================================================ */
  .gantt-surface {
    padding: 0;
    overflow: hidden;
  }

  .gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-bg);
    flex-wrap: wrap;
  }

  .gantt-toolbar__left,
  .gantt-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .gantt-toolbar__range {
    font-size: 12px;
    color: var(--md-on-variant);
    white-space: nowrap;
  }

  .gantt-unit-toggle {
    display: inline-flex;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    background: var(--md-bg);
    overflow: hidden;
  }

  .gantt-unit-toggle button {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-on-variant);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--t), color var(--t);
  }

  .gantt-unit-toggle button:hover:not(.is-active) {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }

  .gantt-unit-toggle button.is-active {
    background: var(--md-on-surface);
    color: var(--md-bg);
  }

  /* ============================================================
     ガントビュー：本体（左右ペイン分離）
  ============================================================ */
  .gantt {
    --left-width: 920px;
    --cell-width: 32px;
    --row-height: 40px;
    --cat-height: 44px;
    --addtask-height: 36px;
    --header-height: 56px;
    display: flex;
    max-height: calc(100vh - 240px);
    background: var(--md-bg);
    overflow: hidden;
  }

  /* 左ペイン：タスク情報、横スクロール可（columns総幅 > pane幅 のとき）、縦スクロールはJSで右と同期 */
  .gantt-left {
    flex-shrink: 0;
    width: var(--left-width);
    border-right: 1px solid var(--md-outline);
    overflow-y: auto;
    overflow-x: auto;
  }
  /* 縦スクロールバーは右ペインと同期するため非表示にしたいが、横は表示したい。
     Webkit のみ実現可能（FF は両方 or 両方非表示の二択） */
  .gantt-left::-webkit-scrollbar { width: 0; height: 10px; }
  .gantt-left::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 5px; }
  .gantt-left::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }
  /* 左ペインの行は内容に応じて自然に横方向に伸びる */
  .gantt-left .left-row {
    width: max-content;
    min-width: 100%;
  }
  /* カテゴリ行・タスク追加行は構造的にタスク行より短いため、
     JS で同期した --left-row-width で幅を揃える（横スクロール時に背景が途切れない） */
  .gantt-left .left-row--category,
  .gantt-left .left-row--add-task {
    width: var(--left-row-width, max-content);
    min-width: 100%;
  }

  /* 右ペイン：タイムライン、横スクロールあり */
  .gantt-right {
    flex: 1;
    min-width: 0;
    overflow: auto;
  }

  .right-content {
    width: max-content;
    min-width: 100%;
    position: relative; /* 依存矢印 SVG のオーバーレイ基準 */
  }

  /* 左ペインの行 */
  .left-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-bg);
  }

  .left-row--header {
    height: var(--header-height);
    background: var(--md-surface);
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .left-row--category {
    height: var(--cat-height);
    background: var(--md-surface);
    padding: 0 0 0 4px;
    gap: 4px;
  }

  .left-row--task {
    height: var(--row-height);
  }

  .left-row--task:hover {
    background: var(--md-surface);
  }

  .left-row--add-task {
    height: var(--addtask-height);
    padding: 0 8px;
  }

  /* 右ペインの行 */
  .right-row {
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-bg);
    position: relative;
  }

  .right-row--header {
    height: var(--header-height);
    background: var(--md-surface);
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .right-row--category {
    height: var(--cat-height);
    background: var(--md-surface);
  }

  .right-row--task {
    height: var(--row-height);
  }

  .right-row--task:hover {
    background: var(--md-surface);
  }

  .right-row--add-task {
    height: var(--addtask-height);
  }

  /* 各カテゴリ単位 */
  .left-category, .right-category {
    /* 何もしない（子要素を縦に並べるだけ） */
  }

  /* 左ヘッダーの列ラベル */
  .col-header {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 100%;
    border-right: 1px solid var(--md-outline);
    flex-shrink: 0;
  }
  .col-header:last-child { border-right: none; }
  .col-header[data-col="drag"]     { width: 28px; padding: 0; justify-content: center; }
  .col-header[data-col="type"]     { width: 80px; }
  .col-header[data-col="name"]     { width: 200px; flex: 1; min-width: 160px; }
  .col-header[data-col="assignee"] { width: 130px; }
  .col-header[data-col="date"]     { width: 100px; }
  .col-header[data-col="status"]   { width: 100px; }
  .col-header[data-col="progress"] { width: 60px; justify-content: flex-end; padding-right: 12px; }
  .col-header[data-col="actions"]  { width: 110px; padding: 0; justify-content: center; }

  /* 日付ヘッダーセル */
  .date-header-cells {
    display: flex;
    height: 100%;
  }

  .date-header-cell {
    width: var(--cell-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--md-on-variant);
    border-right: 1px solid var(--md-outline);
    padding: 4px 0;
    text-align: center;
    line-height: 1.2;
  }

  .date-header-cell__day {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-surface);
    white-space: nowrap;
  }

  .date-header-cell__weekday {
    font-size: 10px;
    color: var(--md-on-variant);
    white-space: nowrap;
  }

  .date-header-cell.is-weekend {
    background: #FAF6EE;
  }

  .date-header-cell.is-holiday {
    background: #F8E5E5;
    color: var(--md-error);
  }

  .date-header-cell.is-holiday .date-header-cell__day,
  .date-header-cell.is-holiday .date-header-cell__weekday {
    color: var(--md-error);
  }

  .date-header-cell.is-month-boundary {
    border-left: 1px solid var(--md-outline-variant);
  }

  .date-header-cell.is-today {
    background: var(--md-primary-bg);
    color: var(--md-primary);
    font-weight: 700;
  }

  .category-collapse-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--md-on-variant);
    border-radius: var(--md-r-xs);
    transition: background var(--t), color var(--t);
    flex-shrink: 0;
  }
  .category-collapse-btn:hover {
    background: var(--md-bg);
    color: var(--md-on-surface);
  }
  .category-collapse-btn svg {
    transition: transform var(--t);
  }
  .left-category.is-collapsed .category-collapse-btn svg {
    transform: rotate(-90deg);
  }
  /* 折りたたみ：左ペインのタスク・追加行を非表示、右ペインも対応する要素を非表示 */
  .left-category.is-collapsed .left-tasks,
  .left-category.is-collapsed .left-row--add-task,
  .right-category.is-collapsed .right-tasks,
  .right-category.is-collapsed .right-row--add-task {
    display: none;
  }

  .category-drag-handle {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--md-outline-variant);
    flex-shrink: 0;
  }

  .category-drag-handle:hover {
    color: var(--md-on-variant);
  }

  .category-drag-handle:active {
    cursor: grabbing;
  }

  .task-cell {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
    border-right: 1px solid transparent;
    position: relative;
  }

  /* 列幅は CSS variable 経由で動的に上書き可能（--col-w-<col>） */
  /* flex を 0 0 にすることで CSS variable の値が確実に効くようにする */
  .task-cell[data-col="drag"]     { flex: 0 0 28px; width: 28px; padding: 0; justify-content: center; }
  .task-cell[data-col="type"]     { flex: 0 0 var(--col-w-type, 80px); width: var(--col-w-type, 80px); }
  .task-cell[data-col="name"]     { flex: 0 0 var(--col-w-name, 220px); width: var(--col-w-name, 220px); min-width: 80px; }
  .task-cell[data-col="notes"]    { flex: 0 0 var(--col-w-notes, 200px); width: var(--col-w-notes, 200px); }
  .task-cell[data-col="assignee"] { flex: 0 0 var(--col-w-assignee, 130px); width: var(--col-w-assignee, 130px); }
  .task-cell[data-col-key="startDate"] { flex: 0 0 var(--col-w-startDate, 60px); width: var(--col-w-startDate, 60px); }
  .task-cell[data-col-key="endDate"]   { flex: 0 0 var(--col-w-endDate, 60px);   width: var(--col-w-endDate, 60px); }
  .task-cell[data-col="status"]   { flex: 0 0 var(--col-w-status, 100px); width: var(--col-w-status, 100px); }
  .task-cell[data-col="progress"] { flex: 0 0 var(--col-w-progress, 60px); width: var(--col-w-progress, 60px); }
  .task-cell[data-col="priority"] { flex: 0 0 var(--col-w-priority, 60px); width: var(--col-w-priority, 60px); justify-content: center; }
  .task-cell[data-col="actions"]  { flex: 0 0 var(--col-w-actions, 110px); width: var(--col-w-actions, 110px); padding: 0; justify-content: center; gap: 2px; }

  /* col-header も同じ CSS var で同期（data-col / data-col-key を見る） */
  .col-header[data-col="drag"]     { flex: 0 0 28px; width: 28px; }
  .col-header[data-col="type"]     { flex: 0 0 var(--col-w-type, 80px); width: var(--col-w-type, 80px); }
  .col-header[data-col="name"]     { flex: 0 0 var(--col-w-name, 220px); width: var(--col-w-name, 220px); min-width: 80px; }
  .col-header[data-col="notes"]    { flex: 0 0 var(--col-w-notes, 200px); width: var(--col-w-notes, 200px); }
  .col-header[data-col="assignee"] { flex: 0 0 var(--col-w-assignee, 130px); width: var(--col-w-assignee, 130px); }
  .col-header[data-col-key="startDate"] { flex: 0 0 var(--col-w-startDate, 60px); width: var(--col-w-startDate, 60px); }
  .col-header[data-col-key="endDate"]   { flex: 0 0 var(--col-w-endDate, 60px);   width: var(--col-w-endDate, 60px); }
  .col-header[data-col="status"]   { flex: 0 0 var(--col-w-status, 100px); width: var(--col-w-status, 100px); }
  .col-header[data-col="progress"] { flex: 0 0 var(--col-w-progress, 60px); width: var(--col-w-progress, 60px); }
  .col-header[data-col="priority"] { flex: 0 0 var(--col-w-priority, 60px); width: var(--col-w-priority, 60px); }
  .col-header[data-col="actions"]  { flex: 0 0 var(--col-w-actions, 110px); width: var(--col-w-actions, 110px); }

  /* 列リサイズハンドル（ヘッダー右端） */
  .col-header { position: relative; }
  .col-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
  }
  .col-resizer:hover {
    background: rgba(0,0,0,0.08);
  }
  body.is-resizing-col {
    cursor: col-resize !important;
    user-select: none !important;
  }
  body.is-resizing-col * { cursor: col-resize !important; }

  /* 列の表示/非表示（data-hidden-cols 属性に CSV で指定） */
  .gantt[data-hidden-cols~="type"]     .col-header[data-col="type"],
  .gantt[data-hidden-cols~="type"]     .task-cell[data-col="type"]     { display: none; }
  .gantt[data-hidden-cols~="notes"]    .col-header[data-col="notes"],
  .gantt[data-hidden-cols~="notes"]    .task-cell[data-col="notes"]    { display: none; }
  .gantt[data-hidden-cols~="assignee"] .col-header[data-col="assignee"],
  .gantt[data-hidden-cols~="assignee"] .task-cell[data-col="assignee"] { display: none; }
  .gantt[data-hidden-cols~="date"]     .col-header[data-col="date"],
  .gantt[data-hidden-cols~="date"]     .task-cell[data-col="date"]     { display: none; }
  .gantt[data-hidden-cols~="status"]   .col-header[data-col="status"],
  .gantt[data-hidden-cols~="status"]   .task-cell[data-col="status"]   { display: none; }
  .gantt[data-hidden-cols~="progress"] .col-header[data-col="progress"],
  .gantt[data-hidden-cols~="progress"] .task-cell[data-col="progress"] { display: none; }
  .gantt[data-hidden-cols~="priority"] .col-header[data-col="priority"],
  .gantt[data-hidden-cols~="priority"] .task-cell[data-col="priority"] { display: none; }

  /* 重要度ピル */
  .cell-select--priority {
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 4px 6px;
    border-radius: var(--md-r-full);
    cursor: pointer;
  }
  .task-cell[data-col="priority"][data-priority="緊急"] .cell-select--priority {
    background: var(--md-error-bg); color: var(--md-error);
  }
  .task-cell[data-col="priority"][data-priority="高"] .cell-select--priority {
    background: var(--md-warning-bg); color: var(--md-warning);
  }
  .task-cell[data-col="priority"][data-priority="中"] .cell-select--priority {
    background: var(--md-bg); color: var(--md-on-variant);
  }
  .task-cell[data-col="priority"][data-priority="低"] .cell-select--priority {
    background: transparent; color: var(--md-on-variant);
    border: 1px dashed var(--md-outline);
  }
  .task-cell[data-col="priority"][data-priority=""] .cell-select--priority {
    background: transparent; color: var(--md-on-variant); opacity: 0.6;
  }

  /* ツールバーメニュー（AI / その他） */
  .toolbar-menu { position: relative; display: inline-block; }
  .toolbar-menu__popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    box-shadow: var(--md-elevation-2);
    padding: 6px 0;
    z-index: 200;
    min-width: 180px;
  }
  .toolbar-menu__popover.is-open { display: block; }
  .toolbar-menu__popover--right { left: auto; right: 0; }
  .toolbar-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    color: var(--md-on-surface);
  }
  .toolbar-menu__item:hover { background: var(--md-bg); }
  .toolbar-menu__item--danger { color: var(--md-error); }
  .toolbar-menu__item--danger:hover { background: var(--md-error-bg); }
  .toolbar-menu__btn--icon {
    padding: 6px 10px !important;
    min-width: auto !important;
  }
  .icon--xs { width: 12px; height: 12px; }

  /* 列設定ポップオーバー */
  .col-settings-wrap { position: relative; }
  .col-settings-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    box-shadow: var(--md-elevation-2);
    padding: 12px 16px;
    z-index: 200;
    min-width: 220px;
  }
  .col-settings-popover.is-open { display: block; }
  .col-settings-popover__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .col-settings-popover__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .col-settings-popover__item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--md-on-surface);
  }
  .col-settings-popover__item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--md-on-surface);
  }
  .col-settings-popover__actions {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--md-outline);
    text-align: right;
  }

  /* タスク行内のドラッグハンドル */
  .task-drag-handle {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--md-outline-variant);
    border-radius: var(--md-r-xs);
    transition: color var(--t), background var(--t);
  }

  .task-drag-handle:hover {
    color: var(--md-on-variant);
    background: var(--md-bg);
  }

  .task-drag-handle:active {
    cursor: grabbing;
  }

  /* タイムライン領域：背景の縦罫線・週末・祝日 */
  .gantt-timeline-cells {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    pointer-events: none;
  }

  .gantt-timeline-cell {
    width: var(--cell-width);
    height: 100%;
    flex-shrink: 0;
    border-right: 1px solid var(--md-outline);
    box-sizing: border-box;
  }

  .gantt-timeline-cell.is-weekend {
    background: #FAF6EE;
  }

  .gantt-timeline-cell.is-holiday {
    background: #F8E5E5;
  }

  .gantt-timeline-cell.is-today {
    background: var(--md-primary-bg);
  }

  .gantt-timeline-cell.is-month-boundary {
    border-left: 1px solid var(--md-outline-variant);
  }

  /* カテゴリヘッダーのタイムラインも罫線が見えるように */
  .right-row--category .gantt-timeline-cell {
    background: transparent;
    border-right-color: rgba(0,0,0,0.05);
  }

  /* タスクバー */
  .gantt-bar {
    position: absolute;
    top: 8px;
    bottom: 8px;
    background: var(--md-primary);
    border-radius: 4px;
    cursor: grab;
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: box-shadow var(--t);
  }

  .gantt-bar:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }

  .gantt-bar.is-dragging {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .gantt-bar__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,0.35);
    border-right: 1px solid rgba(255,255,255,0.6);
    pointer-events: none;
  }

  .gantt-bar__label {
    position: relative;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 1;
  }

  .gantt-bar__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 2;
  }

  .gantt-bar__handle--left  { left: 0; }
  .gantt-bar__handle--right { right: 0; }

  .gantt-bar__handle:hover {
    background: rgba(255,255,255,0.4);
  }

  /* ステータス別のバー色（ピル表示と統一） */
  .gantt-bar[data-status="未着手"] { background: #9E9E9E; color: #FFFFFF; }
  .gantt-bar[data-status="進行中"] { background: #1E6B32; color: #FFFFFF; }
  .gantt-bar[data-status="完了"]   { background: #0F4C81; color: #FFFFFF; }
  .gantt-bar[data-status="遅延"]   { background: #B3261E; color: #FFFFFF; }
  .gantt-bar[data-status="保留"]   { background: #2C2C2C; color: #FFFFFF; }

  /* マイルストーン：菱形 */
  .gantt-milestone {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    background: #9E9E9E;
    transform: translate(-50%, -50%) rotate(45deg);
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .gantt-milestone[data-status="未着手"] { background: #9E9E9E; }
  .gantt-milestone[data-status="進行中"] { background: #1E6B32; }
  .gantt-milestone[data-status="完了"]   { background: #0F4C81; }
  .gantt-milestone[data-status="遅延"]   { background: #B3261E; }
  .gantt-milestone[data-status="保留"]   { background: #2C2C2C; }

  .gantt-milestone.is-dragging {
    cursor: grabbing;
  }

  .gantt-milestone__label {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: 0 50%;
    font-size: 11px;
    font-weight: 600;
    color: var(--md-on-surface);
    white-space: nowrap;
    pointer-events: none;
  }

  /* 依存関係矢印（SVGオーバーレイ） */
  .gantt-arrows {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden; /* 範囲外の path が親の scrollWidth を膨張させないようクリップ */
  }
  .gantt-arrows path {
    stroke: var(--md-on-variant);
    stroke-width: 1.5;
    fill: none;
    opacity: 0.7;
  }
  .gantt-arrows path.is-critical {
    stroke: var(--md-error);
    stroke-width: 2;
    opacity: 0.9;
  }
  .gantt-arrows path.is-violation {
    stroke: var(--md-error);
    stroke-width: 1.8;
    stroke-dasharray: 4 3;
    opacity: 0.9;
  }

  /* クリティカルパス上のバー */
  .gantt-bar.is-critical {
    box-shadow: 0 0 0 2px var(--md-error), 0 1px 3px rgba(0,0,0,0.15);
  }
  .gantt-milestone.is-critical {
    box-shadow: 0 0 0 2px var(--md-error), 0 1px 3px rgba(0,0,0,0.2);
  }

  /* 依存関係ボタンに件数バッジ */
  .btn-icon--dep {
    position: relative;
  }
  .btn-icon--dep[data-dep-count]:not([data-dep-count="0"])::after {
    content: attr(data-dep-count);
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--md-on-surface);
    color: var(--md-bg);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--md-r-full);
    line-height: 1;
    min-width: 14px;
    text-align: center;
  }
  .btn-icon--dep[data-dep-count]:not([data-dep-count="0"]) {
    color: var(--md-on-surface);
  }

  /* 依存設定モーダル */
  .deps-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    background: var(--md-bg);
  }
  .deps-list__group {
    border-bottom: 1px solid var(--md-outline);
  }
  .deps-list__group:last-child { border-bottom: none; }
  .deps-list__group-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-variant);
    padding: 8px 14px;
    background: var(--md-surface);
  }
  .deps-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--md-outline);
    cursor: pointer;
    font-size: 13px;
    color: var(--md-on-surface);
  }
  .deps-list__item:hover {
    background: var(--md-surface);
  }
  .deps-list__item.is-self {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .deps-list__item.is-cycle {
    color: var(--md-error);
    font-style: italic;
  }
  .deps-list__item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--md-on-surface);
    flex-shrink: 0;
  }
  .deps-list__item .deps-list__warn {
    margin-left: auto;
    font-size: 11px;
    color: var(--md-error);
  }

  /* タスク詳細モーダル */
  .modal.modal--task-detail {
    max-width: 880px;
    width: calc(100% - 48px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
  }
  @media (min-width: 1280px) {
    .modal.modal--task-detail { max-width: 960px; }
  }
  .task-detail__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-surface);
  }
  .task-detail__type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--md-r-full);
    background: var(--md-primary-bg);
    color: var(--md-primary);
    flex-shrink: 0;
  }
  .task-detail__type-badge--milestone {
    background: var(--md-warning-bg);
    color: var(--md-warning);
  }
  .task-detail__title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--md-on-surface);
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 10px;
    border-radius: var(--md-r-xs);
    font-family: var(--md-font);
    outline: none;
    resize: none;
    min-height: 32px;
  }
  .task-detail__title:hover { background: var(--md-bg); }
  .task-detail__title:focus {
    background: var(--md-bg);
    border-color: var(--md-on-surface);
  }
  .task-detail__close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--md-on-variant);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .task-detail__close:hover {
    background: var(--md-bg);
    color: var(--md-on-surface);
  }

  .task-detail__body {
    overflow-y: auto;
    padding: 20px 24px;
    flex: 1;
  }
  .task-detail__section {
    margin-bottom: 24px;
  }
  .task-detail__section:last-child { margin-bottom: 0; }
  .task-detail__section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-variant);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .task-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .task-detail__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .task-detail__field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--md-on-variant);
  }
  .task-detail__field input,
  .task-detail__field select,
  .task-detail__field textarea {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    outline: none;
    background: var(--md-bg);
  }
  .task-detail__field textarea {
    height: auto;
    min-height: 70px;
    padding: 8px 12px;
    resize: vertical;
    line-height: 1.5;
  }
  .task-detail__field input:focus,
  .task-detail__field select:focus,
  .task-detail__field textarea:focus {
    border-color: var(--md-on-surface);
    border-width: 2px;
    padding: 0 11px;
  }
  .task-detail__field textarea:focus {
    padding: 8px 11px;
  }

  .task-detail__deps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .task-detail__deps-empty {
    font-size: 12px;
    color: var(--md-on-variant);
    font-style: italic;
  }
  .task-detail__dep-chip {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--md-surface);
    border-radius: var(--md-r-full);
    color: var(--md-on-surface);
  }

  .task-detail__comment-section {
    border-top: 1px solid var(--md-outline);
    padding-top: 20px;
  }

  /* スマホ */
  @media (max-width: 600px) {
    .modal.modal--task-detail { max-width: calc(100% - 16px); width: calc(100% - 16px); }
    .task-detail__grid { grid-template-columns: 1fr; }
    .task-detail__header { padding: 12px 16px; }
    .task-detail__body { padding: 16px; }
  }

  /* コメントボタンに件数バッジ */
  .btn-icon--comment {
    position: relative;
  }
  .btn-icon--comment[data-comment-count]:not([data-comment-count="0"])::after {
    content: attr(data-comment-count);
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--md-success);
    color: var(--md-bg);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--md-r-full);
    line-height: 1;
    min-width: 14px;
    text-align: center;
  }
  .btn-icon--comment[data-comment-count]:not([data-comment-count="0"]) {
    color: var(--md-success);
  }

  /* コメントモーダル */
  .comments-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    padding: 8px;
    background: var(--md-bg);
    margin-bottom: 12px;
  }
  .comment-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--md-on-variant);
  }
  .comment-item {
    padding: 10px 12px;
    border-radius: var(--md-r-sm);
    margin-bottom: 6px;
    background: var(--md-surface);
  }
  .comment-item__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .comment-item__author {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-surface);
  }
  .comment-item__time {
    font-size: 10px;
    color: var(--md-on-variant);
  }
  .comment-item__edited {
    font-size: 10px;
    color: var(--md-on-variant);
    font-style: italic;
  }
  .comment-item__actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
  }
  .comment-item__action {
    background: transparent;
    border: none;
    color: var(--md-on-variant);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--md-r-xs);
    font-family: var(--md-font);
  }
  .comment-item__action:hover {
    background: var(--md-bg);
    color: var(--md-on-surface);
  }
  .comment-item__action--danger:hover {
    color: var(--md-error);
  }
  .comment-item__text {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .comment-item__edit-area {
    margin-top: 4px;
  }
  .comment-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .comment-input-row textarea {
    flex: 1;
    min-height: 60px;
    padding: 8px 12px;
    font-family: var(--md-font);
    font-size: 13px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    color: var(--md-on-surface);
    resize: vertical;
  }
  .comment-input-row textarea:focus {
    outline: none;
    border-color: var(--md-on-surface);
  }

  /* メンションオートコンプリート */
  .mention-dropdown {
    position: absolute;
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    box-shadow: var(--md-elevation-2);
    z-index: 350;
    max-height: 200px;
    overflow-y: auto;
    width: 280px;
  }
  .mention-dropdown__item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--md-on-surface);
    border-bottom: 1px solid var(--md-outline);
  }
  .mention-dropdown__item:last-child { border-bottom: none; }
  .mention-dropdown__item:hover,
  .mention-dropdown__item.is-active {
    background: var(--md-primary-bg);
    color: var(--md-primary);
  }
  .mention-dropdown__name { font-weight: 600; }
  .mention-dropdown__email {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-left: 6px;
  }
  .mention-dropdown__empty {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--md-on-variant);
    font-style: italic;
  }

  /* 履歴モーダル */
  .history-list {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    background: var(--md-bg);
  }
  .history-empty {
    padding: 24px;
    text-align: center;
    color: var(--md-on-variant);
    font-size: 12px;
  }
  .history-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--md-outline);
    align-items: center;
  }
  .history-item:last-child { border-bottom: none; }
  .history-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-on-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
  }
  .history-item__icon--share { background: var(--md-primary-bg); color: var(--md-primary); }
  .history-item__icon--export { background: var(--md-success-bg); color: var(--md-success); }
  .history-item__icon--deleted { background: var(--md-error-bg); color: var(--md-error); }
  .history-item__icon--comment { background: #FFF3D9; color: var(--md-warning); }
  .history-item__main {
    min-width: 0;
  }
  .history-item__desc {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.4;
    word-break: break-word;
  }
  .history-item__meta {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-top: 2px;
  }
  .history-item__time {
    font-size: 11px;
    color: var(--md-on-variant);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Sortable.js のゴースト */
  .sortable-ghost {
    opacity: 0.4;
    background: var(--md-primary-bg);
  }

  .sortable-chosen.left-row,
  .sortable-chosen.right-row {
    background: var(--md-primary-bg);
  }

  /* タスクテーブル（旧スタイルとの互換: drop） */
  .task-table {
    /* 旧スタイル削除 */
  }

  /* 確認ダイアログ */
  .modal-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 300;
    align-items: center;
    justify-content: center;
  }

  .modal-backdrop.is-visible { display: flex; }

  .modal {
    background: var(--md-bg);
    border-radius: var(--md-r-md);
    padding: 24px;
    max-width: 420px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-shadow: var(--md-elevation-2);
  }

  .modal--wide {
    max-width: 560px;
  }

  .modal__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .modal__text {
    font-size: 13px;
    color: var(--md-on-variant);
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--md-outline);
    margin-top: 16px;
  }

  /* ============================================================
     共有モーダル
  ============================================================ */
  .share-section {
    padding: 16px 0;
    border-top: 1px solid var(--md-outline);
  }
  .share-section:first-of-type {
    border-top: none;
    padding-top: 4px;
  }
  .share-section__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 4px;
  }
  .share-section__hint {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .share-section.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .visibility-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .visibility-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
  }
  .visibility-option:hover {
    background: var(--md-surface);
  }
  .visibility-option.is-selected {
    border-color: var(--md-on-surface);
    background: var(--md-surface);
  }
  .visibility-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--md-on-surface);
  }
  .visibility-option__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
  }
  .visibility-option__desc {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-top: 2px;
    line-height: 1.5;
  }

  .member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 28px;
  }
  .member-chips__empty {
    font-size: 11px;
    color: var(--md-on-variant);
    padding: 4px 0;
  }
  .member-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 10px;
    border-radius: var(--md-r-full);
    background: var(--md-primary-bg);
    color: var(--md-primary);
    font-size: 12px;
    font-weight: 500;
  }
  .member-chip__remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.7;
    padding: 0;
  }
  .member-chip__remove:hover {
    background: rgba(15, 76, 129, 0.15);
    opacity: 1;
  }

  .member-add {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .member-add__input {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    outline: none;
    transition: border-color var(--t);
  }
  .member-add__input:focus {
    border-color: var(--md-on-surface);
    border-width: 2px;
    padding: 0 11px;
  }
  .member-add__btn {
    flex-shrink: 0;
  }

  .share-error {
    display: none;
    font-size: 12px;
    color: var(--md-error);
    margin-top: 6px;
  }
  .share-error.is-visible { display: block; }

  /* ============================================================
     AI 候補提案モーダル
  ============================================================ */
  .ai-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
  }
  .ai-form-row label {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-surface);
  }
  .ai-form-row select,
  .ai-form-row input,
  .ai-form-row textarea {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 13px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    outline: none;
    background: var(--md-bg);
  }
  .ai-form-row select:focus,
  .ai-form-row input:focus,
  .ai-form-row textarea:focus {
    border-color: var(--md-on-surface);
    border-width: 2px;
    padding: 0 11px;
  }
  .ai-form-row textarea {
    height: auto;
    min-height: 80px;
    padding: 8px 12px;
    resize: vertical;
    line-height: 1.5;
  }
  .ai-form-row textarea:focus {
    padding: 8px 11px;
  }

  .ai-loading {
    text-align: center;
    padding: 32px 0;
    color: var(--md-on-variant);
  }
  .ai-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--md-outline);
    border-top-color: var(--md-on-surface);
    border-radius: 50%;
    animation: rotate 0.9s linear infinite;
    margin: 0 auto 12px;
  }
  .ai-loading__hint {
    font-size: 11px;
    margin-top: 8px;
  }

  .ai-preview {
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 4px 0;
    margin: 0 -4px;
  }

  .ai-preview-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
    font-size: 12px;
    color: var(--md-on-variant);
  }
  .ai-preview-controls__btn {
    background: transparent;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    padding: 4px 12px;
    font-size: 11px;
    font-family: var(--md-font);
    color: var(--md-on-surface);
    cursor: pointer;
  }
  .ai-preview-controls__btn:hover {
    background: var(--md-surface);
  }

  .ai-preview-category {
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-sm);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .ai-preview-category__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline);
    cursor: pointer;
  }
  .ai-preview-category__header input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--md-on-surface);
    cursor: pointer;
    flex-shrink: 0;
  }
  .ai-preview-category__name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
  }
  .ai-preview-category__count {
    font-size: 11px;
    color: var(--md-on-variant);
  }

  .ai-preview-tasks {
    display: flex;
    flex-direction: column;
  }
  .ai-preview-task {
    display: grid;
    grid-template-columns: auto 18px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 36px;
    border-bottom: 1px solid var(--md-outline);
    font-size: 12px;
    cursor: pointer;
  }
  .ai-preview-task:last-child { border-bottom: none; }
  .ai-preview-task input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--md-on-surface);
    cursor: pointer;
    flex-shrink: 0;
  }
  .ai-preview-task__type {
    font-size: 11px;
    color: var(--md-on-variant);
    width: 18px;
    text-align: center;
  }
  .ai-preview-task[data-type="milestone"] .ai-preview-task__type {
    color: var(--md-warning);
  }
  .ai-preview-task__name {
    color: var(--md-on-surface);
    line-height: 1.4;
    word-break: break-word;
  }
  .ai-preview-task__dates {
    font-size: 11px;
    color: var(--md-on-variant);
    white-space: nowrap;
  }
  .ai-preview-task__role {
    font-size: 11px;
    color: var(--md-on-variant);
    background: var(--md-surface);
    padding: 2px 8px;
    border-radius: var(--md-r-full);
    white-space: nowrap;
  }
  .ai-preview-task__role:empty { display: none; }
  .ai-preview-task__notes {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--md-on-variant);
    margin-left: 22px;
    margin-top: 4px;
    line-height: 1.5;
    font-style: italic;
  }
  .ai-preview-task__notes:empty { display: none; }

  /* ============================================================
     フッター
  ============================================================ */
  .footer {
    text-align: center;
    padding: 24px 16px;
    color: var(--md-on-variant);
    font-size: 11px;
    line-height: 1.8;
    border-top: 1px solid var(--md-outline);
  }

  /* ============================================================
     マイToDoページ
  ============================================================ */
  .todos-page {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .todos-filter {
    display: flex;
    gap: 8px;
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    padding: 4px;
    width: fit-content;
  }
  .todos-filter__btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--md-on-variant);
    background: transparent;
    border: none;
    border-radius: var(--md-r-full);
    cursor: pointer;
    font-family: var(--md-font);
    transition: background var(--t), color var(--t);
  }
  .todos-filter__btn:hover {
    background: var(--md-surface);
    color: var(--md-on-surface);
  }
  .todos-filter__btn.is-active {
    background: var(--md-on-surface);
    color: var(--md-bg);
  }

  .todos-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .todos-section__title--muted {
    color: var(--md-on-variant);
    font-weight: 600;
  }
  .todos-section__count {
    background: var(--md-on-surface);
    color: var(--md-bg);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 10px;
    border-radius: var(--md-r-full);
  }
  .todos-section__title--muted .todos-section__count {
    background: var(--md-outline-variant);
    color: var(--md-on-surface);
  }
  .todos-section__hint {
    font-size: 12px;
    color: var(--md-on-variant);
    background: var(--md-warning-bg);
    border-left: 3px solid var(--md-warning);
    padding: 8px 12px;
    border-radius: 0 var(--md-r-xs) var(--md-r-xs) 0;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .todos-group {
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    overflow: hidden;
    margin-bottom: 12px;
  }
  .todos-group__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline);
  }
  .todos-group__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
    text-decoration: none;
  }
  .todos-group__title:hover {
    text-decoration: underline;
  }
  .todos-group__owner {
    font-size: 11px;
    color: var(--md-on-variant);
  }
  .todos-group__count {
    margin-left: auto;
    font-size: 11px;
    color: var(--md-on-variant);
    background: var(--md-bg);
    padding: 2px 10px;
    border-radius: var(--md-r-full);
  }

  .todos-group__list { padding: 4px 0; }

  .todos-row {
    display: grid;
    grid-template-columns: 24px 1fr 140px 90px 60px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--md-outline);
    cursor: pointer;
    transition: background var(--t);
  }
  .todos-row:last-child { border-bottom: none; }
  .todos-row:hover { background: var(--md-surface); }
  .todos-row__type {
    font-size: 14px;
    color: var(--md-warning);
    text-align: center;
  }
  .todos-row__title {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.4;
  }
  .todos-row__category {
    font-size: 10px;
    color: var(--md-on-variant);
    margin-top: 2px;
  }
  .todos-row__date {
    font-size: 12px;
    color: var(--md-on-variant);
    text-align: right;
  }
  .todos-row__date--overdue {
    color: var(--md-error);
    font-weight: 700;
  }
  .todos-row__status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--md-r-full);
    text-align: center;
  }
  .todos-row__status[data-status="未着手"] { background: #ECECEC; color: #5A5A5A; }
  .todos-row__status[data-status="進行中"] { background: #DCF1E1; color: #1E6B32; }
  .todos-row__status[data-status="完了"]   { background: #DCEAF7; color: #0F4C81; }
  .todos-row__status[data-status="遅延"]   { background: #FBE0E0; color: #B3261E; }
  .todos-row__status[data-status="保留"]   { background: #2C2C2C; color: #FFFFFF; }
  .todos-row__progress {
    font-size: 12px;
    color: var(--md-on-variant);
    text-align: right;
  }

  @media (max-width: 720px) {
    .todos-row {
      grid-template-columns: 20px 1fr 80px;
    }
    .todos-row__date,
    .todos-row__progress { display: none; }
  }

  /* ============================================================
     テンプレートページ
  ============================================================ */
  .templates-page {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .templates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .empty-state--inline {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--md-on-variant);
    background: var(--md-surface);
    border-radius: var(--md-r-sm);
  }
  .tpl-card {
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .tpl-card__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: space-between;
  }
  .tpl-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    line-height: 1.4;
  }
  .tpl-card__badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .tpl-card__desc {
    font-size: 12px;
    color: var(--md-on-variant);
    line-height: 1.5;
    word-break: break-word;
  }
  .tpl-card__meta {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-top: 4px;
  }
  .tpl-card__actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    align-items: center;
  }
  .btn-filled--sm {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
  }
  .btn-text--danger {
    color: var(--md-error);
  }
  .btn-text--danger:hover {
    background: var(--md-error-bg);
  }

  /* ============================================================
     利用マニュアルページ
  ============================================================ */
  .manual-page {
    max-width: 840px;
    margin: 0 auto;
    width: 100%;
  }
  .manual-page .surface {
    padding: 32px 40px;
  }
  .manual-page h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-bottom: 8px;
  }
  .manual-page .manual-lead {
    font-size: 13px;
    color: var(--md-on-variant);
    margin-bottom: 32px;
    line-height: 1.7;
  }
  .manual-hero {
    margin: 16px 0 32px;
    padding: 0;
    text-align: center;
  }
  .manual-hero img {
    width: 100%;
    max-width: 1280px;
    height: auto;
    border-radius: var(--md-r-md);
    border: 1px solid var(--md-outline);
    background: var(--md-bg);
    display: block;
    margin: 0 auto;
  }
  .manual-hero figcaption {
    font-size: 12px;
    color: var(--md-on-variant);
    margin-top: 8px;
  }
  .manual-page h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-top: 32px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--md-outline);
  }
  .manual-page h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin-top: 20px;
    margin-bottom: 8px;
  }
  .manual-page p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--md-on-surface);
    margin-bottom: 12px;
  }
  .manual-page ul, .manual-page ol {
    font-size: 13px;
    line-height: 1.8;
    color: var(--md-on-surface);
    margin-bottom: 16px;
    padding-left: 24px;
  }
  .manual-page li {
    margin-bottom: 4px;
  }
  .manual-page strong {
    color: var(--md-on-surface);
    font-weight: 700;
  }
  .manual-page kbd {
    display: inline-block;
    padding: 2px 8px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-family: monospace;
    font-size: 11px;
    color: var(--md-on-surface);
  }
  .manual-page .manual-tip {
    background: var(--md-primary-bg);
    border-left: 3px solid var(--md-primary);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--md-primary);
    margin: 12px 0;
    border-radius: 0 var(--md-r-xs) var(--md-r-xs) 0;
  }
  .manual-page .manual-warn {
    background: var(--md-warning-bg);
    border-left: 3px solid var(--md-warning);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--md-warning);
    margin: 12px 0;
    border-radius: 0 var(--md-r-xs) var(--md-r-xs) 0;
  }
  .manual-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 8px;
    background: var(--md-surface);
    padding: 16px;
    border-radius: var(--md-r-sm);
    margin-bottom: 32px;
  }
  .manual-toc__group-title {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 12px;
    padding: 0 8px 4px;
    border-bottom: 1px solid var(--md-outline);
  }
  .manual-toc__group-title:first-child { margin-top: 0; }
  .manual-toc a {
    font-size: 12px;
    color: var(--md-on-surface);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--md-r-xs);
    transition: background var(--t);
  }
  .manual-toc a:hover {
    background: var(--md-bg);
  }

  /* ============================================================
     スマホ対応
  ============================================================ */
  @media (max-width: 768px) {
    /* ヘッダーナビをアイコンのみに */
    .app-bar__nav { gap: 0; margin-right: 8px; }
    .app-bar__nav-link {
      padding: 8px 10px;
      font-size: 0; /* テキスト非表示 */
      gap: 0;
    }
    .app-bar__nav-link svg { width: 18px; height: 18px; }

    /* ガント本体：単一の横スクロール領域に変更（左ペインの列固定を解除） */
    .gantt {
      overflow-x: auto !important;
      overflow-y: visible !important;
      max-height: none !important;
      -webkit-overflow-scrolling: touch;
      --left-width: 580px;
      --cell-width: 28px;
    }
    .gantt-left {
      flex: none;
      width: 580px;
      overflow: visible !important;
      max-height: none !important;
    }
    .gantt-right {
      flex: none;
      overflow: visible !important;
      max-height: none !important;
    }
    /* スマホでは sticky 効果を切る（page-level スクロールに任せる） */
    .left-row--header,
    .right-row--header {
      position: static !important;
    }
    /* 必須でない列を隠す */
    .gantt .col-header[data-col="drag"],
    .gantt .task-cell[data-col="drag"],
    .gantt .col-header[data-col="type"],
    .gantt .task-cell[data-col="type"],
    .gantt .col-header[data-col="progress"],
    .gantt .task-cell[data-col="progress"] {
      display: none;
    }
    .col-header[data-col="name"],
    .task-cell[data-col="name"] { width: 160px; min-width: 140px; }
    .col-header[data-col="assignee"],
    .task-cell[data-col="assignee"] { width: 100px; }
    .col-header[data-col="date"],
    .task-cell[data-col="date"] { width: 80px; }
    .col-header[data-col="status"],
    .task-cell[data-col="status"] { width: 90px; }
    .col-header[data-col="actions"],
    .task-cell[data-col="actions"] { width: 90px; }
    /* 編集ツールバーやガントツールバーはコンパクトに */
    .editor-toolbar { flex-wrap: wrap; gap: 6px; }
    .editor-toolbar__back { padding: 4px 8px; }
    .editor-toolbar__actions { gap: 4px; }
    .editor-toolbar__actions .btn-outlined,
    .editor-toolbar__actions .btn-filled {
      height: 36px;
      padding: 0 12px;
      font-size: 12px;
    }
    .gantt-toolbar { gap: 6px; padding: 8px; }
    .gantt-toolbar__left,
    .gantt-toolbar__right { gap: 4px; flex-wrap: wrap; }
    .gantt-toolbar__range { font-size: 10px; }

    /* モーダルを画面サイズに合わせる */
    .modal { width: calc(100% - 16px); margin: 8px; padding: 16px; }
    .modal--wide { max-width: 100%; }

    /* 自動保存インジケータ */
    .autosave-indicator {
      bottom: 12px;
      right: 12px;
      padding: 6px 12px;
      font-size: 11px;
      min-width: 0;
    }
  }

  @media (max-width: 600px) {
    .app-bar { padding: 0 12px; height: 56px; }
    .app-bar__user-name { display: none; }
    .main { padding: 12px 8px 32px; gap: 16px; }
    .surface { padding: 14px; }
    .page-header__title { font-size: 18px; }
    .page-header { gap: 8px; }
    .wbs-list { grid-template-columns: 1fr; }
    .editor-toolbar__title { font-size: 14px; flex: 1 1 100%; order: -1; }
    /* マイToDo・テンプレ等のテキスト密度調整 */
    .todos-section__title { font-size: 13px; }
    .templates-list { grid-template-columns: 1fr; }
  }

  /* ============================================================
     タグ・添付（WBS / タスク 共通）
  ============================================================ */
  .wbs-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--md-outline);
  }
  .wbs-meta-block__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .wbs-meta-block__add {
    margin-top: 4px;
    font-size: 12px;
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 24px;
    margin-bottom: 6px;
  }
  .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    font-size: 12px;
    color: var(--md-on-surface);
    line-height: 1.3;
  }
  .tag-chip__hash {
    color: var(--md-on-variant);
    font-weight: 700;
  }
  .tag-chip__remove {
    margin-left: 2px;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--md-on-variant);
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tag-chip__remove:hover {
    background: var(--md-error-bg);
    color: var(--md-error);
  }
  .tag-input-wrap { display: flex; }
  .tag-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 12px;
    background: var(--md-bg);
    color: var(--md-on-surface);
    outline: none;
  }
  .tag-input:focus { border-color: var(--md-on-surface); }

  .attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 24px;
    margin-bottom: 6px;
  }
  .attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 6px;
    background: var(--md-bg);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 12px;
    color: var(--md-on-surface);
    max-width: 320px;
  }
  .attachment-chip:hover {
    background: var(--md-surface);
    border-color: var(--md-on-surface);
  }
  .attachment-chip__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--md-on-surface);
    padding: 2px 4px 2px 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .attachment-chip__link:hover .attachment-chip__name {
    text-decoration: underline;
  }
  .attachment-chip__icon {
    color: var(--md-on-variant);
    flex-shrink: 0;
    display: inline-flex;
  }
  .attachment-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
  }
  .attachment-chip__edit,
  .attachment-chip__remove {
    margin-left: 2px;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--md-on-variant);
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .attachment-chip__edit:hover {
    background: var(--md-bg);
    color: var(--md-on-surface);
  }
  .attachment-chip__remove:hover {
    background: var(--md-error-bg);
    color: var(--md-error);
  }
  .attachment-meta-preview {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--md-bg);
    border-radius: var(--md-r-xs);
    font-size: 12px;
    color: var(--md-on-variant);
  }

  @media (max-width: 600px) {
    .wbs-meta-row { grid-template-columns: 1fr; }
  }

  /* AIタグ提案ボタン (WBSタグセクション) */
  .wbs-meta-block__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .wbs-meta-block__label-row .wbs-meta-block__label {
    margin-bottom: 0;
  }
  .wbs-meta-block__ai {
    font-size: 11px;
    padding: 2px 8px;
    color: var(--md-primary);
  }

  /* AIタグ提案モーダル */
  .tag-suggest-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--md-outline);
    margin-bottom: 12px;
  }
  .tag-suggest-toolbar__meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--md-on-variant);
  }
  .tag-suggest-section {
    margin-bottom: 16px;
  }
  .tag-suggest-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .tag-suggest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tag-suggest-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .tag-suggest-item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--md-on-surface);
  }
  .tag-suggest-task-group {
    padding: 8px 0;
    border-bottom: 1px dashed var(--md-outline);
  }
  .tag-suggest-task-group:last-child { border-bottom: none; }
  .tag-suggest-task-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-on-surface);
    margin-bottom: 4px;
  }

  /* ============================================================
     検索バー（ヘッダー）
  ============================================================ */
  .app-bar__search {
    position: relative;
    flex: 1;
    max-width: 360px;
    margin: 0 12px;
  }
  .app-bar__search-input-wrap {
    position: relative;
  }
  .app-bar__search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--md-on-variant);
    pointer-events: none;
  }
  .app-bar__search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-full);
    font-size: 13px;
    font-family: var(--md-font);
    background: var(--md-bg);
    color: var(--md-on-surface);
    outline: none;
  }
  .app-bar__search-input:focus {
    border-color: var(--md-on-surface);
  }
  .search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    box-shadow: var(--md-elevation-2);
    max-height: 480px;
    overflow-y: auto;
    z-index: 200;
  }
  .search-dropdown__list { padding: 8px 0; }
  .search-dropdown__empty {
    padding: 16px;
    text-align: center;
    color: var(--md-on-variant);
    font-size: 12px;
  }
  .search-result-group {
    padding: 8px 12px;
    border-bottom: 1px solid var(--md-outline);
  }
  .search-result-group:last-child { border-bottom: none; }
  .search-result-group__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--md-on-surface);
    margin-bottom: 2px;
  }
  .search-result-group__role {
    font-size: 10px;
    color: var(--md-on-variant);
    margin-bottom: 6px;
  }
  .search-result-hits {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .search-hit {
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: var(--md-r-xs);
    transition: background 0.1s;
  }
  .search-hit:hover {
    background: var(--md-bg);
  }
  .search-hit__field {
    color: var(--md-primary);
    font-weight: 700;
    font-size: 11px;
  }
  .search-hit__taskname {
    color: var(--md-on-surface);
    font-size: 11px;
    font-weight: 600;
  }
  .search-hit__snippet {
    color: var(--md-on-variant);
    margin-top: 2px;
    line-height: 1.4;
  }
  .search-hit__snippet mark {
    background: var(--md-warning-bg);
    color: var(--md-warning);
    padding: 0 2px;
    border-radius: 2px;
  }

  @media (max-width: 800px) {
    .app-bar__search { max-width: 200px; margin: 0 8px; }
    .app-bar__search-input { padding: 6px 10px 6px 30px; font-size: 12px; }
  }
  @media (max-width: 600px) {
    .app-bar__search { display: none; } /* スマホでは非表示（将来：ボタン展開化） */
  }

  /* ============================================================
     AIサマリー モーダル
  ============================================================ */
  .summary-period {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 16px;
    flex-wrap: wrap;
  }
  .summary-period__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--md-on-surface);
  }
  .summary-period__option input[type="radio"] {
    accent-color: var(--md-on-surface);
  }
  .summary-result {
    margin-top: 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    padding: 16px 20px;
    background: var(--md-bg);
    max-height: 60vh;
    overflow-y: auto;
  }
  .summary-result__meta {
    font-size: 11px;
    color: var(--md-on-variant);
    margin-bottom: 8px;
  }
  .summary-result__body h2,
  .summary-result__body h3,
  .summary-result__body h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--md-outline);
  }
  .summary-result__body h2 { font-size: 15px; }
  .summary-result__body p {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.7;
    margin: 4px 0;
  }
  .summary-result__body ul {
    margin: 4px 0 8px;
    padding-left: 20px;
  }
  .summary-result__body li {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.7;
    margin-bottom: 2px;
  }
  .summary-result__body strong { font-weight: 700; }
  .summary-result__actions {
    margin-top: 12px;
    text-align: right;
  }

  /* ============================================================
     クライアント向け公開ビュー（Page_Public.html 用）
  ============================================================ */
  .public-view-body {
    background: var(--md-bg);
    margin: 0;
  }
  .public-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline);
    flex-wrap: wrap;
  }
  .public-bar__brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
  }
  .public-bar__brand-logo {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--md-on-surface);
  }
  .public-bar__brand-sub {
    font-size: 11px;
    color: var(--md-on-variant);
  }
  .public-bar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--md-on-surface);
    flex: 1;
    min-width: 200px;
  }
  .public-bar__meta {
    font-size: 11px;
    color: var(--md-on-variant);
  }

  .public-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
  }
  .public-loading,
  .public-error {
    text-align: center;
    padding: 64px 24px;
    color: var(--md-on-variant);
  }
  .public-error {
    color: var(--md-error);
    font-size: 14px;
  }

  .public-overview {
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    padding: 20px 24px;
    margin-bottom: 20px;
  }
  .public-overview__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
  }
  .public-overview__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    width: 88px;
  }
  .public-overview__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin: 0;
    flex: 1;
  }
  .public-overview__desc {
    font-size: 13px;
    color: var(--md-on-surface);
    line-height: 1.7;
    margin: 0;
    flex: 1;
    white-space: pre-wrap;
  }
  .public-overview__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--md-on-variant);
  }
  .public-editable-badge {
    background: var(--md-primary-bg);
    color: var(--md-primary);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--md-r-full);
    font-size: 11px;
  }
  .public-save-status {
    color: var(--md-on-variant);
    font-size: 12px;
  }

  .public-gantt-section {
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    overflow: hidden;
    margin-bottom: 20px;
  }
  .public-gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--md-outline);
    gap: 12px;
  }

  .public-history-section {
    background: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-md);
    padding: 20px 24px;
    margin-bottom: 20px;
  }
  .public-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-on-surface);
    margin: 0 0 12px;
  }

  .public-footer {
    text-align: center;
    color: var(--md-on-variant);
    font-size: 12px;
    padding: 24px 0;
  }
  .public-footer__sub {
    margin-top: 4px;
    font-size: 11px;
  }

  .public-field-readonly {
    font-size: 13px;
    color: var(--md-on-surface);
    padding: 4px 0;
    min-height: 24px;
  }
  .public-field-readonly--multiline {
    white-space: pre-wrap;
    line-height: 1.5;
  }

  .category-name-display {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
    padding: 8px 12px;
  }
  .task-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--md-bg);
    border-radius: var(--md-r-full);
    color: var(--md-on-variant);
  }

  /* 共有モーダル：公開リンクセクション */
  .share-section--public {
    border-top: 1px dashed var(--md-outline);
    padding-top: 16px;
    margin-top: 4px;
  }
  .public-share-toggle {
    margin-bottom: 12px;
  }
  .public-share-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-on-surface);
  }
  .public-share-toggle__label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--md-on-surface);
  }
  .public-share-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    background: var(--md-bg);
    padding: 12px 16px;
    border-radius: var(--md-r-xs);
    border: 1px solid var(--md-outline);
    margin-bottom: 12px;
  }
  .public-share-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    color: var(--md-on-surface);
  }
  .public-share-option input[type="checkbox"] {
    width: 16px; height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--md-on-surface);
  }
  .public-share-option small {
    color: var(--md-on-variant);
    font-size: 11px;
  }
  .public-share-url-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  .public-share-url {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    background: var(--md-bg);
    color: var(--md-on-surface);
    font-size: 12px;
    font-family: monospace;
  }
  .public-share-status {
    font-size: 11px;
    color: var(--md-on-variant);
    min-height: 14px;
  }

  @media (max-width: 600px) {
    .public-share-options { grid-template-columns: 1fr; }
    .public-bar { padding: 10px 12px; }
    .public-main { padding: 12px; }
  }

  /* ============================================================
     公開ビュー：タスク表 + ガント（pview-* 自己完結）
  ============================================================ */
  .public-gantt-section { padding: 0; }
  .public-gantt-toolbar {
    padding: 10px 16px;
  }
  .pview-tabs {
    display: inline-flex;
    background: var(--md-bg);
    border-radius: var(--md-r-full);
    padding: 2px;
    border: 1px solid var(--md-outline);
  }
  .pview-tab {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: var(--md-r-full);
    color: var(--md-on-variant);
    cursor: pointer;
  }
  .pview-tab.is-active {
    background: var(--md-on-surface);
    color: var(--md-bg);
  }

  .pview-board {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--md-outline);
    overflow: hidden;
  }
  .pview-left {
    flex: 0 0 auto;
    min-width: 540px;
    max-width: 60%;
    border-right: 1px solid var(--md-outline);
    background: var(--md-surface);
    overflow: auto;
  }
  .pview-right {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--md-bg);
  }

  .pview-row {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid var(--md-outline);
    box-sizing: border-box;
  }
  .pview-row--header {
    background: var(--md-bg);
    font-weight: 700;
    font-size: 11px;
    color: var(--md-on-variant);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 36px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .pview-row--category {
    background: var(--md-bg);
    padding: 0 12px;
    font-weight: 700;
    height: 36px;
  }
  .pview-row--task {
    align-items: center;
  }
  .pview-row--task:hover {
    background: var(--md-bg);
  }
  .pview-category-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--md-on-surface);
  }

  .pview-cell {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
  }
  .pview-cell--type      { width: 60px; flex-shrink: 0; }
  .pview-cell--name      { flex: 1 1 auto; min-width: 240px; }
  .pview-cell--notes     { width: 200px; flex-shrink: 0; }
  .pview-cell--assignee  { width: 110px; flex-shrink: 0; }
  /* 行クリックで詳細モーダル展開できることを示すホバー強調 */
  .pview-row--task { cursor: pointer; }
  .pview-row--task:hover { background: var(--md-bg); }
  .pview-cell--date      { width: 64px; flex-shrink: 0; justify-content: center; }
  .pview-cell--status    { width: 80px; flex-shrink: 0; justify-content: center; }
  .pview-cell--progress  { width: 56px; flex-shrink: 0; justify-content: flex-end; }
  .pview-cell--actions   { width: 40px; flex-shrink: 0; justify-content: center; }

  .pview-text {
    font-size: 13px;
    color: var(--md-on-surface);
    word-break: break-word;
    width: 100%;
    /* 行の高さ40pxを超えないようにするため、デフォルトで1行＋省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pview-text--multiline {
    white-space: pre-wrap;
    line-height: 1.4;
    overflow: hidden;
  }
  .pview-text--ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pview-input {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-r-xs);
    font-size: 12px;
    font-family: var(--md-font);
    background: var(--md-bg);
    color: var(--md-on-surface);
    box-sizing: border-box;
    outline: none;
  }
  .pview-input:focus {
    border-color: var(--md-on-surface);
  }
  .pview-input--multiline {
    height: 28px;
    resize: none;
    line-height: 1.4;
    padding: 4px 8px;
    overflow: hidden;
  }
  .pview-input--num { text-align: right; }
  .pview-input--date { text-align: center; }
  .pview-input--select { padding: 0 4px; }

  .pview-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--md-bg);
    border-radius: var(--md-r-full);
    color: var(--md-on-variant);
    border: 1px solid var(--md-outline);
  }
  .pview-type-badge[data-type="milestone"] {
    background: var(--md-warning-bg);
    color: var(--md-warning);
    border-color: var(--md-warning);
  }

  .pview-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--md-r-full);
    background: var(--md-bg);
    color: var(--md-on-variant);
    white-space: nowrap;
  }
  .pview-status[data-status="進行中"] { background: var(--md-success-bg); color: var(--md-success); }
  .pview-status[data-status="完了"]   { background: var(--md-primary-bg); color: var(--md-primary); }
  .pview-status[data-status="遅延"]   { background: var(--md-error-bg); color: var(--md-error); }
  .pview-status[data-status="保留"]   { background: #1a1a1a; color: #fff; }

  .pview-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-on-variant);
  }
  .pview-icon-btn:hover {
    border-color: var(--md-outline);
    color: var(--md-on-surface);
  }

  /* ガントチャート */
  .pview-day-row {
    display: flex;
    height: 36px;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-bg);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .pview-day {
    flex-shrink: 0;
    border-right: 1px solid var(--md-outline);
    text-align: center;
    font-size: 10px;
    color: var(--md-on-variant);
    padding-top: 4px;
    box-sizing: border-box;
  }
  .pview-day__num { font-size: 11px; font-weight: 600; color: var(--md-on-surface); }
  .pview-day__dow { font-size: 9px; color: var(--md-on-variant); }
  .pview-day--weekend { background: #fff8ef; }
  .pview-day--today {
    background: #e8f0fe;
  }

  .pview-gantt-row {
    position: relative;
    height: 40px;
    border-bottom: 1px solid var(--md-outline);
    background: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 27px,
      var(--md-outline) 27px,
      var(--md-outline) 28px
    );
  }
  .pview-gantt-row--category {
    height: 36px;
    background: var(--md-bg);
  }

  .pview-bar {
    position: absolute;
    top: 6px;
    height: 28px;
    border-radius: 4px;
    background: var(--md-on-variant);
    overflow: hidden;
    color: var(--md-bg);
    font-size: 11px;
    line-height: 28px;
    padding: 0 6px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .pview-bar[data-status="進行中"] { background: var(--md-success); }
  .pview-bar[data-status="完了"]   { background: var(--md-primary); }
  .pview-bar[data-status="遅延"]   { background: var(--md-error); }
  .pview-bar[data-status="保留"]   { background: #1a1a1a; }
  .pview-bar__fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(255,255,255,0.25);
    z-index: 1;
  }
  .pview-bar__label {
    position: relative;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pview-milestone {
    position: absolute;
    top: 10px;
    width: 16px;
    height: 16px;
    background: var(--md-warning);
    transform: rotate(45deg);
  }

  @media (max-width: 900px) {
    .pview-board { flex-direction: column; }
    .pview-left { max-width: none; min-width: 0; }
    .pview-right { width: 100%; }
  }

  /* ============================================================
     flatpickr：標準サイズを少しコンパクトに
  ============================================================ */
  .flatpickr-calendar {
    font-size: 12px !important;
    width: 252px !important;
    box-shadow: var(--md-elevation-2);
    border-radius: var(--md-r-md);
  }
  .flatpickr-calendar .flatpickr-month,
  .flatpickr-calendar .flatpickr-current-month {
    height: 30px;
    font-size: 13px;
    padding-top: 4px;
  }
  .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-calendar .flatpickr-current-month input.cur-year {
    font-size: 13px;
  }
  .flatpickr-calendar .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-next-month {
    height: 30px;
    padding: 6px 8px;
  }
  .flatpickr-calendar .flatpickr-weekdays {
    height: 24px;
  }
  .flatpickr-calendar .flatpickr-weekday {
    font-size: 11px;
    height: 24px;
    line-height: 24px;
  }
  .flatpickr-calendar .flatpickr-days,
  .flatpickr-calendar .dayContainer {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
  }
  .flatpickr-calendar .flatpickr-day {
    max-width: 32px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
  }
  .flatpickr-calendar.arrowTop:before,
  .flatpickr-calendar.arrowTop:after {
    border-width: 4px;
    margin-left: -4px;
  }