/*
  notices.css
  「お知らせ」（一般公開）と「会員専用」ページで共有するスタイル。
  会員専用エリアの実際のアクセス制御は Netlify Edge Function（Basic認証）で行う。
  共通スタイルは css/common.css を参照。
*/

.crumb + h1{margin-top:16px;}

/* ---- 一般／会員専用 の切替タブ ---- */
h1 + .split{margin-top:-8px;}
.split{display:flex;gap:2px;border-bottom:2px solid var(--navy);margin-bottom:0;}
.split a{
  font-family:inherit;font-size:.92em;font-weight:600;padding:10px 26px;text-decoration:none;
  border-radius:var(--r-md) var(--r-md) 0 0;display:flex;align-items:center;gap:6px;
}
.split a.on{background:var(--navy);color:#fff;}
.split a.off{background:var(--tama-pale);color:var(--text-mute);border:1.5px solid var(--tama);}
.split a.off:hover{background:var(--tama-light);color:var(--text);}

/* ---- お知らせ一覧 ---- */
.list{background:#F9F8F3;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:24px;}
.row{display:flex;align-items:baseline;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:none;}
.row .date{font-size:.85em;color:var(--text-mute);width:96px;flex-shrink:0;}
.row .tag{font-size:.7em;font-weight:700;color:#fff;background:var(--vermilion);padding:2px 9px;border-radius:var(--r-sm);flex-shrink:0;}
.row .tag.mem{background:var(--tama);color:var(--navy);}
/* お知らせのタイトル。当面はリンクなし＝ <span class="ttl">。
   将来 各記事の詳細ページを作る運用に変える場合は、HTML 側で
   <span class="ttl">…</span> を <a class="ttl" href="news/xxxx.html">…</a> に置き換えるだけでよい
   （リンク時は下の a.ttl で色と下線が付く。CSS の追加変更は不要）。 */
.row .ttl{font-size:.95em;color:var(--text);line-height:1.7;}
.row a.ttl{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.row a.ttl:hover{color:var(--vermilion);}

/* ---- 展開式のお知らせ（本文がある回だけ <details class="row">。JSなし） ----
   本文なしの単純な1行告知は今までどおり <div class="row">。両者は同じ一覧内で混在OK。
   1件 = <details class="row"> の中に
     <summary><span class="date">…</span><span class="ttl">…</span></summary>
     <div class="detail"><p>本文…</p></div>
   タイトルをリンクにしたい将来運用でも a.ttl の指定がそのまま効く。 */
details.row{display:block;padding:0;}
details.row > summary{
  display:flex;align-items:baseline;gap:16px;padding:15px 40px 15px 18px;cursor:pointer;
  list-style:none;position:relative;
}
details.row > summary::-webkit-details-marker{display:none;}
details.row > summary::after{           /* 開閉の山括弧 */
  content:"";position:absolute;right:16px;top:20px;
  width:7px;height:7px;border-right:2px solid var(--text-mute);border-bottom:2px solid var(--text-mute);
  transform:rotate(45deg);transition:transform .15s ease;
}
details.row[open] > summary::after{transform:rotate(-135deg);top:23px;}
details.row > summary:hover .ttl{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
details.row .detail{
  padding:2px 18px 18px calc(18px + 96px + 16px);   /* 本文の左端を日付カラムの右に揃える */
  font-size:.9em;color:var(--text);line-height:1.95;
}
details.row .detail p{margin:0 0 10px;}
details.row .detail p:last-child{margin-bottom:0;}
details.row .detail a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
details.row .detail a:hover{color:var(--vermilion);}

.pager{display:flex;justify-content:center;gap:8px;align-items:center;padding-bottom:30px;font-size:.85em;color:var(--navy);}
.pager span{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);}
.pager span.on{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---- 会員専用：共有ファイルスペース ---- */
.filebox{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--tama-pale);padding:32px 24px;margin:16px 0 40px;}
.filebox .ttl{display:flex;align-items:center;gap:8px;font-size:.95em;font-weight:700;color:var(--navy);margin-bottom:8px;}
.filebox .desc{font-size:.82em;color:var(--text-mute);line-height:1.8;margin-bottom:16px;}
.filelist{display:flex;flex-direction:column;gap:8px;}
.filerow{display:flex;align-items:center;gap:10px;background:#F9F8F3;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;font-size:.85em;color:var(--text);}
.filerow svg{color:var(--text-mute);flex-shrink:0;}
a.filerow{text-decoration:none;transition:border-color .15s ease,background .15s ease;}
a.filerow:hover{border-color:var(--navy);background:#fff;}
a.filerow .name{flex:1;line-height:1.6;}
a.filerow .meta{flex-shrink:0;font-size:.82em;font-weight:700;color:var(--text-mute);}
.filebox .empty{font-size:.85em;color:var(--text-mute);text-align:center;padding:14px 0;}

@media (max-width:640px){
  .row{flex-wrap:wrap;}
  .row .date{width:auto;}
  details.row > summary{flex-wrap:wrap;}
  details.row .detail{padding-left:18px;}
  .split a{padding:10px 16px;font-size:.85em;}
}