:root {
    --bg: #f6f7f9;
    --panel: #ffffff;
    --border: #e1e4e8;
    --text: #1f2328;
    --muted: #6e7781;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #dc2626;
    --ok: #16a34a;
    --off: #9ca3af;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar（PWA standalone：上部貼り付け＋ノッチ safe-area 対応） */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
          padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
          position: sticky; top: 0; z-index: 40;
          padding-top: max(12px, env(safe-area-inset-top));
          padding-left: max(24px, env(safe-area-inset-left));
          padding-right: max(24px, env(safe-area-inset-right)); }
.brand { font-weight: 700; }
/* 横に長い時はナビだけ横スクロール（縦に伸びすぎない） */
.topnav { display: flex; gap: 4px; flex: 1 1 auto;
          overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { color: var(--text); padding: 8px 12px; border-radius: 6px;
            display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.topnav a:hover { background: var(--bg); text-decoration: none; }
.topnav a.active { background: #e0e7ff; color: #3730a3; font-weight: 700; }
.logout button.link { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; min-height: 44px; }
.logout button.link:hover { color: var(--text); }

/* Content */
.content { max-width: 1600px; margin: 24px auto;
           padding: 0 max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-right)); }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: 20px; flex: 1; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 16px; margin: 0 0 8px; }

/* Forms */
form .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1 1 160px; min-width: 140px; }
form label.full { flex-basis: 100%; }
form label.grow { flex: 2 1 240px; }
form label.checkbox { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; }
form input[type=text], form input[type=number], form input[type=date], form input[type=password], form select, form textarea {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: white; color: var(--text);
}
form input:disabled { background: #f3f4f6; color: var(--muted); }
form textarea { resize: vertical; }
form .actions { margin-top: 12px; display: flex; gap: 8px; }
form.inline { display: inline; }

/* Buttons */
.btn { display: inline-block; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border); background: white; color: var(--text); font-size: 13px; cursor: pointer; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: white; }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-sm { padding: 4px 8px; font-size: 12px; }

/* Grid table */
.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.grid th, .grid td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; vertical-align: middle; }
.grid th { background: #fafbfc; font-weight: 600; font-size: 13px; color: var(--muted); }
.grid tr:last-child td { border-bottom: none; }
.grid .muted { color: var(--muted); }
.grid .center { text-align: center; }
.grid .col-num { width: 50px; }
.grid .col-flag { width: 80px; }
.grid .col-ops { width: 150px; text-align: right; white-space: nowrap; }
.grid .col-ops form { margin-left: 4px; }
.grid code { font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace; font-size: 12px; background: var(--bg); padding: 2px 6px; border-radius: 4px; }

/* Pills */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill-on { background: #dcfce7; color: var(--ok); }
.pill-off { background: #f3f4f6; color: var(--off); }

/* Flash */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.flash-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Login (admin) */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.10), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(37, 99, 235, 0.10), transparent 45%),
        linear-gradient(135deg, #eef2ff 0%, #f8fafc 60%, #f5f3ff 100%);
}
.login-card {
    background: var(--panel);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow:
        0 24px 48px -12px rgba(15, 23, 42, 0.18),
        0 4px 12px rgba(15, 23, 42, 0.06);
}
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
/* 画像ロゴ（新アイコン）はSVG自体にグラデ角丸があるので、下地のグラデを消す */
img.login-logo {
    background: none;
    object-fit: contain;
}
.login-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 60%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 16px -6px rgba(37, 99, 235, 0.45);
}
.login-card h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: var(--text);
}
.login-card .login-sub {
    margin: -6px 0 4px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    flex: 0 0 auto;
    min-width: 0;
}
.login-card input {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.login-card button {
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.login-card button:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.5);
}
.login-card button:active { transform: translateY(1px); }
.login-foot {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    margin-top: 8px;
    letter-spacing: 0.3px;
}

/* === Member (auth + me) === */

/* 認証画面共通 */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.auth-card-wide { max-width: 480px; }
.auth-card h1 { margin: 0 0 4px; font-size: 20px; }
.auth-card p { margin: 0; font-size: 13px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.auth-card label small { color: var(--muted); font-size: 11px; }
.auth-card input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.auth-card button { padding: 11px; border-radius: 6px; border: none; background: var(--primary); color: white; font-size: 14px; cursor: pointer; margin-top: 4px; }
.auth-card button:hover { background: var(--primary-hover); }
.auth-row { display: flex; gap: 10px; }
.auth-row > label { flex: 1; }
.auth-foot { text-align: center; font-size: 13px; margin-top: 4px; }
.required { color: var(--danger); margin-left: 2px; }

/* マイページ Hero */
.hero { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; flex-wrap: wrap; }
.hero h1 { margin: 0 0 4px; font-size: 22px; }
.invite-box { background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); border: 1px solid #dbeafe; border-radius: 10px; padding: 12px 18px; text-align: center; min-width: 200px; }
.invite-code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--primary); margin: 4px 0; }

.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head h2 { margin: 0; }

/* 定義リスト */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* スキルタグ */
.skill-cat { font-size: 13px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; }

/* スキル選択 */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 16px; }
.skill-check { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; background: white; }
.skill-check input { margin: 0; }
.skill-check:hover { background: var(--bg); }
.skill-check input:checked + span { color: var(--primary); font-weight: 600; }

/* キャリアフォーム */
.form-block { margin-bottom: 14px; }
.form-block label.full { width: 100%; }
.checkbox-line { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }

/* === トスアップ === */

.required { color: var(--danger); margin-left: 2px; }
.small { font-size: 12px; }

/* ステータスバッジ (kanban + 詳細 + 一覧で共通) */
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-submitted    { background: #eff6ff; color: #1e3a8a; }
.status-consent_pending { background: #fef3c7; color: #92400e; }
.status-in_progress  { background: #fef3c7; color: #92400e; }
.status-matched      { background: #ddd6fe; color: #5b21b6; }
.status-won          { background: #dcfce7; color: var(--ok); }
.status-lost         { background: #fee2e2; color: #991b1b; }
.status-duplicate    { background: #f3f4f6; color: var(--off); }
.status-disqualified { background: #f3f4f6; color: var(--off); }

/* kanban */
.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 12px;
    align-items: start;
}
.kanban-col { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-height: 200px; }
.kanban-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kanban-count { font-size: 12px; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; }
.kanban-card {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.1s, background 0.1s;
}
.kanban-card:hover { border-color: var(--primary); background: white; text-decoration: none; }
.kanban-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.kanban-card-body { line-height: 1.5; }
.kanban-empty { text-align: center; padding: 16px 0; }

/* 詳細 2カラム */
.detail-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.detail-2col .card { margin-bottom: 0; }

/* 遷移ボタン群 */
.transitions { display: flex; flex-wrap: wrap; gap: 8px; }
.transition-form { display: inline-flex; align-items: center; gap: 6px; }
.transition-form input[type=text] { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

/* === タイトルバッジ === */
.title-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap;
    background: #f3f4f6; color: var(--off);
}
.title-NONE        { background: #f3f4f6; color: var(--off); }
.title-MEMBER      { background: #eff6ff; color: #1e3a8a; }
.title-SUB_LEADER  { background: #dcfce7; color: #166534; }
.title-LEADER      { background: #fef3c7; color: #92400e; }
.title-CORE        { background: #fee2e2; color: #991b1b; }
.title-ENTRE       { background: #e9d5ff; color: #5b21b6; }
.title-OWNER { background: #fde68a; color: #92400e; border: 1px solid #f59e0b; }

/* === ダッシュボード KPI === */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kpi {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 20px;
}
.kpi-label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text); }

/* col-num: テーブル列幅調整 */
.grid .col-num { white-space: nowrap; }

/* === LINE 連携 === */

.line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #06C755;
    color: white !important;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    margin: 12px 0;
    transition: filter 0.1s;
}
.line-btn:hover { filter: brightness(0.9); text-decoration: none; }
.line-icon {
    background: white;
    color: #06C755;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* /me ページの紹介URL */
.invite-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
}
.invite-url {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    word-break: break-all;
    font-family: ui-monospace, "Cascadia Mono", monospace;
}

/* ===== モバイル / PWA standalone 最適化 ===== */
@media (max-width: 640px) {
  /* iOS はフォーカス時に 16px 未満の入力を自動ズームしてレイアウトが飛ぶ → 16px に。
     既存ルール(form input[...] / .login-card input 等)より詳細度を上げて確実に効かせる。
     ただし密なチーム状況表の中の入力は密度優先で 13px を維持する。 */
  input, select, textarea,
  form input[type=text], form input[type=number], form input[type=date],
  form input[type=email], form input[type=password], form select, form textarea,
  .login-card input, .auth-card input { font-size: 16px; }
  table input, table select, table textarea { font-size: 13px; }
  /* 主要ボタンのタップ領域を確保（44px） */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 34px; }
}

/* ===== 管理ナビのグループ化（ドロップダウン） ===== */
/* 項目が多いので機能ごとに畳む。dropdown が切れないよう横スクロールをやめて折り返す。 */
.topnav.nav-grouped { overflow: visible; flex-wrap: wrap; }
.topnav details.navgroup { position: relative; }
.topnav details.navgroup > summary {
    list-style: none; cursor: pointer; color: var(--text);
    padding: 8px 12px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 44px; white-space: nowrap;
}
.topnav details.navgroup > summary::-webkit-details-marker { display: none; }
.topnav details.navgroup > summary:hover { background: var(--bg); }
.topnav details.navgroup > summary.active { background: #e0e7ff; color: #3730a3; font-weight: 700; }
.topnav .navmenu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    min-width: 230px; padding: 6px; display: flex; flex-direction: column;
}
.topnav .navmenu a { min-height: 40px; }
@media (max-width: 640px) {
    /* 画面が狭い時は画面幅に収める */
    .topnav .navmenu { min-width: 200px; max-width: 78vw; }
}

/* ===== モバイル/PWA: ハンバーガーメニュー（jinzai desk と同じオフキャンバス・ドロワー） ===== */
/* PC幅では ☰ を出さず従来の横並びのまま（.nav-drawer は display:contents で透過）。
   狭い画面(≤640px)だけ、浮いた☰ピル＋左からスライドするドロワー＋暗幕に切替。
   .topbar.has-hamburger を付けたヘッダ（member layout）だけが対象＝admin の nav-grouped は不変。 */
.nav-toggle { display: none; }            /* 既定(PC)は非表示 */
.nav-backdrop { display: none; }
.nav-drawer { display: contents; }        /* PC: 箱を作らず従来の横並びを維持 */

@media (max-width: 640px) {
  /* 浮いた☰ピル（固定・影つきで目立つ） */
  .topbar.has-hamburger .nav-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; z-index: 220;
    top: max(10px, env(safe-area-inset-top)); right: 12px;
    min-height: 42px; padding: 9px 16px; border: none; border-radius: 999px;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer; user-select: none; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  }
  .topbar.has-hamburger .nav-toggle .lbl-close { display: none; }
  .topbar.has-hamburger .nav-toggle-cb:checked ~ .nav-toggle .lbl-open { display: none; }
  .topbar.has-hamburger .nav-toggle-cb:checked ~ .nav-toggle .lbl-close { display: inline; }

  /* 暗幕（チェック時に表示・タップで閉じる） */
  .topbar.has-hamburger .nav-backdrop {
    position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, 0.45);
  }
  .topbar.has-hamburger .nav-toggle-cb:checked ~ .nav-backdrop { display: block; }

  /* 左からのオフキャンバス・ドロワー */
  .topbar.has-hamburger .nav-drawer {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 320px; z-index: 200;
    background: var(--panel); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    padding: calc(58px + env(safe-area-inset-top)) 10px env(safe-area-inset-bottom);
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  .topbar.has-hamburger .nav-toggle-cb:checked ~ .nav-drawer { transform: translateX(0); }

  /* ドロワー内は縦メニュー（横スクロールを廃止） */
  .topbar.has-hamburger .topnav.nav-collapsible {
    display: flex; flex-direction: column; overflow: visible; gap: 2px; flex: none;
  }
  .topbar.has-hamburger .topnav.nav-collapsible a {
    min-height: 48px; padding: 12px 14px; border-radius: 8px; font-size: 15px;
  }

  /* ログアウトはドロワー下部に */
  .topbar.has-hamburger .logout {
    margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px;
  }
  .topbar.has-hamburger .logout button.link {
    width: 100%; text-align: left; padding: 12px 14px; min-height: 48px;
  }
}