/* =========================================================
   Designer's Community — TOP
   ========================================================= */
:root{
  --cream:#fffcf9;
  --red:#d74a39;
  --red-deep:#d93522;
  --red-soft:#d65647;
  --ink:#1b1b1b;
  --light:#f8f4ef;   /* ダーク背景上のテキスト＝冷たい白ではなく背景と同じベージュ */
  --yellow:#e9f066;
  --greige:#f8f4ef;
  --line:#e2ddd5;
  --serif:'Shippori Mincho', serif;   /* KoPub Batang の代替 */
  --sans:'Zen Kaku Gothic New', sans-serif;
  --maxw:1280px;
  --pad:clamp(20px, 5vw, 64px);
  --lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.5' r='1.2' fill='%231b1b1b' stroke='none'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* 横スクロール防止は html 側で。body に付けると body がスクロール枠化して
   window.scrollTo 等が効かなくなるため（ページ内スクロール制御の不具合の元）。 */
/* html にも背景を敷く。body だけだとページ遷移の一瞬に白い地色が
   フラッシュして「前のページがちらつく」ように見えるため。 */
html{ overflow-x:hidden; background:var(--cream); }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); line-height:1.75; -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }  /* author CSSのdisplay指定よりhidden属性を常に優先 */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.center{ display:flex; justify-content:center; margin-top:clamp(30px,4vw,48px); }

/* グリッド/フレックスのアイテムが内容幅より縮めるように（はみ出し防止） */
.journal-body>*, .journal-cards>*, .feature>*,
.members-body>*, .card-grid>*, .members-main, .sidebar{ min-width:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:.85em 1.6em; line-height:1;
  font-family:var(--sans); font-weight:500; font-size:clamp(14px,1.05vw,18px);
  cursor:pointer; border:1px solid transparent; transition:.3s ease;
}
.btn--wide{ min-width:min(356px,80vw); }
.btn--outline{ border-color:var(--red); color:var(--red); }
.btn--outline:hover{ background:var(--red); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(215,74,57,.22); }
.btn--solid{ background:var(--red); color:var(--light); }
.btn--solid:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 8px 20px rgba(215,74,57,.3); }
.btn--dark{ background:var(--ink); color:var(--light); }
.btn--dark:hover{ background:#000; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.25); }
.btn--ghost-dark{ border-color:var(--ink); color:var(--ink); font-family:var(--serif); }
.btn--ghost-dark:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:relative; overflow:hidden; }
.site-header .wrap{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-top:clamp(28px,4vw,48px); padding-bottom:clamp(60px,10vw,140px);
}
/* 左下から右上へ伸びる斜線 */
.header-line{
  position:absolute; left:0; top:84%; width:min(36%,500px); height:1px;
  background:var(--red); opacity:.85; transform:rotate(-22deg) scaleX(0);
  transform-origin:left center; z-index:0;
}
.brand{ position:relative; z-index:1; }
.brand .logo{ font-family:var(--serif); color:var(--red); font-size:clamp(26px,3.4vw,40px); line-height:1.1; }
.brand .produced{ font-family:var(--serif); color:var(--red); font-size:12px; letter-spacing:.09em; margin-top:14px; }
.header-info{ max-width:380px; }
.header-info .lead{ color:var(--red); font-size:14px; line-height:1.9; }
.header-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:24px; }
.header-actions .btn--outline{ align-self:stretch; }

/* =========================================================
   JOURNAL
   ========================================================= */
.journal .wrap{ padding-block:clamp(20px,3vw,36px); }

/* NEW バナー（右寄せ） */
.new-banner{
  width:min(56%,760px); margin-left:auto;
  background:#fff; border-radius:14px; padding:22px clamp(24px,3vw,48px);
  box-shadow:0 6px 24px rgba(0,0,0,.04); transition:.3s ease;
  margin-bottom:clamp(44px,6vw,76px);
}
.new-banner:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.new-banner .tag{ font-family:var(--serif); color:var(--red-soft); font-size:13px; letter-spacing:.12em; }
.new-banner p{ color:var(--red-soft); font-size:14px; margin-top:6px; }

/* NEWSローテーション（最新5件を自動切替） */
.nb-track{ position:relative; margin-top:6px; min-height:1.7em; }
.nb-item{ position:absolute; inset:0; display:flex; gap:10px; align-items:baseline;
  color:var(--red-soft); font-size:14px; line-height:1.6; text-decoration:none;
  opacity:0; pointer-events:none; transition:opacity .5s ease; }
.nb-item.is-on{ opacity:1; pointer-events:auto; }
.nb-item .nb-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nb-item:hover .nb-title{ text-decoration:underline; }
.nb-lock{ flex:none; font-size:10px; font-weight:700; color:#fff; background:var(--red);
  border-radius:999px; padding:2px 9px; letter-spacing:.02em; }
.nb-date{ flex:none; font-family:var(--serif); font-size:11px; color:#c9958c; }
.nb-dots{ display:flex; gap:6px; margin-top:12px; }
.nb-dots button{ width:7px; height:7px; border-radius:50%; border:0; background:#f0d9d4;
  cursor:pointer; padding:0; transition:.2s; }
.nb-dots button.is-on{ background:var(--red); transform:scale(1.25); }

.section-title{ font-family:var(--serif); color:var(--red); font-weight:400; font-size:clamp(34px,5vw,52px); margin:0 0 clamp(24px,3vw,34px); }

.journal-body{ display:grid; grid-template-columns:230px 1fr; gap:clamp(28px,3.5vw,56px); align-items:start; }

/* ---- Free / member フィルター（ホバー・選択で二重丸） ---- */
.filter{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; margin-bottom:44px; }
.filter-btn{
  position:relative; background:none; border:0; cursor:pointer;
  padding:6px 22px; font-family:var(--serif); font-weight:700; font-size:20px;
  color:var(--red); transition:transform .25s ease, letter-spacing .25s ease;
}
.filter-btn[data-filter="member"]{ color:var(--red-deep); }
.filter-btn:hover{ transform:translateX(2px); }
.filter-btn .badge-loop{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  overflow:visible; opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.filter-btn[data-filter="free"] .badge-loop{ width:104px; height:66px; }
.filter-btn[data-filter="member"] .badge-loop{ width:172px; height:70px; }
.badge-loop path{ fill:none; stroke:var(--red); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.filter-btn[data-filter="member"] .badge-loop path{ stroke:var(--red-deep); }
.filter-btn:hover .badge-loop,
.filter-btn.is-active .badge-loop{ opacity:1; }
.filter-btn.is-active .badge-loop path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.journal-intro .desc{ color:var(--red); font-size:13px; line-height:1.9; max-width:230px; margin-top:clamp(40px,8vw,120px); }
.journal-intro .whats{ font-family:var(--serif); color:var(--red); font-size:14px; margin-top:34px; display:inline-block; transition:.2s; }
.journal-intro .whats:hover{ opacity:.65; }

/* ジャーナルカード（ラベルは画像の上） */
.journal-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.jcard{ transition:opacity .4s ease, transform .4s ease; }
.jcard.is-hidden{ display:none; }
.jcard .tag{ display:block; font-family:var(--serif); color:var(--red); font-size:13px; margin-bottom:12px; }
.jcard .thumb{ aspect-ratio:1/1.02; background:#e0dbd3 url("../placeholder.svg") center/cover no-repeat; border-radius:2px; overflow:hidden; transition:transform .45s ease, box-shadow .45s ease; }
.jcard:hover .thumb{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(215,74,57,.22); }
.jcard .txt{ color:var(--red); font-size:14px; line-height:1.8; margin-top:22px; }
.jcard .foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; font-family:var(--serif); color:var(--red); font-size:14px; }
.jcard .read:hover{ text-decoration:underline; }

/* =========================================================
   WATERMARK
   ========================================================= */
.watermark{ overflow:hidden; line-height:.9; margin:clamp(10px,2vw,24px) 0 0; position:relative; z-index:0; }
.watermark span{
  display:block; padding-left:var(--pad);
  font-family:var(--serif); font-weight:300; color:var(--red); opacity:.18;
  font-size:clamp(80px,16vw,180px); white-space:nowrap; letter-spacing:.02em;
}

/* =========================================================
   MEMBER'S ONLY（全画面幅）
   ========================================================= */
.members{
  background:var(--greige);
  border-radius:clamp(24px,4vw,50px) clamp(24px,4vw,50px) 0 0;
  overflow:hidden;
  position:relative; z-index:2;
  /* 透かし文字「JOURNAL」の下部にほんの少し重ねて埋もれさせる */
  margin-top:calc(-0.24 * clamp(80px,16vw,180px));
}
/* メンバーホーム用：ヘッダー直下にフラットに敷く */
.members.flat{ margin-top:0; border-radius:0; }
.members-intro{
  display:flex; justify-content:space-between; gap:34px 40px; flex-wrap:wrap; align-items:flex-start;
  padding:clamp(40px,6vw,72px) var(--pad) clamp(30px,4vw,52px);
}
.members-intro h2{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:clamp(34px,5vw,50px); line-height:1.12; margin:0; }
.mi-brand{ font-family:var(--serif); font-size:clamp(12px,1.3vw,15px); letter-spacing:.16em; color:#6b665e; margin-top:16px; }
a.mi-title{ display:inline-block; color:inherit; text-decoration:none; transition:opacity .2s ease; }
a.mi-title:hover{ opacity:.62; }
.mi-right{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; max-width:440px; }
.mi-text{ max-width:220px; }
.mi-text .lead{ font-size:13px; line-height:1.8; }
.mi-text .guide{ display:inline-block; font-size:11px; text-decoration:underline; margin-top:12px; transition:.2s; }
.mi-text .guide[hidden]{ display:none; }   /* hidden属性を display:inline-block より優先（管理リンクを非管理者に出さない） */
.mi-text .guide.has-new{ font-weight:700; opacity:1; }
.mi-unread{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 6px; margin-left:3px; border-radius:999px; background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1; vertical-align:middle; box-shadow:0 1px 8px rgba(215,74,57,.7); }
.mi-unread-n{ color:#ffd54a; font-weight:700; }   /* あいさつ文の未読数を強調（暗い地に映える） */
.plan-edit{ border:1px solid var(--line); border-radius:8px; padding:3px 7px; font-size:12px; font-family:var(--sans); background:#fff; color:var(--ink); max-width:150px; cursor:pointer; }
.plan-edit:hover{ border-color:var(--red); }
/* ツールの注意書き（β版・データ自己責任） */
.tool-caution{ margin-top:14px; background:#fbf3e6; border:1px solid #e8d5a8; border-radius:12px; padding:14px 16px; font-size:12.5px; line-height:1.85; color:#6a5b3a; max-width:680px; }
.tool-caution strong{ color:#9a6614; }
.tool-caution ul{ margin:6px 0 0; padding-left:1.2em; }
.tool-caution li{ margin-top:5px; }
.mi-text .guide:hover{ opacity:.6; }

.members-body{ display:grid; grid-template-columns:340px 1fr; border-top:1px solid var(--line); }

/* sidebar（カテゴリ＋下部にフッターブランド） */
.sidebar{
  background:var(--ink); color:var(--light);
  border-bottom-left-radius:clamp(24px,4vw,50px);
  padding:clamp(40px,5vw,58px) clamp(30px,3vw,56px);
  display:flex; flex-direction:column;
}
.sidebar h3{ font-family:var(--serif); font-weight:700; color:var(--light); font-size:20px; letter-spacing:.03em; margin:0 0 32px; }
.cat + .cat{ margin-top:28px; }
.cat .label{ font-family:var(--serif); font-weight:700; color:var(--yellow); font-size:15px; margin:0 0 14px; }
.cat ul{ list-style:none; margin:0; padding:0; }
.cat li{ position:relative; padding-left:18px; font-size:15px; font-weight:500; margin:13px 0; transition:.2s ease; cursor:pointer; }
.cat li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--light); transition:.2s; }
.cat li a{ display:block; color:inherit; }
.cat li.is-hidden-nav a{ opacity:.55; font-style:italic; }  /* 非表示（下書き）＝管理者にだけ見える */
.cat li:hover{ color:var(--yellow); transform:translateX(4px); }
.cat li:hover::before{ background:var(--yellow); }
.sidebar-footer{ margin-top:auto; padding-top:clamp(50px,8vw,90px); }
.sidebar-footer .fbrand{ font-family:var(--serif); color:var(--light); font-size:clamp(28px,3vw,40px); line-height:1.2; }
.sidebar-footer .fsub{ font-family:var(--serif); color:var(--light); font-size:13px; letter-spacing:.06em; margin-top:14px; }

/* main */
.members-main{ padding:clamp(30px,4vw,52px) var(--pad); }
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,50px); align-items:start; margin-bottom:clamp(34px,5vw,60px); }
.feature .ftitle{ font-weight:500; color:var(--ink); font-size:clamp(17px,1.5vw,20px); line-height:1.55; }
.feature .fdate{ font-family:var(--serif); font-size:15px; margin-top:14px; }
.feature hr{ width:32px; border:none; border-top:1px solid var(--ink); margin:26px 0; }
.feature .ftext{ font-size:14px; line-height:1.9; }
.feature .read{ font-family:var(--serif); font-size:14px; display:inline-block; margin-top:26px; }
.feature .read:hover{ text-decoration:underline; }
.feature .fimg{ aspect-ratio:557/443; background:#e0dbd3 url("../placeholder.svg") center/cover no-repeat; border:1px solid #ececec; border-radius:2px; }

/* card grid — hairline dividers via 1px gap */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:2px; }
.pcard{ background:var(--greige); padding:clamp(20px,2vw,30px); display:flex; flex-direction:column; }
.pcard .cat{ font-family:var(--serif); font-size:13px; margin-bottom:16px; }
.pcard .thumb{ aspect-ratio:269/294; background:#e0dbd3 url("../placeholder.svg") center/cover no-repeat; border:1px solid #ececec; border-radius:2px; overflow:hidden; transition:transform .4s ease; }
.pcard:hover .thumb{ transform:scale(1.02); }
.pcard .date{ font-family:var(--serif); font-size:11px; margin-top:24px; }
.pcard .txt{ font-size:14px; line-height:1.85; margin-top:12px; }
.pcard .read{ font-family:var(--serif); font-size:14px; margin-top:18px; }
.pcard .read:hover{ text-decoration:underline; }

/* 会員限定：画像に鍵アイコン */
.locked{ position:relative; }
.locked::before{ content:""; position:absolute; inset:0; background:rgba(27,27,27,.05); z-index:1; transition:.3s ease; }
.locked::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--lock) center / clamp(30px,4vw,40px) no-repeat; opacity:.5; transition:.3s ease;
}
.pcard:hover .locked::before{ background:rgba(27,27,27,.09); }
.pcard:hover .locked::after,
.feature .fimg.locked:hover::after{ opacity:.75; }

/* =========================================================
   MEMBER CATEGORY TABS（カテゴリ → 押すと小カテゴリが出る）
   ========================================================= */
.member-tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:0 var(--pad) 14px;
}
.member-tabs button{
  border:0; background:#ece7df; color:#6b665e; cursor:pointer;
  border-radius:999px; padding:10px 24px;
  font-family:var(--sans); font-weight:700; font-size:14px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.member-tabs button:hover{ transform:translateY(-1px); }
/* 選択中はサイドバーのカテゴリと同じ「濃色地＋黄色文字」 */
.member-tabs button.is-active{ background:var(--ink); color:var(--yellow); }

/* =========================================================
   下部固定ナビ（スマホ：ヘッダーと挟むサンドイッチUI）
   ========================================================= */
.member-tabbar{ display:none; }         /* PCでは非表示。スマホ幅のみ表示 */
.search-hero{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; margin:6px 0 4px; max-width:620px;
}
.search-hero svg{ width:22px; height:22px; color:#9a938a; flex:none; }
.search-hero input{ flex:1; min-width:0; border:0; background:transparent; font-size:16px; font-family:var(--sans); color:var(--ink); }
.search-hero input:focus{ outline:none; }

/* 押したら出てくる小カテゴリ */
.member-subcats{ padding:0 var(--pad) clamp(22px,3vw,32px); }
.subcat{ display:flex; flex-wrap:wrap; gap:10px; animation:subcatIn .3s ease; }
.subcat[hidden]{ display:none; }
.subcat a{
  display:inline-flex; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; font-size:13px; color:#555; transition:.2s;
}
.subcat a::before{ content:"#"; color:var(--red); margin-right:6px; font-family:var(--serif); }
.subcat a:hover{ border-color:var(--red); color:var(--red); transform:translateY(-1px); }
@keyframes subcatIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* DM：＋新しいメッセージ（会話一覧の上から相手を選んで会話を始める） */
.dm-new{
  display:block; width:calc(100% - 24px); margin:12px 12px 4px; padding:10px 14px;
  border:1px dashed var(--line); border-radius:10px; background:#faf7f2;
  font-size:13px; font-weight:700; color:#6b665e; cursor:pointer; text-align:center;
  font-family:var(--sans); transition:.2s;
}
.dm-new:hover{ border-color:var(--red); color:var(--red); }
.dm-new-panel{ margin:8px 12px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px; }
.dm-new-search{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px; font-family:var(--sans); margin-bottom:8px; }
.dm-new-search:focus{ outline:none; border-color:var(--red); }
.dm-new-list{ max-height:260px; overflow:auto; }
.dm-new-row{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; font-size:13.5px; color:var(--ink); transition:.15s; }
.dm-new-row:hover{ background:#faf7f2; color:var(--red); }
.dm-new-row .avatar{ width:30px; height:30px; flex:none; }
.dm-new-hint{ font-size:12px; color:#9a958c; padding:8px; }

/* 新着ページ：すべて既読にするボタン */
.mark-all-read{
  display:inline-block; margin-left:14px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 16px; font-size:12.5px; font-family:var(--sans); color:#6b665e;
  transition:.2s;
}
.mark-all-read:hover{ border-color:var(--red); color:var(--red); }
.mark-all-read:disabled{ opacity:.6; cursor:default; }

/* 新着ページ：未読のスレッド一覧（スレッドは投稿カードに出ないため別枠で見せる） */
.feed-threads{ margin-bottom:clamp(20px,3vw,30px); }
.feed-threads .ft-title{ font-weight:700; font-size:14px; margin-bottom:10px; }
.feed-threads .ft-row{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; margin-bottom:8px; font-size:14px; color:var(--ink);
  transition:.2s;
}
.feed-threads .ft-row:hover{ border-color:var(--red); color:var(--red); }
.feed-threads .ft-space{ margin-left:auto; flex:none; font-size:11.5px; color:#9a958c; }

/* あいさつ文の「未読の投稿◯件」をタップできるリンクに（新着／メッセージへの入り口） */
.mi-unread-link{ color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.mi-unread-link:hover{ color:var(--red); }

/* 新着ページ：未読の投稿に「未読」バッジ（新着ページ＝未読リストとして機能） */
.pcard{ position:relative; }
.feed-new{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; letter-spacing:.05em;
}

/* スマホ：カテゴリタブを横スワイプ1行に
   （8個のタブが3段積みで見づらい問題への対策。右端のグラデーションで
     「まだ続きがある」ことを示す。PCは従来どおり折り返し表示） */
@media (max-width:760px){
  .member-cats{ position:relative; }
  .member-tabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-right:44px;
  }
  .member-tabs::-webkit-scrollbar{ display:none; }
  .member-tabs button{ flex:none; white-space:nowrap; padding:9px 18px; font-size:13px; }
  .member-cats::after{
    content:""; position:absolute; top:0; right:0; width:40px; height:46px;
    background:linear-gradient(to left, var(--cream), rgba(244,240,232,0));
    pointer-events:none;
  }
  /* タブ〜朝礼の間隔を詰める（初期はタブが閉じているぶん、余白も小さく） */
  .member-subcats{ padding-bottom:8px; }
  .members-main{ padding-top:14px; }
  .status-ticker{ margin-top:10px; }
}
/* マウス環境（PCで窓を狭めた場合）：タブ列を「つかんでドラッグ」で横移動できる
   （実装はmain.jsのtabDragScroll。ホイールでも流せる） */
@media (max-width:760px) and (hover:hover) and (pointer:fine){
  .member-tabs{ cursor:grab; user-select:none; }
  .member-tabs:active{ cursor:grabbing; }
}

/* スマホ：タグ絞り込みをプルダウンに
   （思考の雑記帳などタグが多いページで、チップの山が見づらい問題への対策。
     PCは従来どおりチップ表示。live.jsがselectを生成した場合のみ切り替わる） */
.tag-select{ display:none; }
@media (max-width:760px){
  .tag-search.has-select .tag-chips{ display:none; }
  .tag-search.has-select .tag-select{
    display:block; width:100%; margin-top:10px;
    border:1px solid var(--line); border-radius:12px; background:#fff;
    padding:12px 40px 12px 14px; font-size:14px; font-family:var(--sans); color:var(--ink);
    -webkit-appearance:none; appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%236b665e" stroke-width="2" fill="none"/></svg>');
    background-repeat:no-repeat; background-position:right 14px center;
  }
}

/* スマホ：小カテゴリを「プルダウンメニュー」風のカードに
   （タブを押しても画面が変わらず迷子になる問題への対策。
     押したら白いメニューが開き「次はここから選ぶ」と分かる見た目に） */
@media (max-width:760px){
  .subcat{
    flex-direction:column; gap:0;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:12px 16px 6px; box-shadow:0 12px 28px rgba(28,28,26,.12);
  }
  .subcat::before{
    content:"↓ 行き先を選んでください";
    display:block; font-size:11.5px; color:#9a958c;
    letter-spacing:.05em; padding-bottom:6px;
  }
  .subcat a{
    border:0; border-bottom:1px solid #f0ece4; border-radius:0;
    padding:12px 4px; font-size:14.5px; width:100%;
  }
  .subcat a:last-child{ border-bottom:0; }
}

/* =========================================================
   下層ページ（メンバー限定：スペース一覧／記事詳細）
   ========================================================= */
/* スリムな共通ヘッダー */
.sub-header{ border-bottom:1px solid var(--line); background:var(--cream); position:relative; z-index:20; }

/* スクロール後に上から滑り込む固定バー（main.jsがヘッダーを複製して使う）
   ※ .member-header/.sub-header の position:relative に勝つよう詳細度を上げている */
.hdr-ghost.member-header, .hdr-ghost.sub-header, .hdr-ghost{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transform:translateY(-100%);
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 8px 30px rgba(27,27,27,.14);
}
.hdr-ghost.is-shown{ transform:translateY(0); }

/* scroll-only：ページ上部ではヘッダーを出さず、スクロール時の複製バーだけ表示 */
.scroll-only{ display:none; }
.hdr-ghost.scroll-only{ display:block; }
.sub-header .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:16px; }
.brand-sm{ font-family:var(--serif); color:var(--red); font-size:clamp(19px,2.4vw,26px); }
.sub-header .btn{ font-size:14px; padding:.7em 1.6em; }

/* メンバーページのレイアウト（サイドバー＋本文） */
.member-page{ display:grid; grid-template-columns:340px 1fr; background:var(--greige); min-height:70vh; }
.member-page .sidebar{ border-radius:0; }
.member-page .sidebar .cat li.is-active{ color:var(--yellow); }
.member-page .sidebar .cat li.is-active::before{ background:var(--yellow); }
.member-content{ min-width:0; padding:clamp(26px,4vw,52px) var(--pad) clamp(40px,6vw,72px); }

.crumb{ font-size:12px; color:#8a857c; margin-bottom:22px; }
.crumb a{ color:var(--red); }
.crumb a:hover{ text-decoration:underline; }
.crumb .sep{ margin:0 8px; color:#c4bdb2; }

/* スペース見出し */
.space-head{ border-bottom:1px solid var(--line); padding-bottom:clamp(20px,3vw,30px); margin-bottom:clamp(24px,3vw,36px); }
.space-head .space-cat{ font-family:var(--serif); color:var(--red); font-size:14px; }
.space-head h1{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,3.6vw,40px); line-height:1.35; margin:8px 0 14px; }
.space-head .space-desc{ font-size:14px; line-height:1.9; color:#555; max-width:680px; }
.space-head .space-meta{ font-family:var(--serif); font-size:12px; color:#999; margin-top:12px; }

/* 投稿一覧（HUBのカードを流用） */
.member-content .card-grid{ margin-top:4px; }
.member-content .pcard .thumb{ background:#e0dbd3 url("../placeholder.svg") center/cover no-repeat; }

/* ページネーション */
.pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:clamp(32px,4vw,48px); flex-wrap:wrap; }
.pager a{ min-width:42px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; font-family:var(--serif); font-size:14px; color:var(--ink); background:#fff; transition:.2s; }
.pager a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pager a.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* 記事詳細 */
.article{ max-width:720px; }
.article .cover{ aspect-ratio:16/9; background:#fff; border:1px solid var(--line); border-radius:6px; margin-bottom:clamp(22px,3vw,34px); }
.article .a-cat{ font-family:var(--serif); color:var(--red); font-size:14px; }
.article h1{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,3.4vw,36px); line-height:1.45; margin:10px 0 16px; }
.article .a-meta{ font-family:var(--serif); font-size:13px; color:#8a857c; display:flex; gap:16px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:30px; }
.article .a-body h2{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.6vw,27px); margin:48px 0 18px; padding-bottom:10px; border-bottom:1px solid rgba(215,74,57,.28); color:var(--ink); line-height:1.5; }
.article .a-body h3{ font-family:var(--serif); font-weight:700; font-size:clamp(19px,2.1vw,22px); margin:42px 0 16px; padding-left:14px; border-left:3px solid var(--red); color:var(--ink); line-height:1.55; }
.article .a-body p{ font-size:16.5px; line-height:1.9; color:#2e2a25; margin-bottom:18px; }
.article .a-body strong{ font-weight:900; color:var(--ink); padding:0 .04em; background:linear-gradient(transparent 68%,rgba(233,240,102,.55) 68%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.article .a-body ul,
.article .a-body ol{ margin:4px 0 22px; padding-left:1.55em; }
.article .a-body li{ padding-left:.2em; font-size:16.5px; line-height:1.9; color:#2e2a25; margin:7px 0; }
.article .a-body li::marker{ color:var(--red); font-weight:700; }
.article .a-body img{ border-radius:6px; margin:10px 0 26px; max-width:100%; }
.zoomable-img{ cursor:zoom-in; }
.zoomable-img:hover{ box-shadow:0 10px 28px rgba(0,0,0,.10); }
/* 本文中のOGPリンクカードは横いっぱいに */
.a-body .link-card.in-article{ max-width:100%; margin:8px 0 26px; }
.a-body .link-card.in-article .lc-thumb{ width:132px; }
.a-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:34px; }
.a-tags a{ font-size:12px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px; color:#555; transition:.2s; }
.a-tags a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.a-nav{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); margin-top:44px; padding-top:22px; font-size:13px; }
.a-nav a{ color:var(--red); max-width:46%; }
.a-nav a:hover{ text-decoration:underline; }
.a-nav .prev::before{ content:"← "; }
.a-nav .next::after{ content:" →"; }

/* =========================================================
   チャット（スレッド型）
   ========================================================= */
.chat-stream{ padding-bottom:10px; }
.chat-day{ text-align:center; margin:8px 0 24px; }
.chat-day span{ background:var(--greige); border:1px solid var(--line); border-radius:999px; padding:4px 16px; font-family:var(--serif); font-size:12px; color:#8a857c; }

.msg{ display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; max-width:84%; }
.msg.is-me{ flex-direction:row-reverse; margin-left:auto; }
.avatar{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--serif); font-weight:700; font-size:15px; }
.av-a{ background:var(--red); } .av-b{ background:#5b7b8a; } .av-c{ background:#9a8459; } .av-me{ background:var(--ink); }
.m-wrap{ min-width:0; }
.m-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:5px; }
.is-me .m-head{ flex-direction:row-reverse; }
.m-name{ font-weight:700; font-size:14px; color:var(--ink); }
.m-time{ font-size:11px; color:#a8a29a; }
.bubble{ background:#fff; border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:12px 16px; font-size:14px; line-height:1.85; color:#333; word-break:break-word; white-space:pre-wrap; }
.is-me .bubble{ background:var(--red); color:#fff; border:0; border-radius:16px 4px 16px 16px; }

.m-react{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.react{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12px; color:#555; cursor:pointer; transition:.2s; }
.react:hover{ border-color:var(--red); color:var(--red); }
.react.on{ background:#fdeeeb; border-color:var(--red); color:var(--red); }

/* 自分の投稿の「取り消す」（チャット） */
.msg-del{ display:block; width:fit-content; margin-top:6px; background:none; border:0; padding:0; cursor:pointer; color:#8a857c; font-size:12px; text-decoration:underline; text-underline-offset:2px; transition:.2s; }
.msg-del:hover{ color:var(--red); }
.msg.is-me .msg-del{ margin-left:auto; }

.m-thread{ margin-top:10px; }
.thread-label{ font-size:12px; color:var(--red); font-weight:700; margin-bottom:10px; display:inline-flex; align-items:center; gap:6px; }
.thread-list{ padding-left:16px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:16px; }
.thread-list .msg{ max-width:100%; margin-bottom:0; }
.thread-list .avatar{ width:32px; height:32px; font-size:13px; }
.thread-list .bubble{ padding:9px 13px; }

/* 入力欄 */
.chat-composer{ position:sticky; bottom:0; z-index:5; background:var(--greige); border-top:1px solid var(--line); padding:14px 0 16px; margin-top:12px; }
.chat-composer form{ display:flex; gap:10px; align-items:center; }
.chat-composer input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:13px 20px; font-size:14px; font-family:var(--sans); background:#fff; }
.chat-composer input:focus{ outline:none; border-color:var(--red); }
/* 改行できる入力欄（DMで使用。高さはJSが内容に合わせて伸縮） */
.chat-composer textarea{ flex:1; min-width:0; border:1px solid var(--line); border-radius:22px; padding:12px 18px; font-size:14px; line-height:1.7; font-family:var(--sans); background:#fff; resize:none; overflow-y:auto; max-height:132px; }
.chat-composer textarea:focus{ outline:none; border-color:var(--red); }
.chat-composer .send{ flex:none; width:46px; height:46px; border-radius:50%; border:0; background:var(--red); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.chat-composer .send:hover{ background:var(--red-deep); transform:scale(1.06); }
.chat-composer .send svg{ width:20px; height:20px; }

/* =========================================================
   スレッド型（掲示板／ディスカッション）
   ========================================================= */
.thread{ max-width:840px; }
.thread .a-cat{ font-family:var(--serif); color:var(--red); font-size:14px; }
.thread h1{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,3vw,32px); line-height:1.5; margin:10px 0 22px; }

/* お題（元投稿） */
.op{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(20px,3vw,30px); margin-bottom:34px; }
.op-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.op-head .who{ display:flex; flex-direction:column; }
.op-head .who .n{ font-weight:700; font-size:14px; color:var(--ink); }
.op-head .who .d{ font-size:11px; color:#a8a29a; }
.op-body p{ font-size:15px; line-height:1.95; color:#333; margin-bottom:14px; }
.op-foot{ display:flex; gap:14px; margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }

/* スレッド一覧へ戻る */
.thread-back{ display:inline-flex; align-items:center; gap:4px; margin-bottom:18px; font-size:13px; color:#8a857c; text-decoration:none; transition:.2s ease; }
.thread-back:hover{ color:var(--red); }

/* 返信一覧 */
.replies-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.replies-head h2{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); }
.replies-head .sort{ font-size:12px; color:#8a857c; }
.reply{ display:flex; gap:14px; padding:22px 0; border-top:1px solid var(--line); }
.reply .avatar{ width:40px; height:40px; font-size:14px; }
.reply .r-main{ flex:1; min-width:0; }
.reply .r-head{ display:flex; gap:10px; align-items:baseline; margin-bottom:7px; }
.reply .r-name{ font-weight:700; font-size:14px; color:var(--ink); }
.reply .r-date{ font-size:11px; color:#a8a29a; }
.reply .r-body{ font-size:14px; line-height:1.95; color:#333; word-break:break-word; }
.r-actions{ display:flex; gap:18px; margin-top:12px; }
.r-actions button, .op-foot button{ background:none; border:0; padding:0; cursor:pointer; color:#8a857c; font-size:12px; display:inline-flex; align-items:center; gap:6px; transition:.2s; }
.r-actions button:hover, .op-foot button:hover{ color:var(--red); }
.r-actions .react.on, .op-foot .react.on{ color:var(--red); font-weight:700; }
.reply-children{ margin-top:16px; padding-left:18px; border-left:2px solid var(--line); }
.reply-children .reply{ padding:14px 0; }
.reply-children .reply:first-child{ border-top:0; }
.reply-children .avatar{ width:34px; height:34px; font-size:13px; }

/* 返信フォーム */
.reply-form{ margin-top:32px; border-top:1px solid var(--line); padding-top:26px; }
.reply-form textarea{ width:100%; border:1px solid var(--line); border-radius:14px; padding:15px 18px; font-size:14px; font-family:var(--sans); line-height:1.8; resize:vertical; min-height:100px; background:#fff; }
.reply-form textarea:focus{ outline:none; border-color:var(--red); }
.reply-form .rf-foot{ display:flex; justify-content:flex-end; margin-top:14px; }

/* =========================================================
   タグ検索（スペース内の投稿を絞り込む）
   ========================================================= */
.tag-search{ margin:clamp(20px,3vw,26px) 0 clamp(24px,3vw,32px); }
.tag-search-bar{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 18px; max-width:440px; }
.tag-search-bar svg{ width:18px; height:18px; color:#a8a29a; flex:none; }
.tag-search-bar input{ border:0; outline:none; background:none; font-size:14px; font-family:var(--sans); width:100%; color:var(--ink); }
.tag-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{ border:1px solid var(--line); background:#fff; color:#555; border-radius:999px; padding:7px 16px; font-size:13px; cursor:pointer; transition:.2s; }
.chip:hover{ border-color:var(--red); color:var(--red); }
.chip.is-active{ background:var(--red); color:#fff; border-color:var(--red); }
/* 🏷 タグのたたみ＋複数選択（2026-07-27）。has-toggle はライブのJSが付与＝デモは従来表示 */
.tag-toggle-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.tag-toggle{ border:1px solid var(--line); background:#fff; color:#555; border-radius:999px; padding:7px 16px; font-size:12.5px; font-family:var(--sans); cursor:pointer; transition:.2s; }
.tag-toggle:hover{ border-color:var(--red); color:var(--red); }
.tag-picked{ display:flex; gap:6px; flex-wrap:wrap; }
.tag-mini{ border:0; background:#fdeeeb; color:var(--red); border-radius:999px; padding:5px 12px; font-size:12px; font-family:var(--sans); cursor:pointer; transition:.2s; }
.tag-mini:hover{ background:var(--red); color:#fff; }
.tag-search.has-toggle .tag-chips{ display:none; margin-top:10px; }
.tag-search.has-toggle .tag-chips.is-open{ display:flex; }
.no-result{ padding:30px 0; color:#8a857c; font-size:14px; }

/* 検索バーの右にソート */
.tag-search-head{ display:flex; justify-content:space-between; align-items:center; gap:14px 20px; flex-wrap:wrap; }
.tag-search-head .tag-search-bar{ flex:1 1 240px; }
.sort-control{ display:flex; align-items:center; gap:8px; flex:none; }
.sort-control label{ font-size:12px; color:#8a857c; white-space:nowrap; }
.sort-select{ border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:13px; font-family:var(--sans); background:#fff; color:var(--ink); cursor:pointer; }
.sort-select:focus{ outline:none; border-color:var(--red); }

/* =========================================================
   ビデオ講座（動画の埋め込み一覧）
   ========================================================= */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,34px); }
.vcard .v-thumb{ position:relative; display:block; aspect-ratio:16/9; background:#1b1b1b; border-radius:12px; overflow:hidden; }
.vcard .v-thumb::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,#2c2c2c,#111); }
.vcard .v-thumb.has-thumb::before{ display:none; }   /* 表紙（サムネイル）がある時は黒い層を外して画像を見せる */
.vcard .v-play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; transition:.25s ease; }
.vcard .v-play svg{ width:20px; height:20px; color:var(--red); margin-left:3px; }
.vcard:hover .v-play{ transform:scale(1.12); background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.vcard .v-dur{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.78); color:#fff; font-size:11px; padding:2px 8px; border-radius:5px; letter-spacing:.03em; z-index:1; }
.vcard .v-info{ padding-top:14px; }
.vcard .v-cat{ font-family:var(--serif); color:var(--red); font-size:12px; }
.vcard .v-title{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.5; margin:6px 0 8px; }
.vcard:hover .v-title{ color:var(--red); }
.vcard .v-date{ font-family:var(--serif); font-size:12px; color:#a8a29a; }

/* =========================================================
   スペース選択バー（スマホ：ヘッダー下）
   ========================================================= */
.space-nav{
  display:none; flex-direction:column; gap:0;
  padding:10px var(--pad) 12px; background:var(--cream); border-bottom:1px solid var(--line);
}
/* 大カテゴリの横スクロール行 */
.sn-catrow{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.sn-catrow::-webkit-scrollbar{ display:none; }
.sn-catbtn{ flex:none; border:0; background:#ece7df; color:#6b665e; border-radius:999px;
  padding:9px 20px; font-family:var(--sans); font-weight:700; font-size:13px; cursor:pointer; transition:.2s ease; }
.sn-catbtn.is-active{ background:var(--ink); color:var(--yellow); }
/* タップで開くサブカテゴリ */
.sn-sub{ display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; animation:subcatIn .25s ease; }
.sn-sub[hidden]{ display:none; }
.sn-sub a{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:13px; color:#555; white-space:nowrap; transition:.2s; }
.sn-sub a:hover{ border-color:var(--red); color:var(--red); }
.sn-sub a.is-active{ background:var(--ink); color:var(--light); border-color:var(--ink); }

/* =========================================================
   未読バッジ（サブカテゴリ右端）
   ========================================================= */
.unread{
  flex:none; background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans);
}
.unread[hidden]{ display:none; }   /* hidden属性を display:inline-flex より優先 */
.cat li a.has-unread{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.subcat a .unread{ margin-left:8px; }
.space-nav a .unread{ margin-left:8px; }

/* =========================================================
   メッセージ（DM：管理人↔メンバーの非公開やり取り）
   ========================================================= */
.dm-wrap{ max-width:1100px; margin:0 auto; padding:clamp(22px,3vw,34px) var(--pad) clamp(40px,6vw,64px); }
.dm-title{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--ink); margin:8px 0 20px; }
.dm{ display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; height:min(72vh,620px); background:#fff; }
.dm-list{ min-height:0; border-right:1px solid var(--line); overflow-y:auto; }
.dm-conv{ display:flex; gap:12px; align-items:center; padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--line); transition:.15s ease; }
.dm-conv:hover{ background:var(--greige); }
.dm-conv.is-active{ background:#fdeeeb; }
.dm-conv.has-unread{ background:#fff5f3; box-shadow:inset 3px 0 0 var(--red); }
.dm-conv.is-active.has-unread{ background:#fce8e4; }
.dm-conv.has-unread .c-name{ color:var(--red-deep); }
.dm-conv .avatar{ width:44px; height:44px; }
.dm-conv .c-main{ flex:1; min-width:0; }
.dm-conv .c-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.dm-conv .c-name{ font-weight:700; font-size:14px; color:var(--ink); }
.dm-conv .c-time{ font-size:11px; color:#a8a29a; flex:none; }
.dm-conv .c-preview{ font-size:12px; color:#8a857c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.admin-tag{ font-size:10px; color:var(--red); font-weight:700; border:1px solid var(--red); border-radius:4px; padding:1px 5px; margin-left:6px; }

.dm-thread{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.dm-thread-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.dm-thread-head .avatar{ width:40px; height:40px; }
.dm-thread-head .t-name{ font-weight:700; font-size:15px; color:var(--ink); }
.dm-thread-head .t-status{ font-size:11px; color:#8a857c; }
.dm-thread-actions{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.dm-read-button{ display:inline-flex; align-items:center; border:1px solid var(--red); border-radius:999px; background:#fff; color:var(--red); padding:5px 10px; font-size:11px; font-weight:700; font-family:var(--sans); white-space:nowrap; cursor:pointer; }
.dm-read-button:hover{ background:#fdeeeb; }
.dm-read-button:disabled{ opacity:.55; cursor:wait; }
.dm-read-button[hidden]{ display:none; }
.dm-karte-link{ font-size:12px; color:var(--red); text-decoration:underline; white-space:nowrap; }
.dm-karte-link[hidden]{ display:none; }
.dm-back{ display:none; border:0; background:none; cursor:pointer; color:var(--ink); padding:6px; border-radius:8px; }
.dm-back:hover{ background:var(--greige); }
.dm-priv{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:#8a857c; background:var(--greige); padding:9px; }
.dm-thread .chat-stream{ flex:1; min-height:0; overflow-y:auto; padding:18px; }
.dm-thread .chat-composer{ position:static; margin:0; padding:12px 14px; border-top:1px solid var(--line); background:#fff; }

/* ✏ DMメッセージの編集・取り消し（2026-07-26） */
.m-edited{ font-size:10.5px; color:#a8a29a; }
.msg.is-deleted .bubble{ background:#f1ede6; border:1px dashed var(--line); color:#9a958c; font-size:12.5px; }
.msg-actions{ display:flex; gap:12px; margin-top:6px; }
.is-me .msg-actions{ justify-content:flex-end; }
.msg-actions button{ background:none; border:0; padding:0; cursor:pointer; color:#8a857c; font-size:11.5px; font-family:var(--sans); text-decoration:underline; text-underline-offset:2px; transition:.2s; }
.msg-actions button:hover{ color:var(--red); }
.dm-edit-area{ width:100%; }
.dm-edit-area textarea{ width:100%; min-height:64px; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; line-height:1.7; font-family:var(--sans); background:#fff; resize:vertical; }
.dm-edit-area textarea:focus{ outline:none; border-color:var(--red); }
.dm-edit-btns{ display:flex; gap:8px; margin-top:8px; justify-content:flex-end; }
.dm-edit-btns button{ border-radius:999px; padding:6px 14px; font-size:12px; font-family:var(--sans); cursor:pointer; }
.dm-edit-save{ border:0; background:var(--red); color:#fff; font-weight:700; }
.dm-edit-cancel{ border:1px solid var(--line); background:#fff; color:#555; }

@media (max-width:768px){
  /* 📱 DMの枠をページ余白ごと画面端まで広げ、吹き出しの幅をかせぐ（2026-07-26） */
  .dm{ grid-template-columns:1fr; height:min(76vh,660px); height:min(76dvh,660px);
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
    border-left:0; border-right:0; border-radius:0; }
  .dm-list{ border-right:0; }
  .dm-thread{ display:none; }
  .dm.show-thread .dm-list{ display:none; }
  .dm.show-thread .dm-thread{ display:flex; }
  .dm-thread-head{ flex-wrap:wrap; }
  .dm-thread-actions{ width:100%; margin-left:52px; justify-content:flex-start; }
  .dm-back{ display:inline-flex; }
  /* 吹き出しを広く・アバターと余白を控えめに＝1行の文字数を増やす */
  .dm-thread .chat-stream{ padding:14px 10px; }
  .dm .msg{ max-width:100%; gap:8px; margin-bottom:16px; }
  .dm .chat-stream .avatar{ width:30px; height:30px; font-size:12px; }
  .dm .m-name{ font-size:12.5px; }
  .dm .bubble{ padding:10px 13px; line-height:1.8; }
}

/* =========================================================
   ヘッダーのメッセージ通知ナビ
   ========================================================= */
.sub-header-actions{ display:flex; align-items:center; gap:14px; }
.msg-nav{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); transition:.2s ease; }
.msg-nav:hover{ border-color:var(--red); color:var(--red); transform:translateY(-1px); }
.msg-nav svg{ width:20px; height:20px; }
.msg-nav .unread{ position:absolute; top:-4px; right:-4px; border:2px solid var(--cream); }

/* =========================================================
   メンバーカード：カテゴリ＋サブカテゴリ＋タイトル
   ========================================================= */
.pcard .p-tags{ display:flex; flex-wrap:wrap; gap:6px 10px; margin-bottom:14px; align-items:baseline; }
.pcard .p-cat{ font-family:var(--serif); color:var(--red); font-size:12px; }
.pcard .p-sub{ font-family:var(--serif); color:#9a938a; font-size:12px; }
.pcard .p-title{ font-size:15px; font-weight:700; line-height:1.55; color:var(--ink); margin:14px 0 0; transition:.2s ease; }
.pcard:hover .p-title{ color:var(--red); }

/* =========================================================
   スレッド一覧（質問・相談）
   ========================================================= */
.thread-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.thread-index{ border-top:1px solid var(--line); }
.thread-row{ display:flex; gap:16px; padding:22px 4px; border-bottom:1px solid var(--line); align-items:flex-start; transition:.15s ease; }
.thread-row:hover{ background:#fff; }
.thread-row .avatar{ width:42px; height:42px; flex:none; }
.tr-main{ flex:1; min-width:0; }
.tr-title{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.5; }
.thread-row:hover .tr-title{ color:var(--red); }
.tr-excerpt{ font-size:13px; color:#8a857c; line-height:1.8; margin-top:6px; }
.tr-meta{ display:flex; flex-wrap:wrap; gap:6px 15px; font-size:12px; color:#a8a29a; margin-top:12px; align-items:center; }
.tr-meta .solved{ color:#fff; background:var(--red); border-radius:4px; padding:1px 7px; font-weight:700; font-size:11px; }
.tr-stats{ display:flex; gap:20px; flex:none; text-align:center; padding-top:2px; }
.tr-stats .n{ font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); line-height:1.1; }
.tr-stats .l{ font-size:10px; color:#a8a29a; }

/* =========================================================
   チャットのリンクプレビュー（キャプチャカード）
   ========================================================= */
.link-card{ display:flex; margin-top:8px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; max-width:340px; text-decoration:none; transition:.2s ease; }
.link-card:hover{ border-color:var(--red); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.is-me .link-card{ margin-left:auto; }
.lc-thumb{ flex:none; width:104px; background:linear-gradient(135deg,#ece7df,#d8d0c4); display:flex; align-items:center; justify-content:center; }
.lc-thumb::after{ content:""; width:30px; height:30px; opacity:.55; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23726c63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat; }
.lc-thumb.has-image::after{ display:none; }
.lc-body{ padding:10px 13px; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.lc-site{ font-size:11px; color:#a8a29a; }
.lc-title{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-desc{ font-size:11px; color:#8a857c; line-height:1.5; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.in-link{ color:inherit; text-decoration:underline; word-break:break-all; }

/* =========================================================
   スペース新規作成（ページ型テンプレの選択）
   ========================================================= */
.create-space{ max-width:780px; margin:0 auto; padding:clamp(28px,4vw,48px) var(--pad) clamp(48px,7vw,80px); }
.create-space h1{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,3vw,34px); color:var(--ink); margin:6px 0 8px; }
.create-space .cs-lead{ font-size:14px; color:#8a857c; margin-bottom:30px; line-height:1.8; }
.cs-field{ margin-bottom:28px; }
.cs-field > label{ display:block; font-weight:700; font-size:14px; margin-bottom:10px; color:var(--ink); }
.cs-field input[type=text], .cs-field select{ width:100%; max-width:420px; border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:14px; font-family:var(--sans); background:#fff; }
.cs-field input:focus, .cs-field select:focus{ outline:none; border-color:var(--red); }
.tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tpl-card{ display:block; cursor:pointer; border:1.5px solid var(--line); border-radius:14px; padding:20px 18px; background:#fff; transition:.2s ease; position:relative; }
.tpl-card:hover{ border-color:#d8c4bf; transform:translateY(-2px); }
.tpl-card input{ position:absolute; opacity:0; pointer-events:none; }
.tpl-card .t-ico{ font-size:26px; line-height:1; }
.tpl-card .t-name{ font-weight:700; font-size:15px; margin:12px 0 6px; color:var(--ink); }
.tpl-card .t-desc{ font-size:12px; color:#8a857c; line-height:1.7; }
.tpl-card.is-selected{ border-color:var(--red); background:#fdeeeb; }
.tpl-card.is-selected::after{ content:"✓"; position:absolute; top:12px; right:14px; color:var(--red); font-weight:700; }
.cs-done{ margin-top:18px; color:var(--red); font-weight:700; font-size:14px; }

/* =========================================================
   公開ゾーンの記事詳細（赤トーン・無料閲覧）
   ========================================================= */
.pub-wrap{ max-width:1040px; margin:0 auto; padding:clamp(26px,4vw,50px) var(--pad) clamp(50px,8vw,88px); }
.pub-article .p-body{ max-width:820px; }   /* 本文は読みやすい幅に */
.pub-article .p-eyebrow{ font-family:var(--serif); color:var(--red); font-size:14px; letter-spacing:.04em; }
.pub-article .p-free{ display:inline-block; border:1px solid var(--red); color:var(--red); border-radius:999px; padding:1px 12px; font-size:11px; font-family:var(--serif); margin-left:8px; vertical-align:middle; }
.pub-article h1{ font-family:var(--serif); color:var(--red); font-weight:400; font-size:clamp(27px,4.2vw,44px); line-height:1.5; margin:14px 0 16px; }
.pub-article .p-meta{ font-family:var(--serif); color:var(--red); font-size:13px; display:flex; gap:16px; flex-wrap:wrap; border-bottom:1px solid rgba(215,74,57,.25); padding-bottom:20px; margin-bottom:30px; }
.pub-article .p-cover{ aspect-ratio:16/9; background:var(--red); border-radius:6px; margin-bottom:clamp(24px,3vw,36px); }
.pub-article .p-body p{ font-size:15px; line-height:2.05; color:#3a3a3a; margin-bottom:22px; }
.pub-article .p-body h2{ font-family:var(--serif); color:var(--red); font-weight:700; font-size:clamp(21px,2.5vw,27px); line-height:1.5; margin:42px 0 16px; padding-bottom:10px; border-bottom:1px solid rgba(215,74,57,.32); }
.pub-article .p-body h3{ font-family:var(--serif); color:var(--ink); font-weight:700; font-size:clamp(18px,2vw,21px); line-height:1.55; margin:36px 0 14px; padding-left:14px; border-left:3px solid var(--red); }
.pub-article .p-body img{ border-radius:6px; margin:10px 0 26px; max-width:100%; }
.pub-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
.pub-tags a{ font-size:12px; border:1px solid var(--red); color:var(--red); border-radius:999px; padding:6px 14px; transition:.2s; }
.pub-tags a:hover{ background:var(--red); color:#fff; }
.pub-cta{ margin-top:44px; border:1px solid var(--red); border-radius:16px; padding:clamp(24px,3vw,32px); text-align:center; background:#fff8f6; }
.pub-cta p{ color:var(--red); font-family:var(--serif); font-size:16px; margin-bottom:16px; }

/* 本文画像の拡大表示 */
.img-lightbox{ position:fixed; inset:0; z-index:260; background:rgba(27,27,27,.78); backdrop-filter:blur(2px); }
.img-lightbox[hidden]{ display:none; }
.img-lightbox-stage{ width:100%; height:100%; overflow:auto; padding:clamp(54px,7vw,76px) clamp(14px,4vw,42px) clamp(28px,5vw,52px); display:flex; align-items:flex-start; justify-content:center; }
.img-lightbox-stage img{ display:block; width:auto; max-width:min(1100px,96vw); height:auto; border-radius:8px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.img-lightbox-stage img.is-small-narrow{ width:min(520px,92vw); max-width:none; }
.img-lightbox-close{ position:fixed; top:clamp(12px,2.6vw,22px); right:clamp(12px,2.6vw,22px); z-index:1; width:42px; height:42px; border:1px solid rgba(248,244,239,.45); border-radius:50%; background:rgba(27,27,27,.72); color:var(--light); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.img-lightbox-close:hover,.img-lightbox-close:focus-visible{ background:var(--red); border-color:var(--red); outline:none; }

/* =========================================================
   コース式のVideo講座（Circle風）
   ========================================================= */
.course-hero{ display:grid; grid-template-columns:320px 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; margin-bottom:clamp(28px,4vw,40px); }
.course-hero .ch-cover{ position:relative; background:linear-gradient(135deg,#2c2c2c,#111); min-height:200px; }
.course-hero .ch-cover .v-play{ position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
.course-hero .ch-cover .v-play svg{ width:20px; height:20px; color:var(--red); margin-left:3px; }
.course-hero .ch-body{ padding:clamp(20px,3vw,30px); min-width:0; }
.ch-body .ch-cat{ font-family:var(--serif); color:var(--red); font-size:12px; }
.ch-body h1{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.8vw,30px); color:var(--ink); line-height:1.4; margin:6px 0 10px; }
.ch-desc{ font-size:14px; color:#555; line-height:1.9; }
.course-progress{ margin:20px 0 8px; }
.pbar{ height:7px; background:#eee; border-radius:999px; overflow:hidden; }
.pbar span{ display:block; height:100%; background:var(--red); border-radius:999px; }
.progress-label{ display:flex; justify-content:space-between; font-size:12px; color:#8a857c; margin-top:7px; }
.ch-meta{ display:flex; gap:18px; font-size:12px; color:#8a857c; margin:14px 0 18px; flex-wrap:wrap; }
.ch-actions .btn{ font-size:14px; }

/* コース資料（ダウンロード） */
.course-materials{ margin-bottom:clamp(28px,4vw,40px); }
.course-materials h2{ font-family:var(--serif); font-weight:700; font-size:20px; color:var(--ink); margin:0 0 16px; }
.mat-list{ display:grid; gap:10px; }
.mat-item{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px;
  background:#fff; padding:14px 18px; font-size:14px; color:var(--ink); transition:.18s ease; }
.mat-item:hover{ border-color:var(--red); transform:translateY(-1px); box-shadow:0 6px 18px rgba(27,27,27,.06); }
.mat-item .mat-ico{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--greige);
  display:flex; align-items:center; justify-content:center; color:var(--red); font-size:15px; }
.mat-item .mat-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.curriculum h2{ font-family:var(--serif); font-weight:700; font-size:20px; color:var(--ink); margin:0 0 16px; }
.chapter{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin-bottom:16px; }
.chapter-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--greige); }
.chapter-head .c-title{ font-weight:700; font-size:14px; color:var(--ink); }
.chapter-head .c-count{ font-size:12px; color:#8a857c; }
.lesson{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); transition:.15s ease; }
.lesson:hover{ background:var(--greige); }
.lesson .l-status{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; font-size:12px; border:1px solid var(--line); color:#a8a29a; }
.lesson.done .l-status{ background:var(--red); border-color:var(--red); color:#fff; }
.lesson.current .l-status{ border-color:var(--red); color:var(--red); }
.lesson.current{ background:#fdeeeb; }
.lesson.locked{ color:#b3ada3; cursor:default; }
.lesson .l-title{ flex:1; min-width:0; font-size:14px; }
.lesson .l-dur{ font-family:var(--serif); font-size:12px; color:#a8a29a; flex:none; }
.lesson.locked .l-dur{ color:#c4bdb2; }

/* =========================================================
   ツール（チャット式：バージョン更新・配布）
   ========================================================= */
.tool-badge{ display:inline-block; background:var(--red); color:#fff; font-family:var(--serif); font-weight:700; font-size:12px; border-radius:6px; padding:2px 10px; margin-left:10px; vertical-align:middle; }
.tool-actions{ margin-top:16px; }
.tool-actions .btn{ font-size:14px; }
/* メッセージ内のダウンロードチップ */
.dl-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; border:1px solid var(--red); color:var(--red); background:#fff; border-radius:9px; padding:9px 15px; font-size:13px; font-weight:700; text-decoration:none; transition:.2s ease; }
.dl-chip:hover{ background:var(--red); color:#fff; transform:translateY(-1px); }
.dl-chip svg{ width:16px; height:16px; }
.dl-chip .dl-size{ font-weight:400; font-size:11px; opacity:.75; }

/* ツール（アプリ）ページ：アプリを開くボタン＋説明＋最新情報 */
.tool-app{ margin:clamp(6px,1.5vw,14px) 0 clamp(28px,4vw,40px); }
/* 管理人向けヒント（ツールページ等。一般会員には出さない） */
.adm-note{ font-size:13px; color:#6a6259; line-height:1.9; background:#faf5ee; border:1px solid var(--line); border-radius:10px; padding:12px 14px; max-width:640px; }
.adm-note a{ color:var(--red); }
.tool-app .tool-open{ font-size:15px; padding:.95em 2.2em; }
.tool-app .tool-note{ font-size:13px; color:#6a6259; line-height:1.9; margin-top:14px; max-width:600px; }
.tool-updates h2{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
/* ツールページ下部のチャット（埋め込み。入力欄は固定せずインライン、履歴は枠内でスクロール） */
.tool-talk{ margin-top:clamp(30px,5vw,48px); }
.tool-talk h2{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.tool-talk .chat-stream{ max-height:520px; overflow-y:auto; padding-right:4px; }
.tool-talk .chat-composer{ position:static; background:transparent; border-top:0; padding:12px 0 0; }
.tool-update-list{ display:grid; gap:16px; }
.tool-update{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(16px,2.5vw,22px); }
.tool-update .tu-date{ font-family:var(--serif); font-size:12px; color:#a8a29a; }
.tool-update .tu-title{ font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); margin:6px 0 10px; }
.tool-update .tu-body p{ font-size:14px; line-height:1.95; color:#444; margin:0 0 8px; }
.tool-update .tu-body img, .tool-update .tu-body video{ max-width:100%; border-radius:8px; }

/* =========================================================
   固定ページ（プライバシーポリシー・利用規約など）
   ========================================================= */
.doc-page{ max-width:820px; margin:0 auto; padding:clamp(26px,4vw,50px) var(--pad) clamp(56px,8vw,90px); }
.doc-page h1{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:clamp(26px,3.4vw,38px); line-height:1.4; margin:10px 0 10px; }
.doc-updated{ font-family:var(--serif); font-size:12px; color:#a8a29a; margin-bottom:clamp(24px,3vw,36px); }
.doc-page h2{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:clamp(18px,2vw,22px); margin:38px 0 12px; padding-top:22px; border-top:1px solid var(--line); }
.doc-page h2:first-of-type{ border-top:0; padding-top:0; }
.doc-page p{ font-size:14px; line-height:2; color:#3a3a3a; margin-bottom:16px; }
.doc-page ul{ margin:0 0 16px; padding-left:1.3em; }
.doc-page li{ font-size:14px; line-height:2; color:#3a3a3a; }
.doc-page a.doc-link{ color:var(--red); text-decoration:underline; }

/* =========================================================
   メンバートップ（会員ホーム／ダークのメンバー用ヘッダー）
   ========================================================= */
.member-header{ background:var(--ink); position:relative; z-index:20; }
.member-header .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:15px; }
.member-header .brand-sm{ color:var(--light); }
.member-header-actions{ display:flex; align-items:center; gap:14px; }
/* 右上「サイトトップ（公開トップへ）」控えめテキストリンク */
.mh-top{ font-size:12px; letter-spacing:.02em; color:rgba(245,245,245,.66); text-decoration:none; white-space:nowrap; transition:.2s ease; }
.mh-top:hover{ color:var(--light); text-decoration:underline; text-underline-offset:3px; }
.mh-icon{ position:relative; display:inline-flex; width:42px; height:42px; border-radius:50%; border:1px solid rgba(245,245,245,.22); align-items:center; justify-content:center; color:var(--light); transition:.2s ease; }
.mh-icon:hover{ background:rgba(245,245,245,.1); }
.mh-icon svg{ width:20px; height:20px; }
.mh-icon .unread{ position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; font-size:12px; border:2px solid var(--ink); box-shadow:0 2px 10px rgba(215,74,57,.6); }
.mh-icon.has-unread{ color:#ffd8d0; background:rgba(215,74,57,.16); border-color:rgba(215,74,57,.5); }
.mh-avatar{ width:40px; height:40px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px; flex:none; }
/* 管理リンク（管理者のみ。gate.jsが追加）。縦書き化を防ぐため nowrap＋縮まない */
.adm-link{ font-size:13px; padding:.6em 1.2em; white-space:nowrap; flex:none; }
/* 記事詳細の「この記事を編集」フローティングボタン（管理者のみ・live.jsが追加） */
.admin-edit-fab{ position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:70;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--ink); color:#fff; font-size:13px; font-weight:700; text-decoration:none;
  padding:.8em 1.3em; border-radius:999px; box-shadow:0 8px 24px rgba(27,27,27,.28); transition:.2s ease; }
.admin-edit-fab:hover{ background:var(--red); transform:translateY(-2px); box-shadow:0 12px 28px rgba(215,74,57,.32); }
@media (max-width:680px){ .admin-edit-fab{ bottom:calc(66px + env(safe-area-inset-bottom)); font-size:12px; padding:.7em 1.1em; } }

.mh-hero{ padding:clamp(22px,4vw,38px) 0 clamp(8px,2vw,16px); }
.mh-eyebrow{ font-family:var(--serif); color:var(--red); font-size:12px; letter-spacing:.12em; }
.mh-hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,3.4vw,38px); color:var(--ink); line-height:1.4; margin:8px 0 10px; }
.mh-hero .mh-sub{ font-size:13px; color:#8a857c; }
.mh-hero .mh-sub b{ color:var(--red); font-weight:700; }
.mh-section-title{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--ink); margin:clamp(30px,4vw,44px) 0 16px; display:flex; align-items:center; gap:8px; }
.mh-section-title .more{ margin-left:auto; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--red); }
.mh-pinned{ border:1px solid var(--red); background:#fff8f6; border-radius:14px; padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.mh-pinned .avatar{ width:40px; height:40px; flex:none; }
.mh-pinned > div{ min-width:0; }   /* flexの子がはみ出さないためのお約束（スマホでカードが画面幅を超えるバグ対策） */
.mh-pinned .mp-name{ font-weight:700; font-size:14px; color:var(--ink); margin-bottom:4px; }
.mh-pinned .mp-text{ font-size:14px; line-height:1.85; color:#3a3a3a; overflow-wrap:anywhere; }   /* 長いURLも折り返す */

/* ---- 💬 みんなのひとこと（ライブティッカー） ---- */
.status-ticker{ margin-top:clamp(34px,5vw,54px); scroll-margin-top:90px; }
.st-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.st-head .mh-section-title{ margin-bottom:8px; }
.st-edit-toggle{ background:none; border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:12px; cursor:pointer; color:#555; transition:.2s; }
.st-edit-toggle:hover{ border-color:var(--red); color:var(--red); }
.st-editor{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px 16px; margin:4px 0 14px; }
.st-editor[hidden]{ display:none; }
.st-editor-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.st-editor-row input{ flex:1; min-width:200px; border:1px solid var(--line); border-radius:999px; padding:11px 16px; font-size:13px; font-family:var(--sans); background:#fff; }
.st-editor-row input:focus{ outline:none; border-color:var(--red); }
.st-editor-row .btn{ font-size:13px; padding:.7em 1.6em; }
.st-remove{ background:none; border:0; color:#8a857c; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.st-remove:hover{ color:var(--red); }
.st-msg{ font-size:12px; margin:8px 0 0; }
.st-msg.ok{ color:#2c6b2f; }
.st-msg.err{ color:var(--red); }
.st-track-wrap{ overflow:hidden; border-block:1px solid var(--line); padding:14px 0; }
.st-track{ display:flex; gap:26px; width:max-content; animation:stScroll var(--st-dur,40s) linear infinite; will-change:transform; }
/* ホバー停止はPCだけ（スマホはタップでhoverが貼り付き、テロップが止まったままになる） */
@media (hover:hover){ .st-track:hover{ animation-play-state:paused; } }
.st-track.is-paused{ animation-play-state:paused !important; }  /* リアクション選択中の明示停止 */
/* スマホ＝自動スクロール＋スワイプ両対応（2026-08-20 ayako決定）
   CSSアニメではなくJSがスクロール位置を進める（home-live.js ensureTouchTicker）。
   触っている間と直後だけ止まり、また流れ出す */
@media (hover:none){
  .st-track{ animation:none !important; }
  .st-track-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .st-track-wrap::-webkit-scrollbar{ display:none; }
}
@keyframes stScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* 朝礼の1セット（2セット連結で途切れず流す。各セットはJSが画面幅以上に広げ、
   同じカードが同時に2枚見えないようにする＝テロップ方式・2026-07-27） */
.st-set{ display:flex; align-items:center; gap:26px; flex:none; box-sizing:border-box; }
/* 朝礼の名札カード（チャットの吹き出しに見えないように、しっぽ無しのカード型） */
.st-card{ display:inline-flex; align-items:center; gap:10px; flex:none;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:9px 18px 9px 10px; box-shadow:0 2px 8px rgba(27,27,27,.05); }
.st-avatar{ width:40px; height:40px; border-radius:50%; background:#faf7f2; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.st-card-body{ display:flex; flex-direction:column; gap:1px; }
.st-name{ font-size:10.5px; font-weight:700; color:#a8a29a; letter-spacing:.03em; }
.st-streak{ margin-left:6px; color:#d1691f; font-weight:700; font-size:10.5px; }
/* 👏 拍手ボタン（返信不要のゆるい反応。朝礼・ふりかえり共通） */
.clap-btn{ flex:none; margin-left:8px; background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:11.5px; color:#8a857c; cursor:pointer; transition:.15s; }
.clap-btn:hover{ border-color:var(--red); }
.clap-btn.on{ background:#fdeeeb; border-color:var(--red); color:var(--red); font-weight:700; }
.st-card .clap-btn{ align-self:center; }

/* 🛍 メンバーの作品紹介ページ（公開・§68・2026-08-01） */
.showcase-wrap{ max-width:1180px; margin:0 auto; padding:clamp(26px,4vw,50px) var(--pad) clamp(56px,8vw,90px); }
.sc-lead{ font-size:13.5px; line-height:2; color:#6a6259; margin:8px 0 clamp(28px,4vw,44px); }
.sc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,34px); }
@media (max-width:820px){ .sc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sc-grid{ grid-template-columns:1fr; max-width:420px; } }
.sc-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.sc-thumb{ aspect-ratio:4/3; background:#faf7f2; }
.sc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-thumb.is-empty{ display:flex; align-items:center; justify-content:center; color:#c4bdb2; font-size:13px; letter-spacing:.08em; }
.sc-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.sc-title{ font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); margin:0; line-height:1.6; }
.sc-by{ font-size:12px; color:#a8a29a; margin:0; }
.sc-desc{ font-size:13px; line-height:1.9; color:#555; margin:4px 0 0; white-space:pre-wrap; }
.sc-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:14px; }
.sc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:#555; border-radius:999px; padding:9px 16px; font-size:12.5px; font-family:var(--sans); text-decoration:none; cursor:pointer; transition:.2s; }
.sc-btn:hover{ border-color:var(--red); color:var(--red); }
.sc-btn--demo{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.sc-btn--demo:hover{ background:var(--red-deep); border-color:var(--red-deep); color:#fff; }
.sc-empty{ font-size:13.5px; color:#8a857c; padding:40px 0; text-align:center; }
.sc-notice{ margin-top:clamp(34px,5vw,54px); padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#faf7f2; font-size:12px; line-height:1.9; color:#6a6259; }
/* マイページ側の掲載フォーム */
.sc-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.sc-form input, .sc-form textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:13.5px; font-family:var(--sans); background:#fff; }
.sc-form textarea{ min-height:64px; line-height:1.7; resize:vertical; }
.sc-form input:focus, .sc-form textarea:focus{ outline:none; border-color:var(--red); }
.sc-formfoot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-formfoot .btn{ margin-left:auto; }
.sc-mine-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line); }
.sc-mine-title{ font-size:13.5px; font-weight:700; color:var(--ink); flex:1; min-width:120px; }
.sc-mine-state{ font-size:11.5px; color:#8a857c; }
.sc-mine-state.is-off{ color:var(--red); font-weight:700; }
@media (max-width:560px){ .sc-formfoot .btn{ margin-left:0; width:100%; } }

/* 👏 記事のいいね（§66・2026-07-26） */
.post-clap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:26px 0 4px; }
.post-clap .clap-btn{ margin-left:0; font-size:13px; padding:8px 18px; }

/* 週末だけヘッダー直下に出る「ふりかえり」案内バー（少し目立つ） */
.weekend-bar{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  width:100%; max-width:100%; box-sizing:border-box; border:0; cursor:pointer; text-decoration:none;
  padding:11px 20px; font-family:var(--sans); font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--red),#e8895f); box-shadow:0 3px 12px rgba(215,74,57,.22);
  transition:.2s ease; }
.weekend-bar:hover{ filter:brightness(1.05); }
.weekend-bar .wb-tag{ font-size:10.5px; letter-spacing:.04em; background:rgba(255,255,255,.24); border-radius:999px; padding:3px 10px; }
.weekend-bar .wb-go{ font-size:12px; opacity:.9; }
/* スマホ：flex並びをやめて普通の文章として折り返す（<button>のflexは一部のiOS Safariで
   崩れて右にはみ出すため）。ノッチ端末の左右セーフエリアも確保 */
@media (max-width:560px){
  .weekend-bar{ display:block; text-align:center; font-size:12.5px; line-height:1.6;
    padding:9px calc(14px + env(safe-area-inset-right)) 9px calc(14px + env(safe-area-inset-left)); }
  .weekend-bar .wb-tag{ display:inline-block; margin-right:8px; vertical-align:middle; }
  .weekend-bar .wb-text{ display:inline; overflow-wrap:anywhere; vertical-align:middle; }
  .weekend-bar .wb-go{ display:none; } }

/* 📖 週末のふりかえり */
.weekly{ margin-top:clamp(30px,4vw,44px); scroll-margin-top:80px; }
.wk-badge{ margin-left:10px; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--red); background:#fdeeeb; border-radius:999px; padding:3px 11px; }
.wk-editor{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px 18px; margin:4px 0 16px; }
.wk-editor[hidden]{ display:none; }
.wk-q{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.wk-q textarea{ width:100%; min-height:56px; margin-top:6px; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:14px; line-height:1.8; font-family:var(--sans); font-weight:400; resize:vertical; background:#fff; }
.wk-q textarea:focus{ outline:none; border-color:var(--red); }
.wk-share{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#555; margin-bottom:6px; cursor:pointer; }
.wk-list{ display:grid; gap:12px; }
.wk-card{ border:1px solid var(--line); border-radius:14px; background:#fff; padding:15px 18px; }
.wk-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.wk-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.wk-row{ font-size:13.5px; line-height:1.9; color:#333; margin:3px 0; }
.wk-row b{ color:var(--ink); font-weight:700; margin-right:2px; }
.st-text{ font-size:13px; color:var(--ink); white-space:nowrap; }
/* 見出し・リード・定型文チップ */
.st-lead{ font-size:12px; color:#8a857c; margin:0 0 12px; }
.st-count{ font-family:var(--sans); font-size:12px; font-weight:500; color:var(--red); margin-left:10px; }
.st-presets{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.st-preset{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12px; color:#555; cursor:pointer; transition:.2s; }
.st-preset:hover{ border-color:var(--red); color:var(--red); }
@media (prefers-reduced-motion: reduce){
  .st-track{ animation:none; }
  .st-track-wrap{ overflow-x:auto; }
}
/* スマホの朝礼：自動スクロールはそのまま、文字だけ大きく読みやすく */
@media (max-width:680px){
  .st-card{ padding:11px 16px 11px 12px; }
  .st-avatar{ width:46px; height:46px; font-size:23px; }
  .st-name{ font-size:12px; }
  .st-text{ font-size:14.5px; }
  /* 週末ふりかえり：横スワイプ（1枚ずつスナップ） */
  .wk-list{ grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .wk-card{ scroll-snap-align:start; }
}

/* ---- ⏱🎧 作業のおとも（控えめな横バー＋マイBGM。朝礼の上） ---- */
.work-tools{ margin-top:clamp(30px,4vw,44px); }
.wt-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:18px; background:#fffdfa;
  padding:9px 16px; font-size:12px; color:#8a857c; width:fit-content; max-width:100%; }
.wt-label{ font-weight:700; letter-spacing:.02em; }
.wt-display{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
.wt-display.is-done{ color:var(--red); }
.wt-modes{ display:flex; gap:4px; }
.wt-mode{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:11px; color:#555; cursor:pointer; transition:.2s; }
.wt-mode:hover{ border-color:var(--red); color:var(--red); }
.wt-mode.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wt-startbtn{ background:var(--ink); color:#fff; border:0; border-radius:999px; padding:6px 15px; font-size:12px; font-weight:700; cursor:pointer; transition:.2s; }
.wt-startbtn:hover{ background:var(--red); }
.wt-done{ font-size:12px; color:#555; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wt-golink{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:11.5px; cursor:pointer; transition:.2s; }
.wt-golink:hover{ border-color:var(--red); color:var(--red); }
/* マイBGM */
.wt-music{ margin-top:12px; max-width:560px; }
.wt-music-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:12px; color:#8a857c; }
.wt-pl-tabs{ display:flex; gap:4px; }
.wt-pl-tab{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:11px; color:#555; cursor:pointer; transition:.2s; }
.wt-pl-tab:hover{ border-color:var(--red); color:var(--red); }
.wt-pl-tab.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wt-pl-form{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px; margin-bottom:10px; display:grid; gap:8px; }
.wt-pl-form[hidden]{ display:none; }
.wt-pl-hint{ font-size:11.5px; color:#8a857c; margin:0; }
.wt-pl-in{ width:100%; border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-size:12.5px; font-family:var(--sans); background:#fff; }
.wt-pl-in:focus{ outline:none; border-color:var(--red); }
.wt-embed{ border-radius:12px; overflow:hidden; }
/* 左ナビ（暗色サイドバー）に置くとき：明るいカードにして幅いっぱい・折り返し */
.sidebar .work-tools{ margin-top:26px; background:#fffdfa; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px; }
.sidebar .wt-bar{ width:auto; border:0; background:transparent; padding:0; gap:8px 10px; }
.sidebar .wt-music{ margin-top:12px; max-width:none; }
.sidebar .wt-pl-in{ font-size:12px; }

/* ---- 🗂 作戦会議室（伴走プラン専用・本人と管理人だけの個室） ---- */
.karte-wrap{ max-width:820px; }
/* 名鑑・仕事ボードは一覧系なので広めに */
.board-wrap{ max-width:1140px; }
.karte-lead{ font-size:13.5px; line-height:2; color:#555; margin:0 0 24px; }
.karte-pick{ margin-bottom:20px; }
.karte-pick label{ display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.karte-pick select{ width:100%; max-width:340px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; font-family:var(--sans); background:#fff; }
.karte-sheet, .karte-timeline{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(18px,3vw,26px); margin-bottom:22px; }
.karte-sheet h2, .karte-timeline h2{ font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.karte-field{ margin-bottom:18px; }
.karte-field label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.karte-hint{ font-size:12px; color:#9a958c; line-height:1.75; margin:0 0 7px; white-space:pre-wrap; }
.karte-field textarea{ width:100%; min-height:88px; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px; line-height:1.8; font-family:var(--sans); resize:vertical; background:#fff; }
.karte-field textarea:focus{ outline:none; border-color:var(--red); }
.karte-actions{ display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap; }
.karte-post{ padding:14px 0; border-bottom:1px solid #f0ece5; }
.karte-post.is-admin{ background:#fff8f6; border-radius:10px; padding:14px; border-bottom:0; margin:6px 0; }
.kp-head{ display:flex; gap:10px; align-items:baseline; margin-bottom:4px; }
/* 通し番号（「③の件ですが」と参照できるように） */
.kp-num{ flex:none; font-family:var(--serif); font-weight:700; font-size:15px; color:var(--red); }
.kp-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
/* 管理人用：新しい書き込みがある部屋の一覧バー */
.karte-unread-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
  background:#fdeeeb; border:1px solid #f0c9c2; border-radius:12px; padding:9px 14px; }
.ku-label{ font-size:12px; font-weight:700; color:var(--red); }
.ku-item{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; transition:.15s; }
.ku-item:hover{ border-color:var(--red); color:var(--red); }
.karte-post.is-admin .kp-name{ color:var(--red); }
.kp-date{ font-size:11px; color:#a8a29a; }
.kp-body{ font-size:14px; line-height:1.95; color:#333; white-space:pre-line; }
#karteForm textarea{ width:100%; min-height:90px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.8; font-family:var(--sans); resize:vertical; background:#fff; }
#karteForm textarea:focus{ outline:none; border-color:var(--red); }

/* カルテ：読みモード（記入後は表として見やすく） */
.ks-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ks-head h2{ margin:0 !important; padding-bottom:0 !important; border-bottom:0 !important; }
.karte-sheet .ks-head, .karte-works .ks-head, .karte-timeline .ks-head{ padding-bottom:10px; border-bottom:1px solid var(--line); }
.kv-row{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:8px 16px; padding:11px 0; border-bottom:1px solid #f0ece5; }
.kv-row:last-child{ border-bottom:0; }
.kv-label{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.7; }
.kv-value{ font-size:14px; line-height:1.95; color:#333; white-space:pre-line; word-break:break-word; }
.kv-value.is-empty{ color:#c4bdb2; }
.kv-value .in-link{ color:var(--red); }
@media (max-width:560px){ .kv-row{ grid-template-columns:1fr; gap:2px; } }

/* 作品ボード */
.karte-works{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(18px,3vw,26px); margin-bottom:22px; }
.karte-works h2{ font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); }
.kw-note{ font-size:11.5px; color:#a8a29a; }
.kw-lead{ font-size:13px; line-height:1.9; color:#6a6259; margin:0 0 14px; }
.kw-lead strong{ color:var(--ink); }
/* 🖊 添削ボード */
.krv-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.krv-form input[type=url], .krv-form textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:13.5px; font-family:var(--sans); }
.krv-form textarea{ min-height:64px; line-height:1.7; resize:vertical; }
.krv-formfoot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.krv-imgname{ font-size:12px; color:#8a857c; }
.krv-formfoot .btn{ margin-left:auto; }
.krv-list{ display:flex; flex-direction:column; gap:14px; }
.krv-card{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fdfbf7; }
.krv-card.is-done{ background:#f4faf4; border-color:#cfe6cf; }
.krv-head{ display:flex; align-items:center; gap:8px; }
.krv-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.krv-badge.open{ background:#fff1d9; color:#9a6614; }
.krv-badge.done{ background:#dff0df; color:#3a7a3a; }
.krv-date{ font-size:11px; color:#a8a29a; }
.krv-head .snap-del{ margin-left:auto; }
.krv-img{ display:block; max-width:min(260px,100%); margin-top:10px; border-radius:10px; cursor:pointer; }
.krv-body{ font-size:13.5px; line-height:1.8; color:#333; white-space:pre-wrap; margin:10px 0 0; }
.krv-card .in-link{ display:inline-block; margin-top:8px; color:var(--red); font-size:13px; }
.krv-review{ margin-top:12px; padding:12px 14px; background:#fff; border:1px solid #cfe6cf; border-radius:10px; }
.krv-review-h{ font-size:12px; font-weight:700; color:#3a7a3a; margin-bottom:4px; }
.krv-review-b{ font-size:13.5px; line-height:1.85; color:#333; white-space:pre-wrap; }
.krv-review-b .in-link{ color:var(--red); }
.krv-admin{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.krv-admin-ta{ width:100%; min-height:70px; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:13.5px; font-family:var(--sans); line-height:1.7; resize:vertical; }
.krv-admin .btn{ align-self:flex-start; }
/* 📈 カルテのフィルムストリップ（いま＝編集可／過去＝日付版を横スワイプ） */
.ks-head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.karte-film-lead{ margin:0 0 12px; }
.karte-strip{ display:flex; gap:14px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; align-items:flex-start; }
main.strategy-wrap{ max-width:1080px; }   /* 作戦会議室はPCで広め＝カルテの現在と過去が横に並ぶ */
.karte-card{ flex:0 0 min(460px,85%); scroll-snap-align:start; background:#fdfbf7; border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.karte-card.is-now{ background:#fff; border-color:#e9d9a0; }
.karte-card .kc-date{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--serif); font-weight:700; font-size:14px; color:var(--ink); padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.karte-card.is-now .kc-date{ color:#8a6d16; }
.karte-card .kc-note{ font-size:12px; color:#8a857c; margin:0 0 8px; }
.karte-card .kv-row{ grid-template-columns:1fr; gap:2px; padding:9px 0; }
.karte-card .karte-actions{ margin-top:12px; }

/* 📱 作戦会議室：スマホは枠をページ余白ごと画面端まで広げ、記入欄の幅をかせぐ（2026-07-26） */
@media (max-width:768px){
  .strategy-wrap .karte-sheet, .strategy-wrap .karte-works, .strategy-wrap .karte-timeline{
    margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
    border-left:0; border-right:0; border-radius:0;
    padding-left:14px; padding-right:14px; }
  .karte-card{ flex:0 0 94%; padding:12px; }   /* カルテ記入カードを広く（旧85%） */
  .karte-strip{ gap:10px; }
  .krv-formfoot .btn{ margin-left:0; width:100%; }   /* 添削依頼ボタンを全幅で押しやすく */
}
.snap-del{ border:0; background:none; color:#b9b2a7; font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.snap-del:hover{ color:var(--red); }
.snap-modal-box{ max-width:440px; }
.snap-modal-lead{ font-size:13.5px; line-height:1.95; color:#555; margin:14px 0 0; }
.snap-note-label{ display:block; font-size:12px; font-weight:700; color:var(--ink); margin-top:20px; }
.snap-note-label input{ display:block; width:100%; margin-top:6px; border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:13.5px; font-family:var(--sans); font-weight:400; }
.kw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.kw-item{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:#faf7f2; }
.kw-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.kw-del{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(27,27,27,.72); color:#fff; font-size:13px; line-height:1; cursor:pointer; }
.kw-del:hover{ background:var(--red); }
.kw-add{ margin-top:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.kw-addbtn{ display:inline-block; border:1px dashed var(--line); border-radius:999px; padding:8px 18px; font-size:12.5px; color:#555; cursor:pointer; transition:.2s; background:#faf7f2; }
.kw-addbtn:hover{ border-color:var(--red); color:var(--red); }

/* タイムラインのクイックボタン（気軽に頼めるように） */
.karte-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.kq-btn{ background:#fff8f6; border:1px solid #f0c9c2; border-radius:999px; padding:8px 16px; font-size:12.5px; color:var(--red); font-weight:700; cursor:pointer; transition:.2s; }
.kq-btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.karte-post.is-request .kp-body{ background:#fff8f6; border:1px solid #f0c9c2; border-radius:10px; padding:10px 13px; }

/* 伴走プラン以外への案内 */
.karte-teaser{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(28px,5vw,44px); text-align:center; max-width:640px; margin:0 auto; }
.kt-emoji{ font-size:40px; margin-bottom:10px; }
.karte-teaser h2{ font-family:var(--serif); font-weight:700; font-size:clamp(18px,2.4vw,22px); color:var(--ink); margin-bottom:14px; }
.kt-desc{ font-size:13.5px; line-height:2; color:#555; margin-bottom:18px; }
.kt-list{ list-style:none; padding:0; margin:0 auto 24px; max-width:380px; text-align:left; }
.kt-list li{ font-size:13.5px; line-height:2.1; color:#333; }

/* カテゴリタブ列の「作戦会議室」ボタン（目立たせる） */
.member-tabs .tab-karte{ display:inline-flex; align-items:center; background:var(--red); border:1px solid var(--red); border-radius:999px; padding:.62em 1.4em; font-size:13px; font-weight:700; color:#fff; text-decoration:none; transition:.2s; }
.member-tabs .tab-karte:hover{ background:var(--red-deep); border-color:var(--red-deep); }

/* サイドバーの固定グループ見出し（PERSONALは鍵つき控えめ／PARTNER'Sは赤で特別感） */
.sidebar .label-personal{ color:#c4bdb2 !important; }   /* （旧）PERSONAL：控えめグレー */
.sidebar .label-partner{ color:var(--red) !important; letter-spacing:.04em; }
.sidebar .label-community{ color:var(--yellow) !important; letter-spacing:.04em; }

/* サイドナビ「🏢 作業部屋」のライブ人数バッジ */
.room-live-badge{ margin-left:8px; font-size:10.5px; font-weight:700; color:var(--yellow); }

/* 左ナビのBGM埋め込み：YouTubeは16:9で小さく（縦長対策・全画面ボタンあり）。Spotifyは既定の高さ */
.sidebar .wt-embed iframe{ height:auto !important; aspect-ratio:16/9; }
.sidebar .wt-embed iframe[src*="spotify"]{ aspect-ratio:auto; height:352px !important; }

/* 上部タブの会員機能カテゴリ（パートナー／メンバー）は色で見分けやすく */
.member-tabs .tab-cat-partner{ color:var(--red); font-weight:700; }
.member-tabs .tab-cat-partner.is-active{ background:var(--red) !important; color:#fff !important; }
.member-tabs .tab-cat-member{ font-weight:700; }

/* 💼 仕事ボード：サムネ付きカード＋クリックでポップアップ */
.wb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:clamp(16px,2vw,22px); }
.wb-card{ position:relative; text-align:left; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; font-family:inherit; }
.wb-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(27,27,27,.13); border-color:#e6ded4; }
.wb-thumb{ position:relative; aspect-ratio:4/3; background:#e0dbd3 url("../placeholder.svg") center/cover no-repeat; overflow:hidden; }
.wb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.wb-card:hover .wb-thumb img{ transform:scale(1.04); }
.wb-thumb::after{ content:"🔍 くわしく見る"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(27,27,27,.42); color:#fff; font-size:12px; font-weight:700; opacity:0; transition:.25s ease; }
.wb-card:hover .wb-thumb::after{ opacity:1; }
.wb-info{ padding:14px 16px 16px; }
.wb-title{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wb-who{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:#8a857c; margin-top:9px; }
.wb-who .avatar{ width:22px; height:22px; font-size:11px; flex:none; }
/* ポップアップ（画像を大きく・全体表示） */
.wb-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,28px); background:rgba(27,27,27,.62); backdrop-filter:blur(2px); }
.wb-modal[hidden]{ display:none; }
.wb-modal-box{ position:relative; background:#fff; border-radius:20px; max-width:760px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.wb-close{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(27,27,27,.6); color:#fff; font-size:20px; cursor:pointer; transition:.2s; }
.wb-close:hover{ background:var(--red); transform:rotate(90deg); }
.wb-modal-img{ width:100%; max-height:min(560px,64vh); object-fit:contain; display:block; background:#f4efe9; border-radius:20px 20px 0 0; }
.wb-modal-body{ padding:clamp(22px,3.2vw,34px); }
.wb-modal-title{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.8vw,27px); color:var(--ink); line-height:1.5; }
.wb-modal-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#8a857c; margin:10px 0 18px; }
.wb-modal-meta .avatar{ width:26px; height:26px; font-size:12px; flex:none; }
.wb-modal-text{ font-size:15px; line-height:2.05; color:#333; white-space:pre-line; word-break:break-word; margin-bottom:14px; }
.wb-modal-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.wb-modal-foot .btn{ font-size:13px; padding:.75em 1.7em; }
/* 名鑑カードから仕事ボードへ */
.bd-worklink{ display:inline-block; margin-top:10px; font-size:12.5px; color:var(--red); text-decoration:none; }
.bd-worklink:hover{ text-decoration:underline; }

/* 📣 みんなのシェア：正方形カードの一覧 */
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(14px,1.8vw,20px); }
.sp-card{ display:flex; flex-direction:column; }
.sp-thumb{ position:relative; width:100%; aspect-ratio:1/1; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#faf7f2; cursor:pointer; padding:0; display:block; transition:transform .2s ease, box-shadow .2s ease; }
.sp-thumb:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(27,27,27,.12); }
.sp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-thumb.is-text{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#fbf8f3,#efe7db); }
/* 画像なしシェアの枠：本文はサムネに入れず、下のフキダシに出す（No Imageプレースホルダー） */
.sp-thumb.is-noimage{ display:flex; align-items:center; justify-content:center; background:#f3efe8; }
.sp-thumb.is-noimage::after{ content:"No Image"; font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:#b8b0a4; }
.sp-quote{ font-family:var(--serif); font-size:15px; line-height:1.75; color:#4a453d; padding:18px; text-align:center; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.sp-foot{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.sp-avatar-link{ flex:none; }
.sp-foot .avatar{ width:26px; height:26px; font-size:12px; }
.sp-cardname{ font-size:12px; color:#6a655d; font-weight:500; }
.sp-card--flat .sp-thumb{ cursor:pointer; }

/* 📣 みんなのシェア：ホームの自動スライド */
.share-showcase{ margin-bottom:clamp(30px,4vw,44px); }
.ss-track-wrap{ overflow:hidden; padding:4px 0 2px; }
.ss-track{ display:flex; gap:16px; width:max-content; animation:ssScroll var(--ss-dur,40s) linear infinite; }
.ss-track:hover{ animation-play-state:paused; }
@keyframes ssScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ss-card{ flex:none; width:200px; text-decoration:none; }
.ss-thumb{ position:relative; display:block; width:200px; height:200px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#faf7f2; }
.ss-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-thumb.is-text{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#fbf8f3,#efe7db); }
/* 画像なしシェアの枠（ホーム自動スライド）：本文は下のフキダシに出す */
.ss-thumb.is-noimage{ display:flex; align-items:center; justify-content:center; background:#f3efe8; }
.ss-thumb.is-noimage::after{ content:"No Image"; font-family:var(--sans); font-size:11.5px; letter-spacing:.06em; color:#b8b0a4; }
.ss-quote{ font-family:var(--serif); font-size:14px; line-height:1.7; color:#4a453d; padding:16px; text-align:center; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.ss-card:hover .ss-thumb{ border-color:var(--red); }
.ss-foot{ display:flex; align-items:center; gap:7px; margin-top:8px; }
.ss-foot .avatar{ width:24px; height:24px; font-size:11px; }
.ss-name{ font-size:12px; color:#6a655d; }
@media (prefers-reduced-motion: reduce){ .ss-track{ animation:none; } .ss-track-wrap{ overflow-x:auto; } }

/* 🏢 作業部屋 */
.room-panel{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(20px,3vw,28px); margin-bottom:20px; }
/* 🎧 作業用BGM（もくもく部屋・各自のマイBGM） */
.room-bgm{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px clamp(16px,3vw,24px); margin-bottom:16px; }
.rb-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-title{ font-weight:700; font-size:14px; color:var(--ink); }
.rb-tabs{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; flex-wrap:wrap; }
.rb-hint{ font-size:12px; color:#a8a29a; }
.rb-tab{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; width:34px; height:30px; font-size:13px; font-weight:700; color:#555; cursor:pointer; }
.rb-tab.is-on{ background:var(--ink); color:var(--light); border-color:var(--ink); }
.rb-form{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.rb-in{ width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13px; font-family:var(--sans); }
.rb-embed{ margin-top:12px; }
.rb-embed:empty{ margin-top:0; }
/* PCは2カラム（左：タブ/設定・右：プレーヤー）。モバイルは1カラムのまま */
@media (min-width:720px){
  .room-bgm{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-items:start; }
  .room-bgm .rb-head{ grid-column:1; grid-row:1; }
  .room-bgm .rb-form{ grid-column:1; grid-row:2; margin-top:12px; }
  .room-bgm .rb-embed{ grid-column:2; grid-row:1 / span 2; margin-top:0; }
}
/* 作業部屋チャットの画像添付 */
.rc-attach{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; cursor:pointer; color:#8a857c; flex:0 0 auto; transition:.2s; }
.rc-attach:hover{ background:#faf7f2; color:var(--red); }
.rc-attach svg{ width:20px; height:20px; }
.rc-imgpreview{ position:relative; display:inline-block; margin:0 0 8px; }
.rc-imgpreview[hidden]{ display:none; }   /* hidden属性を display:inline-block より優先（未選択時に×ボタンが出るのを防ぐ） */
.rc-imgpreview img{ max-height:90px; border-radius:10px; display:block; }
.rc-imgx{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(27,27,27,.75); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.msg .m-img{ display:block; max-width:min(240px,70%); margin-top:6px; border-radius:12px; cursor:pointer; }
.msg.is-me .m-img{ margin-left:auto; }
.room-status{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rs-main{ display:flex; align-items:baseline; gap:8px; }
.rs-count{ font-family:var(--serif); font-weight:700; font-size:clamp(40px,6vw,58px); color:var(--red); line-height:1; font-variant-numeric:tabular-nums; }
.rs-label{ font-size:14px; color:var(--ink); font-weight:700; }
.rs-here-label{ font-size:12px; color:#8a857c; }
/* いま部屋にいる人（名前・やってること・経過時間） */
.rs-people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:16px; }
.rs-person{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:9px 12px; background:#faf7f2; }
.rs-person .avatar{ width:38px; height:38px; font-size:15px; flex:none; }
.rs-person.is-work{ background:#fff8f6; border-color:#f0c9c2; }
.rs-person.is-work .avatar{ box-shadow:0 0 0 2px var(--red); }
.rs-person.is-break{ opacity:.85; }
.rp-info{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.rp-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.rp-state{ font-size:11.5px; color:#6a655d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-person.is-work .rp-state{ color:var(--red); font-weight:500; }
/* 操作列（作業するよ／休憩・再開・おしまい） */
.room-actions{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.rm-startrow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rm-startrow input{ flex:1; min-width:200px; border:1px solid var(--line); border-radius:999px; padding:12px 18px; font-size:13.5px; font-family:var(--sans); background:#fff; }
.rm-startrow input:focus{ outline:none; border-color:var(--red); }
.rm-startrow .btn{ font-size:14px; padding:.85em 2em; }
.rm-workrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rm-mytask{ font-size:13.5px; font-weight:700; color:var(--ink); }
.rm-elapsed{ font-family:var(--serif); font-weight:700; font-size:24px; color:var(--red); font-variant-numeric:tabular-nums; }
.rm-btn{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:700; color:#555; cursor:pointer; transition:.2s; }
.rm-btn:hover{ border-color:var(--red); color:var(--red); }
.rm-btn.rm-finish{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rm-btn.rm-finish:hover{ background:var(--red); border-color:var(--red); }
/* ルームチャット */
.room-chat{ }
.rc-toggle{ background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:10px 20px; font-size:13px; font-weight:700; color:#555; cursor:pointer; transition:.2s; }
.rc-toggle:hover{ border-color:var(--red); color:var(--red); }
.rc-box{ margin-top:14px; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.rc-stream{ max-height:440px; overflow-y:auto; padding:16px clamp(14px,2.4vw,22px); }
.rc-form{ display:flex; gap:10px; align-items:center; border-top:1px solid var(--line); padding:12px clamp(12px,2vw,18px); background:var(--greige); }
.rc-form input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:12px 18px; font-size:14px; font-family:var(--sans); background:#fff; }
.rc-form input:focus{ outline:none; border-color:var(--red); }
.rc-form .send{ flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--red); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.rc-form .send:hover{ background:var(--red-deep); }
.rc-form .send svg{ width:19px; height:19px; }

/* マイページのハブ（自分のプロフィールにだけ出る入口集） */
.pf-hub{ margin-bottom:22px; }
.pf-hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.pf-hub-item{ display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; text-decoration:none; transition:.2s ease; }
.pf-hub-item:hover{ transform:translateY(-2px); border-color:var(--red); box-shadow:0 10px 22px rgba(27,27,27,.08); }
.ph-emoji{ font-size:20px; }
.ph-label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.ph-desc{ font-size:11px; color:#8a857c; }

/* アバターに絵文字を使うとき（applyAvatar が付ける。背景色は inline で指定） */
.avatar.has-emoji{ line-height:1; font-family:var(--sans); }
/* アバターに自分の画像を使うとき（applyAvatar が署名URLを背景に敷く） */
.avatar.has-image{ background-size:cover; background-position:center; }

/* マイページ：アバター選択（絵文字＋背景色。画像アップは将来やらない） */
.av-picker{ display:flex; flex-direction:column; gap:12px; }
.av-picker-preview{ width:64px; height:64px; font-size:26px; align-self:flex-start; box-shadow:0 3px 10px rgba(27,27,27,.12); }
.av-imgrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.av-upload{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:700; color:#555; cursor:pointer; transition:.2s; }
.av-upload:hover{ border-color:var(--red); color:var(--red); }
.av-cropper{ width:min(100%,320px); padding:12px; border:1px solid var(--line); border-radius:16px; background:#faf7f2; }
.av-cropper[hidden]{ display:none; }
.av-crop-stage{ position:relative; width:100%; aspect-ratio:1; overflow:hidden; border-radius:12px; background:#e8e3dc; }
.av-crop-canvas{ display:block; width:100%; height:100%; cursor:grab; touch-action:none; user-select:none; }
.av-crop-canvas.is-dragging{ cursor:grabbing; }
.av-crop-guide{ position:absolute; inset:1px; border:2px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 0 999px rgba(27,27,27,.28),0 0 0 1px rgba(27,27,27,.22); pointer-events:none; }
.av-crop-zoom{ display:flex; align-items:center; gap:10px; margin-top:12px; color:#555; font-size:12px; font-weight:700; }
.av-crop-zoom input{ flex:1; min-width:0; accent-color:var(--red); }
.av-crop-hint{ margin:7px 0 0; color:#8a857c; font-size:11.5px; line-height:1.6; }

/* 編集ポップアップの画像編集（シェア・発表の✎編集で使用） */
.ie-wrap{ margin:4px 0 12px; display:flex; flex-direction:column; gap:10px; }
.ie-thumb{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#faf7f2; align-self:flex-start; max-width:100%; }
.ie-thumb img{ display:block; max-width:100%; max-height:180px; }
.ie-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.av-emojis{ display:flex; flex-wrap:wrap; gap:6px; }
.av-emoji-btn{ width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s ease; }
.av-emoji-btn:hover{ border-color:var(--red); }
.av-emoji-btn.is-on{ border-color:var(--red); background:#fdeeeb; box-shadow:0 0 0 2px rgba(215,74,57,.25); }
.av-colors{ display:flex; flex-wrap:wrap; gap:8px; }
.av-color-btn{ width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition:.15s ease; }
.av-color-btn.is-on{ box-shadow:0 0 0 2px var(--red); transform:scale(1.08); }
.av-clear{ align-self:flex-start; background:none; border:0; color:#8a857c; font-size:12px; text-decoration:underline; cursor:pointer; padding:2px 0; font-family:var(--sans); }
.av-clear:hover{ color:var(--red); }

/* プロフィールページのヘッダー */
.pf-head{ display:flex; align-items:flex-start; gap:clamp(16px,3vw,26px); flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,30px); margin-bottom:22px; }
.pf-avatar{ width:clamp(66px,9vw,88px); height:clamp(66px,9vw,88px); font-size:clamp(26px,4vw,34px); flex:none; box-shadow:0 6px 18px rgba(27,27,27,.15); }
.pf-info{ flex:1; min-width:200px; }
.pf-name{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,3vw,30px); color:var(--ink); display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }
.pf-tagline{ font-size:13.5px; color:var(--red); font-weight:500; margin-top:6px; }
.pf-bio{ font-size:14px; line-height:2; color:#3a3a3a; margin-top:12px; white-space:pre-line; word-break:break-word; }
.pf-status{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:#555; background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:5px 15px 5px 6px; max-width:100%; }
.pf-status-avatar{ width:28px; height:28px; flex:none; font-size:12px; }
.pf-actions{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.pf-actions .btn{ font-size:13px; padding:.7em 1.7em; }
/* 発表フォームのURL＋画像の2カラム（スマホでは1カラムに） */
.bd-formrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .bd-formrow{ grid-template-columns:1fr; } }

/* ---- 💼 仕事ボード（メンバー名鑑） ---- */
.bd-directory{ margin-top:6px; }
.bd-directory .ks-head{ margin-bottom:18px; }
.bd-directory .ks-head h2{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); }
.bd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:clamp(16px,2vw,22px); }
/* 一覧カード用：自己紹介は3行まで／直近の動き */
.bd-bio--clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bd-recent{ margin-top:12px; border-top:1px dashed var(--line); padding-top:9px; display:grid; gap:3px; }
.bd-recent p{ font-size:12.5px; color:#555; line-height:1.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-recent-date{ color:#a8a29a; font-size:11px; }
/* シェア系カード：サムネと本文コメントは分ける */
/* 画像つきシェアの本文は、画像の下に「フキダシ」で。長文は2行でカット */
.sp-body{ position:relative; font-size:12px; color:#4a4a4a; line-height:1.7;
  margin:12px 4px 2px; padding:9px 13px; background:#faf7f2; border:1px solid var(--line); border-radius:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:left; }
.sp-body::before{ content:""; position:absolute; top:-7px; left:16px; width:12px; height:12px;
  background:#faf7f2; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg); }
.sp-body[hidden]{ display:none; }
.ss-body{ position:relative; font-size:11.5px; color:#4a4a4a; line-height:1.6;
  margin:10px 4px 2px; padding:8px 11px; background:#faf7f2; border:1px solid var(--line); border-radius:11px;
  max-width:200px; text-align:left;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ss-body::before{ content:""; position:absolute; top:-6px; left:14px; width:10px; height:10px;
  background:#faf7f2; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
.ss-card{ cursor:pointer; }

/* 🤫 守秘のお願い（シェア・発表ボード共通） */
.closed-note{ background:#fdf6e8; border:1px solid #ecd9a8; border-radius:12px;
  padding:11px 16px; font-size:12.5px; line-height:1.9; color:#6a5b3a; margin:0 0 22px; }
.closed-note strong{ color:#8a6d2f; }

/* メンバーカードのURLサムネ（OGP画像・取れたときだけ出る） */
.bd-thumb{ display:block; margin:10px 0 2px; border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/7; }
.bd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:.25s ease; }
.bd-card:hover .bd-thumb img{ transform:scale(1.03); }
.bd-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(18px,2.6vw,24px); transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; }
.bd-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--red),#e8895f); opacity:0; transition:.25s; }
.bd-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(27,27,27,.09); }
.bd-card:hover::before{ opacity:1; }
.bd-head{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.bd-headlink{ display:flex; align-items:center; gap:13px; flex:1; min-width:130px; text-decoration:none; color:inherit; }
.bd-headlink:hover .bd-name{ color:var(--red); }
.bd-head .avatar{ width:52px; height:52px; font-size:19px; flex:none; box-shadow:0 3px 10px rgba(27,27,27,.12); }
.bd-who{ flex:1; min-width:130px; }
.bd-name{ font-size:15.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bd-tagline{ font-size:12.5px; color:var(--red); font-weight:500; margin-top:3px; }
.bd-msg{ flex:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:12px; font-weight:700; color:#555; text-decoration:none; transition:.2s; }
.bd-msg:hover{ border-color:var(--red); background:var(--red); color:#fff; }
.bd-me{ flex:none; font-size:10.5px; font-weight:700; color:#a8a29a; background:#faf7f2; border:1px solid var(--line); border-radius:999px; padding:3px 11px; }
.bd-bio{ font-size:13.5px; line-height:2; color:#3a3a3a; margin-top:13px; white-space:pre-line; word-break:break-word; }
.bd-portfolio{ display:inline-flex; align-items:center; margin-top:11px; padding:6px 13px; background:#faf7f2; border:1px solid var(--line); border-radius:999px; font-size:12px; color:#555; word-break:break-all; transition:.2s; }
.bd-portfolio:hover{ border-color:var(--red); color:var(--red); }
.bd-posts{ margin-top:14px; border-top:1px dashed var(--line); padding-top:4px; }
.bd-post{ padding:12px 0; border-bottom:1px solid #f0ece5; }
.bd-post:last-child{ border-bottom:0; }
.bd-post-title{ font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.bd-post-date{ font-size:11px; font-weight:400; color:#a8a29a; }
.bd-post-body{ font-size:13.5px; line-height:1.95; color:#333; margin-top:4px; white-space:pre-line; word-break:break-word; }
.bd-post .in-link{ font-size:12.5px; color:var(--red); word-break:break-all; }
.bd-post .st-remove{ display:block; margin-top:6px; }

/* =========================================================
   参加案内 LP（公開ゾーン・赤トーン）
   ========================================================= */
.lp-section{ padding-block:clamp(48px,8vw,92px); }
.lp-section.tint{ background:#fdf5f2; }
.lp-eyebrow{ text-align:center; font-family:var(--serif); color:rgba(215,74,57,.6); font-size:12px; letter-spacing:.22em; margin-bottom:10px; }
.lp-h2{ text-align:center; font-family:var(--serif); font-weight:400; color:var(--red); font-size:clamp(24px,3.6vw,38px); line-height:1.5; margin:0 0 clamp(26px,3.5vw,44px); }

/* ヒーロー */
.lp-hero{ text-align:center; padding:clamp(44px,7vw,96px) 0 clamp(40px,6vw,80px); position:relative; overflow:hidden; }
.lp-hero .badge{ font-family:var(--serif); color:var(--red); font-size:13px; letter-spacing:.1em; }
.lp-hero h1{ font-family:var(--serif); font-weight:400; color:var(--red); font-size:clamp(30px,5.6vw,58px); line-height:1.5; margin:20px 0; }
.lp-hero .sub{ color:#5a5148; font-size:clamp(14px,1.5vw,17px); line-height:2; max-width:640px; margin:0 auto 32px; }
.lp-hero .hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* こんな方へ */
.check-list{ max-width:640px; margin:0 auto; display:grid; gap:12px; }
.check-item{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid rgba(215,74,57,.14); border-radius:12px; padding:15px 20px; font-size:14px; color:#4a423a; line-height:1.7; }
.check-item .ic{ color:var(--red); font-weight:700; flex:none; }

/* できること（特徴） */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.feature-card{ background:#fff; border:1px solid rgba(215,74,57,.15); border-radius:16px; padding:clamp(22px,3vw,30px); transition:.2s ease; }
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(215,74,57,.12); }
.feature-card .fc-ico{ font-size:28px; line-height:1; }
.feature-card h3{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:17px; margin:14px 0 8px; }
.feature-card p{ font-size:13px; color:#6a6259; line-height:1.9; }

.feature-card .fc-num{ font-family:var(--serif); color:rgba(215,74,57,.55); font-size:13px; letter-spacing:.14em; }
.feature-card .fc-tag{ display:inline-block; font-size:11px; font-weight:700; color:var(--red); background:rgba(215,74,57,.08); border-radius:999px; padding:2px 10px; margin-left:8px; vertical-align:1px; }
.lp-note{ text-align:center; font-size:13px; color:#8a857c; line-height:2; margin-top:clamp(22px,3vw,30px); }

/* 料金プラン */
.plan-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; margin:0 auto; }
.plan-grid.single{ grid-template-columns:1fr; max-width:480px; }
.plan-grid.triple{ grid-template-columns:repeat(3,1fr); max-width:1040px; }
/* .btn--wide の min-width:356px が3カラム(各333px)を押し広げるので、tripleではカード幅に収める */
.plan-grid.triple .btn--wide{ min-width:0; width:100%; }
/* 3プランはタブレット幅では窮屈なので、900px以下で1カラムに折り返す（tripleは詳細度が高いので専用指定） */
@media (max-width:900px){ .plan-grid.triple{ grid-template-columns:1fr; max-width:460px; } }
.btn.is-pending{ opacity:.55; cursor:default; pointer-events:none; }
.plan-feature--muted{ color:#8a857c !important; font-size:12px !important; }
.plan-feature--muted::before{ content:"—" !important; }
.plan-card{ background:#fff; border:1.5px solid rgba(215,74,57,.22); border-radius:20px; padding:clamp(26px,3vw,38px); text-align:center; position:relative; }
.plan-card.featured{ border-color:var(--red); box-shadow:0 16px 40px rgba(215,74,57,.12); }
.plan-card.featured::before{ content:"おすすめ"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:12px; font-weight:700; padding:3px 16px; border-radius:999px; white-space:nowrap; }
.plan-name{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:18px; }
.plan-name-en{ display:block; font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:.12em; color:var(--ink); line-height:1.2; }
.plan-name-ja{ display:block; font-size:12px; letter-spacing:.16em; color:#8a857c; margin-top:4px; }
.plan-price{ font-family:var(--serif); color:var(--red); font-size:clamp(34px,4vw,44px); margin:8px 0 2px; line-height:1.1; }
.plan-price small{ font-size:14px; color:#8a857c; font-family:var(--sans); }
.plan-features{ list-style:none; text-align:left; margin:20px 0 22px; padding:0; display:grid; gap:10px; }
.plan-features li{ font-size:13px; color:#4a423a; padding-left:24px; position:relative; line-height:1.6; }
.plan-features li::before{ content:"✓"; color:var(--red); font-weight:700; position:absolute; left:2px; }
.plan-note{ font-size:12px; color:#8a857c; margin-top:12px; }
.stripe-note{ text-align:center; font-size:12px; color:#8a857c; margin-top:22px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* 参加の流れ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:840px; margin:0 auto; }
.step{ text-align:center; }
.step .num{ width:48px; height:48px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--serif); font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.step h3{ font-size:15px; color:var(--ink); margin:0 0 8px; }
.step p{ font-size:13px; color:#6a6259; line-height:1.8; }

/* 主宰者 */
.host{ max-width:720px; margin:0 auto; display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,3vw,34px); align-items:center; }
.host .host-photo{ width:120px; height:120px; border-radius:50%; background:var(--red); }
.host .host-name{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:18px; }
.host .host-role{ font-family:var(--serif); color:var(--red); font-size:12px; margin:4px 0 12px; }
.host p{ font-size:14px; color:#5a5148; line-height:1.95; }

/* FAQ */
.faq{ max-width:720px; margin:0 auto; }
.faq details{ border-bottom:1px solid rgba(215,74,57,.16); }
.faq summary{ padding:18px 4px; font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; color:var(--red); font-weight:700; flex:none; }
.faq details[open] summary::after{ content:"−"; }
.faq .faq-a{ padding:0 4px 20px; font-size:14px; color:#6a6259; line-height:1.95; }

/* 最終CTA */
.lp-final{ background:var(--red); color:#fff; text-align:center; padding:clamp(52px,8vw,92px) var(--pad); border-radius:clamp(24px,4vw,40px); margin:0 clamp(0px,2vw,14px) clamp(40px,6vw,70px); }
.lp-final h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,4.2vw,42px); line-height:1.5; margin:0 0 14px; }
.lp-final p{ font-size:14px; opacity:.92; margin-bottom:26px; line-height:1.9; }
.btn--onred{ background:#fff; color:var(--red); }
.btn--onred:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* LPフッター */
.site-footer{ background:var(--ink); color:var(--light); padding:clamp(44px,6vw,70px) 0; }
.site-footer .fbrand{ font-family:var(--serif); font-size:clamp(28px,3vw,38px); line-height:1.2; color:var(--light); }
.site-footer .fsub{ font-family:var(--serif); font-size:13px; letter-spacing:.06em; margin-top:14px; color:var(--light); }

/* =========================================================
   動画視聴ページ（watch.html）
   ========================================================= */
.watch-wrap{ max-width:960px; margin:0 auto; padding:clamp(20px,3vw,32px) var(--pad) clamp(50px,7vw,80px); }
.watch-stage{ background:#000; border-radius:14px; overflow:hidden; margin-bottom:clamp(18px,2.5vw,26px); }
.watch-stage video, .watch-stage iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; margin:0 !important; border-radius:0 !important; }
.watch-title{ font-family:var(--serif); font-weight:700; color:var(--ink); font-size:clamp(20px,2.6vw,28px); line-height:1.5; margin:0 0 8px; }
.watch-meta{ font-family:var(--serif); font-size:13px; color:#8a857c; margin-bottom:18px; }
.watch-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,28px); border-bottom:1px solid var(--line); padding-bottom:clamp(18px,2.5vw,24px); }
.watch-done{ border:1.5px solid var(--red); color:var(--red); background:#fff; border-radius:999px; padding:10px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--sans); transition:.2s; }
.watch-done:hover{ background:var(--red); color:#fff; }
.watch-done.is-done{ background:var(--red); color:#fff; cursor:default; }
.watch-body p{ font-size:14px; line-height:2; color:#3a3a3a; margin-bottom:18px; }
.watch-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:clamp(26px,4vw,38px); font-size:13px; }
.watch-nav a{ color:var(--red); max-width:46%; }
.watch-nav a:hover{ text-decoration:underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .course-hero{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .plan-grid{ grid-template-columns:1fr; max-width:400px; }
  .steps{ grid-template-columns:1fr; max-width:360px; gap:28px; }
  .host{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .course-hero .ch-cover{ aspect-ratio:16/9; min-height:0; }
}
@media (max-width:560px){
  .tr-stats{ display:none; }
  .tpl-grid{ grid-template-columns:1fr; }
}
/* 中間幅：上部カテゴリタブがあるためダークサイドバーは非表示（ナビ重複の整理）。
   ただしホームの「作業のおとも（タイマー＋BGM）」だけは、下部（フッターの上）に残す。 */
@media (max-width:1200px){
  .members-body, .member-page{ grid-template-columns:1fr; }
  .member-page > .sidebar{ display:none; }
  .members-body > .sidebar{ order:2; background:none; border-radius:0; padding:0; }
  .members-body > .sidebar > .cats, .members-body > .sidebar > .sidebar-footer{ display:none; }
  .members-body > .sidebar .work-tools{ margin-top:clamp(28px,5vw,44px); border-color:var(--line); }
}
@media (max-width:900px){
  /* スペース選択バーは廃止（カテゴリタブに一本化）。data-cat の現在地情報源としてDOMには残す */
  .new-banner{ width:min(70%,760px); }
  .journal-body{ grid-template-columns:1fr; }
  .journal-intro{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 48px; }
  .filter{ margin-bottom:0; }
  .journal-intro .desc{ margin-top:0; }
  .journal-cards{ grid-template-columns:repeat(3,1fr); }
  .members-body, .member-page{ grid-template-columns:1fr; }
  .member-page .sidebar{ order:2; }
  .member-content .card-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .sidebar{ order:2; border-radius:0 0 clamp(24px,4vw,50px) clamp(24px,4vw,50px); }
  .sidebar h3{ margin-bottom:24px; }
  .sidebar .cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 40px; align-items:start; }
  .sidebar .cats h3{ grid-column:1 / -1; }
  .sidebar-footer{ margin-top:40px; padding-top:40px; }
}
/* スマホ：記事カードを1カラムに（新着・Journalが2列だと窮屈で見づらい）
   ※上の900pxブロックより後ろに置くこと（カスケードで上書きするため） */
@media (max-width:600px){
  .member-content .card-grid{ grid-template-columns:1fr; }
  .journal-cards{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  /* 追従ヘッダーをスマホでは小さく（背が高すぎたため） */
  .member-header .wrap, .sub-header .wrap{ padding-block:9px; gap:10px; }
  .member-header-actions, .sub-header-actions{ gap:8px; }
  .member-header .mh-avatar{ width:33px; height:33px; font-size:13px; }
  .member-header .mh-icon{ width:33px; height:33px; }
  .member-header .mh-icon svg{ width:17px; height:17px; }
  .adm-link{ font-size:12px; padding:.44em .85em; }
  .mh-top{ font-size:11px; }

  .new-banner{ width:100%; }
  .journal-cards{ grid-template-columns:1fr; max-width:420px; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:1fr; max-width:460px; }
  .feature{ grid-template-columns:1fr; }
  .feature .fimg{ order:-1; }
  .header-line{ display:none; }
  .sidebar .cats{ grid-template-columns:1fr; }

  /* 下部固定ナビを表示。コンテンツが隠れないよう本文下に余白を確保 */
  body:has(.member-tabbar){ padding-bottom:66px; }

  /* チャットの入力欄が下部ナビの裏に隠れて押しにくかったので、ナビの上に出す */
  body:has(.member-tabbar) .chat-composer{ bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* お題フッター・返信の操作ボタンは、狭い画面で折り返して枠内に収める */
  .op-foot, .r-actions{ flex-wrap:wrap; gap:12px 16px; }
  .member-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--ink); border-top:1px solid #2c2c2c;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(27,27,27,.18);
  }
  .mt-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#9d968c; font-size:10px; font-weight:500; padding:6px 2px; transition:color .2s ease;
  }
  .mt-item .mt-ico{ position:relative; display:inline-flex; }
  .mt-item svg{ width:23px; height:23px; }
  .mt-item.is-active{ color:var(--yellow); }
  .mt-item .unread{ position:absolute; top:-5px; right:-7px; border:2px solid var(--ink); }
}
@media (max-width:460px){
  .card-grid{ grid-template-columns:1fr; }
  .header-actions{ align-self:stretch; }
  .header-info{ max-width:none; }
}

/* =========================================================
   ANIMATION (progressive enhancement — needs .js)
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

.js .header-line{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.js .header-line.drawn{ transform:rotate(-22deg) scaleX(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .header-line{ transform:rotate(-22deg) scaleX(1) !important; }
  .filter-btn.is-active .badge-loop path{ animation:none !important; stroke-dashoffset:0 !important; }
  .btn:hover, .jcard:hover .thumb, .pcard:hover .thumb, .new-banner:hover, .filter-btn:hover{ transform:none !important; }
}

/* =============================================================
   ☀️ 朝礼のにぎわい（§79・2026-08-20）
   ・縦長カード型×自動横スクロール維持（ayako指定＝ストーリーズ風。
     テロップの流れはそのまま、名札カードを縦長に）
   ・きょうのお題／🔥できた！／絵文字リアクション／🏢作業中チップ
   ============================================================= */
.st-track{ gap:14px; }
.st-set{ gap:14px; align-items:stretch; }
.st-track .st-card{ flex-direction:column; align-items:flex-start; gap:8px;
  width:180px; min-height:168px; box-sizing:border-box;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; }
.st-card .st-name{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.st-card .st-text{ white-space:normal; line-height:1.7; word-break:break-word; }
  /* 行数は切り詰めない＝入力上限60字がまるごと入る（ayako指定 2026-08-20）。
     カードは必要なぶん縦に伸び、.st-set の align-items:stretch で高さが揃う */
.st-card .clap-btn{ margin-top:auto; align-self:flex-start; }
.st-prompt{ display:block; width:100%; text-align:left; background:#fdf9ef; border:1px dashed #e6d9b8; border-radius:10px; padding:9px 14px; font-size:12.5px; color:#6b665d; margin:0 0 12px; cursor:pointer; font-family:var(--sans); line-height:1.7; }
.st-prompt b{ color:#8a6d16; }
.st-prompt:hover{ border-style:solid; }
.st-done-btn{ background:#fdf3ee; border-color:#e8b9a5; color:#c94f2e; }
.st-done-btn:disabled{ opacity:1; cursor:default; }
/* 見出し行：タイトル左・ボタンは右にまとめて隣接（できた！が孤立して見えた対策） */
.st-head{ justify-content:flex-start; }
.st-head .mh-section-title{ margin-right:auto; }
.st-donechip,.st-workchip{ margin-left:6px; font-size:10px; font-weight:700; border-radius:999px; padding:2px 7px; }
.st-donechip{ color:#b25a1b; background:#fdf0dd; border:1px solid #f0d9b8; }
.st-workchip{ color:#2e7d43; background:#eef7ee; border:1px solid #cfe4cf; }
.status-ticker{ position:relative; }
.st-react-picker{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:4px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; box-shadow:0 8px 22px rgba(0,0,0,.14); z-index:5; }
.st-react-picker[hidden]{ display:none; }
.st-react-em{ font-size:19px; background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:8px; line-height:1; }
.st-react-em:hover{ background:#f6f2ea; }
.st-react-em.on{ background:#fdf3ee; }