/*
 * Pico CSS v2 への上書き。ビルド工程は使わない。
 * ブランドカラー（公式サイト kazusas.net より）
 *   オレンジ #dd9933 … ヘッダー上部の帯・ラベル背景（白文字は不可。文字は濃い茶色）
 *   青     #1c93cf … ロゴの色。枠線・アイコン等の装飾に使う
 *   濃い青 #1677b0 … ボタン・リンク（白文字とのコントラスト 4.5 以上を確保）
 */

:root {
  --brand-orange: #dd9933;
  --brand-orange-soft: #fbf0df;
  --brand-orange-ink: #2b1d05;
  --brand-orange-text: #8a5a12;
  --brand-blue: #1c93cf;
  --brand-blue-strong: #1677b0;
  --brand-blue-deep: #13699c;
  --brand-blue-soft: #e8f4fb;
  --tabbar-height: 64px;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-font-family-sans-serif: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --pico-font-size: 106.25%;
  --pico-line-height: 1.7;
  --pico-background-color: #fafaf8;
  --pico-color: #2e3238;
  --pico-muted-color: #6b7078;
  --pico-h1-color: #22262b;
  --pico-h2-color: #22262b;
  --pico-h3-color: #22262b;
  --pico-border-radius: 0.5rem;

  --pico-primary: var(--brand-blue-strong);
  --pico-primary-background: var(--brand-blue-strong);
  --pico-primary-border: var(--brand-blue-strong);
  --pico-primary-underline: rgba(22, 119, 176, 0.5);
  --pico-primary-hover: var(--brand-blue-deep);
  --pico-primary-hover-background: var(--brand-blue-deep);
  --pico-primary-hover-border: var(--brand-blue-deep);
  --pico-primary-hover-underline: var(--brand-blue-deep);
  --pico-primary-focus: rgba(28, 147, 207, 0.35);
  --pico-primary-inverse: #fff;

  --pico-card-background-color: #fff;
  --pico-card-sectioning-background-color: #f6f7f8;
  --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03);
  --pico-form-element-focus-color: var(--brand-blue);
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main.container { flex: 1; padding-top: 1.25rem; padding-bottom: 2rem; }
h1 { font-size: 1.6rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; }
section > h2, main > h2 {
  border-left: 5px solid var(--brand-orange);
  padding-left: 0.6rem;
  margin-top: 2rem;
}
/* カードの余白は Pico の変数で調整する（header/footer の位置計算と合わせるため） */
article { --pico-block-spacing-vertical: 1rem; --pico-block-spacing-horizontal: 1.25rem; margin-bottom: 1rem; }
article > header h1, article > header h2 { margin-bottom: 0.25rem; }
article > :last-child:not(footer) { margin-bottom: 0; }
blockquote { border-left-color: var(--brand-blue); }

/* ---------- ヘッダー ---------- */
/* Pico が body 直下の header/footer に付ける上下余白を打ち消す */
body > header.site-header, body > footer.site-footer { padding-block: 0; }
.site-header {
  background: #fff;
  border-top: 6px solid var(--brand-orange);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-name {
  color: var(--brand-orange-text); font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  border-left: 2px solid var(--brand-orange); padding-left: 0.6rem; line-height: 1.3;
}
.header-tools { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.inline-form { margin: 0; }
.header-link,
.header-link:is(button) {
  display: inline-block; width: auto; margin: 0; padding: 0.35rem 0.6rem;
  font-size: 0.85rem; line-height: 1.2; color: var(--pico-muted-color); text-decoration: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--pico-border-radius);
}
.header-link:hover, .header-link:is(button):hover { color: var(--brand-blue-strong); border-color: var(--brand-blue-soft); background: var(--brand-blue-soft); }
.header-link.is-active { color: var(--brand-orange-ink); background: var(--brand-orange-soft); }

/* メインメニュー（パソコン: ヘッダー下の横並び） */
/* Pico の nav 用のマイナス余白・角丸を打ち消すため nav.main-nav で詳細度を上げる */
nav.main-nav { display: block; background: var(--brand-blue-strong); }
nav.main-nav ul { display: flex; gap: 0.25rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; list-style: none; }
nav.main-nav li { list-style: none; margin: 0; padding: 0; }
nav.main-nav a {
  position: relative; display: flex; align-items: center; gap: 0.4rem; margin: 0;
  padding: 0.65rem 0.9rem; color: #fff; text-decoration: none; font-weight: 600;
  border-radius: 0; border-bottom: 4px solid transparent;
}
nav.main-nav a:hover { background: var(--brand-blue-deep); }
nav.main-nav a.is-active { border-bottom-color: var(--brand-orange); background: var(--brand-blue-deep); }
nav.main-nav .icon { width: 20px; height: 20px; flex-shrink: 0; }

/* スマホ: 画面下のタブバー */
@media (max-width: 767px) {
  .brand-logo { height: 30px; }
  .brand-name { font-size: 0.75rem; }
  body.has-tabbar { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
  nav.main-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid #e3e5e8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  nav.main-nav ul { padding: 0; max-width: none; gap: 0; }
  nav.main-nav li { flex: 1; min-width: 0; }
  nav.main-nav a {
    flex-direction: column; justify-content: center; gap: 0.15rem;
    height: var(--tabbar-height); padding: 0.25rem 0;
    color: #59606a; font-size: 0.7rem; font-weight: 600;
    border-bottom: 0; border-top: 3px solid transparent;
  }
  nav.main-nav a:hover { background: transparent; color: var(--brand-blue-strong); }
  nav.main-nav a.is-active { color: var(--brand-blue-strong); background: var(--brand-blue-soft); border-top-color: var(--brand-orange); }
  nav.main-nav .icon { width: 24px; height: 24px; }
  nav.main-nav .nav-label { white-space: nowrap; }
  nav.main-nav .badge { position: absolute; top: 6px; left: 50%; margin-left: 6px; }
}
@media (max-width: 400px) {
  /* 6 項目でも文字が詰まらないよう少し小さくする */
  nav.main-nav a { font-size: 0.62rem; letter-spacing: -0.03em; }
  nav.main-nav .icon { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid #e6e7e9; background: #fff; padding: 1rem 0; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ---------- 部品 ---------- */
.muted { color: var(--pico-muted-color); }
.badge {
  display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 1em;
  background: #c62828; color: #fff; font-size: 0.72rem; line-height: 1.5; text-align: center; font-weight: 700;
}
.status-label, .pinned-label {
  display: inline-block; font-size: 0.75rem; font-weight: 600; line-height: 1.6;
  padding: 0 0.5rem; border-radius: 1em; vertical-align: middle;
  background: #eef0f2; color: #3d434b;
}
.pinned-label { background: var(--brand-orange); color: var(--brand-orange-ink); }
.unread-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1.6;
  padding: 0 0.5rem; border-radius: 1em; background: var(--brand-blue-soft); color: var(--brand-blue-deep);
  vertical-align: middle;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.actions form { margin: 0; }
.actions button, .actions [role="button"] { margin: 0; width: auto; }
/* カード下部のボタン欄は Pico の footer の位置計算を優先する */
article > footer.actions { margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); }

.message { padding: 0.75rem 1rem; border-left: 5px solid var(--brand-blue); background: var(--brand-blue-soft); box-shadow: none; }
.message-error { border-left-color: #c62828; background: #fdecea; color: #6d1b1b; }
.message-success { border-left-color: #2e7d32; background: #e9f5ea; color: #1d4d20; }
label:has(> input[type="checkbox"]) { margin-bottom: 1.25rem; }
.field-error { display: block; margin-top: -0.5rem; margin-bottom: 1rem; color: #c62828; font-weight: 600; }
.notice-banner {
  padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); font-size: 0.85rem; margin-bottom: 1rem;
  background: var(--brand-orange-soft); color: var(--brand-orange-ink); border: 1px solid #f0d7ad;
}

/* 一覧のカード */
.card-link { font-weight: 700; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-meta { font-size: 0.85rem; color: var(--pico-muted-color); }
.status-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin-bottom: 1rem; list-style: none; }
.status-tabs li { list-style: none; margin: 0; }
.status-tabs a, .status-tabs strong {
  display: inline-block; padding: 0.3rem 0.8rem; border-radius: 1em; font-size: 0.9rem;
  border: 1px solid #d5d9de; text-decoration: none;
}
.status-tabs strong { background: var(--brand-blue-strong); border-color: var(--brand-blue-strong); color: #fff; }

/* 検索フォーム（<search> で囲む。Pico の role=search の装飾は使わない） */
search { display: block; }
.search-form {
  display: grid; gap: 0.5rem; grid-template-columns: 1fr; margin-bottom: 1rem;
  padding: 0.75rem; background: #fff; border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
}
@media (min-width: 768px) { .search-form { grid-template-columns: 2fr 1fr auto; } .search-form:has(> :nth-child(2):last-child) { grid-template-columns: 1fr auto; } }
.search-form > * { margin: 0; }

/* ホーム */
.stat {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  background: #fff; border-radius: var(--pico-border-radius); box-shadow: var(--pico-card-box-shadow);
  border-left: 5px solid var(--brand-orange);
}
a.stat { text-decoration: none; color: inherit; }
.stat strong { font-size: 1.6rem; color: var(--brand-orange-text); }
.callout { border-left: 5px solid var(--brand-blue); }

/* 名簿 */
/* minmax(0, 1fr): 1 行に省略する長い文言で列が広がらないようにする */
.member-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 768px) { .member-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); } }
.member-grid > article { margin-bottom: 0; }
/* 名簿のカード: 区画ごとに高さを固定し、文言の長さでカードの高さが変わらないようにする */
.member-card {
  display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
  padding: 1rem 1.1rem 1.1rem; height: 100%;
}
.member-card-main { display: flex; gap: 0.85rem; align-items: center; min-height: 64px; }
.member-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.one-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .card-link { font-size: 1.05rem; line-height: 1.4; }
.member-card .card-meta { line-height: 1.5; min-height: 1.5em; }
.member-avatar {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--brand-blue-soft);
}
.member-avatar-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-blue-soft); color: var(--brand-blue-deep); font-weight: 700; font-size: 1.5rem;
}
.catchphrase {
  margin: 0; padding-left: 0.5rem; border-left: 3px solid var(--brand-orange);
  font-weight: 600; color: var(--brand-orange-ink); overflow-wrap: anywhere;
  line-height: 1.5; height: 3em;  /* 常に 2 行分。3 行目以降は省略 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catchphrase.is-empty { border-left-color: transparent; }
.member-card-bizcard {
  display: block; margin-top: auto; width: 100%; aspect-ratio: 91 / 55;  /* 日本の名刺の縦横比 */
  border-radius: 6px; border: 1px solid #e3e5e8; overflow: hidden; background: #fff;
}
.member-card-bizcard img { display: block; width: 100%; height: 100%; object-fit: contain; }
.member-card-bizcard.is-empty { background: #f3f4f6; border-style: dashed; }
.business-cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.business-card-image {
  display: block; width: 100%; max-width: 360px; height: auto;
  border-radius: 6px; border: 1px solid #e3e5e8; box-shadow: var(--pico-card-box-shadow);
}
.profile-photo { max-width: 200px; height: auto; border-radius: var(--pico-border-radius); }
.profile-fields dt { font-weight: 700; margin-top: 0.9rem; font-size: 0.9rem; color: var(--pico-muted-color); }
.profile-fields dd { margin: 0 0 0.25rem 0; overflow-wrap: anywhere; }

/* 掲示板 */
.offer {
  border-left: 5px solid var(--brand-orange); background: #fff; padding: 0.75rem 1rem; margin-bottom: 1rem;
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0; box-shadow: var(--pico-card-box-shadow);
}
.post-meta { font-size: 0.85rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; }

/* 添付 */
.attachments { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--pico-card-sectioning-background-color); border-radius: var(--pico-border-radius); }
.attachments-heading { font-size: 0.95rem; margin: 0 0 0.5rem; border: 0; padding: 0; }
.attachments ul { margin-bottom: 0; }
.attachments li { overflow-wrap: anywhere; }

/* メッセージ */
.message-item { margin-bottom: 0.9rem; }
.message-item.mine { text-align: right; }
.message-item .bubble {
  display: inline-block; text-align: left; max-width: 85%; padding: 0.6rem 0.9rem;
  border-radius: 1rem 1rem 1rem 0.25rem; background: #fff; box-shadow: var(--pico-card-box-shadow); overflow-wrap: anywhere;
}
.message-item.mine .bubble { background: var(--brand-blue-soft); border-radius: 1rem 1rem 0.25rem 1rem; }

/* 規約 */
.legal h2 { font-size: 1.1rem; margin-top: 1.5rem; border-left: 4px solid var(--brand-orange); padding-left: 0.5rem; }
.legal ol, .legal ul { padding-left: 1.25rem; }

/* 表 */
.stats-table td, .stats-table th { white-space: nowrap; }

/* ログイン前の画面は中央寄せのカード */
.auth-card { max-width: 32rem; margin: 1rem auto; }

/* イベント */
.event-card { display: flex; gap: 1rem; align-items: flex-start; }
.event-card-body { min-width: 0; flex: 1; }
.event-date {
  flex-shrink: 0; width: 4rem; text-align: center; border-radius: var(--pico-border-radius);
  border: 2px solid var(--brand-orange); background: var(--brand-orange-soft); color: var(--brand-orange-ink);
  line-height: 1.2; padding: 0.3rem 0;
}
.event-date-month, .event-date-week { display: block; font-size: 0.75rem; font-weight: 600; }
.event-date-day { display: block; font-size: 1.5rem; font-weight: 800; }

/* ホームのシステムのお知らせ（本部連絡より控えめに） */
.system-notices {
  margin-top: 2.5rem; padding: 0.75rem 1rem; font-size: 0.85rem;
  background: #f1f2f4; border-radius: var(--pico-border-radius); color: var(--pico-muted-color);
}
.system-notices-heading { font-size: 0.85rem; font-weight: 700; margin: 0 0 0.4rem; border: 0; padding: 0; color: var(--pico-muted-color); }
.system-notices ul { margin: 0 0 0.4rem; padding: 0; }
.system-notices ul li { padding: 0; }
.system-notices li { list-style: none; margin: 0 0 0.3rem; line-height: 1.5; }
.system-notices a { color: #4a5563; display: inline; }
.system-notices li .muted { margin-left: 0.25rem; }
.system-notices-more { font-size: 0.8rem; }
.system-important { font-size: 0.7rem; padding: 0 0.35rem; border: 1px solid #b9bec6; border-radius: 3px; margin-right: 0.15rem; }
.unread-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--brand-blue); margin-right: 0.3rem; vertical-align: middle; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 重要なシステムのお知らせ（ホーム最上部） */
.important-banner {
  display: block; margin-bottom: 1rem; padding: 0.8rem 1rem; text-decoration: none;
  background: var(--brand-orange-soft); color: var(--brand-orange-ink);
  border: 2px solid var(--brand-orange); border-left-width: 8px; border-radius: var(--pico-border-radius);
}
.important-banner:hover { background: #f8e4c2; }
.important-banner-label {
  display: inline-block; margin-bottom: 0.25rem; padding: 0 0.5rem; border-radius: 1em;
  background: var(--brand-orange); color: var(--brand-orange-ink); font-size: 0.75rem; font-weight: 800;
}
.important-banner-title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }
.important-banner-more { display: block; font-size: 0.8rem; margin-top: 0.2rem; text-decoration: underline; }

/* パスキー・ログイン */
.passkey-status { min-height: 1.5em; margin-top: 0.5rem; color: var(--brand-blue-deep); font-weight: 600; }
.login-link-box { margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid #e3e5e8; }
.steps { padding-left: 1.25rem; }
.steps li { margin-bottom: 0.25rem; }
.checklist { padding-left: 1.25rem; }
.checklist li { margin-bottom: 0.75rem; }
.checklist li.done::marker { color: #2e7d32; }

/* 自分の相談・主催イベントの目印 */
.mine-label {
  display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1.6;
  padding: 0 0.5rem; border-radius: 1em; vertical-align: middle; margin-right: 0.25rem;
  background: var(--brand-orange-soft); color: var(--brand-orange-ink); border: 1px solid var(--brand-orange);
}
.filter-toggle { font-size: 0.9rem; }
.search-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; grid-column: 1 / -1; }
.search-check input { margin: 0; }

/* 自分の相談・予定を上部に分けて表示する欄 */
.mine-section {
  margin-bottom: 2rem; padding: 1rem 1rem 0.25rem; border-radius: var(--pico-border-radius);
  background: var(--brand-orange-soft); border: 2px solid var(--brand-orange);
}
.mine-section > h2 { margin-top: 0.25rem; font-size: 1.1rem; border-left: 0; padding-left: 0; color: var(--brand-orange-ink); }
.mine-section article { margin-bottom: 0.75rem; }
.mine-section > h2 ~ h2 { margin-top: 1rem; }

/* 添付のプレビュー */
.attachment-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.attachment-images:empty { display: none; }
.attachment-image {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px;
  border: 1px solid #e3e5e8; background: #fff;
}
.attachment-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-files { padding: 0; margin: 0; }
.attachment-files li { list-style: none; padding: 0.4rem 0; border-top: 1px solid #e6e7e9; overflow-wrap: anywhere; }
.attachment-files li:first-child { border-top: 0; }
.file-type {
  display: inline-block; min-width: 3.2em; text-align: center; font-size: 0.7rem; font-weight: 700;
  padding: 0 0.35rem; border-radius: 3px; background: var(--brand-blue-soft); color: var(--brand-blue-deep);
  margin-right: 0.25rem; vertical-align: middle;
}
.file-actions { display: inline-flex; gap: 0.75rem; margin-left: 0.25rem; font-size: 0.9rem; white-space: nowrap; }