/* =============================================================================
 * HIME お屋敷(home) — Mansion Layer CSS
 * =============================================================================
 * 四層構造の③お屋敷層(ログイン後・AI濃密・パステル基調・フルール常駐)
 * 公共層(public-portal.css)とは色系統を完全分離
 * 参照: 4月12日版画面の忠実復活 + HIME設計言語v1.0
 * ============================================================================= */

@import url('./tokens.css');

:root {
  --c-mansion-bg:        #faf7f8;
  --c-mansion-surface:   #ffffff;
  --c-mansion-card-bd:   #ececec;
  --c-mansion-line:      #e8e6e7;
  --c-mansion-muted:     #8a8588;

  /* W100統一 - 半透明ガラストップバー */
  --c-topbar-bg:         rgba(255, 255, 255, 0.72);
  --c-topbar-ink:        #3b1f3d;
  --c-topbar-faint:      #846688;
  --c-lavender:          #a78bfa;

  --c-mode-sel-bg:       #eff4ff;
  --c-mode-sel-bd:       #c5d6f2;
  --c-mode-sel-ink:      #2950a5;

  --mansion-topbar-h:    40px;
  --mansion-nav-h:       54px;
  --mansion-left-w:      300px;
  --mansion-right-w:     300px;
  --mansion-gap:         14px;
  --mansion-pad:         14px;
}

html.mansion, html.mansion body {
  background: var(--c-mansion-bg);
  color: var(--c-ink);
  font-size: var(--fs-md);
}

/* ============================================================================
 * Shell
 * ============================================================================ */
.m-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--mansion-topbar-h) 1fr;
}

/* ---------------- Topbar (W100統一 — ガラス) ---------------- */
.m-topbar {
  height: var(--mansion-topbar-h);
  background: var(--c-topbar-bg);
  color: var(--c-topbar-ink);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  font-size: var(--fs-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-mansion-line);
  position: sticky; top: 0;
  z-index: 50;
  overflow: hidden;
}
.m-topbar .m-start {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 4px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.m-topbar .m-start:hover { background: var(--c-sakura-bg); text-decoration: none; }
.m-topbar .m-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-sakura), var(--c-lavender));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 500;
  box-shadow: 0 2px 8px rgba(244,114,182,0.3);
  transition: transform var(--speed-fast);
}
.m-topbar .m-start:hover .m-avatar { transform: scale(1.08); }
.m-topbar .m-start-btn {
  border: none; background: transparent;
  font-size: 11px;
  color: var(--c-topbar-faint);
  padding: 3px 6px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  min-height: 0;
  font-family: inherit;
}
.m-topbar .m-start-btn:hover { background: var(--c-sakura-bg); color: var(--c-sakura-dark); }
.m-topbar .m-brand-label { font-size: var(--fs-sm); color: var(--c-topbar-ink); letter-spacing: .02em; }
.m-topbar .m-caret { color: var(--c-topbar-faint); font-size: 8px; }

.m-breadcrumb-top {
  display: flex; align-items: center; gap: 2px;
  margin-left: 4px; min-width: 0;
  font-size: 11px;
}
.m-breadcrumb-top a {
  color: var(--c-topbar-faint);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden; text-overflow: ellipsis;
}
.m-breadcrumb-top a:last-child, .m-breadcrumb-top > span:last-child {
  color: var(--c-topbar-ink); font-weight: 600;
}
.m-breadcrumb-top a:hover { background: var(--c-sakura-bg); color: var(--c-sakura-dark); }
.m-breadcrumb-top .sep { color: var(--c-ink-faint); font-size: 9px; }
@media (max-width: 600px) { .m-breadcrumb-top { display: none; } }

.m-topbar .m-spacer { flex: 1; }
.m-topbar .m-icons { display: inline-flex; gap: 2px; flex-shrink: 0; }
.m-topbar .m-icon-btn {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-topbar-faint);
  cursor: pointer;
  transition: all var(--speed-fast);
  border: none; background: transparent;
}
.m-topbar .m-icon-btn svg { width: 15px; height: 15px; }
.m-topbar .m-icon-btn:hover { background: var(--c-sakura-bg); color: var(--c-sakura-dark); text-decoration: none; }

/* ============================================================================
 * Main (three-pane)
 * ============================================================================ */
.m-main {
  display: grid;
  grid-template-columns: var(--mansion-left-w) 1fr var(--mansion-right-w);
  gap: var(--mansion-gap);
  padding: var(--mansion-pad);
  align-items: start;
}
.m-col { display: flex; flex-direction: column; gap: var(--mansion-gap); }

/* ---------------- Card ---------------- */
.m-card {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 8px;
  padding: 14px;
}
.m-card h3 {
  margin: 0 0 10px 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 6px;
}
.m-card h3 .m-count {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--c-mansion-muted);
  font-weight: 400;
}

/* ---------------- Service tiles (left) ---------------- */
.m-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.m-service-tile {
  aspect-ratio: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-mansion-line);
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-ink-sub);
  cursor: pointer;
  transition: background var(--speed-fast);
}
.m-service-tile:hover { background: #fff; border-color: var(--c-sakura); text-decoration: none; }
.m-service-tile .m-ico { font-size: 20px; line-height: 1; }
.m-service-tile .m-lb { font-size: 10px; }

/* ---------------- Schedule ---------------- */
.m-schedule-empty {
  color: var(--c-mansion-muted);
  font-size: var(--fs-sm);
  padding: 4px 0;
}

/* ---------------- Fleur on duty ---------------- */
.m-duty-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-duty-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
}
.m-duty-badge {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 500;
  flex-shrink: 0;
}
.m-duty-meta { line-height: 1.2; }
.m-duty-meta .m-duty-name { font-size: var(--fs-sm); }
.m-duty-meta .m-duty-role { font-size: 10px; color: var(--c-mansion-muted); }

/* フルール色バッジ */
.bg-sakura  { background: var(--c-sakura-fleur); }
.bg-minato  { background: var(--c-minato); }
.bg-tsumugi { background: var(--c-tsumugi); }
.bg-hiyori  { background: var(--c-hiyori); }
.bg-kohaku  { background: var(--c-kohaku); }
.bg-suzuna  { background: var(--c-suzuna); }
.bg-kagari  { background: var(--c-kagari); }
.bg-soyoka  { background: var(--c-soyoka); }
.bg-aoi     { background: var(--c-aoi); }
.bg-shiori  { background: var(--c-shiori); }
.bg-reina   { background: var(--c-reina); }
.bg-yumeno  { background: var(--c-yumeno); }

/* ---------------- W100 tile ---------------- */
.m-w100 {
  background: linear-gradient(135deg, #fff7f9 0%, #f3f6ff 100%);
  border: 1px solid var(--c-mansion-line);
  border-radius: 8px;
  padding: 14px;
  display: block;
  color: inherit;
}
.m-w100:hover { text-decoration: none; border-color: var(--c-sakura); }
.m-w100 .m-w100-t { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.m-w100 .m-w100-s { font-size: var(--fs-sm); color: var(--c-ink-sub); }

/* ============================================================================
 * Center — Command bar + Chat
 * ============================================================================ */
.m-cmdbar {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.m-cmdbar input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font-size: var(--fs-md);
  min-height: 24px;
  padding: 0;
}
.m-cmdbar input:focus-visible { outline: none; }
.m-cmdbar .m-kbd {
  color: var(--c-mansion-muted);
  font-size: var(--fs-sm);
  padding: 2px 6px;
  border: 1px solid var(--c-mansion-line);
  border-radius: 4px;
  font-family: var(--font-mono);
}
.m-cmd-action {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-line);
  color: var(--c-ink-sub);
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 0;
  transition: all var(--speed-fast);
}
.m-cmd-action:hover { background: var(--c-sakura-bg); border-color: var(--c-sakura); color: var(--c-sakura-dark); }
.m-cmd-action.m-cmd-ai {
  background: linear-gradient(135deg, #fff7fa 0%, #fbf5ff 100%);
  border-color: var(--c-lavender);
  color: var(--c-lavender);
}
.m-cmd-action.m-cmd-ai:hover {
  background: linear-gradient(135deg, #fbf5ff 0%, #f3ebff 100%);
  color: #7c3aed;
}
@media (max-width: 640px) {
  .m-cmd-action { padding: 3px 6px; font-size: 11px; }
  .m-cmdbar .m-kbd { display: none; }
}

/* ---------------- Chat messages ---------------- */
.m-msg {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-left: 3px solid var(--c-mansion-line);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: start;
}
.m-msg-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 500;
}
.m-msg-body { min-width: 0; }
.m-msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.m-msg-name { font-size: var(--fs-sm); font-weight: 600; }
.m-msg-role { font-size: 10px; color: var(--c-mansion-muted); padding: 1px 5px; border: 1px solid var(--c-mansion-line); border-radius: 3px; }
.m-msg-tag  { font-size: 12px; }
.m-msg-text { font-size: var(--fs-md); line-height: 1.6; color: var(--c-ink); }
.m-msg-text p { margin: 0 0 6px 0; }
.m-msg-text p:last-child { margin-bottom: 0; }
.m-msg-time { font-size: var(--fs-sm); color: var(--c-mansion-muted); white-space: nowrap; }
.m-msg-reply {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: var(--fs-sm); color: var(--c-mansion-muted);
  padding: 3px 8px;
  border: 1px solid var(--c-mansion-line);
  border-radius: 4px;
  cursor: pointer;
}
.m-msg-reply:hover { background: var(--c-mansion-bg); text-decoration: none; }

/* フルール色で左borderを塗る */
.m-msg.by-sakura  { border-left-color: var(--c-sakura-fleur); background: #fffafc; }
.m-msg.by-soyoka  { border-left-color: var(--c-soyoka); background: #fffbf5; }
.m-msg.by-aoi     { border-left-color: var(--c-aoi); background: #fafdf8; }
.m-msg.by-kohaku  { border-left-color: var(--c-kohaku); background: #fbf9fd; }
.m-msg.by-minato  { border-left-color: var(--c-minato); }
.m-msg.by-tsumugi { border-left-color: var(--c-tsumugi); }
.m-msg.by-hiyori  { border-left-color: var(--c-hiyori); }
.m-msg.by-suzuna  { border-left-color: var(--c-suzuna); }
.m-msg.by-kagari  { border-left-color: var(--c-kagari); background: #fdf9f9; }
.m-msg.by-shiori  { border-left-color: var(--c-shiori); }
.m-msg.by-reina   { border-left-color: var(--c-reina); }
.m-msg.by-yumeno  { border-left-color: var(--c-yumeno); }

/* ---------------- Weather card ---------------- */
.m-weather {
  margin-top: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-mansion-line);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  font-size: 20px;
}
.m-weather .m-w-ico { font-size: 24px; }
.m-weather .m-w-temp { font-size: 22px; font-weight: 500; }

/* ---------------- News items ---------------- */
.m-news {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.m-news-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-md);
}
.m-news-row .m-n-time { color: var(--c-mansion-muted); font-size: var(--fs-sm); padding-top: 2px; }
.m-news-row .m-n-title { color: var(--c-info); }
.m-news-row .m-n-title:hover { text-decoration: underline; }

/* ---------------- Reply-nested ---------------- */
.m-msg-nested {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--c-mansion-line);
  display: flex; flex-direction: column; gap: 4px;
}
.m-msg-nested .m-nest-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.m-msg-nested .m-nest-av {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 500;
}
.m-msg-nested .m-nest-name { font-weight: 600; }
.m-msg-nested .m-nest-time { color: var(--c-mansion-muted); font-size: 11px; }
.m-msg-nested .m-nest-text { font-size: var(--fs-sm); color: var(--c-ink-sub); padding-left: 26px; }

/* ============================================================================
 * Right — Service status / Approval / Mode / Briefing / Audit
 * ============================================================================ */
.m-svc-status-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.m-svc-status-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
}
.m-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); display: inline-block; flex-shrink: 0; }
.m-dot.warn { background: var(--c-alert); }
.m-dot.err  { background: var(--c-warn); }

.m-approval-counts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 6px 0 2px 0;
}
.m-approval-counts .m-c {
  text-align: center;
}
.m-approval-counts .m-c-num { font-size: 24px; font-weight: 400; color: var(--c-ink); line-height: 1.1; }
.m-approval-counts .m-c-lb  { font-size: 10px; color: var(--c-mansion-muted); }

.m-approval-queue-empty { color: var(--c-mansion-muted); font-size: var(--fs-sm); padding: 4px 0; }

/* ---------------- Mode toggle ---------------- */
.m-mode-list { display: flex; flex-direction: column; gap: 6px; }
.m-mode-opt {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-mansion-line);
  border-radius: 8px;
  background: var(--c-mansion-surface);
  cursor: pointer;
  align-items: center;
}
.m-mode-opt:hover { background: var(--c-mansion-bg); text-decoration: none; }
.m-mode-opt.sel {
  background: var(--c-mode-sel-bg);
  border-color: var(--c-mode-sel-bd);
}
.m-mode-opt .m-mode-ico { font-size: 18px; text-align: center; }
.m-mode-opt .m-mode-title { font-size: var(--fs-md); font-weight: 500; }
.m-mode-opt.sel .m-mode-title { color: var(--c-mode-sel-ink); font-weight: 600; }
.m-mode-opt .m-mode-sub { font-size: 10px; color: var(--c-mansion-muted); }
.m-mode-opt .m-mode-ind { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.m-mode-opt.sel .m-mode-ind { background: var(--c-mode-sel-ink); }

/* ---------------- Briefing ---------------- */
.m-brief-row {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-sm);
  padding: 4px 0;
  color: var(--c-ink-sub);
}
.m-brief-row .m-brief-ico { flex-shrink: 0; line-height: 1.4; }

/* ---------------- Audit ---------------- */
.m-audit-status { font-size: var(--fs-sm); color: var(--c-ink-sub); }
.m-audit-status strong { color: var(--c-ok); font-weight: 500; }

/* ============================================================================
 * Bottom Nav (W100統一 — モバイル専用・ガラス)
 * ============================================================================ */
.m-bottomnav {
  display: none;  /* PC非表示(W100準拠) */
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid var(--c-mansion-line);
  padding-top: 0.35rem;
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
}
@media (max-width: 640px) { .m-bottomnav { display: flex; } }
.m-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  color: var(--c-mansion-muted);
  font-size: 0.55rem;
  padding: 2px 4px;
  min-width: 44px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.m-nav-item svg { width: 22px; height: 22px; }
.m-nav-item:hover { text-decoration: none; color: var(--c-ink); }
.m-nav-item.active { color: var(--c-sakura-dark); font-weight: 700; }
.m-nav-item.active.home-tab { transform: scale(1.1); }

/* PC では main に padding-bottom を付けない(bottomnav 非表示なので) */
.m-shell { min-height: 100vh; display: grid; grid-template-rows: var(--mansion-topbar-h) 1fr; }
@media (max-width: 640px) {
  .m-shell { padding-bottom: calc(var(--mansion-nav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
 * Service Soft-Guide Page (home/services/*.html)
 * ============================================================================ */
.m-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px var(--mansion-pad);
  display: flex;
  flex-direction: column;
  gap: var(--mansion-gap);
}
.m-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-mansion-muted);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.m-breadcrumb a { color: var(--c-mansion-muted); }
.m-breadcrumb a:hover { color: var(--c-sakura-dark); }
.m-breadcrumb .sep { color: var(--c-mansion-muted); opacity: .6; }

/* Hero — ソフト・フルール紹介型 */
.m-hero {
  background: linear-gradient(135deg, #fff7fa 0%, #fbf5ff 100%);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 12px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: start;
}
.m-hero-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 500;
}
.m-hero-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 2px 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--c-ink);
}
.m-hero-ltr {
  font-size: 12px;
  color: var(--c-mansion-muted);
  font-weight: 400;
  padding: 1px 8px;
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-line);
  border-radius: 999px;
}
.m-hero-role {
  font-size: var(--fs-sm);
  color: var(--c-mansion-muted);
  margin-bottom: 10px;
}
.m-hero-lead {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--c-ink);
}
.m-hero-lead p { margin: 0 0 8px 0; }
.m-hero-lead p:last-child { margin-bottom: 0; }

/* メニューボタン群 */
.m-menu-section {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  padding: 18px 20px;
}
.m-menu-section h3 {
  margin: 0 0 12px 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 8px;
}
.m-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.m-menu-btn {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-line);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  transition: all var(--speed-fast);
  min-height: 60px;
  cursor: pointer;
}
.m-menu-btn:hover {
  background: #fffafc;
  border-color: var(--c-sakura);
  text-decoration: none;
  transform: translateY(-1px);
}
.m-menu-btn .m-mb-ico { font-size: 22px; line-height: 1; text-align: center; }
.m-menu-btn .m-mb-body { min-width: 0; }
.m-menu-btn .m-mb-title { font-size: var(--fs-md); font-weight: 500; color: var(--c-ink); margin-bottom: 2px; }
.m-menu-btn .m-mb-sub   { font-size: 11px; color: var(--c-mansion-muted); line-height: 1.3; }
.m-menu-btn .m-mb-arrow { color: var(--c-mansion-muted); font-size: 14px; }
.m-menu-btn[target="_blank"] .m-mb-arrow::after { content: "↗"; }
.m-menu-btn:not([target="_blank"]) .m-mb-arrow::after { content: "→"; }

.m-menu-btn.primary {
  background: linear-gradient(135deg, #fff3f7 0%, #fdebf1 100%);
  border-color: var(--c-sakura);
}
.m-menu-btn.primary .m-mb-title { color: var(--c-sakura-dark); font-weight: 600; }

/* お屋敷内リンク/外部リンクの区別 */
.m-ext-hint {
  font-size: 11px;
  color: var(--c-mansion-muted);
  padding: 8px 0 0 0;
  font-style: italic;
}

/* 静か・小さいノート */
.m-aside-note {
  background: #fafaf8;
  border-left: 3px solid var(--c-mansion-line);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-sub);
  line-height: 1.6;
}

/* ============================================================================
 * MyPage — お屋敷版
 * ============================================================================ */
.m-mypage-summary {
  background: linear-gradient(135deg, #fff7fa 0%, #fffafc 100%);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 12px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  align-items: center;
}
.m-mypage-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-sakura);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 500;
}
.m-mypage-name { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.m-mypage-meta { font-size: var(--fs-sm); color: var(--c-mansion-muted); line-height: 1.5; }
.m-method-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-line);
  border-radius: 999px;
  font-size: 10px;
  color: var(--c-ink-sub);
  margin-left: 4px;
}

.m-kv-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 16px;
  font-size: var(--fs-sm);
}
.m-kv-list dt { color: var(--c-mansion-muted); }
.m-kv-list dd { color: var(--c-ink); margin: 0; }

/* ============================================================================
 * Drive — お屋敷簡易ファイラ
 * ============================================================================ */
.m-drive {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--mansion-gap);
}
.m-drive-folders {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  padding: 14px;
}
.m-folder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.m-folder-item {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.m-folder-item:hover { background: var(--c-mansion-bg); text-decoration: none; }
.m-folder-item.active { background: #fff0f5; color: var(--c-sakura-dark); font-weight: 600; }
.m-folder-item .m-folder-count { margin-left: auto; font-size: 10px; color: var(--c-mansion-muted); }

.m-drive-files {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  overflow: hidden;
}
.m-drive-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-mansion-line);
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm);
}
.m-drive-toolbar .m-dt-title { font-weight: 600; flex: 1; }
.m-file-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.m-file-table th, .m-file-table td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-mansion-line);
}
.m-file-table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-mansion-muted);
  background: var(--c-mansion-bg);
}
.m-file-table tr:last-child td { border-bottom: none; }
.m-file-table tr:hover td { background: var(--c-mansion-bg); }
.m-file-row-ico { width: 24px; }
.m-file-name { color: var(--c-ink); }
.m-file-muted { color: var(--c-mansion-muted); }
.m-file-share-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  background: #f3f7ff;
  color: var(--c-info);
  border: 1px solid #d8e4f5;
}

/* ============================================================================
 * Fleur Grid (home/fleur.html)
 * ============================================================================ */
.m-fleur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.m-fleur-card {
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  background: var(--c-mansion-surface);
  transition: all var(--speed-fast);
}
.m-fleur-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none;
  border-color: var(--c-sakura);
}
.m-fleur-card-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 500;
}
.m-fleur-card-body { min-width: 0; }
.m-fleur-card-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.m-fleur-card-role {
  font-size: 11px;
  color: var(--c-mansion-muted);
  margin-bottom: 6px;
}
.m-fleur-card-line {
  font-size: var(--fs-sm);
  color: var(--c-ink-sub);
  line-height: 1.5;
}
.m-fleur-card-audio {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--c-sakura-dark);
}

/* ============================================================================
 * Labs Grid (home/labs.html)
 * ============================================================================ */
.m-labs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.m-lab-card {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: all var(--speed-fast);
}
.m-lab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-decoration: none;
  border-color: var(--c-sakura);
}
.m-lab-card-head {
  display: flex; align-items: center; gap: 8px;
}
.m-lab-card-ico { font-size: 24px; line-height: 1; }
.m-lab-card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-ink);
  flex: 1;
}
.m-lab-card-stage {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-mansion-bg);
  color: var(--c-mansion-muted);
  white-space: nowrap;
}
.m-lab-card-stage.live { background: #e8f5ec; color: var(--c-ok); }
.m-lab-card-stage.beta { background: #fff3f7; color: var(--c-sakura-dark); }
.m-lab-card-stage.proto { background: #f3f6ff; color: var(--c-info); }
.m-lab-card-stage.design { background: #fdf6e8; color: var(--c-alert); }
.m-lab-card-sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-sub);
  line-height: 1.5;
}
.m-lab-card-meta {
  font-size: 11px;
  color: var(--c-mansion-muted);
  margin-top: auto;
  padding-top: 4px;
  display: flex; justify-content: space-between; align-items: center;
}

/* 左サイドバー追加タイル(小型リンクボックス) */
.m-link-box {
  background: var(--c-mansion-surface);
  border: 1px solid var(--c-mansion-card-bd);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  transition: all var(--speed-fast);
}
.m-link-box:hover { background: var(--c-mansion-bg); text-decoration: none; border-color: var(--c-sakura); }
.m-link-box-ico { font-size: 18px; text-align: center; }
.m-link-box-t { font-size: var(--fs-md); color: var(--c-ink); font-weight: 500; }
.m-link-box-s { font-size: 10px; color: var(--c-mansion-muted); }
.m-link-box-ar { color: var(--c-mansion-muted); font-size: 14px; }

/* ============================================================================
 * Responsive — stack on narrow
 * ============================================================================ */
@media (max-width: 1100px) {
  .m-main {
    grid-template-columns: 1fr 1fr;
  }
  .m-main > .m-col:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .m-main {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .m-main > .m-col { grid-column: 1 / -1; }
  .m-bottomnav { position: sticky; bottom: 0; }
  .m-drive { grid-template-columns: 1fr; }
  .m-hero { grid-template-columns: 1fr; }
  .m-mypage-summary { grid-template-columns: 1fr; text-align: center; }
  .m-kv-list { grid-template-columns: 1fr; gap: 4px 0; }
  .m-kv-list dt { color: var(--c-mansion-muted); font-size: 11px; margin-top: 8px; }
}