がブラウザ既定マージン(上下各~1em)のままだったので、
最初の行が上に寄らず・最後の行が下に余分に空いて見えていた問題を修正。 */
.comment-text p {
margin: 0.3em 0;
}
.comment-text p:first-child {
margin-top: 0;
}
.comment-text p:last-child {
margin-bottom: 0;
}
/* 返信するボタンは独立した行ではなく、reaction-bar(＋絵文字)と同じ行に並べる -
reaction-barのouterHTML差し替え(トグル時の再描画)に巻き込まれないよう、この
行自体はreaction-barの「外側」の兄弟コンテナであり、見た目だけ横並びにする。 */
.comment-action-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.reply-trigger-btn {
display: inline-flex;
align-items: center;
gap: 4px;
border: none;
background: none;
color: var(--color-text-sub);
font-size: 12.5px;
font-weight: 700;
padding: 0;
cursor: pointer;
}
.reply-trigger-btn:hover {
color: var(--color-primary-dark);
}
.reply-trigger-btn svg {
flex-shrink: 0;
}
.reply-list {
margin-top: 12px;
margin-left: 20px;
padding-left: 16px;
border-left: 2px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 14px;
}
/* ==========================================================================
Composer modal (write post)
========================================================================== */
.modal-wide {
max-width: 560px;
}
/* Composer modal: header + submit stay fixed, only the field area scrolls
when the viewport is short. Full-screen by default (the write flow gets
the whole viewport rather than a small centered popup). */
.modal-overlay-fullscreen {
padding: 0;
}
.modal-composer {
display: flex;
flex-direction: column;
max-height: 88vh;
padding-bottom: 20px;
}
/* 2026-10-03: フルスクリーン筐体を使わない縮小版コンポーザー(SNS共有の
「URL+公開範囲だけ」のような少数項目向け) - 基本の.modal(max-width:380px)
だと入力欄が窮屈なので少し広げるだけで、高さは内容に合わせて自然に縮む
(上の.modal-composerのmax-height:88vhはそのまま安全網として残す)。 */
.modal-composer.modal-compact {
max-width: 480px;
/* 2026-10-04: 破棄/登録ボタンがモーダルの枠内に浮いて見えていた問題 -
.modal-fullscreenと同じく、枠自体のpaddingを0にしてheadとfoot側で
それぞれ必要な余白を持たせ、footはモーダルの角そのものに密着させる。 */
padding: 0;
}
.modal-compact .modal-head {
padding: 18px 24px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 0;
}
.modal-compact .composer-scroll-area {
padding: 16px 24px;
margin: 0;
}
.modal-compact .composer-foot {
margin: 0;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
.modal-compact .composer-foot button {
border-radius: 0;
padding: 16px;
font-size: 15px;
}
.modal-composer.modal-fullscreen {
max-width: 100%;
width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
padding: 0;
}
.modal-fullscreen .modal-head {
padding: 18px 24px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 0;
}
.modal-fullscreen .composer-scroll-area {
padding: 16px 24px;
margin: 0;
max-width: 720px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.modal-fullscreen .composer-foot {
margin: 0;
border-radius: 0;
}
.modal-fullscreen .composer-foot button {
border-radius: 0;
padding: 16px;
font-size: 15px;
}
/* Desktop: the write flow doesn't need the whole viewport the way it does
on mobile - a centered popup (narrower, still tall) reads better. Mobile
keeps the full-bleed fullscreen treatment above untouched. */
@media (min-width: 860px) {
.modal-overlay-fullscreen {
padding: 20px;
}
.modal-composer.modal-fullscreen {
max-width: 680px;
width: 100%;
height: 88vh;
height: 88dvh;
max-height: 88vh;
max-height: 88dvh;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.modal-fullscreen .composer-scroll-area {
padding: 16px 24px;
}
/* the modal itself is rounded here (not full-bleed like mobile) - the
two buttons stay flush square against EACH OTHER, but the footer row
as a whole needs to round its own bottom-left/bottom-right corners to
match, otherwise square button corners poke out past the modal's own
rounded edge and the pair reads as crooked/mismatched. */
.modal-fullscreen .composer-foot {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
}
.modal-composer .modal-head {
flex-shrink: 0;
}
.composer-scroll-area {
flex: 1;
min-height: 0;
overflow-y: auto;
/* iOS Safari's momentum-scroll can silently give up partway through a
NESTED scroll container (the editor's own overflow-y:auto adds one
more layer inside this one) - this is the standard fix so a touch-
scroll started anywhere in this area, including over the editor,
reliably reaches every field below it instead of stalling. */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 2px;
margin: 4px 0;
}
/* discard (left, secondary) and submit (right, primary) sit side by side,
flush against each other at an even 5:5 split (both used to stack
full-width, and a 1:2 split still read lopsided - explicit feedback on
both). A thin border stands in for a gap so there's still a visible
seam between them without breaking the rounded-corner clipping above. */
.composer-error {
flex-shrink: 0;
margin: 6px 20px 0;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: #fdecea;
color: var(--color-danger);
font-size: 13px;
}
.composer-foot {
flex-shrink: 0;
display: flex;
margin-top: 4px;
}
.composer-submit-fixed,
.composer-discard-btn {
flex: 1;
min-width: 0;
border-radius: 0;
/* .modal-submit (a shared base class) sets margin-top:4px, which the
discard button doesn't have - in a flex row that shrinks the submit
button's cross-size by 4px relative to its sibling, so the two read
as slightly different heights even though every other property
(padding, border, font-size) matches exactly. */
margin-top: 0;
}
.composer-discard-btn {
text-align: center;
white-space: nowrap;
border-right: 1px solid var(--color-border);
}
.field-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.field-row > label {
width: 96px;
flex-shrink: 0;
padding-top: 9px;
font-size: 12px;
font-weight: 700;
color: var(--color-text-sub);
}
.field-row .field-row-input {
flex: 1;
min-width: 0;
}
.field-row .field-row-input input,
.field-row .field-row-input select {
width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 9px 11px;
font-size: 13.5px;
font-family: inherit;
}
/* Stacked field (label above, full-width content below) - used for the body
editor so it isn't squeezed by a side label like the short fields are. */
.field-stack {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-height: 0;
}
.field-stack .composer-editor-mount {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.field-stack > label {
font-size: 12px;
font-weight: 700;
color: var(--color-text-sub);
}
.thumb-field-preview {
display: none;
width: 100%;
max-width: 260px;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--color-border);
margin-bottom: 8px;
}
.thumb-field-preview.has-img {
display: block;
}
.thumb-field-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.thumb-field-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.thumb-field-or {
font-size: 12px;
color: var(--color-text-sub);
}
.thumb-field-controls input[type="url"] {
flex: 1;
min-width: 160px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 8px 10px;
font-size: 13px;
font-family: inherit;
}
.thumb-field-remove {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-text-sub);
font-size: 12px;
}
.thumb-field-remove:hover {
border-color: var(--color-danger, #e0554f);
color: var(--color-danger, #e0554f);
}
.topic-chip-select {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.topic-chip-option {
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 5px 12px;
font-size: 12.5px;
background: #fff;
color: var(--color-text-sub);
}
.topic-chip-option.selected {
background: var(--color-bg-tint);
border-color: var(--color-primary);
color: var(--color-primary-dark);
font-weight: 700;
}
@media (max-width: 560px) {
.field-row {
flex-direction: column;
/* the base rule is align-items:flex-start, which only made sense
side-by-side (label sized to its own text) - stacked, it left every
field-row-input shrink-to-fit its own input's browser-default width
instead of filling the row, so category/title/event-date etc. each
ended up a different width. Stretch makes them all match. */
align-items: stretch;
gap: 4px;
}
.field-row > label {
width: auto;
padding-top: 0;
}
}
/* Block background (Notion-style: the whole block gets a color tint) -
applies to rendered post/comment bodies (both migrated content and the
block editor's own saved output use plain background-color styles). */
.post-detail-body p[style*="background-color"],
.comment-text p[style*="background-color"] {
padding: 6px 10px;
border-radius: 4px;
margin: 4px 0;
}
/* Callout block (💡) - same look for migrated Slashpage .sp-callout content
and the block editor's own callout blocks (icon is a real character in
the markup, not a CSS ::before, so no extra rule needed for that). */
.post-detail-body .sp-callout,
.comment-text .sp-callout {
background: var(--color-bg-tint);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 8px 0;
}
/* --------------------------------------------------------------------------
Block editor (js/block-editor.js) - built on Tiptap. Tiptap is headless
(no UI of its own), so everything here is hand-styled: the editable
surface itself, the gutter (+/drag-handle, positioned automatically by
the DragHandle extension - only its contents need CSS from us), the
floating selection toolbar, block/insert popovers, callout, media/file
blocks, and the emoji picker. Shared by the post composer and comments.
-------------------------------------------------------------------------- */
.be-root {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 14px 10px;
min-height: 260px;
overflow-y: auto;
font-size: 13.5px;
}
/* The main post composer has no per-block gutter overlap problem to solve
with a border box - it drops the border entirely (a divider above the
editor takes its place, see .composer-body-divider). 2026-10-04: 좌우
패딩은 제거 - 가터가 뜰 공간은 .be-content-has-gutter의 margin-left가 이미
확보하고 있어 이 패딩은 이중 확보였고, 우측은 애초에 가터가 없어 불필요한
채 디바이더선보다 입력창을 좁게만 만들고 있었다(사용자 지적, 2026-10-04). */
.be-root:not(.be-compact) {
border: none;
padding: 4px 0 14px 0;
/* the base rule makes .be-root its OWN scroll container (overflow-y:
auto) - fine for the small fixed-height comment box, but the full
post editor should just grow taller as you type and let the ONE
outer popup scroll (.composer-scroll-area) show more of it, not
scroll internally itself. A nested scroll container here is also the
likely cause of "can't reach the editor" on mobile - iOS Safari's
touch-scroll can get stuck handing the gesture from an outer
scrollable to one nested inside it. */
overflow-y: visible;
}
@media (min-width: 860px) {
.be-root:not(.be-compact) {
min-height: 420px;
}
}
.be-compact {
min-height: 70px;
/* comment box felt top/bottom-heavy and loosely spaced compared to a
typical chat-style input - tighter line-height, and more horizontal
than vertical padding (the base .be-root padding is the reverse:
14px 10px, tuned for the full post editor, not a compact one). */
padding: 13px 14px 10px;
/* 上下paddingは数値上同じ(10px)でも、文字のline-height(1.5)上側の行間が
下側より視覚的に余白として残りやすく、上下對称にしても下の方が余白が
広く見えていた - 上だけ少し足して体感を揃える。 */
/* あえて縦中央揃え(flex+justify-content:center)にしていなかった理由:
1行だけの短い文章は70px最小高さの箱の中で上寄りに見える反面、2行目を
打った瞬間にブロック全体の高さが伸び、中央揃えだと上端が「上に」
動く(中央から対称に広がるため)ため、1行目の文章が急に上へ跳ねる
ように見えた。上からの固定パディングで静止させる方が、短文の時の
多少の余白より自然。 */
}
.be-compact .ProseMirror {
line-height: 1.5;
}
.composer-body-divider {
border: 0;
border-top: 1px solid var(--color-border);
margin: 4px 0 10px;
}
/* DragHandle renders its +/grip gutter as a direct child of .be-content
with inline position:absolute;top:0;left:0 (coordinates meant to track
the hovered node RELATIVE TO .be-content). Without a positioning
context here, the browser resolved that absolute position against the
nearest ancestor that HAD one instead - .modal-overlay (fixed, covers
the viewport) - so the gutter landed at the literal top-left corner of
the screen/modal, nowhere near the actual paragraph. */
.be-content {
position: relative;
}
/* reserves room for the gutter, which sits at a negative left offset
relative to .be-content (see createBlockEditor) - without this the
handle/plus buttons get clipped. .be-root no longer clips this itself
(overflow-y:visible now, see .be-root:not(.be-compact) above) so the
real clipping boundary is .composer-scroll-area further out.
2026-10-04: 18px(プラス)+0px(ハンドルとの間)+12px(ハンドル)=30pxがガター
自体の幅(JSが実測してbe-gutterのleftに-30pxとして入れる) - そこに本文との
余白4pxを足した34pxがこのmargin-left。 */
.be-content-has-gutter {
margin-left: 34px;
}
.be-content .ProseMirror {
outline: none;
line-height: 1.5;
/* 첫 블록 위/마지막 블록 아래에도 드롭할 수 있어야 하는데, 패딩이
0이면 그 "틈"에 마우스를 가져다 둘 공간 자체가 없어 드롭커서가
거기서는 안 뜨는 것처럼 보였다 - 최소한의 여유 공간을 둔다. */
padding: 6px 0;
/* 공백 없이 긴 문자열(URL, 반복문자 등)을 치면 줄바꿈 없이 한 줄로
쭉 뻗어나가 가로 스크롤/가터·버튼과의 겹침을 유발하던 버그
(2026-10-04 스크린샷으로 발견) - 단어 단위로 안 끊기면 글자 단위로
강제로라도 꺾이게 한다. */
overflow-wrap: anywhere;
word-break: break-word;
}
/* 줄 안 간격(line-height)과 별개로, 문단 사이 위/아래 여백은 브라우저 기본
마진(~1em씩, 위아래 합쳐 2em 가까이)을 그대로 쓰고 있어서 체감상
"행간이 너무 넓다"로 느껴졌음 - 명시적으로 좁혀준다. */
.be-content .ProseMirror p {
margin: 0.3em 0;
}
/* the browser's default
top margin (~1em) doesn't collapse out of
.ProseMirror, so the very first block always sat ~13-14px below
.be-content's own top edge - which is exactly where DragHandle's gutter
wrapper anchors (top:0 relative to .be-content). That gap was the real
cause of the gutter appearing to float above the first block: it was
correctly at .be-content's top, the text just started lower than that.
.be-compactも含め常時適用 - 中央揃えをやめた今は、1行目の開始位置は
.be-compactのpadding-topだけで決まる固定値にしたい(段落マージンが
上に乗ると、行数が増えるたびにその分だけ開始位置がずれて見える)。 */
.be-root .be-content .ProseMirror > :first-child {
margin-top: 0;
}
.be-content p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
color: var(--color-text-sub);
float: left;
height: 0;
pointer-events: none;
}
.be-content h1 {
font-size: 22px;
font-weight: 800;
margin: 10px 0 4px;
}
.be-content h2 {
font-size: 18px;
font-weight: 800;
margin: 8px 0 4px;
}
.be-content h3,
.be-content h4 {
font-size: 15px;
font-weight: 800;
margin: 6px 0 4px;
}
.be-content blockquote {
border-left: 3px solid var(--color-border);
padding-left: 12px;
color: var(--color-text-sub);
margin: 6px 0;
}
.be-content pre {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 12.5px;
background: var(--color-bg-alt);
border-radius: 4px;
padding: 10px 12px;
white-space: pre-wrap;
margin: 6px 0;
}
.be-content ul,
.be-content ol {
padding-left: 22px;
margin: 4px 0;
}
.be-content ul {
list-style: disc;
}
.be-content ol {
list-style: decimal;
}
.be-content li p {
margin: 0;
}
.be-content code {
background: #fdeceb;
color: #c2352c;
border-radius: 4px;
padding: 1px 6px;
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
}
.be-content pre code {
background: none;
color: inherit;
padding: 0;
}
.be-content a {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* StarterKitの区切り線ブロック(「---」入力 or 旧Slashpage本文由来) - 専用CSSが
無く、ブラウザ既定の
(高さ実質0〜2px)のままだったため、DragHandleの
ガター(高さ18px)がこのブロックをhoverした時に横の細い線と比べて浮いて
見える不具合があった(2026-10-04)。padding側で行高相当の厚みを持たせ、
線自体はその中央に来るようにする - ブロックの実測高さがテキスト行と
近くなり、ガターの位置・ハイライトの高さが揃って見える。 */
.be-content hr {
height: 0;
margin: 0;
padding: 9px 0 8px;
border: none;
border-top: 1px solid var(--color-border);
}
/* the gutter DragHandle floats in via its own positioning logic - only its
internal buttons need styling from us */
.be-gutter {
display: flex;
align-items: center;
gap: 0; /* プラス/ハンドル 사이는 0 유지 */
/* 본문과의 간격 4px - DragHandle이 "left = -(자신의 offsetWidth)"로 항상
글자에 틈 없이 밀착시키는 걸 실측으로 확인했기 때문에(2026-10-04),
margin-left만으론 안 통함 - 대신 이 padding-right를 가터 자신의 측정폭에
포함시켜(18+12+4=34) DragHandle이 스스로 -34px를 계산하게 만든다. */
padding-right: 4px;
/* the REAL cause of the long-standing "gutter appears above the first
block, then disappears" bug: DragHandle doesn't set an inline
position/top/left AT ALL until the first real hover/onNodeChange
fires (confirmed by sampling its style attribute every 60ms after
mount with no mouse movement - it stayed as just
"pointer-events: auto" for the whole window). With no position here
either, it defaulted to position:static and rendered as a normal
in-flow child BEFORE the first paragraph, i.e. visibly above it.
Giving it this exact position up front - beside the very top of
.be-content, using the same left offset the hover logic itself would
compute for the first line - makes it correctly placed from the
first frame, hover or not; the fade-in stays as a small extra
safety net for the instant right after mount. */
position: absolute;
/* 2026-10-03 수정: 아래 top/left는 JS(createBlockEditor의 mount 직후
requestAnimationFrame)가 즉시 실측해서 덮어쓰므로, 여기 값은 그 JS가
실행되기 전 한두 프레임 동안만 보이는 "과도기 폴백"일 뿐이다 - 다만
그 찰나에도 어긋나 보이지 않도록, JS가 쓰는 것과 동일한 공식으로 맞춰둠
(실제 hover를 유도해 DragHandle 자신이 쓰는 값을 직접 측정해서 역산한
것 - 과거엔 "세로 중앙정렬"로 가정하고 7.6px를 썼는데 실측 결과 그 가정
자체가 틀렸음이 드러남: 실제로는 .ProseMirrorのpadding-top(6px)만큼
그대로 내려갈 뿐, 센터링 보정은 없다). */
top: 6px;
left: -34px; /* 2026-10-04: 가터 실측 폭(18+12+padding-right 4=34px) 기준 - JS가 실행되기 전 과도기 폴백 */
animation: be-gutter-settle 0.18s ease 0.12s both;
}
/* プラス/ハンドル/本文の間は上の.be-gutter gapと.be-content-has-gutterの
margin-leftで余白を確保。 */
@keyframes be-gutter-settle {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.be-add-btn,
.be-handle-btn {
/* 히트박스(호버시 배경이 뜨는 버튼 영역) 크기 - 2026-10-04 사용자 지정값.
색도 진한 고정색 대신 노션처럼 옅은 회색(--color-text-sub)으로 되돌림 -
호버하면 더 진해짐(아래 :hover). */
height: 18px;
padding: 0; /* ブラウザ既定のbutton paddingが残っていて、svgのwidth:100%が
それ分だけ潰れていた(実機で特定: 20px幅のボタンでsvgが8pxに、12px幅の
ボタンでは0pxに潰れていた - 両方とも差が12pxで、Chromiumのbutton既定
padding 1px 6px(左右合計12px)と一致) */
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 4px;
background: transparent;
color: #b0b8c0; /* 2026-10-03(2차): --color-text-sub(#64748b)도 아직 진하다는
피드백 - 한 단계 더 옅은 회색으로 */
cursor: pointer;
}
.be-add-btn {
width: 18px; /* plus 글리프는 가로세로 길이가 같아 정사각형 히트박스 */
}
.be-handle-btn {
width: 12px; /* grip 글리프는 세로로 긴 모양 - 히트박스 가로폭을 글리프 가로폭만큼 줄임(정사각형으로 맞추지 않음) */
cursor: grab;
}
/* .be-gutterがflexコンテナなので、SVGルート要素がflexアイテムになる際、
width/height属性だけでは意図通りの主軸(横)サイズが出ない現象を実機で確認
(plus svgが20pxのはずが8pxに、grip svgが12pxのはずが0pxに潰れていた -
原因不明だがflexアイテム化したSVGの固有サイズ解決の実装差と見られる)。
ボタン自体は幅が確定しているので、SVG側にもCSSで明示的に100%を指定して
二重に固定する。 */
.be-add-btn svg,
.be-handle-btn svg {
width: 100%;
height: 100%;
flex-shrink: 0;
display: block;
}
.be-add-btn:hover,
.be-handle-btn:hover {
background: var(--color-bg-tint);
color: var(--color-text);
}
/* ハンドルクリックでブロック全体を選択した時の見た目 - 枠線(アウトライン)
ではなく、Notionのような薄い背景色の塗りつぶしにする(ユーザー明示要望)。 */
.ProseMirror-selectednode {
background-color: var(--color-bg-tint);
border-radius: 4px;
box-shadow: 0 0 0 4px var(--color-bg-tint);
}
/* 実際のクラス名は「ProseMirror-dropcursor」ではなく、prosemirror-dropcursor
パッケージが付ける小文字ハイフン区切りの「prosemirror-dropcursor-block」
(インライン位置なら「...-inline」) - 似た名前で誤って大文字キャメルケースの
方を長らく指定していて、一度もマッチしていなかった(2026-10-02発覚)。
しかもこのプラグインはbackground-colorを inline style で
background-color:currentcolor と指定してくる(周囲のテキスト色をそのまま
継承=黒っぽく見えていた正体) - !importantで上書きするにはクラス名が
合っている必要があった。 */
.be-content [class*="prosemirror-dropcursor"] {
background-color: rgba(33, 175, 191, 0.55) !important;
height: 3px !important;
border-radius: 3px;
}
.be-callout {
display: flex;
align-items: flex-start;
gap: 10px;
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 2px 0;
}
.be-callout .be-editable-content {
flex: 1;
min-width: 0;
}
.be-content .ProseMirror .be-callout .be-editable-content > :first-child {
margin-top: 0;
}
.be-content .ProseMirror .be-callout .be-editable-content > :last-child {
margin-bottom: 0;
}
.be-callout-icon {
border: none;
background: transparent;
font-size: 16px;
line-height: 1.4;
cursor: pointer;
padding: 0;
border-radius: 4px;
}
.be-callout-icon:hover {
background: rgba(0, 0, 0, 0.06);
}
.be-media-box {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
margin: 4px 0;
}
.be-media-box img {
width: 100%;
display: block;
}
.be-media-placeholder {
display: block;
padding: 20px;
font-size: 12.5px;
color: var(--color-text-sub);
text-align: center;
}
.be-file-block,
.be-embed-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 13px;
margin: 4px 0;
}
.be-media-picker-btn {
width: 100%;
padding: 24px 14px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
color: var(--color-text-sub);
font-size: 13px;
cursor: pointer;
}
.be-media-picker-btn:hover {
background: var(--color-bg-tint);
color: var(--color-text);
}
.be-editable-content:empty::before {
content: attr(data-placeholder);
color: var(--color-text-sub);
pointer-events: none;
}
/* popovers (emoji picker, callout background settings) share the same
floating-card look as Editor.js's own native settings popup */
.be-popover {
position: absolute;
z-index: 300;
flex-direction: column;
align-items: stretch;
background: #fff;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
min-width: 160px;
padding: 6px;
display: flex;
gap: 2px;
}
.be-popover button {
display: flex;
align-items: center;
gap: 9px;
border: none;
background: transparent;
color: var(--color-text);
font-size: 13px;
text-align: left;
padding: 7px 10px;
border-radius: 5px;
white-space: nowrap;
}
.be-popover button:hover,
.be-popover button.be-menu-active {
background: var(--color-bg-tint);
}
.be-popover button.be-danger {
color: var(--color-danger);
}
.be-popover button.be-danger:hover {
background: #fdeceb;
}
.be-popover.be-bg-submenu {
flex-direction: row;
min-width: auto;
}
/* horizontal icon-only row (heading/color/align/format submenus of the
selection toolbar) - the base .be-popover button rule is built for
label+icon rows (left-aligned, nowrap), not compact icon-only buttons */
.be-popover-row {
flex-direction: row;
min-width: auto;
}
.be-popover-row button {
justify-content: center;
padding: 7px;
gap: 0;
}
.be-popover-row button.active {
background: var(--color-bg-tint);
color: var(--color-primary-dark);
}
/* floating selection toolbar */
.be-sel-toolbar {
position: absolute;
z-index: 300;
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
padding: 4px;
gap: 1px;
}
.be-sel-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 5px;
background: transparent;
color: var(--color-text);
cursor: pointer;
}
.be-sel-btn:hover {
background: var(--color-bg-tint);
}
.be-sel-btn.active {
background: var(--color-bg-tint);
color: var(--color-primary-dark);
}
.be-sel-sep {
width: 1px;
height: 18px;
background: var(--color-border);
margin: 0 3px;
}
.be-aa-label,
.be-sel-btn-text {
font-size: 11px;
font-weight: 800;
}
/* compact editor (comments) toolbar row - replaces the per-block gutter,
meant to sit in the same row as the composer's own send button. */
.be-compact-toolbar {
display: flex;
align-items: center;
gap: 2px;
}
.be-compact-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 5px;
background: transparent;
color: var(--color-text-sub);
}
.be-compact-btn:hover {
background: var(--color-bg-tint);
color: var(--color-text);
}
/* when the compact toolbar is present (main comment box + reply boxes),
it sits at the left of the same row as the send button, pushed apart;
the comment-edit foot (保存/キャンセル, no toolbar) keeps its own
flex-end rule further up untouched. */
.comment-compose-foot:has(.be-compact-toolbar) {
justify-content: space-between;
align-items: center;
}
.be-inline-color-actions {
display: flex;
gap: 2px;
padding: 4px;
}
.be-color-swatch-btn {
width: 26px;
height: 26px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: #fff;
font-weight: 800;
font-size: 13px;
}
.be-color-swatch-btn:hover {
background: var(--color-bg-tint);
}
/* color now lives inside the swatch's own SVG (the "A" glyph or the
square's outline - see beColorAIcon/beColorBgIcon), not a CSS
background-color, so these are just plain square icon buttons - same
base look as any other .be-popover-row button, current value marked
the same way (.active) as everywhere else in the toolbars. */
.be-bg-swatch,
.be-color-chip {
width: 26px;
height: 26px;
padding: 0 !important;
}
.be-link-menu {
flex-direction: row;
align-items: center;
min-width: auto;
padding: 6px;
gap: 4px;
}
.be-link-input {
width: 200px;
max-width: 60vw;
border: 1px solid var(--color-border);
border-radius: 5px;
padding: 6px 8px;
font-size: 13px;
font-family: inherit;
color: var(--color-text);
}
.be-link-input:focus {
outline: none;
border-color: var(--color-primary);
}
.be-link-menu button {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
gap: 0;
}
.be-emoji-picker {
max-height: 260px;
overflow-y: auto;
min-width: 220px;
}
.be-emoji-group-label {
font-size: 11px;
color: var(--color-text-sub);
padding: 6px 4px 2px;
}
.be-emoji-group {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px;
}
.be-emoji-btn {
border: none;
background: transparent;
font-size: 17px;
padding: 4px;
border-radius: 5px;
}
.be-emoji-btn:hover {
background: var(--color-bg-tint);
}
.tag-chip-input {
display: flex;
flex-wrap: wrap;
gap: 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 8px;
}
.tag-chip {
background: var(--color-bg-tint);
color: var(--color-primary-dark);
font-size: 12px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-chip button {
background: none;
border: none;
color: inherit;
font-size: 11px;
padding: 0;
}
.tag-chip-input input {
border: none;
outline: none;
flex: 1;
min-width: 80px;
font-size: 13px;
font-family: inherit;
}
.thumb-color-picker {
display: flex;
gap: 8px;
}
.thumb-color-swatch {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
}
.thumb-color-swatch.selected {
border-color: var(--color-text);
}
.draft-restored-note {
font-size: 12px;
color: var(--color-primary-dark);
background: var(--color-bg-tint);
border-radius: var(--radius-sm);
padding: 6px 10px;
margin-bottom: 10px;
}
/* ==========================================================================
Guide page (ambassador / supporter)
========================================================================== */
.guide-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.guide-tab {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: #fff;
font-size: 13.5px;
font-weight: 700;
color: var(--color-text-sub);
white-space: nowrap;
}
.guide-tab.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.guide-links-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.guide-panel {
display: none;
padding: 32px 0 80px;
}
.guide-panel.active {
display: block;
}
.guide-block {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 24px;
background: #fff;
margin-bottom: 20px;
}
.guide-block h3 {
font-size: 16px;
margin: 0 0 12px;
}
.guide-block p,
.guide-block li {
font-size: 14.5px;
color: var(--color-text);
line-height: 1.8;
}
.guide-copy-box {
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
padding: 14px;
font-size: 13px;
font-family: monospace;
margin: 10px 0;
}
/* ==========================================================================
Settings page
========================================================================== */
.settings-body {
padding: 96px 0 80px;
max-width: 480px;
margin: 0 auto;
}
.settings-block {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 22px;
margin-bottom: 16px;
background: #fff;
}
.settings-block h3 {
font-size: 15px;
margin: 0 0 14px;
}
.settings-block.danger {
border-color: #f3d3d1;
background: #fff8f7;
}
.settings-block.danger h3 {
color: var(--color-danger);
}
.profile-photo-row {
display: flex;
align-items: center;
gap: 18px;
}
.profile-photo-preview {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
flex-shrink: 0;
overflow: hidden;
}
.profile-photo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-photo-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ==========================================================================
Admin (backoffice) - separate simple shell
========================================================================== */
/* 2026-10-06: 이전엔 인라인 스타일만 걸린 민무늬 폼(카드도 그림자도 없이
화면 중앙에 입력창만 덩그러니)이었던 것을 공개 사이트 로그인 모달과 같은
톤(브랜드 컬러/둥근 카드/그림자)으로 다듬었다(사용자 지정: "좀 더
예쁘게"). */
.admin-gate-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
padding: 20px;
}
.admin-gate-card {
width: 100%;
max-width: 360px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 36px 32px 32px;
text-align: center;
}
.admin-gate-mark {
width: 48px;
height: 48px;
margin: 0 auto 16px;
border-radius: var(--radius-md);
background: var(--color-primary);
color: #fff;
font-size: 22px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
}
.admin-gate-title {
margin: 0 0 4px;
font-size: 17px;
font-weight: 800;
color: var(--color-text);
}
.admin-gate-sub {
margin: 0 0 24px;
font-size: 13px;
color: var(--color-text-sub);
}
.admin-gate-field {
text-align: left;
margin-bottom: 14px;
}
.admin-gate-field label {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--color-text-sub);
margin-bottom: 6px;
}
.admin-gate-field input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
transition: border-color 0.15s ease;
}
.admin-gate-field input:focus {
outline: none;
border-color: var(--color-primary);
}
.admin-gate-submit {
width: 100%;
padding: 11px;
margin-top: 4px;
font-size: 14.5px;
}
.admin-gate-error {
color: var(--color-danger);
background: #fdecea;
border-radius: var(--radius-sm);
font-size: 12.5px;
padding: 8px 10px;
margin: 14px 0 0;
}
.admin-shell {
display: flex;
min-height: 100vh;
}
.admin-sidebar {
width: 250px;
background: #12232a;
color: #cbd5e1;
padding: 22px 14px;
flex-shrink: 0;
position: relative;
transition: width 0.18s ease, padding 0.18s ease;
overflow: hidden;
}
/* ブランド文字と開閉ボタンを同じ行に並べる見出し部 - 접힌 状態では
admin-brandがdisplay:noneになるので、justify-content:centerにより
トグルボタン1つだけが会員/支払いアイコンと同じ水平位置に自然に収まる
(下のnav linkが接힐 때 center揃えになるのと同じロジック)。 */
.admin-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 14px;
}
.admin-sidebar-collapsed .admin-sidebar-head {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
/* サイドバーの縁に半分はみ出す丸ボタンではなく、サイドバー自身の配色に合わせた
枠内のアイコンボタンにする - 境界に中途半端に乗っているように見えないよう。
アイコン自体のサイズ/コンテナは会員・支払いと同じ.admin-nav-iconを共有する
ので、ここではボタンの当たり判定(padding)だけ持たせる。 */
.admin-sidebar-toggle {
border: none;
background: transparent;
color: #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.12s ease, color 0.12s ease;
}
.admin-sidebar-toggle:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.admin-sidebar-divider {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin: 0 0 14px;
}
/* 접힌 상태 - 라벨 텍스트만 숨기고 폭을 줄인다. 아이콘(会員=人型, 支払い=¥)은
펼침/접힘 양쪽 다 항상 보인다 - 접혔을 때 뭘 가리키는 링크인지 알아볼 수 있어야
하니, title 툴팁만으로는 부족하다고 판단. */
.admin-sidebar-collapsed {
width: 60px;
padding-left: 8px;
padding-right: 8px;
}
.admin-sidebar-collapsed .admin-brand,
.admin-sidebar-collapsed .admin-nav-label {
display: none;
}
.admin-sidebar-collapsed a {
justify-content: center;
padding: 10px 4px;
}
.admin-nav-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.admin-sidebar .admin-brand {
color: #fff;
font-weight: 800;
font-size: 14px;
}
.admin-sidebar a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13.5px;
color: #cbd5e1;
margin-bottom: 2px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
}
.admin-sidebar a.active {
background: var(--color-primary);
color: #fff;
}
.admin-sidebar a:hover {
background: rgba(255, 255, 255, 0.08);
}
.admin-main {
flex: 1;
padding: 28px 32px;
background: var(--color-bg-alt);
min-width: 0;
}
.admin-topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 10px;
}
.admin-topbar h1 {
font-size: 20px;
margin: 0;
}
.admin-filters {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
select.admin-select,
input.admin-input {
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: inherit;
background: #fff;
}
.admin-table-wrap {
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: auto;
}
table.admin-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.admin-table th {
text-align: left;
font-size: 12px;
color: var(--color-text-sub);
background: var(--color-bg-alt);
padding: 10px 14px;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
/* both grid pages (支払い確定 / コミュニティ会員) double as spreadsheets:
the wrap gets its own bounded scroll (both axes) with a sticky header -
otherwise the horizontal scrollbar ends up thousands of px down the
page, unreachable, and the remaining columns are effectively lost. The
whole page no longer scrolls - .admin-main becomes a fixed-height flex
column and only the table wrap scrolls vertically inside it. */
body[data-page="costs"],
body[data-page="members"],
body[data-page="rewards"] {
height: 100%;
overflow: hidden;
}
body[data-page="costs"] .admin-shell,
body[data-page="members"] .admin-shell,
body[data-page="rewards"] .admin-shell {
height: 100vh;
}
body[data-page="costs"] .admin-main,
body[data-page="members"] .admin-main,
body[data-page="rewards"] .admin-main {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
body[data-page="costs"] .admin-grid-table-wrap,
body[data-page="members"] .admin-grid-table-wrap,
body[data-page="rewards"] .admin-grid-table-wrap {
flex: 1;
min-height: 0;
}
/* 2026-10-19再変更(2回目) - 縦積みにしたら「横に並べろと何度も言った」との
指摘で撤回、3箱を横一列に戻す(1回目の変更時の解釈が誤りだった)。箱ごとの
位置関係(上辺にタイトルを浮かせる)のため各箱はposition:relativeにし、
タイトルは絶対配置+背景色で境界線を隠して重ねる - この部分は維持。 */
.admin-stat-box-col {
display: flex;
flex-direction: row;
gap: 16px;
margin-bottom: 20px;
}
.admin-stat-box-col .admin-stat-box-v {
flex: 1;
min-width: 0;
}
.admin-stat-box-v {
position: relative;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 14px 18px 12px;
}
.admin-stat-box-v-title {
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 0 10px;
font-size: 12px;
font-weight: 700;
color: var(--color-text-sub);
white-space: nowrap;
}
.admin-stat-box-v-eq {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
/* 2026-10-20: テキストが2行になるのを避けたいとの指摘で折り返しをやめ、
3箱の横幅比率(発送待ち金額の箱を広く/謝礼未発送件数の箱を狭く)と
ラベル短縮(確定金額合計→確定金額 等)を合わせて1行に収める。 */
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
}
.admin-stat-box-v-eq .eq-term {
display: flex;
align-items: baseline;
gap: 5px;
white-space: nowrap;
}
.admin-stat-box-v-eq .eq-term b {
font-size: 16px;
font-weight: 800;
}
.admin-stat-box-v-eq .eq-term label {
color: var(--color-text-sub);
font-size: 11.5px;
}
.admin-stat-box-v-eq .eq-op {
color: var(--color-text-sub);
font-size: 13px;
font-weight: 700;
}
.admin-stat-box-v-eq .eq-result b,
.admin-stat-box-v-eq .eq-result label {
color: var(--color-primary-dark);
}
/* 2026-10-19追加 - フィルタ4つ(or2つ)とアクションボタンを1列に並べる共通
ツールバー(以前は別々の行だった.admin-filter-panelと.admin-split-toolbar
を統合)。 */
.admin-toolbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 4px 0 16px;
flex-wrap: wrap;
}
.admin-toolbar-row .admin-filter-panel {
margin: 0;
flex: 1;
min-width: 0;
}
.admin-toolbar-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* 謝礼発送タブ - 活動一覧の.admin-grid-table-wrapと同じく、縦方向だけここで
閉じ込めてスクロールさせる(ページ全体は伸びない)。 */
.admin-envelope-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.admin-costs-table thead th {
position: sticky;
top: 0;
z-index: 2;
}
.admin-costs-table th.admin-save-col {
z-index: 3;
}
.admin-costs-table td.admin-save-col {
z-index: 1;
}
.admin-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--color-border);
font-size: 13px;
vertical-align: middle;
white-space: nowrap;
}
.admin-table tr:last-child td {
border-bottom: none;
}
.admin-amount-input {
width: 90px;
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.admin-memo-input {
width: 140px;
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12.5px;
}
.admin-stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
/* costs admin's stats as 3 short equations (件数の内訳 / 発送済み件数 / 発送済み
金額) instead of 8 disconnected cards - the numbers' relationship to each
other (総-確定-却下-保留=待機 など) is the point, so it's spelled out inline
rather than left for the reader to reconstruct from 8 separate tiles. */
.admin-stat-eq-wrap {
display: flex;
flex-direction: row;
margin-bottom: 14px;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.admin-stat-eq {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
padding: 10px 14px;
font-size: 12px;
border-right: 1px solid var(--color-border);
}
.admin-stat-eq:last-child {
border-right: none;
}
.admin-stat-eq .eq-term {
display: flex;
align-items: baseline;
gap: 5px;
white-space: nowrap;
}
.admin-stat-eq .eq-term b {
font-size: 15px;
font-weight: 800;
}
.admin-stat-eq .eq-term label {
color: var(--color-text-sub);
font-size: 11px;
}
.admin-stat-eq .eq-op {
color: var(--color-text-sub);
font-size: 13px;
font-weight: 700;
}
.admin-stat-eq .eq-result b,
.admin-stat-eq .eq-result label {
color: var(--color-primary-dark);
}
.admin-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 16px;
}
.admin-chip {
padding: 7px 16px;
border-radius: 999px;
border: 1px solid var(--color-border);
font-size: 13px;
font-weight: 700;
color: var(--color-text-sub);
background: #fff;
}
.admin-chip.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* 2026-10-19再変更 - チップ方式は見た目が軽すぎる/状態が分かりにくいとの
指摘で撤回、ドロップダウン(