/* ===== 配色の定義 ===== */
:root, html.dark-theme {
  /* ダークテーマ */
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-tertiary: #202225;
  --bg-interactive: #36393f;
  --text-normal: #dcdee1;
  --text-muted: #949ba4;
  --text-header: #ffffff;
  --border-color: #404249;
  --brand-primary: #6e8efb;
  --brand-secondary: #a777e3;
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --success-color: #23a559;
  --text-notice: #ffffff;
  --text-review: #ffffff;
  --text-critical: #ffffff;
  --bg-notice: #3b82f6;
  --bg-review: #f59e0b;
  --bg-critical: #ef4444;
  --tile-card-notice: #66a3ff;
  --tile-card-review: #f4b740;
  --tile-card-critical: #ff6b6b;
}

html.light-theme {
  /* ライトテーマ */
  --bg-primary: #f2f3f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e3e5e8;
  --bg-interactive: #afbdeb;
  --text-normal: #2e3338;
  --text-muted: #5c626b;
  --text-header: #060607;
  --border-color: #ddd;
  --text-notice: #1e3a8a;
  --text-review: #92400e;
  --text-critical: #991b1b;
  --bg-notice: #dbeafe;
  --bg-review: #fef3c7;
  --bg-critical: #fee2e2;
}

/* ===== 全体レイアウト・共通要素 ===== */
html {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

brandcolor {
  display: inline-block;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.2s;
}

header {
  padding: 0.5rem 1rem;
  background-color: var(--bg-tertiary);
  flex-shrink: 0;
  display: block;
}

header nav {
  display: flex;
  align-items: center;
  width: 100%;
}

header nav > a:first-child {
  margin-right: auto;
}

header nav span.user-name,
header nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: var(--text-muted);
}

nav a:hover { text-decoration: underline; }
nav brandcolor:hover { opacity: 0.8; }

button {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

button:hover {
  opacity: 0.9;
}

/* === 目次スタイル === */
.toc {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  margin: 2em 0;
}

.toc-title {
  font-weight: 600;
  color: var(--text-header);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1em;
}

.toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc li {
  margin-bottom: 0.5rem;
}

.toc a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

.toc a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ===== 利用規約・プライバシーポリシーページ専用 ===== */
.legal-document-container {
  max-width: 800px; /* 横幅が広すぎると読みにくいため、最大幅を設定 */
  margin: 2rem auto; /* 上下に余白を設け、左右中央揃えに */
  padding: 0 1.5rem; /* スマホ表示でも左右に余白を確保 */
}

.legal-document-container h1 {
  color: var(--text-header);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-document-container > p:first-of-type {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 3rem; /* 見出しと目次の間に余白を確保 */
}

.legal-document-container h2 {
  color: var(--text-header);
  font-size: 1.5rem;
  margin-top: 3.5rem; /* 各章の前に十分なスペースを確保 */
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color); /* 区切り線を入れて視覚的に分かりやすく */
}

.legal-document-container p,
.legal-document-container li {
  line-height: 1.8; /* 行の高さを広げて読みやすく */
  color: var(--text-normal);
}

/* ol, ul のスタイルを整える */
.legal-document-container ol,
.legal-document-container ul {
  padding-left: 1.5em; /* 字下げを少し調整 */
  margin-bottom: 1.5em;
}
.legal-document-container ol ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* ===== フォーム専用 ===== */
.form-container {
  background: var(--bg-secondary);
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 420px;
  margin: 3rem auto;
}

.form-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--text-header);
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-container label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: var(--text-muted);
}

.form-container input {
  padding: 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-normal);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-container textarea {
  padding: 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-normal);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-container input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}

.form-container textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}


.form-container p {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
  color: var(--text-muted);
}

.form-container a {
  color: var(--brand-primary);
  font-weight: 500;
  text-decoration: none;
}

.form-container a:hover {
  text-decoration: underline;
}

.form-container a.btn{
  color: #ffffff;
}

.checkbox-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.checkbox-container input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.checkbox-container label {
  margin: 0;
  font-weight: normal;
}
.checkbox-container small {
  width: 100%;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding-left: 2rem;
}

#password-fields label:first-child { /*later*/
  margin-bottom: 1rem;
}

.form-container select,
.form-container input[type="datetime-local"] {
  padding: 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-normal);
  border-radius: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-container select:focus,
.form-container input[type="datetime-local"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}

/* ===== 汎用アイテム ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;

  padding: 0.6em 1.2em;
  border-radius: 8px;
  border: none;

  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;

  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: background .2s ease, box-shadow .15s ease, transform .05s ease;
  cursor: pointer;
}

.btn:hover {
  background: color-mix(in srgb, var(--brand-primary) 85%, #fff);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* === 二次ボタン === */
.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-header);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--bg-secondary) 85%, #fff);
}

.nowrap {
  white-space: nowrap;
}

/* === ゴーストボタン (低強調) === */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  font-weight: 500;
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--text-normal);
}
.btn-ghost:active { transform: translateY(1px); }

/* === 危険ボタン（削除用） === */
.btn.danger {
  background: #dc2626;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.4em 0.8em;
  border: 1px solid #b91c1c;
}

.btn.danger:hover {
  background: #b91c1c;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.btn.danger:active {
  background: #991b1b;
}

/* ===== ダッシュボードレイアウト ===== */
.app-container {
  display: grid;
  grid-template-columns: 72px 1fr 240px;
  flex-grow: 1;
  min-height: 0;
}

.app-container.is-full-widtj{
  grid-template-columns: 1fr
}
/* 左端：オーガナイゼーション・バー */
.org-bar{
  background-color: var(--bg-tertiary);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
}

/* 基本アイコン（共通） */
.org-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-position: center;

  /* アニメ */
  transition:
    border-radius .2s,
    background-color .2s,
    transform .04s,
    box-shadow .15s;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.org-icon.is-glyph{ background-size:90% auto; background-position:center; background-repeat:no-repeat; }

.org-icon.is-photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }

.org-icon:hover{
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.org-icon:active{ transform: translateY(1px); }

.org-icon.is-glyph:hover{
  background-color: var(--bg-hover, var(--brand-primary));
}

.icon--home{
  --img: url("/static/ico/home.png");
  background-image: var(--img);
  background-color: #5865f2;
}
.icon--home:hover{ background-color: color-mix(in oklab, #5865f2, white 12%) !important; }

.icon--plus{
  --img: url("/static/ico/plus.png");
  background-image: var(--img);
  background-color: var(--bg-interactive);
}
.icon--plus:hover{ background-color: var(--success-color) !important; }

/* 右端：サイドバー */
.sidebar {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.sidebar h3 {
  color: var(--text-header);
  font-size: 1rem;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #36393f;
  color: #fff;
}

/* 中央：メインコンテンツ */
.main-content {
  padding: 1.5rem;
  background-color: var(--bg-primary);
  color: var(--text-normal);
  overflow-y: auto;
}

.main-content h2 {
    color: var(--text-header);
    margin-top: 0;
}

/* ===== 認証成功ページ ===== */

/* 基本スタイル（モバイルファースト） */
.verification-success {
  text-align: center; /* テキストとアイコンを中央揃え */
}

/* 成功アイコンの基本スタイル */
.verification-success .success-icon {
  font-size: 3rem; /* モバイルでは少し小さめに */
  color: var(--success-color);
  margin-bottom: 0.5rem;
}

/* h2（見出し）の基本スタイル */
.verification-success h2 {
  font-size: 1.2rem; /* モバイルでは少し小さめに */
  margin-bottom: 0.5rem;
}

/* p（段落）の基本スタイル */
.verification-success p {
  margin-bottom: 1.5rem;
}


/* --- アダプティブ対応 --- */
/* 画面幅が768px以上（タブレットやPC）の場合に適用 */
@media (min-width: 768px) {
  .verification-success .success-icon {
    font-size: 4rem; /* PCではアイコンを大きく */
  }

  .verification-success h2 {
    font-size: 1.5rem; /* PCでは見出しを大きく */
  }

  /* PCではコンテナの余白を少し大きくする */
  .form-container.verification-success {
    padding: 3rem;
  }
}

/* ==== タイル: レイアウト共通 ==== */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* ちょい広め */
  gap: 1rem;
}

/* 1カードの高さを固定して “同じ長方形” を担保 */
.tile-card {
  --tile-h: 220px;              /* 高さは好みで：200〜260pxあたり */
  display: flex;
  flex-direction: column;
  height: var(--tile-h);
  padding: 1rem;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0,0,0,.12);
  overflow: hidden;             /* はみ出しは隠す */
  position: relative;
  transition: transform .06s ease, box-shadow .15s ease;
}

.tile-card.is-fluid {
  height: auto !important; 
  min-height: 0 !important;
}

.tile-card.is-fluid .tile-title,
.tile-card.is-fluid .tile-body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.tile-hit{
  position: absolute;
  inset: 0;
  display: block;
  z-index: 5;
  border-radius: 12px;
}
.tile-hit:focus{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

.tile-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* 左帯で重要度を色分け（Google Keep っぽい軽さ） */
.tile-card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  border-radius: 12px;
  pointer-events: none;
  border-left: 6px solid transparent;
}
.tile-card.sev-critical::before { border-left-color: var(--tile-card-critical) } /* 重要連絡 */
.tile-card.sev-review::before   { border-left-color: var(--tile-card-review) } /* 要確認   */
.tile-card.sev-notice::before   { border-left-color: var(--tile-card-notice) } /* お知らせ */

/* ヘッダ行（バッジ＋時刻） */
.tile-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .25rem;
}
.tile-time {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .9em;
}

/* タイトルは2行までで切る */
.tile-title {
  margin: .1rem 0 .5rem 0;
  font-size: 1.05rem;
  color: var(--text-header);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;                /* 将来互換用 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.tile-body {
  flex: 1;
  color: var(--text-normal);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* フッタ（リンク等）は下部固定配置 */
.tile-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
}

/* ベース（太字・白字・小さめのピル形） */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  border: 0;
}

.badge.notice   { background-color: var(--bg-notice); color: var(--text-notice); }  /* 青: お知らせ   */
.badge.review   { background-color: var(--bg-review); color: var(--text-review); }  /* 橙: 要確認     */
.badge.critical { background-color: var(--bg-critical); color: var(--text-critical); }  /* 赤: 重要連絡   */
.badge.member { background-color: #4f5459; color: #ffffff; }
html.light-theme .badge.member { background-color: #e1e3e6; color: #2e3338; border: 1px solid #c9ccd0; }

/* Organization情報 */
.kv { display:grid; grid-template-columns: 8rem 1fr; gap:.25rem .75rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin:0; }
.btn.secondary { background: var(--bg-interactive); }

/* ===== org_detail ===== */
.menu-root {
  position: relative;
  display: inline-block;
}

.clampable {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-width: 100%;
}

.clampable.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

.toggle-bio-btn {
  display: inline-block;
  margin-top: .25rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}

.toggle-bio-btn:hover {
  color: var(--text-normal);
}

.kebab-btn {
  all: unset;
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, transform .04s ease;
}
.kebab-btn:hover { background-color: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.kebab-btn:active { transform: translateY(1px); }
.kebab-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
  outline-offset: 2px;
}

.kebab-btn .material-symbols-outlined {
  font-size: 22px;
  color: var(--text-muted);
  font-variation-settings: 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.menu-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 6px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  z-index: 1000;
  display: none;
  transform-origin: top right;
  animation: menuIn .12s ease-out;
}
.menu-dropdown::before{
  content: "";
  position: absolute;
  top: -6px; right: 10px;
  border: 6px solid transparent;
  border-bottom-color: var(--border-color);
}
.menu-dropdown::after{
  content: "";
  position: absolute;
  top: -5px; right: 11px;
  border: 5px solid transparent;
  border-bottom-color: var(--bg-secondary);
}
.menu-dropdown.is-open{ display: block; }

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.menu-item{
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-normal);
  border: 0;
  border-radius: 8px;
  padding: .55rem .6rem;
  cursor: pointer;
}
.menu-item:hover{ background: color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.menu-item.danger:hover{ background: color-mix(in srgb, #ef4444 18%, transparent); }

/* 参加コード行の並び */
.join-row{ display: flex; align-items: center; gap: .5rem; }

/* ===== event_detail ===== */

/* 階層メニュ ー */
.breadcrumb { margin-bottom: .75rem; font-size: .95rem; color: var(--text-muted); }
.breadcrumb .sep { margin: 0 .4rem; color: var(--border-color); }
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ヘッダ */
.event-head { padding: 1rem 0; border-bottom: 1px solid var(--border-color); }
.event-head .event-meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.25rem; }
.event-title { margin: .25rem 0 .5rem; }

/* 本文・開閉 */
.event-body { margin-top: 1rem; line-height: 1.75; }
.event-body.clampable { max-height: 9.5rem; overflow: hidden; position: relative; }
.event-body.clampable::after {
  content: ""; position: absolute; left:0; right:0; bottom:0; height: 3rem;
  background: linear-gradient(180deg, transparent, var(--bg-canvas));
}
.event-body.expanded { max-height: none; }
.toggle-body-btn { margin-top:.5rem; }

/* サイド関連 */
.event-side { margin-top: 1.5rem; }

.tile-card .actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.tile-card .event-link { word-break: break-all; }

.toggle-body-btn{
  display:inline-block;
  padding:0;
  margin-top:.5rem;
  background:none;
  border:none;
  color:var(--text-muted);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.toggle-body-btn:hover{ color:var(--text-normal); }

.event-body.clampable::after{
  background: linear-gradient(180deg, transparent, var(--bg-primary));
}

.tile-card.is-fluid{ height:auto; }
.tile-card.is-fluid .tile-body{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}

/* ===== トーストメニュー ===== */

#toast-container{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast{
  min-width: 240px;
  max-width: 520px;
  padding: .7rem 1rem;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-header);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .2s ease;
  pointer-events: auto;
}
.toast.is-in{ opacity: 1; transform: translateY(0); }
.toast.is-out{ opacity: 0; transform: translateY(10px); }

.toast--success{ border-color: #16a34a}
.toast--error  { border-color: #ef4444}
.toast--warn   { border-color: #f59e0b}

/* ===== カスタムスクロールバー ===== */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bg-tertiary);
  border-radius: 10px;
  border: 3px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--bg-tertiary) 80%, #fff);
}