@charset "UTF-8";
/* ==========================================================================
   KAIWAI — スタイル「ソフト・フューチャー」
   雲のように白い面、マシュマロのような丸いカード、方眼の背景、等幅の小さな英字ラベル。
   かわいさ（丸み・パステル・ふわっと動く）と、かっこよさ（細い線・揃った数字・墨色）を両立させる。
   スマホを基準に組み、広い画面は min-width で足していく（モバイルファースト）。
   グラデーション・光彩・絵文字は使わない。

    1. トークン       2. ベース         3. 文字           4. 骨組み
    5. ロゴ           6. 部品           7. ホーム         8. 板・タブ
    9. スレッド一覧   10. 投稿          11. 広告          12. シート
   13. 投稿フォーム   14. マイページ     15. ビューア・通知  16. 静的ページ
   17. 広い画面       18. 動き           19. アクセシビリティ
   ========================================================================== */

/* ============ 1. トークン ============ */
:root{
  color-scheme:light;

  --bg:#eef0f7;            /* 方眼の下地 */
  --dot:#d6dae8;           /* 方眼の点 */
  --card:#ffffff;
  --card-2:#f4f5fa;        /* 入力欄・小さな面 */
  --card-3:#e9ebf3;        /* 押したとき */
  --line:#e4e7f0;
  --line-2:#cfd4e3;
  --glass:rgba(255,255,255,.82);

  --ink:#121429;           /* 文字 */
  --ink-2:#4b4f6e;
  --ink-3:#7f84a0;

  --pink:#ff4f8b;          /* ブランド色（面・アイコン） */
  --pink-ink:#d81c63;      /* 白の上の文字に使う濃いめのピンク */
  --pink-bg:#ffe8f0;
  --mint:#14c7a6;
  --mint-ink:#0a8a73;
  --mint-bg:#dcf7f0;
  --sky:#4b8bff;
  --link:#2d5bff;
  --lemon:#ffd43b;
  --lemon-bg:#fff4c7;
  --amber-ink:#a86200;

  --danger:#e3354d;
  --danger-bg:#ffe6ea;
  --ok:#0f9c6e;
  --warn-bg:#fff2cc;
  --warn-fg:#7a5400;

  --scrim:rgba(18,20,41,.42);
  --toast-bg:#121429;
  --toast-fg:#f4f5fa;

  /* ふわっと浮かぶ影（光らせない。下に落ちる柔らかい影だけ） */
  --sh-1:0 1px 2px rgba(18,20,41,.04), 0 8px 22px -14px rgba(18,20,41,.22);
  --sh-2:0 2px 4px rgba(18,20,41,.04), 0 18px 40px -18px rgba(18,20,41,.38);
  --sh-press:0 1px 1px rgba(18,20,41,.05);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:30px; --r-full:999px;

  --f-ui:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
         system-ui,-apple-system,BlinkMacSystemFont,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --f-disp:"Unbounded","Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;

  --col:640px;
  --gut:12px;
  --top-h:56px;
  --dock-h:58px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);   /* ぽよんと行き過ぎて戻る */
  --ease-sheet:cubic-bezier(.32,.72,0,1);
}

/* 夜（OS の設定、またはマイページで「ダーク」） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0b0d18; --dot:#1b1f34; --card:#141729; --card-2:#1b1f35; --card-3:#242944;
    --line:#232843; --line-2:#323858; --glass:rgba(20,23,41,.8);
    --ink:#eef0ff; --ink-2:#b3b8d6; --ink-3:#7d83a6;
    --pink:#ff5d97; --pink-ink:#ff86b0; --pink-bg:#3a1828;
    --mint:#2fe0bf; --mint-ink:#5fe9cf; --mint-bg:#0f3029;
    --sky:#7aa6ff; --link:#8fb0ff; --lemon:#ffd84f; --lemon-bg:#352c0c; --amber-ink:#ffc35a;
    --danger:#ff6b80; --danger-bg:#3a1520; --ok:#47d6a2; --warn-bg:#33290c; --warn-fg:#ffd77a;
    --scrim:rgba(0,0,0,.6); --toast-bg:#eef0ff; --toast-fg:#121429;
    --sh-1:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px -16px rgba(0,0,0,.8);
    --sh-2:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 46px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0d18; --dot:#1b1f34; --card:#141729; --card-2:#1b1f35; --card-3:#242944;
  --line:#232843; --line-2:#323858; --glass:rgba(20,23,41,.8);
  --ink:#eef0ff; --ink-2:#b3b8d6; --ink-3:#7d83a6;
  --pink:#ff5d97; --pink-ink:#ff86b0; --pink-bg:#3a1828;
  --mint:#2fe0bf; --mint-ink:#5fe9cf; --mint-bg:#0f3029;
  --sky:#7aa6ff; --link:#8fb0ff; --lemon:#ffd84f; --lemon-bg:#352c0c; --amber-ink:#ffc35a;
  --danger:#ff6b80; --danger-bg:#3a1520; --ok:#47d6a2; --warn-bg:#33290c; --warn-fg:#ffd77a;
  --scrim:rgba(0,0,0,.6); --toast-bg:#eef0ff; --toast-fg:#121429;
  --sh-1:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px -16px rgba(0,0,0,.8);
  --sh-2:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 46px -18px rgba(0,0,0,.9);
}

/* 板の色（--h は板ごとの色相）。明るいときはパステル、夜は深い色 */
:root{
  --b-bg:hsl(var(--h, 220) 100% 95%);
  --b-sym:hsl(var(--h, 220) 92% 86%);
  --b-ink:hsl(var(--h, 220) 62% 32%);
  --b-line:hsl(var(--h, 220) 70% 82%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --b-bg:hsl(var(--h, 220) 34% 16%);
    --b-sym:hsl(var(--h, 220) 46% 30%);
    --b-ink:hsl(var(--h, 220) 90% 84%);
    --b-line:hsl(var(--h, 220) 40% 32%);
  }
}
:root[data-theme="dark"]{
  --b-bg:hsl(var(--h, 220) 34% 16%);
  --b-sym:hsl(var(--h, 220) 46% 30%);
  --b-ink:hsl(var(--h, 220) 90% 84%);
  --b-line:hsl(var(--h, 220) 40% 32%);
}
/* 変数を使う要素ごとに計算し直す（--h を受け取った要素で色が決まる） */
.in-board, .bchip, .bsym, .btile, .brow, .trow, .side-boards a, .cmp-board, .bhero{
  --b-bg:hsl(var(--h, 220) 100% 95%);
  --b-sym:hsl(var(--h, 220) 92% 86%);
  --b-ink:hsl(var(--h, 220) 62% 32%);
  --b-line:hsl(var(--h, 220) 70% 82%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.in-board, .bchip, .bsym, .btile, .brow, .trow, .side-boards a, .cmp-board, .bhero){
    --b-bg:hsl(var(--h, 220) 34% 16%);
    --b-sym:hsl(var(--h, 220) 46% 30%);
    --b-ink:hsl(var(--h, 220) 90% 84%);
    --b-line:hsl(var(--h, 220) 40% 32%);
  }
}
:root[data-theme="dark"] :is(.in-board, .bchip, .bsym, .btile, .brow, .trow, .side-boards a, .cmp-board, .bhero){
  --b-bg:hsl(var(--h, 220) 34% 16%);
  --b-sym:hsl(var(--h, 220) 46% 30%);
  --b-ink:hsl(var(--h, 220) 90% 84%);
  --b-line:hsl(var(--h, 220) 40% 32%);
}

/* ============ 2. ベース ============ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  scroll-padding-top:calc(var(--top-h) + var(--safe-t) + 12px);
}
html.lock{overflow:hidden}

body{
  margin:0;
  min-height:100vh; min-height:100dvh;
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:15px;
  font-weight:500;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 方眼の点（近未来の設計図のような下地） */
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size:22px 22px;
  background-position:-11px -11px;
}

/* iOS は 16px 未満の入力欄にフォーカスすると勝手に拡大するので、16px 以上に固定（拡大禁止はしない） */
input,textarea,select{font-size:16px; font-family:inherit}
input[type=checkbox],input[type=radio]{font-size:inherit}
button{font-family:inherit; color:inherit; touch-action:manipulation}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{margin:0; line-height:1.4}
p{margin:0}
ul,ol{margin:0}
b,strong{font-weight:700}

:focus{outline:none}
:focus-visible{outline:2.5px solid var(--sky); outline-offset:2px; border-radius:8px}
::selection{background:color-mix(in srgb,var(--pink) 26%,transparent)}

/* ============ 3. 文字 ============ */
body{line-break:strict; overflow-wrap:anywhere; text-autospace:normal}
.top, .dock, .btn, .sheet-head, .mi, .p-head, .act, .toast, .newpill, .tabs, .sec-h, h1, h2, h3{font-feature-settings:"palt" 1}
/* こちらで用意した文章は <wbr> の位置（文節の切れ目）でだけ折り返す */
.wb{word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty}
.nw{white-space:nowrap}
.mono{font-family:var(--f-mono)}

/* 近未来の小さな英字ラベル（BOARD / NOW など） */
.eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.18em; color:var(--ink-3);
  text-transform:uppercase; line-height:1.4;
}
.eyebrow i{width:4px; height:4px; border-radius:50%; background:var(--pink)}

/* ============ 4. 骨組み ============ */
.shell{min-height:100vh; min-height:100dvh}
.page{min-width:0}
.rail, .side{display:none}
.main{
  width:100%; max-width:var(--col); margin-inline:auto;
  padding:10px var(--gut) calc(var(--dock-h) + var(--safe-b) + 28px);
}

/* 上部（スマホ）: すりガラスの帯 */
.top{
  position:sticky; top:0; z-index:40;
  padding-top:var(--safe-t);
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  view-transition-name:top;
}
.top-in{display:flex; align-items:center; gap:4px; height:var(--top-h); max-width:var(--col); margin-inline:auto; padding:0 6px 0 12px}
.top-sp{flex:1}
.top .back{margin-left:-6px}

/* 下の帯（スマホ）: 画面の下端に付いたタブバー。iPhone のホームバーの分（safe-area）だけ下に余白を足す */
.dock{
  position:fixed; z-index:45; left:0; right:0; bottom:0;
  display:flex; align-items:stretch;
  height:calc(var(--dock-h) + var(--safe-b));
  padding:0 max(4px, env(safe-area-inset-right,0px)) var(--safe-b) max(4px, env(safe-area-inset-left,0px));
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  backdrop-filter:blur(20px) saturate(1.7);
  border-top:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  view-transition-name:dock;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.nv{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink-3); font-size:10.5px; font-weight:700; letter-spacing:.02em; text-decoration:none;
  transition:color .2s;
}
.nv:hover{text-decoration:none; color:var(--ink)}
.nv .ic{width:24px; height:24px; transition:transform .3s var(--ease-pop)}
.nv:active .ic{transform:scale(.86)}
.nv.on{color:var(--ink)}
.nv.on .ic{stroke-width:2.3}
.nv span{line-height:1}
.nv .nv-mark{width:25px; height:25px; border-radius:9px}
.nv.on .nv-mark, .nv:focus-visible .nv-mark{box-shadow:0 0 0 2px var(--ink)}
.nbadge{
  position:absolute; top:6px; left:calc(50% + 5px);
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--pink); color:#fff; font-style:normal;
  font-family:var(--f-mono); font-size:10px; font-weight:700; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px var(--card);
}
/* まんなかの「書く」: 帯の中に収まる、ぷっくりしたボタン */
.dock-post{flex:0 0 74px}
.dp-in{
  display:grid; place-items:center;
  width:56px; height:40px; border-radius:15px;
  background:var(--pink); color:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.3), 0 6px 14px -8px color-mix(in srgb,var(--pink) 90%,transparent);
  transition:transform .3s var(--ease-pop), border-radius .3s var(--ease);
}
.dp-in .ic{width:24px; height:24px; stroke-width:2.5}
.dock-post:active .dp-in{transform:scale(.9); border-radius:20px}

/* ============ 5. ロゴ ============ */
.brand{display:inline-flex; align-items:center; gap:9px; min-width:0; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.logo-mark{width:34px; height:34px; flex:none; overflow:visible}
.logo-mark .lm-body, .hero-mascot .lm-body, .empty-mascot .lm-body, .cta-mascot .lm-body{fill:var(--pink)}
.lm-eye{fill:#1b1d33}
.lm-glint{fill:#fff}
.lm-blush{fill:#fff; opacity:.42}
.brand-t{display:flex; flex-direction:column; min-width:0; line-height:1.1}
.brand-t b{font-family:var(--f-disp); font-size:19px; font-weight:700; letter-spacing:.04em}
.brand-t small{font-size:10px; font-weight:700; color:var(--ink-3); letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.brand:hover .logo-mark{animation:wobble .6s var(--ease-pop)}
@keyframes wobble{30%{transform:rotate(-10deg) scale(1.06)} 60%{transform:rotate(6deg)}}

/* ============ 6. 部品 ============ */
.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

.icbtn{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border:0; border-radius:16px; background:none; color:var(--ink);
  cursor:pointer; transition:background .15s, transform .2s var(--ease-pop);
}
.icbtn:hover{background:var(--card-2)}
.icbtn:active{transform:scale(.9)}
.icbtn .ic{width:23px; height:23px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:46px; padding:0 22px;
  border:1.5px solid transparent; border-radius:var(--r-full);
  background:var(--ink); color:var(--card);
  font:inherit; font-size:15px; font-weight:700; letter-spacing:.04em;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  box-shadow:var(--sh-1);
  transition:transform .25s var(--ease-pop), background .15s, opacity .15s, box-shadow .2s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px); color:var(--card)}
.btn:active{transform:scale(.96); box-shadow:var(--sh-press)}
.btn:disabled{opacity:.35; cursor:default; transform:none}
.btn .ic{width:18px; height:18px; stroke-width:2.2}
.btn.pink{background:var(--pink); color:#fff}
.btn.ghost{background:var(--card); border-color:var(--line-2); color:var(--ink); box-shadow:none}
.btn.ghost:hover{background:var(--card-2); color:var(--ink)}
.btn.ink{background:var(--ink); color:var(--card)}
.btn.danger{background:var(--danger); color:#fff}
.btn.danger:hover{color:#fff}
.btn.sm{height:36px; padding:0 15px; font-size:13.5px}
.btn.block{width:100%; height:54px; font-size:16px}

.mini{
  border:0; background:var(--card-2); padding:5px 11px; border-radius:var(--r-full);
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer;
}
.mini:hover{color:var(--ink); background:var(--card-3)}
.link{border:0; background:none; padding:0; color:var(--link); font:inherit; font-weight:700; cursor:pointer}
.pill-link{display:inline-flex; align-items:center; gap:4px; height:36px; padding:0 14px 0 10px; border-radius:var(--r-full); background:var(--card-2); color:var(--ink); font-size:13.5px; font-weight:700}
.pill-link:hover{text-decoration:none; background:var(--card-3)}
.pill-link .ic{width:17px; height:17px}

/* 入力（16px 未満にしない: iOS の自動ズーム対策） */
.in{
  width:100%; min-height:50px; padding:12px 16px;
  background:var(--card-2); color:var(--ink);
  border:1.5px solid transparent; border-radius:16px;
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.6;
  outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.in::placeholder{color:var(--ink-3); opacity:1}
.in:focus{border-color:var(--ink); background:var(--card); box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 16%,transparent)}
.in.mono{font-family:var(--f-mono); letter-spacing:.06em}
textarea.in{resize:vertical}
select.in{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:40px; cursor:pointer;
}
.field{display:block; margin-top:16px}
.field:first-child{margin-top:0}
.field > span{display:flex; justify-content:space-between; gap:8px; margin:0 4px 7px; font-size:13px; font-weight:700; color:var(--ink-2)}
.field > span small{font-weight:500; color:var(--ink-3)}
.pw-wrap{position:relative; display:block}
.pw-wrap .in{padding-right:70px}
.pw-wrap button{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  height:36px; padding:0 12px; border:0; border-radius:12px; background:var(--card);
  color:var(--ink-2); font-size:13px; font-weight:700; cursor:pointer;
}

.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1)}

.flash{
  margin:0 0 12px; padding:12px 16px; border-radius:var(--r);
  font-size:14px; line-height:1.6; font-weight:700;
}
.flash.ok{background:var(--mint-bg); color:var(--mint-ink)}
.flash.error{background:var(--danger-bg); color:var(--danger)}

.hint{font-size:12.5px; line-height:1.75; color:var(--ink-3)}
.formerr{
  margin-top:12px; padding:11px 14px; border-radius:14px;
  background:var(--danger-bg); color:var(--danger);
  font-size:13.5px; font-weight:700; line-height:1.6;
}
.badge{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px;
  border-radius:var(--r-full); background:var(--card-2);
  font-size:11.5px; font-weight:700; color:var(--ink-2); white-space:nowrap;
}
.badge.r{background:var(--danger-bg); color:var(--danger)}
.badge.a{background:var(--pink-bg); color:var(--pink-ink)}
.badge.g{background:var(--mint-bg); color:var(--mint-ink)}
.badge.y{background:var(--lemon-bg); color:var(--amber-ink)}

/* 板の記号（四角）と、板の札（小） */
.bsym{
  flex:none; display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:14px;
  background:var(--b-sym); color:var(--b-ink);
  font-family:var(--f-disp); font-size:17px; font-weight:700; line-height:1;
}
.bsym.sm{width:26px; height:26px; border-radius:9px; font-size:12px}
.bsym.xl{width:64px; height:64px; border-radius:22px; font-size:28px; box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--b-ink) 12%,transparent)}
.bchip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  height:26px; padding:0 10px 0 3px; border-radius:var(--r-full);
  background:var(--b-bg); color:var(--b-ink);
  font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none;
}
.bchip:hover{text-decoration:none; filter:saturate(1.2)}
.bc-sym{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:7px; background:var(--b-sym); font-family:var(--f-disp); font-size:10px}

/* 見出し */
.sec{margin-top:26px}
.sec-h{
  display:flex; align-items:center; gap:8px;
  margin:0 4px 12px; font-size:18px; font-weight:900; letter-spacing:.04em;
}
.sec-h .ic{width:21px; height:21px; color:var(--pink)}
.sec-h small{font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.sec-more{margin-left:auto; display:inline-flex; align-items:center; gap:2px; font-size:13px; font-weight:700; color:var(--ink-2)}
.sec-more .ic{width:16px; height:16px; color:inherit}
.sec-more:hover{text-decoration:none; color:var(--ink)}

.page-head{padding:12px 6px 4px}
.page-head h1{margin-top:6px; font-size:28px; font-weight:900; letter-spacing:.04em}
.page-head > p.wb{margin-top:6px; font-size:14px; color:var(--ink-2)}

/* 空のとき */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:40px 24px 36px; margin-top:4px;
  text-align:center; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.empty.small{padding:22px 20px; font-size:14px; color:var(--ink-3)}
.empty.big{margin-top:30px; padding:56px 24px}
.empty-mascot{width:64px; height:64px; overflow:visible; animation:float 4s ease-in-out infinite}
.empty-mascot .lm-body{fill:var(--line-2)}
.empty b{font-size:17px; font-weight:900}
.empty .wb{font-size:14px; color:var(--ink-3)}
.empty .btn{margin-top:10px}
@keyframes float{50%{transform:translateY(-6px) rotate(-3deg)}}

.more-wrap{display:flex; justify-content:center; padding:18px 0 4px}
.more-wrap.top{padding:4px 0 12px}
.more-wrap .btn{min-width:180px}

/* ============ 7. ホーム ============ */
.hero{
  position:relative; overflow:hidden;
  margin-top:4px; padding:22px 20px 18px;
  background:var(--card);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  isolation:isolate;
}
/* 細い方眼の線（設計図のような面） */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--line) 70%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--line) 70%,transparent) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom left, #000 10%, transparent 75%);
  mask-image:linear-gradient(to bottom left, #000 10%, transparent 75%);
}
/* 四隅の小さなかぎ */
.hero::after{
  content:""; position:absolute; inset:10px; pointer-events:none;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) left top/10px 1.5px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) left top/1.5px 10px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) right bottom/10px 1.5px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) right bottom/1.5px 10px no-repeat;
  opacity:.5;
}
.hero-in{position:relative; z-index:1}
.hero-t{
  margin-top:10px; max-width:13em;
  font-size:clamp(27px, 8.2vw, 40px); font-weight:900; line-height:1.28; letter-spacing:.02em;
}
.hero-t em{
  font-style:normal;
  background:linear-gradient(transparent 62%, color-mix(in srgb,var(--pink) 32%,transparent) 62%);
  padding:0 .06em;
}
.hero-sub{margin-top:8px; max-width:24em; font-size:13.5px; color:var(--ink-2); line-height:1.75}
.hero-total{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; margin-top:16px; padding-top:14px; border-top:1.5px dashed var(--line)}
.hero-total b{font-family:var(--f-disp); font-size:clamp(32px, 10vw, 44px); font-weight:700; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.hero-total small{font-size:12.5px; font-weight:700; color:var(--ink-3)}
.hero-mascot{
  position:absolute; z-index:0; right:-6px; top:10px;
  width:88px; height:88px; overflow:visible;
  animation:float 5s ease-in-out infinite;
}
.hero .eyebrow{padding-right:76px}
.hero-orb{position:absolute; z-index:0; border-radius:50%; pointer-events:none}
.hero-orb.o1{right:78px; top:74px; width:14px; height:14px; background:var(--lemon)}
.hero-orb.o2{right:22px; top:104px; width:10px; height:10px; background:var(--mint); animation:float 3.6s ease-in-out infinite}

/* 板の札（ホーム） */
.btiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.btile{
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:10px 12px 10px 10px; border-radius:20px;
  background:var(--card); color:var(--ink); text-decoration:none;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease-pop), box-shadow .2s;
}
.btile:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh-2)}
.btile:active{transform:scale(.97)}
.bt-t{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.bt-t b{font-size:14.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bt-t small{font-size:11px; font-weight:700; color:var(--ink-3); white-space:nowrap}
.bt-t em{font-style:normal; font-family:var(--f-disp); color:var(--pink-ink)}
.favs{margin-bottom:8px}
.favs .btile{box-shadow:inset 0 0 0 2px var(--b-line), var(--sh-1)}
.favs-h{display:flex; align-items:center; gap:5px; margin:0 4px 8px; font-size:12px; font-weight:700; color:var(--ink-3)}
.favs-h .ic{width:15px; height:15px; color:var(--lemon); fill:var(--lemon)}

/* ---- アプリとして使う ---- */
/* ホーム画面から開いているとき（is-app）は、案内を出さない */
.is-app [data-install-ui], .is-app-installed [data-install-ui], .ab-off .appbar{display:none !important}

.appcard{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center;
  margin-top:12px; padding:18px 18px 18px 16px;
  border-radius:var(--r-xl);
  background:var(--ink); color:var(--card);
  box-shadow:var(--sh-2);
  isolation:isolate;
}
.appcard::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.appcard .eyebrow{color:color-mix(in srgb,var(--card) 60%,transparent)}
.ac-t{margin-top:6px; font-size:20px; font-weight:900; line-height:1.4; letter-spacing:.02em}
.ac-d{margin-top:6px; font-size:12.5px; line-height:1.75; color:color-mix(in srgb,var(--card) 72%,transparent)}
.ac-btn{grid-column:1 / -1; width:100%; height:50px; padding:0 18px; color:#fff; box-shadow:0 10px 22px -10px color-mix(in srgb,var(--pink) 90%,transparent)}
@media (min-width:480px){ .ac-btn{grid-column:2; justify-self:start; width:auto; margin-top:-6px} .appcard{row-gap:0} }
.ac-btn:hover{color:#fff}
/* 電話の絵（ホーム画面にアイコンが増える） */
.ac-art{position:relative; width:84px}
.ac-phone{
  position:relative; display:flex; flex-direction:column; align-items:center;
  width:84px; height:150px; padding:16px 9px 9px; border-radius:22px;
  background:color-mix(in srgb,var(--card) 10%,var(--ink));
  box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--card) 70%,transparent);
  transform:rotate(-6deg);
}
.ac-notch{position:absolute; top:7px; width:26px; height:5px; border-radius:3px; background:color-mix(in srgb,var(--card) 45%,transparent)}
.ac-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%}
.ac-grid i, .ac-grid img{display:block; width:100%; aspect-ratio:1/1; border-radius:6px; background:color-mix(in srgb,var(--card) 18%,transparent)}
.ac-grid img{animation:app-pop 2.8s var(--ease-pop) infinite; box-shadow:0 0 0 2px var(--ink)}
.ac-dock{display:flex; gap:5px; margin-top:auto; padding:5px; border-radius:9px; background:color-mix(in srgb,var(--card) 12%,transparent)}
.ac-dock i{width:14px; height:14px; border-radius:5px; background:color-mix(in srgb,var(--card) 25%,transparent)}
.ac-plus{
  position:absolute; right:-8px; top:40px; display:grid; place-items:center;
  width:30px; height:30px; border-radius:11px; background:var(--pink); color:#fff;
  box-shadow:0 0 0 3px var(--ink);
  animation:float 3s ease-in-out infinite;
}
.ac-plus .ic{width:18px; height:18px; stroke-width:2.6}
@keyframes app-pop{0%,55%,100%{transform:none} 65%{transform:scale(1.25)} 78%{transform:scale(.92)}}

/* ほかのページの上の帯（スマホのブラウザだけ） */
.appbar{display:flex; align-items:center; gap:4px; margin:4px 0 10px; padding:6px 6px 6px 8px; border-radius:20px; background:var(--card); box-shadow:var(--sh-1)}
.ab-main{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer}
.ab-main img{flex:none; width:40px; height:40px; border-radius:12px}
.ab-t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.ab-t b{font-size:14px; font-weight:900}
.ab-t small{font-size:11.5px; font-weight:700; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ab-go{flex:none; height:32px; padding:0 14px; border-radius:var(--r-full); background:var(--pink); color:#fff; font-size:13px; font-weight:900; line-height:32px}
.ab-x{flex:none; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:10px; background:none; color:var(--ink-3); cursor:pointer}
.ab-x .ic{width:16px; height:16px}
@media (min-width:760px){ .appbar{display:none} }

/* 追加の手順 */
.in-hero{display:flex; align-items:center; gap:14px}
.in-icon{flex:none; width:68px; height:68px; border-radius:20px; box-shadow:var(--sh-2)}
.in-name{display:flex; flex-direction:column; gap:2px}
.in-name b{font-family:var(--f-disp); font-size:20px}
.in-name span{font-size:13px; line-height:1.6; color:var(--ink-2)}
.in-merits{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:16px 0 18px; padding:0; list-style:none}
.in-merits li{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:16px; background:var(--card-2); text-align:center}
.in-merits .ic{width:22px; height:22px; color:var(--pink-ink)}
.in-merits span{font-size:10.5px; font-weight:700; line-height:1.45; color:var(--ink-2); word-break:keep-all}
.in-steps{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; counter-reset:none}
.in-steps li{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 12px; border-radius:18px; background:var(--card-2)}
.st-n{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:var(--ink); color:var(--card); font-family:var(--f-disp); font-size:13px}
.st-t{flex:1; min-width:0; font-size:14.5px; line-height:1.55}
.st-t small{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3); line-height:1.6}
.st-ic{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--card); color:var(--link); box-shadow:var(--sh-1)}
.st-ic .ic{width:22px; height:22px}
.st-txt{font-size:13px; font-weight:900; color:var(--link)}
.in-arrow{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:12px; font-size:12px; font-weight:700; color:var(--ink-3)}
.in-arrow .ic{width:16px; height:16px; transform:rotate(90deg); animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:rotate(90deg) translateX(4px)}}
.in-warn{display:flex; gap:10px; margin-bottom:12px; padding:12px 14px; border-radius:16px; background:var(--warn-bg); color:var(--warn-fg); font-size:13.5px; line-height:1.7}
.in-warn .ic{flex:none; margin-top:3px}
.in-way .btn.block + .in-steps, .in-way .in-steps + .btn, .in-way .hint + .btn{margin-top:12px}
.in-way .hint{margin-top:12px}
.mi-app > .ic{color:var(--pink-ink)}
.mi-app{background:var(--pink-bg)}
.mi-app:hover{background:var(--pink-bg)}

/* ============ 8. 板・タブ ============ */
.bhero{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:center;
  margin-top:4px; padding:18px 16px 16px 18px;
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  isolation:isolate;
}
.bhero::before{
  content:""; position:absolute; z-index:-1; right:-60px; top:-70px;
  width:200px; height:200px; border-radius:50%; background:var(--b-bg);
}
.bhero > .bsym{grid-row:1; align-self:start}
.bh-main{min-width:0}
.bh-t{margin-top:4px; font-size:25px; font-weight:900; letter-spacing:.03em; line-height:1.25}
.bh-t small{margin-left:3px; font-size:15px; color:var(--ink-3)}
.bh-d{margin-top:3px; font-size:13px; color:var(--ink-2); line-height:1.6}
.bh-stats{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.bh-stats span{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-full); background:var(--card-2); font-size:11.5px; font-weight:700; color:var(--ink-3)}
.bh-stats b{font-family:var(--f-disp); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.bh-note{grid-column:1 / -1; margin-top:8px; padding:8px 12px; border-radius:12px; background:var(--card-2); font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.fav-btn{
  align-self:start; display:grid; place-items:center;
  width:44px; height:44px; border:0; border-radius:16px; background:var(--card-2); color:var(--ink-3); cursor:pointer;
  transition:transform .35s var(--ease-pop), color .2s, background .2s;
}
.fav-btn .ic{width:22px; height:22px}
.fav-btn[aria-pressed="true"]{background:var(--lemon-bg); color:var(--amber-ink)}
.fav-btn[aria-pressed="true"] .ic{fill:var(--lemon); stroke:var(--amber-ink)}
.fav-btn:active{transform:scale(.85) rotate(-12deg)}

.tabs{
  position:sticky; top:calc(var(--top-h) + var(--safe-t) + 8px); z-index:30;
  display:flex; gap:3px; margin:14px 0 10px; padding:4px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:var(--r-full); box-shadow:var(--sh-1);
}
.tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:40px; border-radius:var(--r-full);
  color:var(--ink-3); font-size:13.5px; font-weight:900; letter-spacing:.02em; white-space:nowrap; text-decoration:none;
  transition:color .2s, background .2s;
}
.tab .ic{width:17px; height:17px}
.tab:hover{text-decoration:none; color:var(--ink)}
.tab.on{background:var(--ink); color:var(--card); view-transition-name:tab-on}

/* 書き込みのきっかけ */
.prompt{
  display:flex; align-items:center; gap:10px; width:100%;
  margin:0 0 10px; padding:8px 8px 8px 10px;
  border:1.5px dashed var(--line-2); border-radius:22px;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  cursor:pointer; text-align:left; color:var(--ink-3);
  transition:border-color .2s, background .2s;
}
.prompt:hover{border-color:var(--ink-3); background:var(--card)}
.prompt-t{flex:1; min-width:0; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.prompt-go{display:grid; place-items:center; width:38px; height:38px; border-radius:14px; background:var(--pink); color:#fff; flex:none}
.prompt-go .ic{width:18px; height:18px; stroke-width:2.2}
.no-js .prompt, .no-js .reply-bar{display:none}

/* 板の一覧（板の一覧ページ） */
.blist{display:flex; flex-direction:column; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden}
.brow{display:flex; align-items:center; gap:12px; padding:12px 14px; color:var(--ink); text-decoration:none; border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow:hover{text-decoration:none; background:var(--card-2)}
.br-main{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.br-main b{font-size:15px; font-weight:900}
.br-main span{font-size:12px; color:var(--ink-3)}
.br-n{display:flex; flex-direction:column; align-items:center; min-width:40px; line-height:1.1}
.br-n b{font-family:var(--f-disp); font-size:16px}
.br-n small{font-size:10px; font-weight:700; color:var(--ink-3)}

/* 検索 */
.searchbox{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.sb-in{position:relative; display:block}
.sb-in .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-3)}
.sb-in input{
  width:100%; height:54px; padding:0 18px 0 46px; border:1.5px solid transparent; border-radius:var(--r-full);
  background:var(--card); color:var(--ink); box-shadow:var(--sh-1); outline:none;
  -webkit-appearance:none; appearance:none;
}
.sb-in input:focus{border-color:var(--ink)}
.sb-row{display:flex; gap:8px}
.sb-row select{flex:1; min-height:46px; border-radius:var(--r-full); background-color:var(--card)}
.result-note{margin:14px 6px 10px; font-size:13px; color:var(--ink-3)}
.result-note b{font-family:var(--f-disp); color:var(--ink); font-size:15px}

/* ============ 9. スレッド一覧 ============ */
.tlist{display:flex; flex-direction:column; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden}
.tlist:empty{display:none}
.trow{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:13px 14px; border-top:1px solid var(--line);
  color:var(--ink); text-decoration:none;
  transition:background .15s;
}
.trow:first-child{border-top:0}
.trow:hover{text-decoration:none; background:var(--card-2)}
.trow:active{background:var(--card-3)}
.tr-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.tr-title{
  font-size:15px; font-weight:700; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tr-title.untitled{font-weight:500; color:var(--ink-2)}
.tr-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.tr-b{display:inline-flex; align-items:center; gap:4px; color:var(--b-ink)}
.tr-sym{display:inline-grid; place-items:center; width:17px; height:17px; border-radius:6px; background:var(--b-sym); font-family:var(--f-disp); font-size:9px; font-style:normal}
.tr-c{display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono); font-size:12px}
.tr-c .ic{width:14px; height:14px}
.tr-c.hot{color:var(--pink-ink)}
.tr-meta time{font-variant-numeric:tabular-nums}
.tr-img{flex:none; width:54px; height:54px; border-radius:14px; object-fit:cover; background:var(--card-2)}
.tr-rank{
  flex:none; width:30px; text-align:center;
  font-family:var(--f-disp); font-size:20px; font-weight:700; color:var(--ink-3); line-height:1;
}
.trow.ranked:nth-child(1) .tr-rank{color:var(--pink)}
.trow.ranked:nth-child(2) .tr-rank{color:var(--sky)}
.trow.ranked:nth-child(3) .tr-rank{color:var(--mint)}
.trow .mark.sm{width:34px; height:34px; border-radius:12px}
.tlist.mini .trow{padding:10px 12px; gap:8px}
.tlist.mini .tr-title{font-size:13.5px}
.tlist.mini .tr-img{width:40px; height:40px; border-radius:11px}
.tlist.mini .tr-rank{width:22px; font-size:15px}

/* ============ 10. 投稿 ============ */
.list{display:flex; flex-direction:column; gap:10px}

/* 日付の区切り */
.day{display:flex; justify-content:center; margin:6px 0 0}
.day span{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:4px 14px; border-radius:var(--r-full);
  background:var(--card); box-shadow:var(--sh-1);
  font-family:var(--f-disp); font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:.04em;
}
.day em{font-style:normal; font-family:var(--f-ui); font-size:11.5px; font-weight:900; color:var(--pink-ink)}
.day small{font-family:var(--f-ui); font-size:11px; color:var(--ink-3)}

.post{
  position:relative;
  padding:14px 16px 10px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  cursor:pointer;
  touch-action:pan-y pinch-zoom;   /* 横の動きはスワイプ返信に使う */
  transition:box-shadow .2s, transform .3s var(--ease), opacity .3s;
}
@media (hover:hover){ .post:hover{box-shadow:var(--sh-2)} }
.post.new{animation:arrive .7s var(--ease-pop) both}
@keyframes arrive{from{opacity:0; transform:translateY(-10px) scale(.97)}}
.post.removing{opacity:0; transform:scale(.96)}
.post.target{box-shadow:0 0 0 2.5px var(--pink), var(--sh-2)}
.post.muted-hide{display:none}

.p-head{display:flex; align-items:center; gap:10px; min-width:0}
.mark{
  position:relative; flex:none; display:grid; place-items:center;
  width:38px; height:38px; border-radius:14px;
  background:hsl(var(--mh, 220) 95% 93%);
  color:hsl(var(--mh, 220) 62% 44%);
  font-weight:900; font-size:16px; line-height:1;
  -webkit-user-select:none; user-select:none;
}
.mark svg:not(.ic){display:block; width:64%; height:64%; fill:currentColor; shape-rendering:crispEdges}
.mark.guest{background:var(--card-2); color:var(--ink-3)}
.mark.guest .ic{width:56%; height:56%}
:root[data-theme="dark"] .mark{background:hsl(var(--mh, 220) 40% 22%); color:hsl(var(--mh, 220) 90% 76%)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mark{background:hsl(var(--mh, 220) 40% 22%); color:hsl(var(--mh, 220) 90% 76%)} }
:root[data-theme="dark"] .mark.guest, :root:not([data-theme="light"]) .mark.guest{background:var(--card-2); color:var(--ink-3)}

.p-who{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.p-id{font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-who time{font-size:11.5px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums}
.p-no{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); flex:none}
.p-n{flex:none; font-family:var(--f-disp); font-size:12px; font-weight:700; color:var(--ink-3)}
.p-head .bchip{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
.you, .staff{
  flex:none; display:inline-block; margin-left:4px; padding:0 6px; border-radius:var(--r-full);
  background:var(--pink-bg); color:var(--pink-ink);
  font-family:var(--f-ui); font-size:10px; font-weight:900; line-height:17px; letter-spacing:.04em; vertical-align:1px;
}
.staff{background:var(--ink); color:var(--card)}

.p-title{
  display:block; margin-top:10px;
  font-size:17px; font-weight:900; line-height:1.45; letter-spacing:.02em; color:var(--ink);
}
.p-title:hover{text-decoration:none; color:var(--pink-ink)}
.p-re{display:inline-flex; align-items:center; gap:4px; max-width:100%; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink-3)}
.p-re .ic{width:14px; height:14px}
.p-re b{color:var(--link); font-weight:700}
.p-re:hover{text-decoration:none}

.p-body{margin-top:8px; font-size:15.5px; line-height:1.8; letter-spacing:.02em; color:var(--ink); text-wrap:pretty}
.p-body a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.p-body a.anchor{text-decoration:none; font-weight:700; font-family:var(--f-mono); font-size:.92em}
.p-body .quote{display:inline-block; margin:2px 0; padding:1px 0 1px 11px; border-left:3px solid var(--line-2); color:var(--ink-2)}
.img-gone{display:inline-block; margin-top:4px; font-size:12.5px; color:var(--ink-3)}

.p-img{margin-top:12px}
.p-img button{
  position:relative; display:block; width:100%; padding:0; border:0;
  border-radius:18px; overflow:hidden; background:var(--card-2);
  cursor:zoom-in; line-height:0;
}
.p-img img{display:block; width:100%; height:auto; max-height:min(560px, 120vw); object-fit:cover}

.p-foot{display:flex; align-items:center; justify-content:space-between; gap:4px; margin:10px -6px 0 -6px}
.p-acts{display:flex; align-items:center; gap:0}
.act{
  display:inline-flex; align-items:center; gap:5px;
  height:36px; padding:0 9px; border:0; border-radius:var(--r-full);
  background:none; color:var(--ink-3); cursor:pointer; text-decoration:none;
  font-size:12.5px; font-weight:700;
  transition:background .15s, color .15s, transform .25s var(--ease-pop);
}
.act .ic{width:19px; height:19px}
.act:hover{color:var(--ink); background:var(--card-2); text-decoration:none}
.act:active{transform:scale(.9)}
.act.more{width:36px; padding:0; justify-content:center}
.act.thr{color:var(--ink-2)}
.act.thr b{font-family:var(--f-disp); font-weight:700}
@media (max-width:399px){ .act.reply span{display:none} .act.reply{width:36px; padding:0; justify-content:center} }

/* 反応（すき・わらった・わかる） */
.reacts{display:flex; gap:4px; min-width:0}
.react{
  position:relative; display:inline-flex; align-items:center; gap:3px;
  height:34px; min-width:34px; padding:0 9px; border:0; border-radius:var(--r-full);
  background:var(--card-2); color:var(--ink-3); cursor:pointer;
  font-family:var(--f-disp); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .2s, color .2s;
}
.react .ic{width:18px; height:18px}
.react b{font-weight:700}
.react b:empty{display:none}
.react:hover{color:var(--ink-2)}
.react.on.r-heart{background:var(--pink-bg); color:var(--pink-ink)}
.react.on.r-heart .ic{fill:var(--pink); stroke:var(--pink)}
.react.on.r-smile{background:var(--lemon-bg); color:var(--amber-ink)}
.react.on.r-smile .ic{fill:var(--lemon)}
.react.on.r-nod{background:var(--mint-bg); color:var(--mint-ink)}
.react.on.r-nod .ic{fill:color-mix(in srgb,var(--mint) 35%,transparent)}
/* 押したときに飛び散る粒（JS で出す） */
.spark{position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; pointer-events:none; background:currentColor}

/* 管理者にだけ見える操作 */
.mod{
  display:flex; align-items:center; gap:8px; margin:10px -4px 2px; padding:7px 7px 7px 12px;
  border-radius:16px; background:var(--card-2);
  font-size:12px; font-weight:700; color:var(--ink-3);
}
.mod .ic{width:15px; height:15px}
.mod-l, .mod-rc{display:inline-flex; align-items:center; gap:5px}
.mod-rc{color:var(--danger)}
.mod-del{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 14px; border:0; border-radius:var(--r-full);
  background:var(--danger); color:#fff; font:inherit; font-size:13px; font-weight:900; cursor:pointer;
  transition:transform .25s var(--ease-pop);
}
.mod-del:active{transform:scale(.92)}
.post.reported{box-shadow:0 0 0 2px var(--danger), var(--sh-1)}
.post.reported .mod{background:var(--danger-bg)}

/* スワイプで返信: 投稿が左にずれ、空いたところに返信のしるし */
.post.swiping{transition:none; z-index:1}
.post.sw-back{transition:transform .4s var(--ease-pop)}
.post::after{
  content:""; display:none; position:absolute; top:50%; right:-2px;
  width:38px; height:38px; margin-top:-19px; border-radius:14px; pointer-events:none;
  background:var(--card-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f84a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14 4 9l5-5'/><path d='M4 9h10a6 6 0 0 1 6 6v5'/></svg>") center/19px no-repeat;
  opacity:var(--sw, 0);
  transform:translateX(calc(var(--dxa, 0px) / 2 + 22px)) scale(calc(.6 + var(--sw, 0) * .4));
}
.post.swiping::after{display:block}
.post.armed::after{
  background:var(--pink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14 4 9l5-5'/><path d='M4 9h10a6 6 0 0 1 6 6v5'/></svg>") center/19px no-repeat;
}

/* 画像だけ（3列の格子） */
.list.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; border-radius:var(--r-lg); overflow:hidden}
.list.grid .post{padding:0; border-radius:0; box-shadow:none; aspect-ratio:1/1; animation:none; cursor:default}
.list.grid .post > :not(.p-img){display:none}
.list.grid .p-img, .list.grid .p-img button{height:100%; margin:0; border-radius:0}
.list.grid .p-img img{height:100%; max-height:none}

/* スレッド */
.thead{padding:8px 6px 12px}
.th-crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.th-meta{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--ink-3)}
.th-meta .ic{width:15px; height:15px}
.th-meta b{font-family:var(--f-disp); color:var(--ink)}
.th-meta small{font-family:var(--f-mono); font-size:10.5px}
.th-t{margin-top:10px; font-size:23px; font-weight:900; line-height:1.4; letter-spacing:.02em}
.list.thread > .post:first-child{box-shadow:0 0 0 2px var(--b-line), var(--sh-2)}
.list.thread > .post:first-child .p-body{font-size:16.5px}
.th-sep{display:flex; align-items:center; gap:10px; margin:6px 6px 0; font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.18em; color:var(--ink-3)}
.th-sep::before, .th-sep::after{content:""; flex:1; height:1.5px; background:repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 10px)}
.th-reply{margin-top:14px}
.reply-bar{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 8px 8px 10px; border:0; border-radius:22px;
  background:var(--card); box-shadow:var(--sh-1);
  color:var(--ink-3); cursor:pointer; text-align:left; font-size:14.5px; font-weight:700;
}
.reply-bar > span:not(.prompt-go):not(.mark){flex:1}

/* ============ 11. 広告 ============ */
/* どの広告にも必ず「広告」と出す */
.pr-l{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ink-3);
}
.pr-l::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--lemon)}
.pr-l i{font-family:var(--f-ui); font-style:normal; letter-spacing:.02em; text-transform:none}
.prbox{margin-top:12px}
.prbox a{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--sh-1); color:var(--ink); text-decoration:none;
  border:1.5px solid var(--lemon-bg);
}
.prbox a:hover{text-decoration:none; box-shadow:var(--sh-2)}
.prbox img{flex:none; width:64px; height:64px; border-radius:16px; object-fit:cover; background:var(--card-2)}
.pr-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.pr-txt b{font-size:15px; font-weight:900; line-height:1.45}
.pr-d{font-size:12.5px; color:var(--ink-2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pr-go{color:var(--ink-3)}
.prfeed a{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px; border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--sh-1); color:var(--ink); text-decoration:none;
  border:1.5px solid var(--lemon-bg);
}
.prfeed a:hover{text-decoration:none}
.prfeed b{font-size:16px; font-weight:900; line-height:1.45}
.prf-img img{display:block; width:100%; max-height:280px; object-fit:cover; border-radius:16px; margin-top:4px}
.prf-go{display:inline-flex; align-items:center; gap:2px; align-self:flex-start; margin-top:2px; font-size:13px; font-weight:900; color:var(--link)}
.prf-go .ic{width:16px; height:16px}

/* ============ 12. シート ============
 * スマホでは下からせり上がるボトムシート、広い画面では中央のダイアログ。
 * 閉じている間は visibility:hidden なので、JS が読み込めなくても画面を塞がない。 */
.sheet{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; justify-content:flex-end;
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .45s;
}
.sheet.open{visibility:visible; pointer-events:auto; transition:none}
.sheet-scrim{position:absolute; inset:0; touch-action:none; background:var(--scrim); opacity:0; transition:opacity .35s var(--ease)}
.sheet.open .sheet-scrim{opacity:var(--scrim-o, 1)}
.sheet-panel{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:640px; margin:0 auto var(--kb, 0px);
  max-height:calc(var(--vvh, 100vh) - var(--safe-t) - 12px);
  background:var(--card);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -14px 44px rgba(18,20,41,.2);
  padding-bottom:var(--safe-b);
  transform:translate3d(0,100%,0);
  transition:transform .48s var(--ease-sheet);
  overflow:hidden;
  overscroll-behavior:contain;
}
.sheet.open .sheet-panel{transform:translate3d(0,var(--drag, 0px),0)}
.sheet.dragging .sheet-panel, .sheet.dragging .sheet-scrim{transition:none}
.kb .sheet-panel{padding-bottom:0}
.sheet-panel:focus{outline:none}
.sheet-panel.tall{height:calc(var(--vvh, 100vh) - var(--safe-t) - 12px)}
.sheet-grab{flex:none; display:grid; place-items:center; height:20px; touch-action:none; cursor:grab}
.sheet-grab span{width:40px; height:5px; border-radius:3px; background:var(--line-2)}
.sheet-head{
  flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:52px; padding:0 10px; touch-action:none;
}
.sheet-head h2{grid-column:2; max-width:56vw; font-size:17px; font-weight:900; letter-spacing:.04em; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sheet-head .l{grid-column:1; justify-self:start}
.sheet-head .r{grid-column:3; justify-self:end}
.sh-btn{
  display:inline-flex; align-items:center; gap:2px;
  height:42px; padding:0 12px; border:0; border-radius:14px; background:none;
  font-size:15px; font-weight:700; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.sh-btn:hover{background:var(--card-2); color:var(--ink)}
.sheet-head .btn{margin-right:2px}
.sheet-body{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 20px 26px}
.sheet-body.flush{padding:0 0 20px}
.sheet-lead{margin-bottom:18px; font-size:14.5px; line-height:1.85; color:var(--ink-2)}
.sheet-actions{margin-top:22px}
.sheet-title{flex:none; padding:0 16px 10px; text-align:center; font-size:13px; font-weight:700; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sheet-title b{font-family:var(--f-mono); color:var(--ink-2)}
.sheet-cancel{
  display:block; width:calc(100% - 32px); height:52px; margin:6px 16px 14px;
  border:0; border-radius:var(--r-full); background:var(--card-2); color:var(--ink);
  font-size:16px; font-weight:700; cursor:pointer;
}

/* メニューの行 */
.menu-list{margin:6px 0 0; padding:4px; border-radius:var(--r-lg); background:var(--card-2)}
.sheet-panel > .menu-list{margin:0 12px; }
.menu-list + .menu-list{margin-top:12px}
.mi{
  display:flex; align-items:center; gap:14px;
  width:100%; min-height:52px; padding:8px 14px;
  border:0; border-radius:18px; background:none; color:var(--ink); cursor:pointer;
  font-size:15.5px; font-weight:700; text-align:left; text-decoration:none; line-height:1.4;
}
.mi:hover{background:var(--card); text-decoration:none; color:var(--ink)}
.mi > .ic{width:21px; height:21px; color:var(--ink-2)}
.mi small{display:block; font-size:12px; font-weight:500; color:var(--ink-3)}
.mi.danger, .mi.danger > .ic{color:var(--danger)}
.mi .aside{margin-left:auto; font-size:13.5px; color:var(--ink-3); font-family:var(--f-mono)}
.mi .chev{margin-left:auto; width:18px; height:18px; color:var(--ink-3)}
.mi .aside + .chev{margin-left:6px}
html:not(.is-admin) [data-do="moddel"]{display:none}

/* 通報の理由 */
.reasons{display:flex; flex-direction:column; gap:6px; margin:-4px 0 14px}
.reason{position:relative; display:block; cursor:pointer}
.reason input{position:absolute; opacity:0; pointer-events:none}
.reason span{
  display:flex; align-items:center; justify-content:space-between;
  min-height:50px; padding:0 16px; border-radius:16px; background:var(--card-2);
  font-size:15px; font-weight:700; transition:background .15s, box-shadow .15s;
}
.reason span::after{content:""; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--line-2)}
.reason input:checked + span{background:var(--danger-bg); color:var(--danger)}
.reason input:checked + span::after{box-shadow:inset 0 0 0 6px var(--danger)}
.reason input:focus-visible + span{outline:2px solid var(--sky)}

/* ============ 13. 投稿フォーム ============ */
.compose form{display:flex; flex-direction:column; flex:1; min-height:0}
.cmp-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:4px 18px 24px; cursor:text}
.cmp-meta{display:flex; align-items:center; gap:10px; justify-content:space-between}
.cmp-board{
  position:relative; display:inline-flex; align-items:center; gap:8px; min-width:0;
  height:42px; padding:0 34px 0 5px; border-radius:var(--r-full);
  background:var(--b-bg); color:var(--b-ink); cursor:pointer;
}
.cmp-board select{
  position:absolute; inset:0; width:100%; opacity:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.cb-sym{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:12px; background:var(--b-sym); font-family:var(--f-disp); font-size:14px; font-weight:700}
.cmp-board::after{content:attr(data-name); font-size:14.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cb-chev{position:absolute; right:10px; width:16px; height:16px; transform:rotate(90deg)}
.cmp-board.fixed{padding-right:14px; cursor:default}
.cmp-board.fixed .cb-chev, .cmp-board.fixed select{display:none}
.cmp-who{display:inline-flex; align-items:center; gap:7px; min-width:0; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3)}
.cmp-who .mark{width:28px; height:28px; border-radius:10px}
.cmp-who b{color:var(--ink-2)}
.no-js .cmp-board{padding-right:5px}
.no-js .cmp-board select{position:static; opacity:1; background:none; border:0; color:inherit; font-weight:900}
.no-js .cmp-board::after{display:none}

.cmp-reply{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  padding:8px 8px 8px 12px; border-radius:16px; background:var(--card-2);
  font-size:13px; line-height:1.5; color:var(--ink-3);
}
.cmp-reply > .ic{width:16px; height:16px}
.cmp-reply .rc-t{flex:1; min-width:0}
.cmp-reply .rc-t b{color:var(--link); font-family:var(--f-mono)}
.cmp-reply .rc-t i{display:block; font-style:normal; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.cmp-title{
  display:block; width:100%; margin-top:14px; padding:6px 2px 10px;
  border:0; border-bottom:1.5px solid var(--line); background:none; color:var(--ink);
  font-size:19px; font-weight:900; letter-spacing:.02em; outline:none;
}
.cmp-title::placeholder{color:var(--ink-3); font-weight:700}
.cmp-title:focus{border-bottom-color:var(--pink)}
.cmp-body{
  display:block; width:100%; min-height:200px; margin-top:12px; padding:0;
  border:0; outline:none; resize:none; background:none; color:var(--ink);
  font-size:17px; line-height:1.8; letter-spacing:.02em; text-wrap:pretty; word-break:auto-phrase;
}
.cmp-body::placeholder{color:var(--ink-3)}

.preview{position:relative; margin:12px 0 4px}
.preview-img{position:relative; display:inline-block; max-width:100%; border-radius:18px; overflow:hidden; background:var(--card-2)}
.preview-img img{display:block; max-width:100%; max-height:260px; object-fit:contain}
.preview-x{position:absolute; top:8px; right:8px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:12px; background:rgba(18,20,41,.6); color:#fff; cursor:pointer; padding:0}
.preview-x .ic{width:17px; height:17px; stroke-width:2.4}
.preview-meta{display:block; margin-top:6px; font-size:12px; line-height:1.6; color:var(--ink-3)}

.cmp-foot{flex:none; display:flex; align-items:center; gap:8px; height:56px; padding:0 18px 0 8px; border-top:1px solid var(--line); background:var(--card)}
.filebtn{position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:16px; color:var(--pink-ink); cursor:pointer; background:var(--pink-bg)}
.filebtn .ic{width:22px; height:22px}
.filebtn input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.filebtn:focus-within{outline:2px solid var(--sky)}
.cmp-note{flex:1; min-width:0; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.counter{flex:none; font-family:var(--f-mono); font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.counter.warn{color:var(--amber-ink); font-weight:700}
.counter.over{color:var(--danger); font-weight:700}
.send{background:var(--pink); color:#fff}
.send:hover{color:#fff}
.send.busy{pointer-events:none; opacity:.6}

/* ============ 14. マイページ ============ */
.acct-view{display:none}
.acct-view.on{display:block; animation:view-in .35s var(--ease)}
@keyframes view-in{from{opacity:0; transform:translateY(8px)}}
.acct-switch{margin-top:20px; text-align:center; font-size:14px; color:var(--ink-2)}
.acct-notes{margin:18px 0 0; padding:0; list-style:none; font-size:13.5px; line-height:1.8; color:var(--ink-2)}
.acct-notes li{position:relative; padding-left:18px; margin:6px 0}
.acct-notes li::before{content:""; position:absolute; left:3px; top:.7em; width:7px; height:7px; border-radius:50%; background:var(--pink)}
.is-member [data-guest], .is-guest [data-member]{display:none !important}
.idline{padding:14px 16px; border-radius:18px; background:var(--card-2)}
.idline small{display:block; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.idline b{display:block; margin-top:2px; font-size:20px; letter-spacing:.08em}
.acct-warn{padding:14px 16px; border-radius:18px; background:var(--danger-bg); color:var(--danger); font-size:14px; line-height:1.8; font-weight:700}

.guest-cta{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:22px 18px 18px; border-radius:var(--r-lg); background:var(--pink-bg);
}
.cta-mascot{width:58px; height:58px; overflow:visible; animation:float 4s ease-in-out infinite}
.guest-cta b{font-size:17px; font-weight:900}
.guest-cta .wb{font-size:13px; color:var(--ink-2)}
.cta-btns{display:flex; gap:8px; margin-top:10px}

.theme-row{cursor:default}
.theme-row:hover{background:none}
.seg3{margin-left:auto; display:inline-flex; padding:3px; border-radius:var(--r-full); background:var(--card)}
.seg3 button{height:32px; padding:0 11px; border:0; border-radius:var(--r-full); background:none; font-size:12.5px; font-weight:700; color:var(--ink-3); cursor:pointer}
.seg3 button[aria-checked="true"]{background:var(--ink); color:var(--card)}

.mute-list{display:flex; flex-direction:column; gap:6px}
.mute-row{display:flex; align-items:center; gap:10px; padding:8px 8px 8px 10px; border-radius:16px; background:var(--card-2)}
.mute-row b{flex:1; font-family:var(--f-mono); letter-spacing:.06em}
.mute-empty{padding:20px; text-align:center; color:var(--ink-3); font-size:14px}

/* 会員証: ホログラムのような角の欠けた札（光らせず、細い線で） */
.idcard{
  position:relative; overflow:hidden;
  border-radius:24px; background:var(--ink); color:var(--card);
  box-shadow:var(--sh-2);
}
.idcard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:16px 16px;
}
.ic-head{position:relative; display:flex; align-items:center; gap:8px; padding:14px 16px 0; font-family:var(--f-disp); font-size:12px; font-weight:700; letter-spacing:.12em}
.ic-head .logo-mark{width:24px; height:24px}
.ic-head em{margin-left:auto; font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; opacity:.6}
.ic-body{position:relative; display:flex; align-items:center; gap:14px; padding:16px 16px 18px}
.ic-body .mark{width:60px; height:60px; border-radius:20px}
.ic-body small, .ic-foot small{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; opacity:.6; text-transform:uppercase}
.ic-pid{display:block; margin:2px 0 4px; font-family:var(--f-mono); font-size:26px; font-weight:700; letter-spacing:.12em; line-height:1.2}
.ic-perf{position:relative; height:0; border-top:1.5px dashed rgba(255,255,255,.25); margin:0 16px}
.ic-foot{position:relative; display:flex; align-items:flex-end; gap:12px; padding:14px 16px 16px}
.ic-foot > div{flex:1; min-width:0}
.ic-id{display:block; margin-top:3px; font-family:var(--f-mono); font-size:20px; font-weight:700; letter-spacing:.08em; line-height:1.2; word-break:break-all}
.ic-foot .btn{flex:none; background:var(--card); color:var(--ink)}
.printer{position:relative; padding-top:12px}
.printer::before{content:""; position:absolute; left:-6px; right:-6px; top:0; height:14px; z-index:2; border-radius:8px; background:var(--card-3)}
.printer-slot{overflow:hidden; margin-top:-7px; padding:0 0 18px}
.printer.run .idcard{animation:print 1.4s cubic-bezier(.4,0,.2,1) both}
@keyframes print{0%{transform:translateY(-102%)} 30%{transform:translateY(-70%)} 55%{transform:translateY(-38%)} 80%{transform:translateY(-10%)} 100%{transform:none}}

/* お知らせ */
.notif-list{display:flex; flex-direction:column}
.nt{display:flex; gap:12px; padding:14px 18px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none}
.nt:first-child{border-top:0}
.nt:hover{text-decoration:none; background:var(--card-2)}
.nt.unread{background:color-mix(in srgb,var(--pink-bg) 60%,transparent)}
.nt-ic{flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:14px; background:var(--card-2); color:var(--ink-2)}
.nt-ic .ic{width:19px; height:19px}
.nt-ic.reply{background:#e6eeff; color:var(--link)}
.nt-ic.heart{background:var(--pink-bg); color:var(--pink-ink)}
.nt-ic.smile{background:var(--lemon-bg); color:var(--amber-ink)}
.nt-ic.nod{background:var(--mint-bg); color:var(--mint-ink)}
:root[data-theme="dark"] .nt-ic.reply{background:#1a2550}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nt-ic.reply{background:#1a2550} }
.nt-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.55}
.nt-main b{font-family:var(--f-mono); letter-spacing:.04em}
.nt-main q{color:var(--ink-2); quotes:"「" "」"}
.nt-main small{font-size:11.5px; color:var(--ink-3); font-weight:700}
.nt-empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:50px 24px; text-align:center; color:var(--ink-3); font-size:14px}
.nt-empty .empty-mascot{width:56px; height:56px}

/* ============ 15. ビューア・通知 ============ */
.lightbox{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,9,18,var(--lb-a, .96));
  touch-action:none; -webkit-user-select:none; user-select:none;
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.lightbox.open{opacity:1; visibility:visible; transition:opacity .25s var(--ease)}
.lb-img{width:100vw; height:100%; object-fit:contain; transform-origin:50% 50%; will-change:transform; -webkit-user-drag:none; pointer-events:none}
.lightbox.anim .lb-img{transition:transform .34s var(--ease), opacity .2s}
.lb-bar{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; padding:calc(var(--safe-t) + 6px) 8px 16px 18px; color:#fff; transition:opacity .2s}
.lightbox.zoomed .lb-bar{opacity:0}
.lb-count{font-family:var(--f-mono); font-size:13px; font-weight:700; letter-spacing:.1em}
.lb-close{display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:16px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer}
.lb-close .ic{width:24px; height:24px}

.toast{
  position:fixed; left:50%; z-index:400;
  bottom:calc(var(--safe-b) + var(--dock-h) + 14px);
  transform:translate(-50%,0);
  width:max-content; max-width:calc(100% - 32px);
  padding:12px 20px; border-radius:var(--r-full);
  background:var(--toast-bg); color:var(--toast-fg);
  font-size:14px; font-weight:700; line-height:1.6; text-align:center;
  box-shadow:var(--sh-2);
  animation:toast-in .4s var(--ease-pop) both;
}
.toast.err{background:var(--danger); color:#fff}
.toast.out{opacity:0; transform:translate(-50%,8px); transition:.3s var(--ease)}
.toast .undo{margin-left:12px; padding:3px 11px; border:0; border-radius:var(--r-full); background:color-mix(in srgb,currentColor 16%,transparent); color:inherit; font:inherit; font-size:13px; font-weight:900; cursor:pointer}
@keyframes toast-in{from{opacity:0; transform:translate(-50%,14px) scale(.96)}}

.newpill{
  position:fixed; z-index:45; left:50%;
  top:calc(var(--top-h) + var(--safe-t) + 12px);
  transform:translate(-50%,-10px); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease-pop), opacity .2s;
}
.newpill.show{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.newpill.bump button{animation:bump .45s var(--ease-pop)}
@keyframes bump{40%{transform:scale(1.08)}}
.newpill button{
  display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 18px 0 12px; border:0; border-radius:var(--r-full);
  background:var(--pink); color:#fff; cursor:pointer;
  font-size:13.5px; font-weight:900; letter-spacing:.04em; box-shadow:var(--sh-2);
}
.newpill .ic{width:17px; height:17px; stroke-width:2.4}

.netbar{
  position:sticky; top:calc(var(--top-h) + var(--safe-t)); z-index:39;
  padding:8px 16px; text-align:center;
  background:var(--warn-bg); color:var(--warn-fg);
  font-size:12.5px; font-weight:700; line-height:1.5;
}

/* プルで更新: 上部の帯の「下」から、キャラクターと言葉の札が降りてくる（ロゴに重ならない） */
.ptr{
  position:fixed; left:50%; z-index:38;
  top:calc(var(--safe-t) + var(--top-h) + 10px);
  opacity:0; pointer-events:none;
  transform:translate3d(-50%,-64px,0) scale(.8);
}
.ptr-in{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 16px 0 6px; border-radius:var(--r-full);
  background:var(--card); box-shadow:var(--sh-2);
  font-size:13px; font-weight:900; color:var(--ink-2); white-space:nowrap;
}
.ptr .logo-mark{width:32px; height:32px; transform:rotate(calc((1 - var(--k, 0)) * -40deg)); transition:transform .15s}
.ptr .logo-mark .lm-body{fill:var(--line-2); transition:fill .2s}
.ptr.ready .logo-mark .lm-body, .ptr.spin .logo-mark .lm-body{fill:var(--pink)}
.ptr.ready .ptr-in, .ptr.spin .ptr-in{color:var(--ink)}
.ptr.spin .logo-mark{animation:ptr-bounce .6s var(--ease-pop) infinite}
.ptr.back{transition:transform .38s var(--ease), opacity .25s}
@keyframes ptr-bounce{0%,100%{transform:none} 40%{transform:translateY(3px) scale(1.1,.88)}}

/* 下部 */
.foot{
  max-width:var(--col); margin:10px auto 0; padding:26px 20px calc(var(--dock-h) + var(--safe-b) + 40px);
  text-align:center; font-size:12.5px; color:var(--ink-3); line-height:1.9;
}
.foot .brand{justify-content:center}
.foot .brand-t{align-items:flex-start}
.foot > p{max-width:32em; margin:14px auto 0}
.disclaimer{max-width:34em; margin:16px auto 0; font-size:11.5px; line-height:1.8; color:var(--ink-3)}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:16px; font-size:13px; font-weight:700}
.foot-links a{color:var(--ink-2)}
.foot.simple{padding-bottom:40px}
.foot .copy{margin-top:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em}
.spec{max-width:420px; margin:20px auto 0; text-align:left; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1)}
.spec summary{display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; cursor:pointer; font-weight:700; color:var(--ink-2); list-style:none}
.spec summary::-webkit-details-marker{display:none}
.spec summary .ic{width:17px; height:17px}
.spec dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; margin:0; padding:4px 18px 18px; font-size:12px; line-height:1.7}
.spec dt{font-family:var(--f-mono); font-weight:700; color:var(--ink-2); white-space:nowrap}
.spec dd{margin:0}

/* ---- JS が無いとき: 投稿フォーム・アカウントの作成はふつうのまとまりとして出す ---- */
.no-js .sheet.inline{position:static; visibility:visible; pointer-events:auto; z-index:auto; display:block; margin:12px auto 0; max-width:var(--col); padding:0 var(--gut)}
.no-js .sheet.inline .sheet-scrim, .no-js .sheet.inline .sheet-grab, .no-js .sheet.inline .sh-cancel, .no-js [data-js]{display:none}
.no-js .sheet.inline .sheet-panel{transform:none; border-radius:var(--r-lg); max-height:none; height:auto; padding-bottom:0; max-width:none; box-shadow:var(--sh-1)}
.no-js .acct-view[data-view="create"], .no-js .acct-view[data-view="login"]{display:block}
.no-js .acct-view[data-view="login"]{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.no-js .dock{display:none}

/* ============ 16. 静的ページ（掲載について・利用ルール） ============ */
.top.simple .top-in{padding:0 12px}
.top.simple .brand{margin-right:auto}
.wrap{max-width:calc(var(--col) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut)}
.doc{padding-top:14px; padding-bottom:30px}
.doc-hero{
  position:relative; overflow:hidden; padding:24px 20px 22px;
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-2);
}
.doc-hero h1{margin-top:10px; font-size:clamp(25px, 7.4vw, 34px); font-weight:900; line-height:1.35}
.doc-hero > p.wb{margin-top:10px; font-size:14px; color:var(--ink-2); line-height:1.85}
.doc-hero .btn{margin-top:16px}
.doc-sec{margin-top:16px; padding:20px 18px; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.doc-sec h2{display:flex; align-items:baseline; gap:8px; font-size:18px; font-weight:900; margin-bottom:14px}
.doc-sec h2 small{font-size:12px; color:var(--ink-3)}
.doc-sec > p, .doc-sec li{font-size:14.5px; line-height:1.9}
.doc-sec ul{padding-left:1.2em}
.doc-sec li{margin:0 0 8px}
.doc-sec li::marker{color:var(--pink)}
.doc-sec .hint{margin-top:12px}
.doc code{font-family:var(--f-mono); font-size:13px; padding:1px 6px; border-radius:6px; background:var(--card-2)}
.doc .note{margin:14px 0 0; padding:14px 16px; border-radius:16px; background:var(--card-2); font-size:14px; line-height:1.9; color:var(--ink-2)}
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.kpi{padding:14px; border-radius:18px; background:var(--card-2)}
.kpi b{display:block; font-family:var(--f-disp); font-size:22px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}
.kpi b small{font-size:14px}
.kpi span{display:block; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.plans{display:grid; gap:8px}
.plan{padding:14px 16px; border-radius:18px; background:var(--card-2)}
.plan b{font-size:15.5px; font-weight:900}
.plan-price{margin-left:8px; font-size:12px; font-weight:700; color:var(--pink-ink)}
.plan p{margin-top:4px; font-size:13px; line-height:1.75; color:var(--ink-2)}
.form-card .field{margin-top:14px}
.done-card{display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px; text-align:center}
.done-card b{font-size:18px; font-weight:900}
.done-card .wb{font-size:14px; color:var(--ink-2)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ============ 17. 広い画面 ============ */
@media (min-width:560px){
  .btiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:28px 28px 22px}
  .hero-mascot{width:130px; height:130px; right:18px; top:20px}
  .hero-orb.o1{right:150px; top:30px}
  .searchbox{flex-direction:row; flex-wrap:wrap}
  .sb-in{flex:1 1 100%}
}

/* 左の帯が出る */
@media (min-width:760px){
  :root{--gut:16px}
  .shell{display:grid; grid-template-columns:232px minmax(0,var(--col)); justify-content:center; gap:0 24px}
  .rail{
    display:flex; flex-direction:column; gap:14px;
    position:sticky; top:0; height:100vh; height:100dvh; padding:18px 0 24px;
  }
  .rail .brand{padding:4px 8px 10px}
  .rail-nav{display:flex; flex-direction:column; gap:2px}
  .rail-nav .nv{
    flex:none; flex-direction:row; justify-content:flex-start; gap:12px;
    height:50px; padding:0 16px; border-radius:18px;
    font-size:15.5px; letter-spacing:.02em; color:var(--ink-2);
  }
  .rail-nav .nv:hover{background:var(--card)}
  .rail-nav .nv.on{background:var(--card); color:var(--ink); box-shadow:var(--sh-1)}
  .rail-nav .nv.on span{opacity:1}
  .rail-nav .nv.on::after{display:none}
  .rail-nav .nbadge{position:static; margin-left:auto}
  .post-btn{height:54px; margin-top:6px; background:var(--pink); color:#fff}
  .post-btn:hover{color:#fff}
  .dock, .top{display:none}
  .main{padding-top:18px; padding-bottom:40px}
  .foot{padding-bottom:40px}
  .tabs{top:12px}
  .newpill{top:16px}
  .toast{bottom:32px}
  .netbar{top:0}
  .post{padding:16px 18px 12px}
}

/* 右の帯も出る */
@media (min-width:1140px){
  .shell{grid-template-columns:232px minmax(0,var(--col)) 300px}
  .side{
    display:flex; flex-direction:column; gap:14px;
    position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; padding:18px 0 24px;
    scrollbar-width:none;
  }
  .side::-webkit-scrollbar{display:none}
  .home-boards{display:none}
  .side-sec{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden}
  .side-h{display:flex; align-items:center; gap:6px; padding:14px 16px 8px; font-size:14px; font-weight:900}
  .side-h .ic{width:18px; height:18px; color:var(--pink)}
  .side-sec .tlist{box-shadow:none; border-radius:0}
  .side-boards{display:flex; flex-direction:column; padding:0 6px 8px}
  .side-boards a{display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; color:var(--ink); font-size:14px; font-weight:700; text-decoration:none}
  .side-boards a:hover, .side-boards a.on{background:var(--b-bg); text-decoration:none}
  .side-boards span:not(.bsym){flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .side-boards em{font-style:normal; font-family:var(--f-disp); font-size:11px; color:var(--pink-ink)}
  .side-pr{
    display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r-lg);
    background:var(--ink); color:var(--card); text-decoration:none;
  }
  .side-pr:hover{text-decoration:none; color:var(--card)}
  .side-pr > span{flex:1; display:flex; flex-direction:column; line-height:1.4}
  .side-pr b{font-size:14px}
  .side-pr small{font-size:11.5px; opacity:.7}
}

@media (min-width:720px){
  .sheet{justify-content:center; align-items:center; padding:32px}
  .sheet-panel{
    max-width:540px; margin:0; border-radius:var(--r-xl);
    padding-bottom:0; max-height:min(760px, calc(100vh - 64px));
    box-shadow:0 30px 70px rgba(18,20,41,.3);
    transform:translate3d(0,18px,0) scale(.97); opacity:0;
    transition:transform .35s var(--ease-pop), opacity .2s var(--ease);
  }
  .sheet.open .sheet-panel{transform:none; opacity:1}
  .sheet-panel.tall{height:min(700px, calc(100vh - 64px))}
  .sheet-grab{display:none}
  .sheet-head{touch-action:auto; padding-top:8px}
}

/* ホーム画面から開いたとき（アプリ） */
.is-app .top, .is-app .tabs, .is-app .sheet-head, .is-app .act, .is-app .react{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}

/* ============ 18. 動き（ページの切り替え） ============ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .16s var(--ease) both}
::view-transition-new(root){animation:vt-in .32s var(--ease) both}
::view-transition-group(tab-on){animation-duration:.38s; animation-timing-function:cubic-bezier(.34,1.3,.64,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px)}}
::view-transition-group(*){animation-duration:.42s; animation-timing-function:var(--ease)}
::view-transition-old(*.pimg), ::view-transition-new(*.pimg){width:100%; height:100%; object-fit:cover; overflow:clip}

/* ============ 19. アクセシビリティ ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  @view-transition{navigation:none}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}


/* ============ 20. 3.0 で足した部品 ============ */
.empty-line{padding:18px 16px; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1); font-size:13.5px; color:var(--ink-3); text-align:center}
.list-note{margin:14px 4px 0; text-align:center}

/* 板・スレッドの印 */
.tag18{display:inline-block; margin-left:6px; padding:0 7px; border-radius:var(--r-full); background:var(--danger-bg); color:var(--danger); font-style:normal; font-size:10.5px; font-weight:900; line-height:18px; vertical-align:2px}
.btile.adult .bsym, .brow.adult .bsym{font-family:var(--f-mono)}
.tr-lock{width:15px; height:15px; margin-right:4px; vertical-align:-2px; color:var(--ink-3)}
.th-lock{display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px 0 7px; border-radius:var(--r-full); background:var(--card-2); font-size:11.5px; font-weight:900; color:var(--ink-2)}
.th-lock .ic{width:14px; height:14px}
.th-sep small{margin-left:6px; font-family:var(--f-ui); letter-spacing:.04em}

/* 入口（年齢の確認・合言葉） */
.gate-card{
  display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:6px; padding:26px 20px 22px;
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-2); text-align:center;
}
.gate-ic{align-self:center; display:grid; place-items:center; width:64px; height:64px; border-radius:22px; background:var(--ink); color:var(--card); font-family:var(--f-disp); font-size:24px; font-weight:700}
.gate-card.age .gate-ic{background:var(--danger); color:#fff}
.gate-ic .ic{width:30px; height:30px}
.gate-card h1{font-size:clamp(20px, 6vw, 25px); font-weight:900; line-height:1.45}
.gate-card > p{font-size:14px; color:var(--ink-2); line-height:1.85}
.gate-card .th-crumb{justify-content:center}
.gate-notes{margin:0; padding:14px 16px 14px 32px; border-radius:18px; background:var(--card-2); text-align:left; font-size:13.5px; line-height:1.8; color:var(--ink-2)}
.gate-notes li{margin:0 0 6px}
.gate-notes li::marker{color:var(--danger)}
.gate-form{display:flex; flex-direction:column; gap:12px; text-align:left}
.gate-form .btn{height:52px}
.gate-card .hint{text-align:center}
.is-gate .appbar{display:none}

/* 投稿フォーム: 合言葉 */
.cmp-lock{margin:10px 0 0; padding:10px 12px; border-radius:16px; background:var(--card-2)}
.cl-toggle{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; font-weight:700}
.cl-toggle input{width:20px; height:20px; margin:0; accent-color:var(--pink); flex:none}
.cl-toggle .ic{width:18px; height:18px; color:var(--ink-3); flex:none}
.cl-toggle span{display:flex; flex-direction:column; line-height:1.4}
.cl-toggle small{font-size:11.5px; font-weight:500; color:var(--ink-3)}
.cl-in{display:block; margin-top:10px}
.cl-in .in{background:var(--card)}

/* IDの発行: 同意 */
.consent{margin-top:18px; padding:16px; border-radius:18px; background:var(--card-2)}
.consent-t{font-size:13.5px; font-weight:900}
.consent-links{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none}
.consent-links a{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px 0 11px; border-radius:var(--r-full); background:var(--card); box-shadow:var(--sh-1); font-size:13.5px; font-weight:700; color:var(--ink)}
.consent-links .ic{width:16px; height:16px; color:var(--pink-ink)}
.consent-chk, .agree-chk{display:flex; align-items:flex-start; gap:10px; margin-top:12px; cursor:pointer; font-size:14px; font-weight:700; line-height:1.6}
.consent-chk input, .agree-chk input{width:22px; height:22px; margin:0; flex:none; accent-color:var(--pink)}
.agree-chk{margin-top:18px; padding:14px; border-radius:16px; background:var(--card-2); font-size:13.5px; font-weight:500}
.agree-chk a{font-weight:700}

/* お知らせのシート: 通知 / 運営から */
.seg-tabs{display:flex; gap:4px; margin:0 16px 8px; padding:4px; border-radius:var(--r-full); background:var(--card-2)}
.seg-tabs button{position:relative; flex:1; height:38px; border:0; border-radius:var(--r-full); background:none; color:var(--ink-3); font:inherit; font-size:13.5px; font-weight:900; cursor:pointer}
.seg-tabs button.on{background:var(--card); color:var(--ink); box-shadow:var(--sh-1)}
.seg-tabs .dot{position:absolute; top:9px; right:calc(50% - 34px); width:7px; height:7px; border-radius:50%; background:var(--pink)}
.nbadge.dot{min-width:9px; width:9px; height:9px; padding:0; font-size:0}
.news-pane{padding:4px 0 16px}
.news-item{padding:16px 18px; border-top:1px solid var(--line)}
.news-item:first-child{border-top:0}
.news-item header, .news header{display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3)}
.news-item h3{margin-top:6px; font-size:15.5px; font-weight:900; line-height:1.5}
.news-body{margin-top:6px; font-size:14px; line-height:1.85; color:var(--ink-2); overflow-wrap:anywhere}
.news-item.imp h3::before{content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--pink); vertical-align:2px}
.badge-imp{padding:0 7px; border-radius:var(--r-full); background:var(--pink); color:#fff; font-family:var(--f-ui); font-size:10.5px; font-weight:900; line-height:18px}
.news-all{display:flex; align-items:center; justify-content:center; gap:4px; margin:6px 16px 0; height:44px; border-radius:var(--r-full); background:var(--card-2); color:var(--ink); font-size:13.5px; font-weight:700}
.news-all .ic{width:16px; height:16px}
.news-list{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.news{padding:18px; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh-1); scroll-margin-top:80px}
.news.imp{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pink) 55%,transparent), var(--sh-1)}
.news h2{margin-top:6px; font-size:17px; font-weight:900; line-height:1.5}

/* ============ 21. 文章のページ（利用規約・お問い合わせなど） ============ */
.doc-date{margin-top:10px; font-family:var(--f-mono); font-size:12px; color:var(--ink-3)}
.doc-hero > p:not(.eyebrow):not(.doc-date){margin-top:10px; font-size:14px; color:var(--ink-2); line-height:1.85}
.doc-sec ol{padding-left:1.4em}
.doc-sec ol > li::marker{font-family:var(--f-mono); font-size:12px; color:var(--ink-3)}
.doc-sec li > ul{margin-top:6px}
.doc-sec h3{margin:18px 0 8px; font-size:15px; font-weight:900}
.doc-sec h3:first-of-type{margin-top:6px}
.doc-sec.art h2{font-size:17px; scroll-margin-top:70px}
.doc-sec.art{scroll-margin-top:70px}
.defs{display:grid; grid-template-columns:minmax(0,1fr); gap:2px; margin:0}
.defs dt{margin-top:10px; font-size:13px; font-weight:900; color:var(--ink)}
.defs dt:first-child{margin-top:0}
.defs dd{margin:0; font-size:14px; line-height:1.85; color:var(--ink-2); overflow-wrap:anywhere}
@media (min-width:560px){ .defs{grid-template-columns:9em minmax(0,1fr); gap:10px 16px} .defs dt{margin-top:0} }
.tbl-wrap{margin-top:8px; border-radius:16px; background:var(--card-2); overflow:hidden}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.75}
.tbl th, .tbl td{padding:10px 12px; border-top:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere}
.tbl thead th{border-top:0; font-size:12px; color:var(--ink-3)}
.tbl tbody tr:first-child td, .tbl tbody tr:first-child th{border-top:0}
.tbl thead + tbody tr:first-child td{border-top:1px solid var(--line)}
.tbl td.mono, .tbl .mono{font-family:var(--f-mono); font-size:12.5px}
.tbl.kv th{width:9em; font-size:12.5px; color:var(--ink-3)}
/* 狭い画面では表を縦に並べる（横にスクロールさせない） */
@media (max-width:559px){
  .tbl thead{display:none}
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td{display:block; width:auto}
  .tbl tr{padding:10px 12px; border-top:1px solid var(--line)}
  .tbl tbody tr:first-child{border-top:0}
  .tbl th, .tbl td, .tbl thead + tbody tr:first-child td{padding:2px 0; border-top:0}
  .tbl td:first-child{font-weight:700; color:var(--ink)}
  .tbl.kv th{width:auto}
}
.muted{color:var(--ink-3)}
.plain{margin:0 0 6px; padding-left:1.2em}
.form-card button[disabled]{opacity:.5}

/* 広告の枠の説明・予約の空き */
.adkinds{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:560px){ .adkinds{grid-template-columns:repeat(2,minmax(0,1fr))} }
.adkind{display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:18px; background:var(--card-2)}
.adkind > b{font-size:16px; font-weight:900}
.adkind p{font-size:13.5px; line-height:1.8; color:var(--ink-2)}
.adkind ul{margin:0; padding-left:1.2em}
.adkind li{font-size:13px; line-height:1.75; margin:0 0 4px}
.ak-fig{display:flex; flex-direction:column; gap:4px; width:64px; padding:6px; border-radius:12px; background:var(--card)}
.ak-fig i{display:block; height:6px; border-radius:3px; background:var(--line)}
.ak-fig i.ak-bar{height:10px; background:var(--pink)}
.adcal{display:flex; flex-direction:column; gap:6px}
.ac-row{display:grid; grid-template-columns:minmax(0,1fr); gap:4px}
@media (min-width:560px){ .ac-row{grid-template-columns:9em minmax(0,1fr); align-items:center; gap:10px} }
.ac-head{font-size:11.5px; font-weight:700; color:var(--ink-3)}
.ac-name{display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:700; min-width:0}
.ac-name small{font-size:11px; font-weight:700; color:var(--ink-3)}
.ac-days{display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); gap:2px}
.ac-head .ac-days{display:block}
.ac-days i{display:block; height:14px; border-radius:3px; background:var(--card-2)}
.ac-days i.on{background:var(--pink)}
.cal-key{display:inline-block; width:12px; height:12px; margin-right:4px; border-radius:3px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); vertical-align:-1px}
.cal-key.on{background:var(--pink); box-shadow:none}
.dock-post[disabled]{opacity:.35; pointer-events:none}
.doc-sec h2{flex-wrap:wrap; gap:2px 10px}

/* 板の記号: アプリの板は、そのアプリのアイコンの色（公式のロゴの画像は使わない） */
.mk{background:var(--mk-bg) !important; color:var(--mk-fg) !important}
.mk[data-mk="x"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
[data-mk="yay"]{font-style:italic; letter-spacing:-.06em; font-weight:700}
[data-mk="tiktok"]{text-shadow:-1px -1px 0 #25f4ee, 1px 1px 0 #fe2c55}
.bsym.xl[data-mk="tiktok"]{text-shadow:-2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55}
[data-mk="koetomo"]{font-weight:900}
.has-icon{position:relative; padding:0 !important; overflow:hidden; background:var(--card-2)}
/* iPhone の Safari はグリッドの中の height:100% を解決しないことがあるので、枠の四隅に固定する */
.has-icon img{position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:cover}