:root { --bg:#f4f3ef; --surface:#fff; --border:#e2dfd8; --text:#262626; --muted:#7a776f; --primary:#262626; --accent:#8a6d2f; --mentor:#fbf6ea; --mentor-border:#e6d7b5; --ok:#2e7d4f; --warn:#b26a00; --danger:#c0392b; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; }
a { color:inherit; }
.topbar { background:var(--primary); color:#fff; padding:0 20px; height:52px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:20; }
.topbar .brand { font-weight:700; letter-spacing:.04em; }
.topbar .brand small { font-weight:400; opacity:.7; margin-left:8px; font-size:11px; }
.topbar .spacer { flex:1; }
.topbar .chip { font-size:12px; background:rgba(255,255,255,.12); padding:4px 10px; border-radius:20px; }
.topbar .chip { background:rgba(255,255,255,.15); }
.topbar button { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; }
.content { max-width:1180px; margin:0 auto; padding:22px 16px 90px; }
h2 { font-size:20px; margin-bottom:4px; }
.sub { color:var(--muted); font-size:12px; margin-bottom:18px; }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; text-align:center; }
.kpi .label { font-size:11px; color:var(--muted); }
.kpi .value { font-size:22px; font-weight:700; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabs button { padding:6px 12px; border:1px solid var(--border); background:var(--surface); border-radius:8px; font-size:12px; cursor:pointer; }
.tabs button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.tabs button .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:5px; vertical-align:middle; }
.dot.mentee { background:var(--ok); } .dot.mentor { background:#c9a85a; }
.sheet { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:16px; }
.sheet.mentor { background:var(--mentor); border-color:var(--mentor-border); }
.sheet h3 { font-size:15px; margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--primary); }
.sheet h4 { font-size:13px; margin:14px 0 6px; color:var(--muted); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .two { grid-template-columns:1fr; } }
.row { display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:start; margin-bottom:8px; }
.row.with-side { grid-template-columns:28px 1fr 1fr; }
@media (max-width:700px){ .row.with-side { grid-template-columns:28px 1fr; } .row.with-side .side { grid-column:2; } }
.row .no { font-weight:700; color:var(--muted); padding-top:8px; text-align:center; }
textarea, input[type=text], input[type=date], input[type=time], input[type=password] { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; background:#fff; }
textarea { min-height:44px; resize:vertical; line-height:1.5; }
textarea:focus, input:focus { outline:none; border-color:var(--accent); }
.side textarea, .mentor-field { background:var(--mentor); border-color:var(--mentor-border); }
[data-path]:disabled { background:#f2f1ed; color:#555; cursor:not-allowed; border-style:dashed; }
.side-label { font-size:10px; color:var(--muted); margin-bottom:2px; }
.meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:6px; }
.meta-grid label { font-size:11px; color:var(--muted); display:block; margin-bottom:3px; }
.savebar { position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--border); padding:10px 16px; display:flex; gap:10px; align-items:center; z-index:10; }
.savebar .status { font-size:12px; color:var(--muted); }
.savebar .status.dirty { color:var(--warn); font-weight:700; }
.btn { padding:8px 16px; border:1px solid var(--border); background:var(--surface); border-radius:8px; font-size:13px; cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn:disabled { opacity:.5; cursor:default; }
.progress-wrap { display:flex; align-items:center; gap:10px; }
.progress-wrap input[type=range]{ flex:1; }
.smart-item { margin-bottom:10px; } .smart-item .q { font-size:12px; font-weight:700; margin-bottom:4px; }
.note { background:#f7f6f2; border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:14px; }
.note ol { margin:4px 0 0 18px; }
.legend { font-size:11px; color:var(--muted); margin-bottom:12px; }
.legend span { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:middle; margin:0 4px 0 10px; border:1px solid var(--border); }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:30; }
.modal-bg.open { display:flex; }
.modal { background:#fff; border-radius:12px; padding:22px; width:min(420px,92vw); }
.modal label { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.err { color:var(--danger); font-size:12px; margin-top:8px; }
/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:32px 30px; width:min(400px,100%); }
.login-card h1 { font-size:18px; margin-bottom:4px; }
.login-card p { font-size:12px; color:var(--muted); margin-bottom:18px; }
.login-card label { display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
.login-card .btn { width:100%; margin-top:18px; padding:10px; }
@media print { .topbar,.savebar,.tabs,.kpi-row,.legend { display:none !important; } .content { padding:0; max-width:none; } textarea,input { border:none; background:#fff !important; } [data-path]:disabled { color:#000; } }

.topbar .chip.admin { background:#e0e0e0; color:#262626; }
.topbar a { text-decoration:none; }
.mentee-bar { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:16px; }
.mentee-bar label { font-size:12px; color:var(--muted); white-space:nowrap; }
.mentee-bar select, .modal select, .admin select, .admin input[type=text] { padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; background:#fff; min-width:200px; }
.admin table { width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.admin th, .admin td { padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
.admin th { background:#f7f6f2; font-size:11px; color:var(--muted); }
.admin .badge { font-size:10px; padding:2px 7px; border-radius:10px; background:#eee; }
.admin .badge.mentee { background:#e3f2e8; color:var(--ok); } .admin .badge.mentor { background:#f3e9cf; color:#7a5a12; } .admin .badge.admin { background:#e0e0e0; }
.admin .btn-sm { padding:3px 8px; font-size:11px; }
.admin .inactive td { opacity:.5; }
.pwbox { background:#fff8e1; border:1px solid #ffe08a; border-radius:8px; padding:12px 14px; margin:12px 0; font-size:13px; }
.pwbox code { font-size:16px; font-weight:700; letter-spacing:.05em; }
.table-wrap { overflow-x:auto; }

/* ===== Mobile ===== */
.topbar .nav { display:flex; gap:6px; align-items:center; }
.topbar .menu-btn { display:none; font-size:18px; padding:2px 8px; }
.topbar .menu { display:none; }
@media (max-width:700px) {
  .topbar { height:48px; padding:0 12px; gap:8px; }
  .topbar .brand { font-size:14px; white-space:nowrap; }
  .topbar .brand small { display:none; }
  .topbar .chip { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
  .topbar .nav { display:none; }
  .topbar .menu-btn { display:inline-block; }
  .topbar .menu { position:fixed; top:48px; right:0; left:0; background:var(--primary); padding:8px 12px 12px; z-index:25; flex-direction:column; gap:8px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
  .topbar .menu.open { display:flex; }
  .topbar .menu button, .topbar .menu a { width:100%; text-align:left; padding:10px 12px; font-size:14px; display:block; }
  .content { padding:14px 12px 96px; }
  h2 { font-size:17px; }
  .sub { font-size:11px; margin-bottom:12px; }
  .kpi-row { grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
  .kpi { padding:8px 6px; }
  .kpi .label { font-size:9px; }
  .kpi .value { font-size:15px; }
  .kpi.goal { grid-column:1 / -1; text-align:left; }
  .kpi.goal .value { font-size:12px !important; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -12px 12px; padding:0 12px; gap:5px; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:0 0 auto; padding:7px 10px; font-size:12px; white-space:nowrap; }
  .legend { display:none; }
  .sheet { padding:12px 12px; margin-bottom:10px; border-radius:8px; }
  .sheet h3 { font-size:13px; }
  .sheet h4 { font-size:12px; margin:12px 0 6px; }
  .row { grid-template-columns:20px 1fr; gap:6px; }
  .row .no { font-size:12px; }
  .row.with-side { grid-template-columns:20px 1fr; }
  .row.with-side .side { grid-column:2; margin-top:2px; margin-bottom:6px; }
  textarea, input[type=text], input[type=date], input[type=time], input[type=password] { font-size:16px; padding:8px 10px; } /* iOS zoom防止 */
  .meta-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .meta-grid > div:nth-child(3) { grid-column:1 / -1; }
  .note { font-size:11px; padding:8px 10px; }
  .mentee-bar { padding:8px 10px; flex-direction:column; align-items:stretch; gap:4px; }
  .mentee-bar select { width:100%; min-width:0; }
  .savebar { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:8px; }
  .savebar .btn { padding:10px 14px; font-size:14px; white-space:nowrap; }
  .savebar .status { font-size:10px; line-height:1.3; flex:1; min-width:0; }
  /* admin */
  .admin .meta-grid { grid-template-columns:1fr 1fr; }
  .admin .meta-grid > div:nth-child(1), .admin .meta-grid > div:nth-child(2), .admin .meta-grid > div:last-child { grid-column:1 / -1; }
  .admin table { min-width:720px; }
  .admin .table-wrap { margin:0 -12px; padding:0 12px; }
  .admin th, .admin td { white-space:nowrap; }
  .modal { padding:16px; }
}

.status-row { margin-top:4px; }
.status-sel { padding:3px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:#fff; font-family:inherit; }
.status-sel:disabled { background:#f2f1ed; color:#555; border-style:dashed; }