/* リーダー用ダッシュボード：base.css（管理画面と同じ部品）に足す分だけ */
[hidden] { display: none !important; }
.page-desc { font-size: 13px; color: var(--color-ink-3); margin-top: -8px; }
.ld-num { font-family: var(--font-fin); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 氏名が「未登録(ID)」の会員は薄く（管理画面と同じ） */
.unreg { color: var(--color-ink-3) !important; font-weight: 500 !important; }
/* 閉じたメニューの影が画面の左端にのぞかないように */
@media (max-width: 959px) { .sidebar:not(.open) { box-shadow: none; } }

/* KPI: PC は4つ横、スマホは2つずつ */
.ld-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ld-stats .stat { min-height: 92px; }

/* 横棒（ランク別の人数） */
.ld-bars { display: flex; flex-direction: column; gap: 10px; }
.ld-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: 13px; }
.ld-bar .lbl { display: flex; }
.ld-bar .track { display: block; height: 10px; border-radius: 5px; background: var(--color-paper-2); overflow: hidden; }
.ld-bar .fill { display: block; height: 100%; border-radius: 5px; background: var(--color-accent); min-width: 2px; }
.ld-bar .n { text-align: right; font-family: var(--font-fin); font-variant-numeric: tabular-nums; font-weight: 600; }

/* 月ごとの縦棒（新規会員・NFT販売枚数）と切り替え（端から端まで等分） */
.ld-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-bottom: 18px; }
.ld-seg button { width: 100%; }
.ld-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
.ld-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.ld-col .v { font-size: 12px; font-weight: 600; font-family: var(--font-fin); font-variant-numeric: tabular-nums; }
.ld-col .b { display: block; width: 100%; max-width: 44px; border-radius: 6px 6px 3px 3px; background: var(--color-accent); min-height: 2px; }
.ld-col .b.alt { background: var(--color-gold); }
.ld-col .m { font-size: 12px; color: var(--color-ink-3); }
.card-title a.hint { color: var(--color-accent); font-weight: 600; font-size: 12px; }

/* 表のなかの会員（名前と ID） */
.ld-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ld-who-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ld-who small { font-size: 12px; color: var(--color-ink-3); }

/* 道具の列（検索・絞り込み） */
.ld-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ld-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ld-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--color-ink-3); pointer-events: none; }
.ld-search .input { padding-left: 36px; width: 100%; }
.ld-count { margin-left: auto; font-size: 12px; color: var(--color-ink-3); white-space: nowrap; }
/* 選択欄：ブラウザの矢印は使わず、右に余白を取って自前の矢印を置く（文字が矢印や枠に重ならない） */
.ld-select { -webkit-appearance: none; appearance: none; min-height: 40px; max-width: 100%; border-radius: 11px; border: 1px solid var(--color-rule); padding: 0 34px 0 12px; font-size: 13px;
  color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7891' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px; }
.ld-select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ld-more { display: flex; justify-content: center; margin-top: 14px; }
.ld-hits { margin-bottom: 14px; }

/* 組織図：1行が1人。1段目に名前、2段目に ID・ランク・紹介（足りなければ折り返す）。字下げで段を見せる */
.ld-tree { display: flex; flex-direction: column; }
.ld-node { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 56px; padding: 6px 10px 6px calc(10px + var(--ind, 0px));
  border-bottom: 1px solid color-mix(in oklch, var(--color-rule) 55%, transparent); position: relative; }
.ld-node:hover { background: var(--color-paper-2); }
.ld-node.hit { background: var(--color-accent-soft); }
.ld-node::before { content: ""; position: absolute; left: calc(var(--ind, 0px)); top: 0; bottom: 0; width: 1px; background: var(--color-rule); opacity: var(--line, 0); }
.ld-tog { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-ink-2); }
.ld-tog svg { width: 15px; height: 15px; transition: transform 160ms ease-out; }
.ld-tog[aria-expanded="true"] svg { transform: rotate(90deg); }
.ld-tog:hover { background: var(--color-paper-3); }
.ld-tog.leaf { visibility: hidden; }
.ld-open { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 100%; text-align: left; padding: 4px 0; }
.ld-nm { display: block; max-width: 100%; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; min-width: 0; }
.ld-id { font-size: 12px; color: var(--color-ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-ref { font-size: 12px; color: var(--color-ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-meta .k { color: var(--color-ink-3); margin-right: 3px; }
/* PC: 右側の数字を列でそろえる（行ごとにずれない） */
@media (min-width: 721px) {
  .ld-meta { display: grid; grid-template-columns: 64px 76px 96px 112px; gap: 0; }
  .ld-meta > span { text-align: right; }
}
/* スマホ: 数字は名前の下の段へ。矢印は名前の行にそろえる。直下の人数は詳細で見る */
@media (max-width: 720px) {
  .ld-node { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .ld-tog { margin-top: 2px; }
  .ld-meta { grid-column: 2; gap: 4px 10px; flex-wrap: wrap; white-space: normal; padding-bottom: 2px; }
  .ld-meta > span { white-space: nowrap; }
  .ld-pc { display: none; }
}

/* 詳細パネル */
.ld-dr-head h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.ld-dr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--color-ink-3); overflow-wrap: anywhere; }
.ld-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.ld-kv { margin-top: 8px; }
.ld-link { color: var(--color-accent); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ld-link:hover { text-decoration: underline; }
.ld-dr-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.ld-dr-map { display: inline-flex; align-items: center; gap: 6px; }
.ld-dr-map svg { width: 16px; height: 16px; }
.ld-dr-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; margin: 22px 0 8px; }
.ld-dr-h span { font-size: 12px; font-weight: 400; color: var(--color-ink-3); }

/* 人の一覧（詳細パネル・検索結果・最近の登録）：名前と ID | ランク | 数字 | 矢印。スマホは数字を2段目へ */
.ld-people { display: flex; flex-direction: column; border: 1px solid color-mix(in oklch, var(--color-rule) 70%, transparent); border-radius: 14px; overflow: hidden; }
.ld-person { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 56px; padding: 8px 12px; text-align: left;
  border-bottom: 1px solid color-mix(in oklch, var(--color-rule) 55%, transparent); }
.ld-person:last-child { border-bottom: 0; }
.ld-person:hover { background: var(--color-paper-2); }
.ld-person-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ld-person-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-person-id { font-size: 12px; color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-person-num { font-size: 12px; color: var(--color-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-person > .badge { justify-self: end; }
.ld-person > svg { width: 14px; height: 14px; color: var(--color-ink-3); }
@media (max-width: 480px) {
  .ld-person { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .ld-person > .badge { grid-column: 2; grid-row: 1; }
  .ld-person > svg { grid-column: 3; grid-row: 1 / span 2; }
  .ld-person-num { grid-column: 1; grid-row: 2; }
}
.ld-empty { font-size: 13px; color: var(--color-ink-3); }
.ld-fail { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ログイン */
.login-card .lg-title { font-size: 15px; font-weight: 600; text-align: center; margin: -14px 0 10px; }

/* ---------------- マップ（会員アプリのマップと同じ見せ方） ---------------- */
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ov-title { font-size: 13px; font-weight: 600; }
.ov-count { flex: 0 0 auto; color: var(--color-accent); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-count small { margin-left: 2px; color: var(--color-ink-3); font-size: 12px; font-weight: 500; }
.ov-canvas { height: clamp(380px, 62dvh, 760px); border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-bg); overflow: auto; overscroll-behavior: contain;
  touch-action: pan-x pan-y; cursor: grab; scrollbar-color: var(--color-rule-strong) transparent; }
.ov-canvas.dragging { cursor: grabbing; user-select: none; }
.ov-canvas svg { display: block; max-width: none; }
.ov-edge { fill: none; stroke: var(--color-rule-strong); stroke-width: 1.5; }
.ov-node .node-card { fill: color-mix(in oklch, var(--node-color) 8%, var(--color-paper)); }
.ov-node .node-outline { fill: none; stroke: var(--node-color); stroke-width: 1.5; pointer-events: none; }
.ov-node.root .node-outline { stroke-width: 3; }
.ov-node.zero-nft .node-outline { stroke-width: 2; stroke-dasharray: 0 5; stroke-linecap: round; }
.ov-node.hit .node-outline { stroke: var(--color-accent); stroke-width: 3.5; stroke-dasharray: none; }
.ov-person { display: grid; grid-template-columns: 34px minmax(0, 1fr) 70px; align-items: center; column-gap: 10px; width: 300px; height: 88px; padding: 10px 12px; border: 0; border-radius: 16px;
  background: transparent; color: var(--color-ink); text-align: left; font-family: var(--font-body); cursor: pointer; }
.ov-person:hover { background: color-mix(in oklch, var(--color-accent) 6%, transparent); }
.ov-person:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.ov-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
  background: var(--rank-color, var(--color-ink-3)); color: var(--color-accent-ink); }
.ov-avatar.no-nft { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule-strong); color: var(--color-ink-3); font-weight: 600; }
.ov-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ov-id { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-name { max-width: 100%; font-size: 12px; color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-name.unreg { font-weight: 400 !important; }
.ov-rankline { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.ov-rankline .badge { flex: 0 0 auto; }
.ov-ref { min-width: 0; font-size: 11.5px; color: var(--color-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-stats { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ov-stats strong { display: block; font-size: 15px; font-weight: 700; }
.ov-stats small { display: block; font-size: 11.5px; color: var(--color-ink-3); white-space: nowrap; }
/* 下の段を開く／閉じる：カードの左下、線の出発点に乗せる */
.ov-exp { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-paper); color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent); cursor: pointer; }
.ov-exp svg { width: 16px; height: 16px; }
.ov-exp[aria-expanded="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.ov-exp:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ov-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ov-range { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 40px; margin: 0; background: transparent; cursor: pointer; }
.ov-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--zoom-fill, var(--color-rule)); }
.ov-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-accent); box-shadow: var(--shadow-soft); }
.ov-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--color-rule); }
.ov-range::-moz-range-progress { height: 6px; background: var(--color-accent); }
.ov-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-accent); }
.ov-zoom { min-width: 46px; color: var(--color-ink-3); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ov-depths { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ov-depths::-webkit-scrollbar { display: none; }
.ov-depth { flex: 1 0 72px; min-width: 72px; min-height: 52px; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: var(--color-paper-2); text-align: center; }
.ov-depth[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ov-depth span { display: block; font-size: 11.5px; color: var(--color-ink-3); }
.ov-depth strong { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* 会員一覧：スマホは1人1行の一覧、PC は表。道具は2列に等分 */
.ld-mlist { display: none; }
@media (max-width: 720px) {
  .ld-ptable { display: none; }
  .ld-mlist { display: flex; }
  .ld-tools.ld-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ld-tools-grid .ld-search { grid-column: 1 / -1; max-width: none; }
  .ld-tools-grid .ld-select { width: 100%; min-width: 0; }
  .ld-tools-grid .ld-count { align-self: center; justify-self: end; margin-left: 0; }
}

/* ウォレットアドレス（2026-10-12）：一覧では短く、詳細では全部 */
/* 「ID · 0x1234…abcd」：長い ID だけを省略し、アドレスの短縮は必ず読める */
.ld-person-id, .ld-who small { display: flex; min-width: 0; max-width: 100%; }
.ld-idt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-addr { flex: 0 0 auto; white-space: nowrap; color: var(--color-ink-3); }
.ld-addr::before { content: "·"; margin: 0 5px; }
/* 詳細：1行目に「ウォレット」とコピー、2行目にアドレスを全部（見出しが2行に割れない） */
.drawer .ld-wallet-row { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.drawer .ld-wallet-row .k { white-space: nowrap; }
.ld-wallet { flex: 1 0 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; color: var(--color-ink); word-break: break-all; }
.ld-copy { flex: 0 0 auto; }