@charset "utf-8";

/* ============================================================
   BASE
============================================================ */
#bo_list {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 12px;
}


/* ============================================================
   SEARCH
============================================================ */
#bo_sch {
    display: flex;
    justify-content: flex-end;
    border: 0;
    padding: 0;
    margin: 0 0 16px;
}
#bo_sch form { width: 50%; }


/* ============================================================
   CATEGORY
============================================================ */
#bo_cate { margin: 0 0 16px; }

/* 접근성: 제목 숨김 */
#bo_cate h2 {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#bo_cate ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0; margin: 0;
}
#bo_cate li { display: inline-block; }
#bo_cate a {
    display: block;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--text-muted, #888888);
    text-decoration: none;
    font-size: 0.88em;
    transition: all 0.2s;
}
#bo_cate a:hover,
#bo_cate #bo_cate_on {
    background: var(--primary-color, #7ba7c9);
    color: var(--btn-primary-text, #7a3f3a);
}


/* ============================================================
   WRITE AREA
============================================================ */
.memo-write-area {
    background: var(--card-bg-color, rgba(255,255,255,0.75));
    border-radius: 20px;
    padding: 12px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.memo-write-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.memo-write-body { flex: 1; }

/* 글쓰기 아바타 */
.memo-write-avatar {
    width: 46px; height: 46px;
    border-radius: 30px;
    overflow: hidden;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.memo-write-avatar img { width: 100%; height: 100%; object-fit: cover; }
.memo-write-avatar .fa-user-circle { font-size: 36px; color: var(--text-muted, #888888); line-height: 1; }

/* 텍스트 입력 */
.memo-input {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1px solid var(--input-border-color, #eee);
    border-radius: 12px;
    background: #ffffff85;
    color: var(--content-font-color, #333333);
    font-size: 1em;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.memo-input::placeholder { color: var(--text-muted, #888888); opacity: 0.7; }
.memo-input:focus { border-bottom-color: var(--primary-color, #7ba7c9); }

/* 하단 바 */
.memo-write-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.memo-select {
    padding: 6px 12px;
    border: 1px solid var(--input-border-color, #ddd);
    border-radius: 20px;
    background: var(--form-bg-color, rgba(255,255,255,0.9));
    color: var(--form-text-color, #333333);
    font-size: 0.88em;
    cursor: pointer;
}
.memo-submit-btn {
    padding: 7px 20px;
    background: var(--primary-color, #7ba7c9);
    color: var(--btn-primary-text, #7a3f3a);
    border: none;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.memo-submit-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }


/* ============================================================
   TOOLBAR (이미지 · 스포일러 · 비밀글)
============================================================ */
.memo-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

/* 공통 아이콘 버튼 */
.memo-img-btn,
.memo-secret-btn,
.memo-spoiler-btn,
.memo-url-img-btn,
.memo-reply-spoiler-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.memo-img-btn,
.memo-secret-btn,
.memo-url-img-btn,
.memo-reply-spoiler-btn {
    width: 30px; height: 30px;
}
.memo-img-btn    { font-size: 1em; }
.memo-secret-btn { font-size: 0.95em; }
.memo-spoiler-btn { font-size: 1.1em; padding: 4px 6px; line-height: 1; }
.memo-url-img-btn { font-size: 0.95em; }
.memo-reply-spoiler-btn { font-size: 1em; }

/* 브라우저 기본 button 스타일 제거 - 카드 배경색에 녹아들도록 */
.memo-url-img-btn,
.memo-reply-spoiler-btn {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border: none;
}

.memo-img-btn:hover,
.memo-secret-btn:hover,
.memo-url-img-btn:hover,
.memo-reply-spoiler-btn:hover { background: var(--light-bg-color, rgba(255,255,255,0.25)); }
.memo-img-btn:hover,
.memo-url-img-btn:hover       { color: var(--primary-color, #7ba7c9); }
.memo-spoiler-btn:hover       { color: var(--text-color, #333); background: rgba(0,0,0,0.06); }
.memo-reply-spoiler-btn:hover { color: var(--text-color, #333); }

.memo-secret-btn.active .memo-secret-icon,
.memo-secret-btn .fa-lock { color: var(--primary-color, #7ba7c9); }


/* ============================================================
   이미지 미리보기 (업로드 전 썸네일)
============================================================ */
.memo-img-preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}
.memo-img-preview-item {
    position: relative;
    width: 80px; height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--card-border-color, #eee);
}
.memo-img-preview-item img { width: 100%; height: 100%; object-fit: cover; }

.memo-img-remove-btn {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 0.7em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.memo-img-remove-btn:hover { background: rgba(200,0,0,0.8); }

/* 댓글용 미리보기 (크기만 축소) */
.memo-reply-img-preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}
.memo-reply-img-preview-area .memo-img-preview-item { width: 60px; height: 60px; }


/* ============================================================
   이미지 그리드 (본문 표시)
============================================================ */
.memo-img-grid {
    position: relative;
    margin-top: 10px;
    width: 100%;
}
.memo-img-thumb {
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--card-border-color, #eee);
    transition: opacity 0.15s;
    display: block;
}
.memo-img-thumb:hover { opacity: 0.88; }

/* 사진 1장: 지금처럼 꽉 차게 */
.memo-img-grid.count-1 .memo-img-thumb { width: 100%; height: auto; object-fit: unset; border-radius: 12px; }

/* 사진 2장 이상: 옆으로 넘기는 슬라이드 */
.memo-img-grid:not(.count-1),
.memo-img-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 12px;
    border: 1px solid var(--card-border-color, #eee);
}
.memo-img-grid.is-slider { display: block; overflow: visible; border: none; }
.memo-img-grid:not(.count-1)::-webkit-scrollbar,
.memo-img-track::-webkit-scrollbar { display: none; }
.memo-img-grid:not(.count-1) .memo-img-thumb {
    flex: 0 0 100%;
    width: 100%;
    height: 320px;
	object-fit: contain;
    background: rgba(0,0,0,0.04);
    border: none;
    border-radius: 0;
    scroll-snap-align: start;
}
.memo-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.15s, background 0.15s;
}
.memo-slide-btn:hover { background: rgba(0,0,0,0.65); }
.memo-slide-prev { left: 8px; }
.memo-slide-next { right: 8px; }
.memo-slide-btn.is-hidden { opacity: 0; pointer-events: none; }
.memo-slide-counter {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.75em;
    z-index: 2;
    pointer-events: none;
}


/* ============================================================
   비밀글
============================================================ */
.memo-secret-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(100,100,200,0.1);
    color: #6060cc;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
}
.memo-item.memo-secret { border-left: 3px solid rgba(100,100,200,0.35); }
.memo-secret-placeholder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    border-radius: 10px;
    color: var(--text-muted, #888888);
    font-size: 0.9em;
    margin: 4px 0;
}


/* ============================================================
   LIST
============================================================ */
.memo-list-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ============================================================
   ITEM
============================================================ */
.memo-item {
    display: flex;
    gap: 12px;
    background: var(--card-bg-color, rgba(255,255,255,0.75));
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.memo-item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* 아바타 */
.memo-avatar {
    width: 38px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.memo-avatar > img,
.memo-avatar > .fa-user-circle {
    width: 38px; height: 38px;
    border: 1px solid var(--input-border-color, #ececec);
    border-radius: 50px;
    object-fit: cover;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--text-muted, #888888);
    line-height: 1;
}

/* 본문 */
.memo-body { flex: 1; min-width: 0; }

.memo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 1px;
}
.memo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.memo-name { font-weight: 700; font-size: 1.03em; color: var(--content-font-color, #333333); }
.memo-rank { font-size: 0.82em; font-weight: normal; }
.memo-category {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary-color, #7ba7c9);
    color: var(--btn-primary-text, #7a3f3a);
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
}
.memo-date { font-size: 0.78em; color: var(--text-muted, #888888); }

/* 수정/삭제 버튼 */
.memo-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    position: absolute;
    top: 10px; right: 16px;
}
.memo-edit-btn,
.memo-delete-btn {
    width: 26px; height: 26px;
    border: none;
    background: none;
    color: var(--text-muted, #888888);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.5px;
    transition: all 0.2s;
}
.memo-edit-btn:hover   { background: var(--light-bg-color, rgba(255,255,255,0.25)); color: var(--primary-color, #7ba7c9); }
.memo-delete-btn:hover { background: rgba(220,50,50,0.08); color: var(--danger-color, #dc3232); }

/* 본문 텍스트 */
.memo-content {
    font-size: 0.98em;
    line-height: 1.6;
    color: var(--content-font-color, #333333);
    white-space: normal;
    word-break: break-word;
}


/* ============================================================
   EDIT AREA (글 수정 폼)
============================================================ */
.memo-edit-area { margin-top: 8px; }

.memo-edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid var(--input-border-color, #eee);
    background: #ffffff85;
    color: var(--content-font-color, #333333);
    font-size: 0.95em;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.memo-edit-textarea:focus { border-bottom-color: var(--primary-color, #7ba7c9); }

.memo-edit-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* 공통: 저장/취소 */
.memo-save-btn,
.memo-cancel-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.memo-save-btn   { background: var(--primary-color, #7ba7c9); color: var(--btn-primary-text, #7a3f3a); margin-left: auto; }
.memo-cancel-btn { background: var(--light-bg-color, rgba(255,255,255,0.25)); color: var(--text-muted, #888888); }
.memo-save-btn:hover   { filter: brightness(0.95); }
.memo-cancel-btn:hover { background: var(--card-border-color, rgba(255,255,255,0.4)); }


/* ============================================================
   ACTION BAR (좋아요 · 댓글)
============================================================ */
.memo-reply-section { margin-top: 8px; margin-bottom: 2px; }

.memo-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 좋아요 */
.memo-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 3px;
    border: none;
    background: none;
    color: var(--text-muted, #888888);
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
}
.memo-like-btn:hover  { background: var(--light-bg-color, rgba(255,255,255,0.25)); color: #e0245e; }
.memo-like-btn.liked  { color: #e0245e; }
.memo-like-btn.like-pop { transform: scale(1.3); }
.memo-like-btn .memo-like-count { font-weight: 700; }

/* 좋아요한 사람 */
.memo-liked-by {
    font-size: 0.78em;
    color: var(--text-muted, #888888);
    margin-top: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.memo-liked-by i      { color: #e0245e; font-size: 0.85em; }
.memo-liked-by strong { color: var(--content-font-color, #333333); }
.memo-liked-by:hover  { text-decoration: underline; }

/* 좋아요 목록 모달 */
.memo-liker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border-color, #eee);
    font-size: 0.9em;
}
.memo-liker-item:last-child { border-bottom: none; }
.memo-liker-item img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.memo-liker-item i   { font-size: 32px; color: var(--text-muted, #888888); }

/* 댓글 토글 */
.memo-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 3px;
    border: none;
    background: none;
    color: var(--text-muted, #888888);
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
}
.memo-reply-toggle:hover { background: var(--light-bg-color, rgba(255,255,255,0.25)); color: var(--primary-color, #7ba7c9); }
.memo-reply-toggle .memo-reply-count { font-weight: 700; color: var(--primary-color, #7ba7c9); }


/* ============================================================
   REPLY AREA (댓글 목록)
============================================================ */
.memo-reply-area {
    margin-top: 5px;
    padding-top: 10px;
}
.memo-reply-loading {
    text-align: center;
    padding: 16px;
    color: var(--text-muted, #888888);
    font-size: 1.2em;
}
.memo-reply-empty,
.memo-reply-error {
    text-align: center;
    padding: 8px;
    color: var(--text-muted, #888888);
    font-size: 0.88em;
}
.memo-reply-error { color: var(--danger-color, #dc3232); }

/* 댓글 아이템 */
.memo-reply-item {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    position: relative;
}
.memo-reply-item:last-child { border-bottom: none; }
.memo-reply-item .memo-actions { top: 4px; right: 0; }

/* 댓글 아바타 */
.memo-reply-avatar {
    width: 32px; height: 32px;
    border-radius: 120px;
    overflow: hidden;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.memo-reply-avatar img          { width: 100%; height: 100%; object-fit: cover; }
.memo-reply-avatar .fa-user-circle { font-size: 28px; color: var(--text-muted, #888888); line-height: 1; }

.memo-reply-body { flex: 1; min-width: 0; }

.memo-reply-content {
    font-size: 0.98em;
    line-height: 1.6;
    color: var(--content-font-color, #333333);
    word-break: break-word;
    margin-top: 4px;
}


/* ============================================================
   REPLY WRITE (댓글 쓰기 폼)
============================================================ */
.memo-reply-write {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
    padding-top: 5px;
}
.memo-reply-write-body { flex: 1; }

/* 댓글 아바타 (쓰기) */
.memo-reply-write-avatar {
    width: 30px; height: 30px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.memo-reply-write-avatar img          { width: 100%; height: 100%; object-fit: cover; }
.memo-reply-write-avatar .fa-user-circle { font-size: 28px; color: var(--text-muted, #888888); line-height: 1; }

.memo-reply-input {
    width: 100%;
    min-height: 64px;
    padding: 4px 8px;
    border: 1px solid var(--input-border-color, #eee);
    background: #ffffff73;
    color: var(--content-font-color, #333333);
    font-size: 0.97em;
    line-height: 1.7;
    resize: none;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.memo-reply-input::placeholder { color: var(--text-muted, #888888); opacity: 0.7; }
.memo-reply-input:focus { border-bottom-color: var(--primary-color, #7ba7c9); }

.memo-reply-write-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.memo-reply-submit-btn {
    padding: 5px 16px;
    background: var(--primary-color, #7ba7c9);
    color: var(--btn-primary-text, #7a3f3a);
    border: none;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}
.memo-reply-submit-btn:hover { filter: brightness(0.95); }


/* ============================================================
   EMPTY STATE
============================================================ */
.memo-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #888888);
}
.memo-empty i { font-size: 3em; display: block; margin-bottom: 16px; opacity: 0.3; }
.memo-empty p { font-size: 1em; margin: 6px 0; }
.memo-empty-hint { font-size: 0.9em; opacity: 0.7; }


/* ============================================================
   PAGINATION
============================================================ */
.bo-pagination { margin-top: 24px; text-align: center; }


/* ============================================================
   HASHTAG
============================================================ */
.memo-hashtag {
    color: var(--primary-color, #7ba7c9);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}
.memo-hashtag:hover { color: var(--accent-color, #7ba7c9); text-decoration: underline; }

/* 해시태그 필터 배너 */
.memo-tag-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin-bottom: 12px;
    background: rgba(91,141,238,0.1);
    border: 1px solid rgba(91,141,238,0.3);
    border-radius: 10px;
    font-size: 0.9em;
}
.memo-tag-banner-text { flex: 1; color: #5b8dee; font-weight: 600; }
.memo-tag-clear {
    background: none;
    border: 1px solid rgba(91,141,238,0.4);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.85em;
    color: #5b8dee;
    cursor: pointer;
    transition: background 0.15s;
}
.memo-tag-clear:hover { background: rgba(91,141,238,0.15); }


/* ============================================================
   SPOILER
============================================================ */
.memo-spoiler-wrap { margin-top: 8px; }

.memo-spoiler-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 5px 12px;
    background: rgba(120,120,180,0.1);
    border: 1px dashed rgba(120,120,180,0.4);
    border-radius: 6px;
    color: #888;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.memo-spoiler-toggle:hover { background: rgba(120,120,180,0.18); color: #555; }

.memo-spoiler-content {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(120,120,180,0.06);
    border-left: 3px solid rgba(120,120,180,0.3);
    border-radius: 0 6px 6px 0;
    font-size: 0.95em;
}


/* ============================================================
   BLOCK EDITOR
============================================================ */
.memo-block-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px ;
    min-height: 120px;
    border: 1px solid var(--input-border-color, #eee);
    border-radius: 16px;
    background-color : #ffffff82
}

.memo-block-editor:focus-within {
    border-color: var(--primary-color, #7ba7c9);
}

.memo-block-normal {
    min-height: 38px;
    outline: none;
    font-size: 0.97em;
    line-height: 1.7;
    color: var(--content-font-color, #333333);
    white-space: pre-wrap;
    word-break: break-word;
}
.memo-block-normal:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #bbb);
    pointer-events: none;
}

/* 스포일러 블록 */
.memo-block-spoiler {
    border: 1px dashed var(--card-border-color, #ddd);
    border-radius: 8px;
    overflow: hidden;
}
.memo-block-spoiler-header {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--light-bg-color, rgba(0,0,0,0.03));
}
.memo-block-spoiler-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 0.82em;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: left;
    transition: color 0.15s;
}
.memo-block-spoiler-toggle:hover { color: var(--text-color, #555); }
.memo-block-spoiler-remove {
    background: none;
    border: none;
    color: var(--text-muted, #ccc);
    font-size: 0.8em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.memo-block-spoiler-remove:hover { color: var(--danger-color, #e55); }
.memo-block-spoiler-body {
    min-height: 36px;
    padding: 8px 12px;
    outline: none;
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--content-font-color, #333333);
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px dashed var(--card-border-color, #ddd);
}
.memo-block-spoiler-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #bbb);
    pointer-events: none;
}


/* ============================================================
   LIGHTBOX
============================================================ */
#memo-lightbox { position: fixed; inset: 0; z-index: 9999; }
#memo-lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.88); cursor: pointer; }
#memo-lightbox-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#memo-lightbox-img-wrap {
    max-width: 90vw; max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}
#memo-lightbox-img {
    max-width: 90vw; max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    display: block;
}

/* 라이트박스 공통 버튼 */
#memo-lightbox-close,
#memo-lightbox-prev,
#memo-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: background 0.15s;
}
#memo-lightbox-close:hover,
#memo-lightbox-prev:hover,
#memo-lightbox-next:hover { background: rgba(255,255,255,0.3); }

#memo-lightbox-close { top: 16px; right: 20px; width: 40px; height: 40px; font-size: 1.4em; }
#memo-lightbox-prev,
#memo-lightbox-next  { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.2em; }
#memo-lightbox-prev  { left: 16px; }
#memo-lightbox-next  { right: 16px; }

#memo-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    pointer-events: none;
    background: rgba(0,0,0,0.4);
    padding: 3px 12px;
    border-radius: 20px;
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
    #bo_list  { padding: 12px 8px; }
    #bo_sch   { justify-content: stretch; }
    #bo_sch form { width: 100%; }
    .memo-item       { padding: 14px; }
    .memo-write-area { padding: 14px; }
    .memo-img-grid:not(.count-1) .memo-img-thumb { height: 240px; }
}
/* ============================================================
   외부 이미지 URL 입력 행
   ============================================================ */
.memo-url-img-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-sub, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    box-sizing: border-box;
    flex-wrap: nowrap;
}
.memo-url-img-text {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-color, #333);
    outline: none;
    padding: 2px 4px;
}
.memo-url-img-text::placeholder {
    color: var(--text-muted, #aaa);
    font-size: 12px;
}
.memo-url-img-add-btn {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 6px;
    border: none;
    background: var(--primary-color, #1d9bf0);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.memo-url-img-add-btn:hover {
    opacity: 0.85;
}
.memo-url-img-cancel-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    line-height: 1;
}
.memo-url-img-cancel-btn:hover {
    color: var(--text-color, #555);
}


/* =====================================================================
   게시판 상단 공지 (투명 테이프 + 캠코더 창)  /  검색창 아래로
   - 이 아래 부분만 지우면 공지 디자인이 사라집니다.
   ===================================================================== */
#bo_list .tm-notice {
    position: relative;
    width: min(560px, 92%);
    margin: 22px auto 26px;
    padding: 32px 30px 22px;
    line-height: 1.7;
    background: rgba(251, 252, 253, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(70, 100, 130, 0.1);
}

/* 위쪽 투명 테이프 */
#bo_list .tm-notice::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 96px;
    height: 24px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 2px rgba(60, 80, 100, 0.12), inset 0 0 6px rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    pointer-events: none;
}

/* 종이 질감 (자잘한 종이 결) */
#bo_list .tm-notice::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ● NOTICE 표시 */
#bo_list .tm-notice-label {
    position: absolute;
    top: 9px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #f28aa0;
}
#bo_list .tm-notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f28aa0;
    box-shadow: 0 0 5px #f28aa0;
    animation: tmNoticeBlink 1.2s steps(1) infinite;
}
@keyframes tmNoticeBlink {
    50% { opacity: 0; }
}

/* 공지 글 */
#bo_list .tm-notice-body {
    position: relative;
    z-index: 1;
    font-size: 14px;
    word-break: keep-all;
}
#bo_list .tm-notice-body p {
    margin: 0;
}

/* 검색창: 목록 아래 가운데 */
#bo_list #bo_sch {
    justify-content: center;
    margin: 24px 0 0;
}

@media (max-width: 768px) {
    #bo_list .tm-notice { padding: 28px 18px 20px; }
    #bo_list .tm-notice-label { left: 14px; font-size: 10px; }
}
/* ===================== 상단 공지 / 검색창 끝 ===================== */


/* =====================================================================
   [캠코더 꾸밈] 카테고리 화면표시 · REC · 타임코드 · 우하단 이모티콘 · 답글
   - 박스 색과 글자 색은 홈페이지 설정 색을 그대로 따라갑니다.
   - 분홍 포인트는 위쪽 NOTICE 분홍과 같은 색입니다. (아래 --tm-pink 한 곳만 바꾸면 전부 바뀝니다)
   - 이 아래 부분만 지우면 원래 디자인으로 돌아갑니다.
   ===================================================================== */
#bo_list {
    --tm-pink: #f28aa0;                                   /* 분홍 포인트 (NOTICE와 같은 색) */
    --tm-osd:  var(--primary-color, #7ba7c9);             /* 화면표시 테두리 = 홈페이지 메인 색 */
    --tm-mono: 'Courier New', 'Courier', monospace;       /* 캠코더 화면 글씨 */
}

/* ---------- 깜빡임 ---------- */
@keyframes tmBlink  { 50% { opacity: 0; } }
@keyframes tmFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }


/* ---------- 1. 카테고리 탭 (전체 · 기록 · 덕질) : 캠코더 화면표시 ---------- */
#bo_list #bo_cate ul { gap: 8px; }
#bo_list #bo_cate a {
    padding: 4px 11px;
    border: 1px solid var(--tm-osd);
    border-radius: 3px;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
}
#bo_list #bo_cate a:hover {
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    border-color: var(--tm-pink);
    color: var(--tm-pink);
}
/* 지금 고른 카테고리: 분홍 + 글자 뒤 타자 커서 _ 깜빡 */
#bo_list #bo_cate #bo_cate_on {
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    border-color: var(--tm-pink);
    color: var(--tm-pink);
}
#bo_list #bo_cate #bo_cate_on::after {
    content: '_';
    margin-left: 2px;
    animation: tmBlink 1s steps(1) infinite;
}


/* ---------- 2. 게시글에 붙는 카테고리 이름 : 같은 화면표시 (커서 없음) ---------- */
#bo_list .memo-category {
    padding: 1px 7px;
    border: 1px solid var(--tm-osd);
    border-radius: 3px;
    background: transparent;
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
}


/* ---------- 3. 작성창·수정창 카테고리 선택칸 : 같은 화면표시 + 커서 _ ---------- */
#bo_list .tm-osd-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}
#bo_list .tm-osd-select .memo-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 5px 24px 5px 11px;
    border: 1px solid var(--tm-osd);
    border-radius: 3px;
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    outline: none;
}
#bo_list .tm-osd-select .memo-select:focus { border-color: var(--tm-pink); }
#bo_list .tm-osd-select .memo-select option {
    font-family: inherit;
    color: var(--form-text-color, #333333);
    background: var(--form-bg-color, #ffffff);
}
#bo_list .tm-osd-select::after {
    content: '_';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-58%);
    color: var(--tm-pink);
    font-family: var(--tm-mono);
    font-weight: 700;
    pointer-events: none;
    animation: tmBlink 1s steps(1) infinite;
}


/* ---------- 4. ● REC 표시 (게시글 오른쪽 위) ---------- */
#bo_list .memo-item > .memo-body > .memo-header .tm-rec {
    position: absolute;
    top: 15px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--tm-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tm-pink);
    pointer-events: none;
}
/* 수정·삭제 버튼이 있는 글은 버튼 왼쪽으로 */
#bo_list .memo-item.tm-can-edit > .memo-body > .memo-header .tm-rec { right: 84px; }
#bo_list .tm-rec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-pink);
    box-shadow: 0 0 5px var(--tm-pink);
    animation: tmBlink 1.4s steps(1) infinite;
}
/* 이름 줄 글자가 REC와 겹치지 않게 */
#bo_list .memo-item > .memo-body > .memo-header > .memo-meta { padding-right: 52px; }
#bo_list .memo-item.tm-can-edit > .memo-body > .memo-header > .memo-meta { padding-right: 118px; }


/* ---------- 5. 타임코드 (작성 시각) ---------- */
#bo_list .tm-timecode {
    margin-right: 4px;
    font-family: var(--tm-mono);
    font-size: 0.76em;
    letter-spacing: 0.04em;
    color: var(--text-muted, #888888);
    white-space: nowrap;
}
/* 댓글 시각도 같은 글씨로 */
#bo_list .memo-reply-item .memo-date {
    font-family: var(--tm-mono);
    letter-spacing: 0.03em;
}


/* ---------- 6. 우하단 이모티콘 ---------- */
#bo_list .tm-sticker {
    margin-left: auto;
    width: 1.7em;
    height: 1.7em;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#bo_list .tm-sticker img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(70, 110, 150, 0.18));
}
/* 안 골랐을 때: 파비콘이 둥실둥실 */
#bo_list .tm-sticker.is-default img { animation: tmFloat 2.8s ease-in-out infinite; }
/* 글쓴이·관리자: 눌러서 바꾸기 */
#bo_list .tm-sticker.is-editable { cursor: pointer; border-radius: 50%; transition: transform .15s, background .15s; }
#bo_list .tm-sticker.is-editable:hover,
#bo_list .tm-sticker.is-editable.is-open { transform: scale(1.08); background: var(--light-bg-color, rgba(255,255,255,0.25)); }

/* 글쓰기 창의 작은 이모티콘 고르기 버튼 */
#bo_list .tm-sticker-pick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
#bo_list .tm-sticker-pick-btn img { width: 20px; height: 20px; object-fit: contain; opacity: .7; pointer-events: none; }
#bo_list .tm-sticker-pick-btn.is-picked img { opacity: 1; }
#bo_list .tm-sticker-pick-btn:hover,
#bo_list .tm-sticker-pick-btn.is-open { background: var(--light-bg-color, rgba(255,255,255,0.25)); }

/* 고르기 창의 "기본(파비콘)" 칸 */
.tm-sticker-panel .tm-sticker-reset { outline: 1px dashed rgba(123, 167, 201, 0.55); outline-offset: -3px; }


/* ---------- 7. 답글(대댓글) ---------- */
/* 답글은 한 칸 들여쓰기 */
#bo_list .memo-reply-item.tm-is-child { margin-left: 42px; }
#bo_list .memo-reply-item.tm-is-child .memo-reply-avatar { width: 26px; height: 26px; }
/* 답글에 다시 답하면 붙는 @이름 */
#bo_list .tm-mention { color: var(--tm-pink); font-weight: 700; }
/* 댓글 아래 "답글" 버튼 */
#bo_list .tm-reply-foot { margin-top: 1px; }
#bo_list .tm-reply-to-btn {
    padding: 1px 4px;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--text-muted, #888888);
    font-size: 0.76em;
    cursor: pointer;
    transition: color .15s;
}
#bo_list .tm-reply-to-btn:hover { color: var(--tm-pink); }
/* 삭제된 댓글 자리 */
#bo_list .memo-reply-item.tm-is-deleted .memo-reply-avatar { opacity: .35; }
#bo_list .tm-deleted-text {
    padding-top: 6px;
    color: var(--text-muted, #888888);
    font-size: 0.88em;
}
/* 답글 쓰는 중: 쓰기 칸도 들여쓰기 + "○○ 님에게 답글" 표시 */
#bo_list .memo-reply-write.tm-replying { margin: 4px 0 8px 42px; }
#bo_list .tm-replying-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8em;
    color: var(--text-muted, #888888);
}
#bo_list .tm-replying-bar b { color: var(--tm-pink); }
#bo_list .tm-replying-cancel {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--text-muted, #888888);
    cursor: pointer;
}
#bo_list .tm-replying-cancel:hover { background: var(--light-bg-color, rgba(255,255,255,0.25)); }


/* ---------- 휴대폰 ---------- */
@media (max-width: 768px) {
    #bo_list .memo-reply-item.tm-is-child,
    #bo_list .memo-reply-write.tm-replying { margin-left: 28px; }
    #bo_list .memo-item > .memo-body > .memo-header .tm-rec { top: 13px; right: 14px; }
    #bo_list .memo-item.tm-can-edit > .memo-body > .memo-header .tm-rec { right: 78px; }
}

/* 움직임 줄이기 설정을 켠 기기에서는 깜빡임·둥실 멈춤 */
@media (prefers-reduced-motion: reduce) {
    #bo_list .tm-rec-dot,
    #bo_list #bo_cate #bo_cate_on::after,
    #bo_list .tm-osd-select::after,
    #bo_list .tm-sticker.is-default img { animation: none; }
}


/* =====================================================================
   [캠코더 꾸밈] 카테고리 화면표시 · REC · 타임코드 · 우하단 이모티콘 · 답글
   - 박스 색과 글자 색은 홈페이지 설정 색을 그대로 따라갑니다.
   - 분홍 포인트는 위쪽 NOTICE 분홍과 같은 색입니다. (아래 --tm-pink 한 곳만 바꾸면 전부 바뀝니다)
   - 이 아래 부분만 지우면 원래 디자인으로 돌아갑니다.
   ===================================================================== */
#bo_list {
    --tm-pink: #f28aa0;                                   /* 분홍 포인트 (NOTICE와 같은 색) */
    --tm-osd:  var(--primary-color, #7ba7c9);             /* 화면표시 테두리 = 홈페이지 메인 색 */
    --tm-mono: 'Courier New', 'Courier', monospace;       /* 캠코더 화면 글씨 */
    --tm-round: 999px;                                    /* 카테고리·목록으로 버튼 둥글기 (999px = 알약 모양 / 8px = 살짝 둥글게) */
}

/* ---------- 깜빡임 ---------- */
@keyframes tmBlink  { 50% { opacity: 0; } }
@keyframes tmFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }


/* ---------- 1. 카테고리 탭 (전체 · 기록 · 덕질) : 캠코더 화면표시 ---------- */
#bo_list #bo_cate ul { gap: 8px; }
#bo_list #bo_cate a {
    padding: 4px 13px;
    border: 1px solid var(--tm-osd);
    border-radius: var(--tm-round);
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
}
#bo_list #bo_cate a:hover {
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    border-color: var(--tm-pink);
    color: var(--tm-pink);
}
/* 지금 고른 카테고리: 분홍 + 글자 뒤 타자 커서 _ 깜빡 */
#bo_list #bo_cate #bo_cate_on {
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    border-color: var(--tm-pink);
    color: var(--tm-pink);
}
#bo_list #bo_cate #bo_cate_on::after {
    content: '_';
    margin-left: 2px;
    animation: tmBlink 1s steps(1) infinite;
}


/* ---------- 2. 게시글에 붙는 카테고리 이름 : 같은 화면표시 (커서 없음) ---------- */
#bo_list .memo-category {
    padding: 1px 9px;
    border: 1px solid var(--tm-osd);
    border-radius: var(--tm-round);
    background: transparent;
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
}


/* ---------- 3. 작성창·수정창 카테고리 선택칸 : 같은 화면표시 + 커서 _ ---------- */
#bo_list .tm-osd-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}
#bo_list .tm-osd-select .memo-select {
    -webkit-appearance: none;
    appearance: none;
    padding: 5px 26px 5px 13px;
    border: 1px solid var(--tm-osd);
    border-radius: var(--tm-round);
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    outline: none;
}
#bo_list .tm-osd-select .memo-select:focus { border-color: var(--tm-pink); }
#bo_list .tm-osd-select .memo-select option {
    font-family: inherit;
    color: var(--form-text-color, #333333);
    background: var(--form-bg-color, #ffffff);
}
#bo_list .tm-osd-select::after {
    content: '_';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-58%);
    color: var(--tm-pink);
    font-family: var(--tm-mono);
    font-weight: 700;
    pointer-events: none;
    animation: tmBlink 1s steps(1) infinite;
}


/* ---------- 4. ● REC 표시 (게시글 오른쪽 위) ---------- */
#bo_list .memo-item > .memo-body > .memo-header .tm-rec {
    position: absolute;
    top: 15px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--tm-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tm-pink);
    pointer-events: none;
}
/* 수정·삭제 버튼이 있는 글은 버튼 왼쪽으로 */
#bo_list .memo-item.tm-can-edit > .memo-body > .memo-header .tm-rec { right: 84px; }
#bo_list .tm-rec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-pink);
    box-shadow: 0 0 5px var(--tm-pink);
    animation: tmBlink 1.4s steps(1) infinite;
}
/* 이름 줄 글자가 REC와 겹치지 않게 */
#bo_list .memo-item > .memo-body > .memo-header > .memo-meta { padding-right: 52px; }
#bo_list .memo-item.tm-can-edit > .memo-body > .memo-header > .memo-meta { padding-right: 118px; }


/* ---------- 5. 타임코드 (작성 시각) ---------- */
#bo_list .tm-timecode {
    margin-right: 4px;
    font-family: var(--tm-mono);
    font-size: 0.76em;
    letter-spacing: 0.04em;
    color: var(--text-muted, #888888);
    white-space: nowrap;
}
/* 댓글 시각도 같은 글씨로 */
#bo_list .memo-reply-item .memo-date {
    font-family: var(--tm-mono);
    letter-spacing: 0.03em;
}


/* ---------- 6. 우하단 이모티콘 ---------- */
#bo_list .tm-sticker {
    margin-left: auto;
    width: 1.7em;     /* 게시글 속 이모티콘과 같은 크기 */
    height: 1.7em;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#bo_list .tm-sticker img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(70, 110, 150, 0.18));
}
/* 안 골랐을 때: 파비콘이 둥실둥실 */
#bo_list .tm-sticker.is-default img { animation: tmFloat 2.8s ease-in-out infinite; }
/* 글쓴이·관리자: 눌러서 바꾸기 */
#bo_list .tm-sticker.is-editable { cursor: pointer; border-radius: 50%; transition: transform .15s, background .15s; }
#bo_list .tm-sticker.is-editable:hover,
#bo_list .tm-sticker.is-editable.is-open { transform: scale(1.08); background: var(--light-bg-color, rgba(255,255,255,0.25)); }

/* 글쓰기 창의 작은 이모티콘 고르기 버튼 */
#bo_list .tm-sticker-pick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
#bo_list .tm-sticker-pick-btn img { width: 20px; height: 20px; object-fit: contain; opacity: .7; pointer-events: none; }
#bo_list .tm-sticker-pick-btn.is-picked img { opacity: 1; }
#bo_list .tm-sticker-pick-btn:hover,
#bo_list .tm-sticker-pick-btn.is-open { background: var(--light-bg-color, rgba(255,255,255,0.25)); }

/* 고르기 창의 "기본(파비콘)" 칸 */
.tm-sticker-panel .tm-sticker-reset { outline: 1px dashed rgba(123, 167, 201, 0.55); outline-offset: -3px; }


/* ---------- 7. 답글(대댓글) ---------- */
/* 답글은 한 칸 들여쓰기 */
#bo_list .memo-reply-item.tm-is-child { margin-left: 42px; }
#bo_list .memo-reply-item.tm-is-child .memo-reply-avatar { width: 26px; height: 26px; }
/* 답글에 다시 답하면 붙는 @이름 */
#bo_list .tm-mention { color: var(--tm-pink); font-weight: 700; }
/* 댓글 아래 "답글" 버튼 */
#bo_list .tm-reply-foot { margin-top: 1px; }
#bo_list .tm-reply-to-btn {
    padding: 1px 4px;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--text-muted, #888888);
    font-size: 0.76em;
    cursor: pointer;
    transition: color .15s;
}
#bo_list .tm-reply-to-btn:hover { color: var(--tm-pink); }
/* 삭제된 댓글 자리 */
#bo_list .memo-reply-item.tm-is-deleted .memo-reply-avatar { opacity: .35; }
#bo_list .tm-deleted-text {
    padding-top: 6px;
    color: var(--text-muted, #888888);
    font-size: 0.88em;
}
/* 답글 쓰는 중: 쓰기 칸도 들여쓰기 + "○○ 님에게 답글" 표시 */
#bo_list .memo-reply-write.tm-replying { margin: 4px 0 8px 42px; }
#bo_list .tm-replying-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8em;
    color: var(--text-muted, #888888);
}
#bo_list .tm-replying-bar b { color: var(--tm-pink); }
#bo_list .tm-replying-cancel {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--text-muted, #888888);
    cursor: pointer;
}
#bo_list .tm-replying-cancel:hover { background: var(--light-bg-color, rgba(255,255,255,0.25)); }


/* ---------- 휴대폰 ---------- */
@media (max-width: 768px) {
    #bo_list .memo-reply-item.tm-is-child,
    #bo_list .memo-reply-write.tm-replying { margin-left: 28px; }
    #bo_list .memo-item > .memo-body > .memo-header .tm-rec { top: 13px; right: 14px; }
    #bo_list .memo-item.tm-can-edit > .memo-body > .memo-header .tm-rec { right: 78px; }
}

/* 움직임 줄이기 설정을 켠 기기에서는 깜빡임·둥실 멈춤 */
@media (prefers-reduced-motion: reduce) {
    #bo_list .tm-rec-dot,
    #bo_list #bo_cate #bo_cate_on::after,
    #bo_list .tm-osd-select::after,
    #bo_list .tm-sticker.is-default img { animation: none; }
}

/* =====================================================================
   [개별 글 화면] 알림·피드로 들어왔을 때 글 1개 보기
   - 이 아래 부분만 지우면 개별 글 화면 꾸밈이 사라집니다. (기능은 그대로)
   ===================================================================== */
/* 맨 위: ← 목록으로  /  ● PLAY */
#bo_list .tm-single-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 14px;
}
#bo_list .tm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    border: 1px solid var(--tm-osd, var(--primary-color, #7ba7c9));
    border-radius: var(--tm-round, 999px);
    background: var(--light-bg-color, rgba(255,255,255,0.25));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono, 'Courier New', monospace);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
#bo_list .tm-back-btn:hover {
    border-color: var(--tm-pink, #f28aa0);
    color: var(--tm-pink, #f28aa0);
}
#bo_list .tm-single-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--tm-mono, 'Courier New', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tm-pink, #f28aa0);
}

/* 알림이 온 댓글: 분홍빛으로 잠깐 반짝 */
@keyframes tmFlash {
    0%   { background: rgba(242, 138, 160, 0.28); box-shadow: 0 0 0 4px rgba(242, 138, 160, 0.18); }
    100% { background: transparent;               box-shadow: 0 0 0 4px rgba(242, 138, 160, 0); }
}
#bo_list .memo-reply-item.tm-flash {
    border-radius: 10px;
    animation: tmFlash 2.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    #bo_list .memo-reply-item.tm-flash { animation: none; background: rgba(242, 138, 160, 0.18); }
}

/* =====================================================================
   좁은 칸(PC 메인 좁은 폭)·휴대폰에서 작성창이 오른쪽으로 삐져나가는 문제 수정
   - 이 아래 부분만 지우면 원래대로 돌아갑니다.
   ===================================================================== */
/* 작성창 본문이 칸보다 넓어지지 않게 + 칸 너비를 기준으로 반응하게 */
.memo-write-body {
    min-width: 0;
    container-type: inline-size;
}
.memo-block-normal { overflow-wrap: anywhere; }

/* 아래 줄이 자리가 모자라면 다음 줄로 내려갈 수 있게 */
.memo-write-footer { flex-wrap: wrap; row-gap: 8px; }
.memo-toolbar { flex-wrap: wrap; min-width: 0; }
.memo-write-footer .memo-submit-btn { flex-shrink: 0; }
.memo-write-footer .memo-url-img-row { flex-basis: 100%; order: 9; }

/* 작성 칸이 좁을 때 (약 420px 이하):
   1줄 = 카테고리 ··· 게시 버튼(오른쪽) / 2줄 = 아이콘들 */
@container (max-width: 420px) {
    .memo-write-footer > .tm-osd-select,
    .memo-write-footer > .memo-select { order: 1; }
    .memo-write-footer .memo-submit-btn {
        order: 2;
        margin-left: auto;
    }
    .memo-write-footer .memo-toolbar {
        order: 3;
        flex-basis: 100%;
        margin-right: 0;
    }
}
/* ===================== 작성창 넘침 수정 끝 ===================== */

/* =====================================================================
   반응 표시 (원글 + 댓글) — 마우스를 올리면 반응창, 누른 반응은 아래에 작게
   - 이 아래 부분만 지우면 반응 디자인이 사라집니다.
   ===================================================================== */
#bo_list .memo-action-bar { position: relative; }
#bo_list .memo-reply-item { position: relative; }

/* 반응창 (평소엔 숨김) */
#bo_list .tm-react-bar {
    position: absolute;
    z-index: 20;
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--card-bg-color, rgba(255, 255, 255, 0.92));
    border: 1px solid var(--tm-osd, #7ba7c9);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(70, 110, 150, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* 위쪽 분홍 REACT 글씨 */
#bo_list .tm-react-bar::before {
    content: 'REACT';
    position: absolute;
    top: -8px;
    left: 8px;
    padding: 0 4px;
    font-family: var(--tm-mono, 'Courier New', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    color: var(--tm-pink, #f28aa0);
    background: var(--card-bg-color, #ffffff);
}
/* 원글: 오른쪽 아래 이모티콘 바로 위 */
#bo_list .memo-action-bar > .tm-react-bar { right: -4px; bottom: calc(100% + 8px); }
/* 댓글: 댓글 오른쪽, 답글 버튼 높이 위 */
#bo_list .memo-reply-item > .tm-react-bar { right: 0; bottom: 26px; }

/* 마우스를 올렸을 때(컴퓨터) / 눌렀을 때(휴대폰) 보이기 */
#bo_list .memo-item.tm-react-hover > .memo-body > .memo-reply-section > .memo-action-bar > .tm-react-bar,
#bo_list .memo-item.tm-react-open > .memo-body > .memo-reply-section > .memo-action-bar > .tm-react-bar,
#bo_list .memo-reply-item.tm-react-hover > .tm-react-bar,
#bo_list .memo-reply-item.tm-react-open > .tm-react-bar,
#bo_list .tm-react-bar:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 반응창 안 이모지 버튼 */
#bo_list .tm-react-btn {
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
#bo_list .tm-react-btn:hover { background: rgba(123, 167, 201, 0.18); transform: scale(1.15); }
#bo_list .tm-react-btn.is-mine { background: rgba(242, 138, 160, 0.16); }

/* 누른 반응 표시 줄 (누른 것만 보임) */
#bo_list .tm-react-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 2px;
}
#bo_list .tm-react-chips:empty { display: none; }
#bo_list .tm-react-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border: 1px solid var(--tm-osd, #7ba7c9);
    border-radius: 3px;
    background: var(--light-bg-color, rgba(255, 255, 255, 0.3));
    color: var(--content-font-color, #333333);
    font-family: var(--tm-mono, 'Courier New', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
button.tm-react-chip { cursor: pointer; }
#bo_list .tm-react-chip .tm-react-emoji {
    font-size: 14px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
#bo_list .tm-react-chip.is-mine {
    border-color: var(--tm-pink, #f28aa0);
    background: rgba(242, 138, 160, 0.14);
}

/* 휴대폰: 누르기 쉽게 조금 크게 */
@media (max-width: 768px) {
    #bo_list .tm-react-btn { width: 34px; height: 32px; font-size: 18px; }
    #bo_list .tm-react-chip { padding: 3px 9px 3px 7px; }
}
@media (prefers-reduced-motion: reduce) {
    #bo_list .tm-react-bar, #bo_list .tm-react-btn { transition: none; }
}
/* ===================== 반응 표시 끝 ===================== */