/*
  members.css
  「会員一覧」ページ固有スタイル（サマリー／正会員・賛助会員タブ／地区タブ／会員カード）。
  ヘッダー・フッター・文字サイズ切替・配色変数は css/common.css を参照。
  配色は common.css の :root（玉色・紺・黄緑・朱・ページ地）のみを使用し、
  生 hex / rgba は直書きしない（種別の塗り分けは color-mix で変数から生成）。
*/

/* 会員種別の識別色（common.css の確定5色から割り当て） */
:root{
  --mem-ferry:var(--navy);       /* 離島航路（正会員） */
  --mem-yuran:var(--vermilion);  /* 遊覧航路（正会員） */
  --mem-support:var(--accent);   /* 賛助会員 */
}

.crumb + .titlerow{margin-top:4px;}
.titlerow{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;}
.titlerow h1{margin-bottom:10px;}
.titlerow .asof{font-size:.78em;color:color-mix(in srgb, var(--text) 65%, var(--text-mute));}

/* ---- サマリー（会員数） ---- */
.summary{
  background:#F9F8F3;border:2px solid var(--tama);border-radius:var(--r-md);
  padding:16px 20px;margin-bottom:22px;
  display:flex;gap:16px 30px;align-items:flex-end;flex-wrap:wrap;
}
.summary .cap{font-size:.82em;color:var(--text-mute);letter-spacing:.05em;font-weight:700;}
.summary .num{font-size:1.35em;font-weight:700;color:var(--navy);}
.summary .unit{font-size:.82em;color:var(--navy);}
.summary .breakdown{font-size:.86em;color:var(--text);}
.summary .rule{width:1px;align-self:stretch;background:var(--line);}

/* ---- 正会員／賛助会員タブ ---- */
.tabs{display:flex;gap:3px;border-bottom:2px solid var(--navy);}
.tabs button{
  font-family:inherit;font-size:.92em;font-weight:700;line-height:1.6;
  padding:11px 34px;border:none;cursor:pointer;
  background:var(--tama-pale);color:var(--text-mute);border-radius:var(--r-md) var(--r-md) 0 0;
}
.tabs button:not(.on){border:1.5px solid var(--tama);border-bottom:none;}
.tabs button:hover{color:var(--text);}
.tabs button.on{background:var(--navy);color:#fff;}

/* ---- 地区タブ ---- */
.districts{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0 0;}
.districts button{
  font-family:inherit;font-size:.86em;font-weight:700;line-height:1.6;
  padding:7px 20px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--tama);background:#F9F8F3;color:var(--navy);
}
.districts button:hover{background:var(--tama-light);}
.districts button.on{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---- 凡例 ---- */
.legend{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;padding:14px 0 10px;font-size:.84em;color:var(--text);}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:6px;}
.legend .note{color:var(--text-mute);}

/* ---- 会員カード ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:18px;}
.card{
  /* 塗りはサイト共通の箱地 #F9F8F3 に種別色を薄く混ぜて明るめに。識別は左5pxバーと枠線で担う */
  border:1px solid color-mix(in srgb, var(--mem-ferry) 38%, #F9F8F3);
  /* カードは多数並ぶ「名簿の行」として、パネル(--r-md)より締めた --r-sm を使う */
  border-left:5px solid var(--mem-ferry);border-radius:var(--r-sm);padding:16px 18px;
  background:color-mix(in srgb, var(--mem-ferry) 12%, #F9F8F3);
}
.card.yuran{
  border-color:color-mix(in srgb, var(--mem-yuran) 38%, #F9F8F3);
  border-left-color:var(--mem-yuran);
  background:color-mix(in srgb, var(--mem-yuran) 10%, #F9F8F3);
}
.card.supporting{
  border-color:color-mix(in srgb, var(--mem-support) 30%, #F9F8F3);
  border-left-color:color-mix(in srgb, var(--mem-support) 82%, #F9F8F3);
  background:color-mix(in srgb, var(--mem-support) 12%, #F9F8F3);
}
.card .cname{font-size:1.06em;color:var(--navy);font-weight:700;line-height:1.6;margin-bottom:3px;}
/* 社名は「会社種別（株式会社 等）」の切れ目でのみ折り返す。種別・本体とも語中改行させない */
.card .cname .cn-body,.card .cname .cn-type{white-space:nowrap;}
/* 住所本体は語中で折り返さない（行頭が番地の数字だけにならないように） */
.card .meta .addr,.card dl .addr{white-space:nowrap;}
.card .cname a{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.card.yuran .cname,.card.yuran .cname a{color:var(--vermilion);}
.card .route{font-size:.86em;color:var(--text);margin-bottom:12px;}
.card .meta{
  font-size:.76em;color:var(--text);line-height:1.9;padding-top:9px;
  border-top:1px dashed color-mix(in srgb, var(--mem-ferry) 34%, #F9F8F3);
}
.card.yuran .meta{border-top-color:color-mix(in srgb, var(--mem-yuran) 34%, #F9F8F3);}
.card dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.8em;}
.card dt{color:var(--text-mute);white-space:nowrap;}
.card dd{margin:0;color:var(--text);line-height:1.7;}

@media (max-width:640px){
  .summary{gap:14px 16px;}
  .summary .rule{display:none;}
  .tabs button{flex:1;padding:11px 8px;}
}