/* 밀톡 글쓰기: 하단 취소/등록 버튼이 네비에 가려지지 않도록 + 키보드 시 스크롤 */
#boardWriteView {
    padding-bottom: calc(80px + var(--safe-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
#boardWriteView .board-write-actions {
    flex-shrink: 0;
    padding-bottom: 0.25rem;
}
body:has(#boardWriteContent:focus) #boardWriteView .board-write-actions {
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 밀톡/공지 내용 에디터: placeholder (format-editor-empty 클래스 시 표시) */
#boardWriteContent,
#noticeContent {
    position: relative;
}
#boardWriteContent.format-editor-empty::before,
#noticeContent.format-editor-empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    pointer-events: none;
}

/* 카테고리 필터 버튼 기본 (글쓰기 등 — #boardCategoryRow 아님) */
.board-category-btn {
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0;
}
.board-category-btn:hover:not(.active) {
    background-color: var(--app-page-bg) !important;
    color: #0f172a !important;
}
.board-category-btn.active {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* 게시판 목록·상세 카드 하단 해시태그 (#먹는, #사진있음) — Yeon Sung 16px */
.board-category-hashtag {
    font-family: 'Yeon Sung', serif;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
    color: #31966b;
}

/* 게시판 카테고리 필터: 서브탭보다 작은 보조 칩 */
#boardCategoryRow {
    gap: 6px;
    padding: 10px 14px 6px;
    background: var(--page-deep, #faf6f2);
}
#boardCategoryRow .board-category-btn {
    padding: 5px 10px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    background-color: #fff !important;
    color: var(--muted, #7a7268) !important;
    border: 1px solid var(--line, #d0c6ba) !important;
    border-radius: 999px !important;
    white-space: nowrap;
    flex-shrink: 0;
}
#boardCategoryRow .board-category-btn:hover:not(.active) {
    background-color: #fff !important;
    color: var(--ink-2, #4f4841) !important;
}
#boardCategoryRow .board-category-btn.active {
    background-color: var(--green, #3cb889) !important;
    color: #ffffff !important;
    border-color: var(--green, #3cb889) !important;
    font-weight: 600 !important;
    text-decoration: none;
}

/* 글쓰기 화면 카테고리 — 목록·본문 해시태그와 동일 색 (#31966b) */
#boardWriteView .board-write-category-btn.board-category-btn {
    padding: 0.2rem 0.35rem !important;
    font-family: 'Yeon Sung', serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35;
    background-color: transparent !important;
    color: #31966b !important;
    border: none !important;
    border-radius: 0 !important;
}
#boardWriteView .board-write-category-btn.board-category-btn:hover:not(.active) {
    background-color: transparent !important;
    color: #287a56 !important;
}
#boardWriteView .board-write-category-btn.board-category-btn.active {
    background-color: transparent !important;
    color: #31966b !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    text-decoration-thickness: 1px;
}

#board-sort-latest.active,
#board-sort-popular.active {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

#boardContainer .card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* 밀톡: 탭 패딩까지 넓힌 뒤 좌·우 보더는 화면(콘텐츠) 끝에만 */
#boardListView {
    overflow-x: hidden;
}

/* 밀톡: 피드/게시판 서브탭 아래만 스크롤 (상단 탭은 고정, 본문은 패널 내부 스크롤)
   max-height만 있으면 블록 높이는 내용 높이로만 잡혀 flex:1 자식이 늘지 않음 → 스크롤 영역 0으로 보임 */
#boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden) {
    padding-top: 0;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
    /* 뷰포트 − 상태바 − 앱 헤더 − 세이프만 (하단 APP 네비는 플로팅 → 본문이 네비 뒤까지 이어지게, 타임라인/모먼트와 동일) */
    height: calc(100vh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    max-height: calc(100vh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    max-height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    /* 스크롤은 #boardLoungeScrollArea(피드·게시판 본문)만 — 서브탭·카테고리는 #boardLoungeFrame에서 고정 */
    overflow-x: hidden;
    overflow-y: hidden;
}
/* 피드 탭: 하단 흰 패딩만 제거(메시지 영역~바디 그린 연결). 탭 줄은 위쪽 규칙의 흰 배경 유지 */
#boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden):has(#boardFeedPanel:not(.hidden)) {
    padding-bottom: 0;
}
/* 밀톡: 헤더는 translate로만 숨겨져 레이아웃 슬롯이 남고(내부 스크롤이라 window처럼 안 올라감) body(--app-page-bg)가 비침 — 숨김 시 헤더 높이만큼 뷰를 위로 당겨 채움 */
body:has(#mainAppHeader.header-scroll-hidden) #boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden) {
    margin-top: calc(-1 * var(--app-chrome-header-h));
    height: calc(100vh - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
}
/* 라운지·마이 서브탭: 시안 — 상·하 동일 여백 · soft-green pill · 선택 텍스트 검정 */
#boardListView #boardLoungeFrame .board-mealtalk-subtabs,
#settingsView .settings-subtab-row {
    display: grid;
    gap: 4px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 4px 14px;
    box-sizing: border-box;
    overflow: visible;
    align-items: stretch;
}
#boardListView #boardLoungeFrame .board-mealtalk-subtabs {
    grid-template-columns: repeat(3, 1fr);
}
#settingsView .settings-subtab-row {
    /*
     * 탭 수가 바뀌어도 폭이 균등하게 나뉜다.
     * repeat(4, 1fr) 로 고정돼 있어서 '태그' 탭을 걷어낸 뒤 넷째 칸이 빈 채로 남았다
     * — 셋이 왼쪽 3/4 를 나눠 갖고 오른쪽이 비는 모양이었다.
     */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
/*
 * 스테이징 전용 톱니(⚙)가 보이면 탭 셋은 균등하게, 톱니는 제 폭만 갖는다.
 * 운영에서는 톱니가 DOM 에서 빠지므로 위 균등 규칙 그대로다.
 */
#settingsView .settings-subtab-row:has(> .settings-subtab-gear:not(.hidden)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
#settingsView .settings-subtab-row .app-chrome-subtab.settings-subtab-gear {
    width: 2.25rem;
    padding: 0;
    color: var(--muted, #7a7268);
}
#settingsView .settings-subtab-row .settings-subtab-gear svg {
    width: 16px;
    height: 16px;
}

/* 마이 > 톱니: 최근 7일 기록 표 (js/modals/my-trend-7d.js) */
.my-trend7d-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.my-trend7d-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -4px 2px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
}
.my-trend7d-refresh:disabled {
    opacity: 0.4;
}
/* 새 기록을 더하는 동안 — 증분 쿼리가 몇 초 걸릴 수 있어 눌렸다는 표시를 남긴다 */
.my-trend7d-refresh.is-loading svg {
    animation: my-trend7d-spin 0.9s linear infinite;
}
@keyframes my-trend7d-spin {
    to {
        transform: rotate(360deg);
    }
}
.my-trend7d-refresh svg {
    width: 15px;
    height: 15px;
}
.my-trend7d-state {
    margin: 8px 0 4px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
}
.my-trend7d-scroll {
    overflow-x: auto;
    margin: 0 -14px;
    -webkit-overflow-scrolling: touch;
}
.my-trend7d-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.my-trend7d-table th,
.my-trend7d-table td {
    padding: 6px 5px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
.my-trend7d-table thead th {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: var(--page);
}
.my-trend7d-day span {
    display: block;
    line-height: 1.15;
}
.my-trend7d-day small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.8;
}
.my-trend7d-table tbody th,
.my-trend7d-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 5.75rem;
    padding-left: 14px;
    text-align: left;
    background: var(--card);
    box-shadow: 4px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.my-trend7d-corner {
    background: var(--page);
}
.my-trend7d-table td {
    min-width: 2.25rem;
}
.my-trend7d-table .my-trend7d-sum {
    font-weight: 800;
}
.my-trend7d-table thead .my-trend7d-sum {
    background: var(--green-soft, #eaf8f2);
}
/* 7일 합 칸은 행 색 위에 살짝 어둡게 — 구간 색을 덮지 않는다 */
.my-trend7d-table tbody .my-trend7d-sum {
    box-shadow: inset 0 0 0 999px rgba(43, 40, 37, 0.04);
}
.my-trend7d-table td.my-trend7d-today:last-child,
.my-trend7d-table th.my-trend7d-today {
    padding-right: 14px;
}
.my-trend7d-row--head th,
.my-trend7d-row--head td {
    font-weight: 800;
    border-top: 1px solid var(--line);
}
/*
 * 구간 색: 끼니·간식(식사 날짜 축)은 앰버, 기록 시각 축은 하늘 — 관리자 트렌드 표와 같은 계열.
 * 머리 행은 한 톤 진하게, 하위 행은 아주 옅게. 고정 열(th)도 불투명 색이어야 가로 스크롤 때 숫자가 비치지 않는다.
 */
.my-trend7d-table .my-trend7d-row--slot > * {
    background: #fffaf0;
}
.my-trend7d-table .my-trend7d-row--slot.my-trend7d-row--head > * {
    background: #fdf0d5;
}
.my-trend7d-table .my-trend7d-row--hour > * {
    background: #f3f9fe;
}
.my-trend7d-table .my-trend7d-row--hour.my-trend7d-row--head > * {
    background: #e1f0fa;
}
/* 사용자·공유 세 줄(무색) 아래에서 기록 구간이 시작된다 — 관리자 표의 굵은 구분선 자리 */
.my-trend7d-table .my-trend7d-row--user + .my-trend7d-row--slot > * {
    border-top: 2px solid var(--line);
}
.my-trend7d-row--sub th {
    font-weight: 500;
    color: var(--ink-2, #4f4841);
}
.my-trend7d-row--sub td {
    font-weight: 600;
}
.my-trend7d-table td.my-trend7d-zero {
    color: var(--muted);
    font-weight: 500;
}
.my-trend7d-foot {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
}
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab,
#settingsView .settings-subtab-row .app-chrome-subtab {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    height: 100%;
    padding: 6px 6px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    background: transparent;
    color: var(--muted, #7a7268);
    box-sizing: border-box;
}
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab.active,
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab[aria-selected="true"],
#settingsView .settings-subtab-row .app-chrome-subtab.active,
#settingsView .settings-subtab-row .app-chrome-subtab[aria-selected="true"] {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
    font-weight: 600;
}
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab:hover,
#settingsView .settings-subtab-row .app-chrome-subtab:hover {
    background: transparent;
    color: var(--ink-2, #4f4841);
}
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab.active:hover,
#boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab[aria-selected="true"]:hover,
#settingsView .settings-subtab-row .app-chrome-subtab.active:hover,
#settingsView .settings-subtab-row .app-chrome-subtab[aria-selected="true"]:hover {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
}
html.platform-native-app #boardListView #boardLoungeFrame .board-mealtalk-subtabs .app-chrome-subtab,
html.platform-native-app #settingsView .settings-subtab-row .app-chrome-subtab {
    font-size: 13.5px;
}
#boardListView #boardCategoryRow {
    flex-shrink: 0;
    margin: 0;
    box-sizing: border-box;
}
#boardListView .board-mealtalk-subtabs + #boardCategoryRow {
    margin-top: 0;
}
/* ui-stack-md 기본 간격은 탭~본문에서 흰 띠로 보여 제거. 글쓰기 FAB ↔ 서브탭만 유지 */
#boardListView.board-list-view-mealtalk.ui-stack-md > * + * {
    margin-top: 0;
}
#boardListView.board-list-view-mealtalk.ui-stack-md > .board-write-fab + #boardLoungeFrame {
    margin-top: 0;
}
/* 사용자 뷰: 라운지와 동일한 뷰포트 높이(헤더 아래 영역) */
#settingsView:not(.hidden) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: calc(100vh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    max-height: calc(100vh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
    max-height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h) - var(--safe-bottom));
}
body:has(#mainAppHeader.header-scroll-hidden) #settingsView:not(.hidden) {
    margin-top: calc(-1 * var(--app-chrome-header-h));
    height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
}
/* 태그/메모: nav-slot 제거. IME 중 높이는 --ime-vv-height(resize=layoutH / overlay=vvH) */
body:has(#settingsView:not(.hidden) input:not(.push-pref-toggle):focus, #settingsView:not(.hidden) textarea:focus) #settingsView:not(.hidden) {
    height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h));
    max-height: calc(100dvh - var(--safe-top) - var(--app-chrome-header-h));
}
body.ime-open #settingsView:not(.hidden) {
    height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top) - var(--app-chrome-header-h));
    max-height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top) - var(--app-chrome-header-h));
}
body:has(#mainAppHeader.header-scroll-hidden):has(#settingsView:not(.hidden) input:not(.push-pref-toggle):focus, #settingsView:not(.hidden) textarea:focus) #settingsView:not(.hidden) {
    height: calc(100dvh - var(--safe-top));
    max-height: calc(100dvh - var(--safe-top));
}
body.ime-open:has(#mainAppHeader.header-scroll-hidden) #settingsView:not(.hidden) {
    height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top));
    max-height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top));
}
/* 사용자 뷰 본문: 밀톡(#boardLoungeScrollArea)과 동일 — 얇은 막대, 스크롤 중에만 표시 */
#settingsView .settings-view-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -webkit-overflow-scrolling: touch;
}
#settingsView .settings-view-content::-webkit-scrollbar {
    width: 4px;
}
#settingsView .settings-view-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}
#settingsView .settings-view-content::-webkit-scrollbar-track {
    background: var(--app-page-bg);
}
#settingsView .settings-view-content.board-panel-scrollbar-active {
    scrollbar-color: rgba(148, 163, 184, 0.45) var(--app-page-bg);
}
#settingsView .settings-view-content.board-panel-scrollbar-active::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
}
/* 라운지 프레임: 서브탭·카테고리 + 본문 스크롤 — #boardListView 좌우 패딩(1rem) 풀블리드 */
#boardListView #boardLoungeFrame.board-lounge-frame {
    flex: 1 1 0;
    min-height: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 본문만 세로 스크롤 — 스크롤바는 피드/게시판 영역에만 표시 */
#boardListView #boardLoungeScrollArea.board-lounge-scroll-area {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
#boardListView #boardLoungeScrollArea.board-lounge-scroll-area:has(#boardFeedPanel:not(.hidden)) {
    background-color: var(--board-feed-bg);
    scrollbar-color: rgba(148, 163, 184, 0.45) var(--board-feed-bg);
}
#boardListView #boardLoungeScrollArea.board-lounge-scroll-area:has(#boardListPanel:not(.hidden)) {
    background-color: var(--app-page-bg);
    scrollbar-color: rgba(148, 163, 184, 0.45) var(--app-page-bg);
}
#boardListView #boardLoungeScrollArea::-webkit-scrollbar {
    width: 4px;
}
#boardListView #boardLoungeScrollArea::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}
#boardListView #boardLoungeScrollArea:has(#boardFeedPanel:not(.hidden))::-webkit-scrollbar-track {
    background: var(--board-feed-bg);
}
#boardListView #boardLoungeScrollArea:has(#boardListPanel:not(.hidden))::-webkit-scrollbar-track {
    background: var(--page-deep, #faf6f2);
}
/* 피드/게시판 탭 높이·여백: 사용자 설정(settings-tab)과 동일 px-3 py-2.5 + 바 px-4 pt-2 pb-0 */

/* 피드 인라인 입력: 기본 완전 숨김 — 밀톡+피드에서만 .board-feed-composer-visible */
#boardInlineComposer.board-feed-chat-composer {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}
#boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible {
    display: block !important;
    visibility: visible;
    pointer-events: auto;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(66px + var(--safe-bottom));
    width: var(--app-bottom-bar-width);
    box-sizing: border-box;
    z-index: var(--z-composer);
    border: none;
    border-top: 1px solid var(--line, #d0c6ba);
    border-radius: 0;
    background: var(--board-feed-composer-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 10px 14px 12px;
    margin: 0;
    box-shadow: none;
}
/*
 * 밀톡 컴포저
 * - APP(resize): ime-open일 때만 bottom≈0 (레이아웃이 이미 키보드 제외). 포커스만으로는 네비 위 유지.
 * - 웹 overlay(iOS Safari): 포커스·IME 모두 --ime-fixed-bottom(VV overlap)으로 키보드 위에 부착.
 * - 웹 resize(Android/Chromium): 레이아웃이 이미 키보드 제외 → APP 규칙(bottom≈0)을 그대로 사용.
 */
body.ime-open #boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible {
    bottom: var(--ime-fixed-bottom, 0px);
    z-index: var(--z-ime-composer);
}
body:has(#boardInlineComposerInput:focus):not(.ime-open) #boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible {
    bottom: calc(66px + var(--safe-bottom));
    z-index: var(--z-composer);
}
html.platform-web:not([data-ime-mode="resize"]) body:has(#boardInlineComposerInput:focus) #boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible,
html.platform-web:not([data-ime-mode="resize"]) body.ime-open #boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible {
    bottom: max(
        0.35rem,
        var(--ime-fixed-bottom, 0px),
        env(safe-area-inset-bottom, 0px)
    );
    z-index: var(--z-ime-composer);
}
#boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible:focus-within {
    box-shadow: none;
}
/* 피드 입력 한 줄: 아바타·텍스트·버튼 수직 가운데 */
.board-feed-composer-row {
    align-items: center;
}
#boardInlineComposer .board-inline-composer-avatar {
    align-self: center;
}
#boardInlineComposer .board-feed-chat-input {
    border: 1px solid var(--line, #d0c6ba);
    outline: none;
    resize: none;
    background: var(--page, #fffcfa);
    border-radius: 18px;
    margin: 0;
    padding: 10px 14px;
    line-height: 1.45;
    min-height: 2.5rem;
    max-height: none;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: none;
    vertical-align: middle;
}
#boardInlineComposer .board-feed-chat-input:focus {
    box-shadow: none;
    outline: none;
}
#boardInlineComposer .board-feed-chat-input::placeholder {
    color: #94a3b8;
}
.board-feed-composer-send {
    background-color: var(--green, #3cb889) !important;
    color: #fff !important;
    box-shadow: none;
}
.board-feed-composer-send:hover:not(:disabled) {
    background-color: var(--green-deep, #2d9f74) !important;
}
.board-feed-composer-send:active:not(:disabled) {
    background-color: var(--green-deep, #2d9f74) !important;
}
.board-feed-composer-send:disabled {
    opacity: 0.35;
}
.board-feed-composer-send i {
    line-height: 1;
    color: inherit;
}

/* 게시판/공지 상세 댓글 전송(화살표) 버튼 — 텍스트 '게시' 대체 */
.board-detail-comment-send {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    height: 2.1rem;
    width: 2.1rem;
    border-radius: 9999px;
    border: 0;
    background: rgba(16, 185, 129, 0.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}
.board-detail-comment-send.hidden {
    display: none !important;
}
.board-detail-comment-send:disabled {
    opacity: 0.35;
    cursor: default;
}
.board-detail-comment-send:hover:not(:disabled) {
    background: rgba(60, 184, 137, 0.95);
}
.board-detail-comment-send:active:not(:disabled) {
    transform: translateY(-50%) scale(0.96);
}
.board-detail-comment-send.is-pressed:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
    background: rgba(45, 159, 116, 0.98);
}

.board-detail-comment-attach {
    position: absolute;
    right: 3.15rem;
    top: 50%;
    transform: translateY(-50%);
    height: 2.1rem;
    width: 2.1rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(255, 255, 255, 0.75);
    color: rgba(51, 65, 85, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.board-detail-comment-attach:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.75);
}
.board-detail-comment-attach:active {
    transform: translateY(-50%) scale(0.97);
}
.board-detail-comment-attach.is-pressed {
    transform: translateY(-50%) scale(0.96);
    background: rgba(226, 232, 240, 0.95);
    border-color: rgba(100, 116, 139, 0.65);
}
.board-detail-comment-photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}
.board-detail-comment-images {
    justify-content: flex-end;
    width: 100%;
}
.board-detail-comment-photo-preview.hidden {
    display: none !important;
}
.board-detail-comment-photo-thumb {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: transparent;
    padding: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
}
.board-detail-comment-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 입력창 아래 미리보기 썸네일도 원본 비율 유지 + 최대 크기 제한 */
.board-detail-comment-photo-thumb {
    width: auto;
    height: auto;
    max-width: 8rem;
    max-height: 8rem;
}
.board-detail-comment-photo-thumb img {
    width: auto;
    height: auto;
    max-width: 8rem;
    max-height: 8rem;
    object-fit: contain;
}
.board-detail-comment-images img {
    display: block;
    max-width: min(68vw, 18rem);
    max-height: 11rem;
    width: auto;
    height: auto;
    object-fit: contain;
}
.board-detail-comment-image-btn {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    /* 버튼은 이미지 크기만큼만 */
    width: auto;
    height: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detail-comment-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-comment-lightbox);
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-comment-lightbox.hidden {
    display: none !important;
}
.detail-comment-lightbox__scrim {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(8px);
}
.detail-comment-lightbox__stage {
    position: relative;
    z-index: 1;
    width: min(92vw, 560px);
    max-height: min(86vh, 86dvh);
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-comment-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.detail-comment-lightbox__close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.detail-comment-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}
.board-feed-composer-attach i {
    line-height: 1;
}
#boardFeedComposerPhotoPreview:empty {
    display: none;
    margin: 0;
}

/* 피드 말풍선: 롱프레스 메뉴 — 시스템 콜아웃·드래그 선택과 충돌 완화(복사는 시트에서) */
.feed-chat-bubble {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
body.feed-bubble-sheet-open {
    overflow: hidden;
}

/* 밀톡 피드 패널: 높이는 내용에 맞춤 — 스크롤은 #boardLoungeScrollArea(이미 풀폭) */
#boardListView #boardFeedPanel:not(.hidden) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--board-feed-bg);
}
/* 밀톡 게시판 목록: 스크롤은 상위 #boardLoungeScrollArea — 본문만 풀폭·배경 */
#boardListView #boardListPanel:not(.hidden) {
    flex-shrink: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    background: var(--page-deep, #faf6f2);
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 10px 14px calc(5.25rem + var(--safe-bottom));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
}
#boardListView #boardFeedPanelContent {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-behavior: auto;
    padding-left: 14px;
    padding-right: 14px;
    /* 컴포저와 동일: bottom: calc(66px + var(--safe-bottom)) */
    --board-feed-scroll-inset-bottom: calc(
        66px + var(--safe-bottom) + var(--board-feed-composer-face) + var(--board-feed-above-composer)
    );
    padding-bottom: var(--board-feed-scroll-inset-bottom);
    scroll-padding-bottom: var(--board-feed-scroll-inset-bottom);
    background: var(--board-feed-bg);
}
/* 스크롤 막대: 통합 스크롤(#boardLoungeScrollArea) — 피드(흰색)·게시판(슬레이트) 탭에 맞춤 */
#boardListView #boardLoungeScrollArea.board-panel-scrollbar-active:has(#boardFeedPanel:not(.hidden)) {
    scrollbar-color: rgba(148, 163, 184, 0.45) var(--board-feed-bg);
}
#boardListView #boardLoungeScrollArea.board-panel-scrollbar-active:has(#boardFeedPanel:not(.hidden))::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
}
#boardListView #boardLoungeScrollArea.board-panel-scrollbar-active:has(#boardListPanel:not(.hidden)) {
    scrollbar-color: rgba(148, 163, 184, 0.5) var(--page-deep, #faf6f2);
}
#boardListView #boardLoungeScrollArea.board-panel-scrollbar-active:has(#boardListPanel:not(.hidden))::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
}

/* 밀톡 피드 메시지 영역 테마 (흰 배경 + 말풍선) */
#boardListView #boardFeedPanelContent .feed-chat-bubble-mine {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
    border: 1px solid var(--green-mute, #b4e2cd);
}
#boardListView #boardFeedPanelContent .feed-chat-bubble-other {
    background: #fff;
    color: #1e293b;
    border-color: rgba(226, 232, 240, 0.95);
}
#boardListView #boardFeedPanelContent .lounge-day-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--muted, #7a7268);
    background: #fff;
    border: 1px solid var(--line, #d0c6ba);
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    box-shadow: none;
}
#boardListView #boardFeedPanelContent .feed-bubble-meta-time {
    color: rgba(100, 116, 139, 0.85);
}
#boardListView #boardFeedPanelContent .feed-bubble-author-nick {
    color: rgba(51, 65, 85, 0.92);
}
#boardListView #boardFeedPanelContent .feed-timeline-empty-title,
#boardListView #boardFeedPanelContent .feed-timeline-empty-sub {
    color: rgba(100, 116, 139, 0.75);
}
#boardListView #boardFeedPanelContent .feed-timeline-empty-icon {
    color: rgba(148, 163, 184, 0.65);
}
#boardListView #boardFeedPanelContent .feed-panel-loading-text,
#boardListView #boardFeedPanelContent .feed-panel-loading-icon {
    color: rgba(100, 116, 139, 0.8);
}
#boardListView #boardFeedPanelContent .feed-panel-error {
    color: #dc2626;
}
#boardListView #boardFeedPanelContent .feed-other-avatar-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.35);
}
#boardListView #boardInlineComposer.board-feed-composer-visible .board-inline-composer-avatar {
    box-shadow: var(--avatar-shadow);
    background: var(--avatar-fallback-bg, #e2e8f0);
}
#boardListView #boardFeedPanelContent .feed-other-avatar-btn {
    box-shadow: var(--avatar-shadow);
}
#boardListView #boardFeedPanelContent .feed-refresh-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.35);
}

/* 하단 앱 네비가 스크롤로 밀려 숨겨진 경우: 입력창을 하단에 붙여 대화 스크롤이 입력 바로 위까지 이어지게 (뷰 높이는 기본과 동일) */
body.bottom-nav-scroll-hidden #boardInlineComposer.board-feed-chat-composer.board-feed-composer-visible:not(:focus-within) {
    bottom: calc(10px + var(--safe-bottom));
}
body.bottom-nav-scroll-hidden #boardListView #boardFeedPanelContent {
    /* 컴포저와 동일: bottom: calc(10px + var(--safe-bottom)) */
    --board-feed-scroll-inset-bottom: calc(
        10px + var(--safe-bottom) + var(--board-feed-composer-face) + var(--board-feed-above-composer)
    );
}
body.bottom-nav-scroll-hidden #boardListView #boardListPanel:not(.hidden) {
    padding-bottom: calc(1.25rem + var(--safe-bottom));
}

/* APP: IME 중 피드 inset — fixed-bottom≈0 */
body.ime-open #boardListView #boardFeedPanelContent {
    --board-feed-scroll-inset-bottom: calc(
        var(--ime-fixed-bottom, 0px) +
            var(--board-feed-composer-face) + var(--board-feed-above-composer)
    );
}
body.ime-open #boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden) {
    margin-top: 0;
    height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top) - var(--app-chrome-header-h));
    max-height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top) - var(--app-chrome-header-h));
}
/* 웹 overlay(iOS Safari): 포커스·IME 모두 overlap 기준. resize 웹은 위 APP 규칙 사용 */
html.platform-web:not([data-ime-mode="resize"]) body:has(#boardInlineComposerInput:focus) #boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden),
html.platform-web:not([data-ime-mode="resize"]) body.ime-open #boardListView.board-list-view-mealtalk.ui-tab-view:not(.hidden) {
    margin-top: 0;
    height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top));
    max-height: calc(var(--ime-vv-height, 100dvh) - var(--safe-top));
}
html.platform-web:not([data-ime-mode="resize"]) body:has(#boardInlineComposerInput:focus) #boardListView #boardFeedPanelContent,
html.platform-web:not([data-ime-mode="resize"]) body.ime-open #boardListView #boardFeedPanelContent {
    --board-feed-scroll-inset-bottom: calc(
        max(0.35rem, var(--ime-fixed-bottom, 0px), env(safe-area-inset-bottom, 0px)) +
            var(--board-feed-composer-face) + var(--board-feed-above-composer)
    );
}
/* 패널(#boardListPanel)에서 이미 풀폭·배경 처리 — 이중 네거티브 마진 제거 */
#boardListView #noticesContainer,
#boardListView #boardContainer {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border: none;
    background: transparent;
}
/* 내 게시물 → 게시판 탭 목록: 라운지 게시판과 동일한 좌우 여백 */
#galleryFilterBoardList {
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 14px calc(5.25rem + var(--safe-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    background: var(--page-deep, #faf6f2);
}

/* 라운지 시안 v2 — 게시판/공지 리스트 카드 */
.lounge-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lounge-post {
    background: var(--card, #fff);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--line, #d0c6ba);
    padding: 14px 14px 12px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.lounge-post:last-child {
    margin-bottom: 0;
}
.lounge-post.lounge-post--pending {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fff 0%, #fffbeb 90%);
}
.lounge-notice-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: 0;
    flex-shrink: 0;
    margin-left: auto;
}
.lounge-notice-chip [data-lucide],
.lounge-notice-chip .lucide {
    width: 12px;
    height: 12px;
    stroke-width: 2.25;
    display: block;
}
.lounge-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.lounge-author-row .lounge-notice-chip {
    align-self: center;
}
.lounge-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--avatar-fallback-bg, #e2e8f0);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: var(--avatar-shadow);
}
.lounge-avatar--fallback {
    display: grid;
    place-items: center;
    font-family: var(--avatar-fallback-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: var(--avatar-fallback-fg, #334155);
    background: var(--avatar-fallback-bg, #e2e8f0);
}
.lounge-author-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #241f1c);
}
.lounge-author-sub {
    font-size: 12px;
    color: var(--muted, #7a7268);
    font-weight: 500;
    margin-top: 1px;
}
.lounge-pending-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
}
.lounge-post-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}
.lounge-post-body,
.lounge-post-body.board-list-body-preview {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2, #4f4841);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    word-break: break-word;
}
.lounge-post-body strong,
.lounge-post-body b {
    color: var(--ink, #241f1c);
    font-weight: 700;
}
.lounge-post-body u { text-decoration: underline; }
.lounge-post-body s,
.lounge-post-body strike { text-decoration: line-through; }
.lounge-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
    background: #e2e8f0;
    flex-shrink: 0;
    border: 1px solid var(--line, #d0c6ba);
    box-sizing: border-box;
}
.lounge-post-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}
.lounge-tag,
.lounge-post .board-category-hashtag {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--green-deep, #2d9f74);
}
.lounge-tag--muted {
    color: var(--muted, #7a7268);
}
.lounge-social {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
.lounge-social-btn {
    border: 0;
    background: transparent;
    color: var(--ink-2, #4f4841);
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
}
.lounge-social-btn i {
    font-size: 14px;
    color: #64748b;
}
.lounge-social-btn.liked i,
.lounge-social-btn .fa-heart.fa-solid {
    color: #e11d48;
}
.lounge-social-btn.bookmarked i,
.lounge-social-btn .fa-bookmark.fa-solid {
    color: var(--green, #3cb889);
}
.lounge-social-btn.liked i.fa-heart { color: #e11d48; }
.lounge-social-btn.bookmarked i.fa-bookmark { color: var(--green, #3cb889); }

.board-list-card {
    background: #fff !important;
    border-top: 1px solid var(--line, #d0c6ba);
    border-bottom: 1px solid var(--line, #d0c6ba);
    /* 일반 게시글 전용: 회색 4px · 30% (공지는 .notice-accent-* 가 덮음) */
    border-left: 4px solid rgb(100 116 139 / 0.3);
    border-right: none;
    border-radius: 0 !important;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    box-shadow:
        0 1px 0 rgba(43, 40, 37, 0.06),
        0 6px 18px rgba(43, 40, 37, 0.07);
}
.board-list-card:active {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 6px rgba(15, 23, 42, 0.06);
}
/* 공지: 타입별 색상 왼쪽 강조선 4px · 30% 투명 (일반 글은 슬레이트 회색 동일 투명) */
.board-list-card.notice-accent-important {
    border-left: 4px solid rgb(239 68 68 / 0.3);
}
.board-list-card.notice-accent-notice {
    border-left: 4px solid rgb(59 130 246 / 0.3);
}
.board-list-card.notice-accent-light {
    border-left: 4px solid rgb(234 179 8 / 0.3);
}

/* 게시판/공지 상세: Soft Mint — 목록과 같은 여백·페이지 톤 */
#boardDetailView.board-detail-view {
    padding: 0 !important;
    background: var(--page-deep, #faf6f2);
}

#boardDetailContent {
    background: transparent !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0 !important;
    padding: 10px 14px calc(1.25rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    border-radius: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.board-detail-page-root,
.board-detail-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.board-detail-card.lounge-post,
.board-detail-comments-card.lounge-post {
    margin-bottom: 12px;
}

.board-detail-card.lounge-post:last-child,
.board-detail-comments-card.lounge-post:last-child {
    margin-bottom: 0;
}

.board-detail-card--notice.lounge-post {
    background: linear-gradient(180deg, #fff 0%, #fffbeb 100%);
    border-color: #fde68a;
}

.board-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.board-detail-icon-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2, #4f4841);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.board-detail-icon-btn:hover {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
}
.board-detail-icon-btn:active {
    background: var(--green-mute, #b4e2cd);
}
.board-detail-icon-btn i,
.board-detail-icon-btn svg {
    width: 18px;
    height: 18px;
}

.board-detail-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.board-detail-author__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.board-detail-author__avatar img,
.board-detail-author__avatar .lounge-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.board-detail-author__text {
    min-width: 0;
}
.board-detail-author__name {
    display: block;
    max-width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #241f1c);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-detail-author__sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted, #7a7268);
    margin-top: 1px;
}

.board-detail-notice-head {
    min-width: 0;
    flex: 1;
}
.board-detail-mine-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--green-deep, #2d9f74);
    background: var(--green-soft, #eaf8f2);
    border: 1px solid var(--green-mute, #b4e2cd);
    padding: 2px 8px;
    border-radius: 999px;
}

.board-detail-content-block {
    margin-bottom: 12px;
}
.board-detail-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink, #241f1c);
    line-height: 1.35;
    margin: 0 0 10px;
}
.board-detail-title--notice {
    margin: 4px 0 0;
    font-size: 18px;
}
.board-detail-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2, #4f4841);
    word-break: break-word;
}
.board-detail-body p {
    margin: 0 0 0.65em;
}
.board-detail-body p:last-child {
    margin-bottom: 0;
}
.board-detail-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
}
.board-detail-images img {
    display: block;
    width: 100%;
    max-height: min(70vh, 420px);
    object-fit: cover;
    border-radius: 14px;
    background: var(--line, #d0c6ba);
    cursor: pointer;
}

.board-detail-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--line, #d0c6ba) 70%, transparent);
    margin-top: 2px;
}
.board-detail-notice-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.board-detail-notice-tags .lounge-notice-chip {
    margin-bottom: 0;
}
.board-detail-actions-row {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
.board-detail-stat {
    border: 0;
    background: transparent;
    color: var(--ink-2, #4f4841);
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: default;
    line-height: 1;
}
button.board-detail-stat {
    cursor: pointer;
}
button.board-detail-stat:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.board-detail-stat i,
.board-detail-stat svg {
    width: 15px;
    height: 15px;
    color: #64748b;
}
.board-detail-stat .is-liked,
.board-detail-stat i.is-liked,
.board-post-like-btn.liked .social-action-icon-stroke,
.board-post-like-btn .social-action-icon-stroke.is-liked {
    color: #e11d48;
}
.board-post-bookmark-btn.bookmarked .social-action-icon-stroke {
    color: var(--green, #3cb889);
}

.board-detail-comments-head {
    margin-bottom: 10px;
}
.board-detail-comments-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink, #241f1c);
    letter-spacing: -0.01em;
}
.board-detail-comments-count {
    font-weight: 700;
    color: var(--muted, #7a7268);
}
.board-detail-comments-list {
    display: flex;
    flex-direction: column;
}
.board-detail-comments-list.has-items > .board-detail-comment + .board-detail-comment {
    border-top: 1px solid color-mix(in srgb, var(--line, #d0c6ba) 65%, transparent);
}
.board-detail-comments-empty {
    margin: 0;
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #7a7268);
}
.board-detail-comment {
    padding: 12px 0;
}
.board-detail-comment:first-child {
    padding-top: 2px;
}
.board-detail-comment:last-child {
    padding-bottom: 4px;
}
.board-detail-comment__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.board-detail-comment__meta {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.board-detail-comment__nick {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #241f1c);
}
.board-detail-comment__time {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted, #7a7268);
    font-variant-numeric: tabular-nums;
}
.board-detail-comment__delete {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #7a7268);
    cursor: pointer;
}
.board-detail-comment__delete:hover {
    color: #dc2626;
}
.board-detail-comment__body {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2, #4f4841);
    white-space: pre-wrap;
    word-break: break-word;
}
.board-detail-comment-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.board-detail-composer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--line, #d0c6ba) 65%, transparent);
}
/* 상세 댓글: IME 중에만 fixed — APP는 0, 웹은 overlap 토큰 */
body.ime-open:has(#boardDetailView:not(.hidden)) .board-detail-composer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--ime-fixed-bottom, 0px);
    width: var(--app-bottom-bar-width, min(100%, 28rem));
    max-width: 100%;
    z-index: var(--z-ime-composer);
    margin: 0;
    padding: 10px 14px 12px;
    box-sizing: border-box;
    background: var(--page-deep, #faf6f2);
    border-top: 1px solid color-mix(in srgb, var(--line, #d0c6ba) 65%, transparent);
    box-shadow: 0 -4px 16px rgba(36, 31, 28, 0.06);
}
body.ime-open:has(#boardDetailView:not(.hidden)) #boardDetailContent {
    padding-bottom: calc(5.75rem + var(--ime-fixed-bottom, 0px));
}
html.platform-web:not([data-ime-mode="resize"]) body.ime-open:has(#boardDetailView:not(.hidden)) .board-detail-composer {
    bottom: max(0.35rem, var(--ime-fixed-bottom, 0px), env(safe-area-inset-bottom, 0px));
}
.board-detail-composer__row {
    position: relative;
    display: flex;
    align-items: center;
}
.board-detail-comment-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 18px;
    background: var(--page, #fffcfa);
    color: var(--ink, #241f1c);
    font-size: 14px;
    line-height: 1.45;
    padding: 10px 5.6rem 10px 14px;
    outline: none;
    box-shadow: none;
}
.board-detail-comment-input:focus {
    border-color: var(--green-mute, #b4e2cd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-soft, #eaf8f2) 80%, transparent);
}
.board-detail-comment-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.board-detail-comment-input::placeholder {
    color: #94a3b8;
}
.board-detail-composer__readonly {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #7a7268);
}
.board-detail-comment-photo-preview {
    margin-top: 8px;
}

.board-detail-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3.5rem 1rem;
    text-align: center;
}
.board-detail-state__icon,
.board-detail-state__icon svg {
    width: 28px;
    height: 28px;
    color: var(--muted, #7a7268);
}
.board-detail-state__icon--warn,
.board-detail-state__icon--warn svg {
    color: #d97706;
}
.board-detail-state__text {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2, #4f4841);
}

/* 글쓰기 등 다른 화면용 (밀톡 상세에서는 .board-list-card 사용) */
.board-post-card {
    margin-top: 0.125rem;
    margin-bottom: 0.25rem;
    padding: 1.25rem 1rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid var(--line, #d0c6ba);
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
}

/* MEAL TALK 게시글 상세 하단 버튼: 참여(추천/비추천) 왼쪽, 관리(수정/삭제) 오른쪽 */
.board-detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 0;
    border-top: 1px solid #e2e8f0;
}
.board-detail-actions__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.board-detail-actions__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 참여 액션: 추천/비추천 - 연한 회색/outline, 눌렀을 때만 브랜드 컬러 채움 */
.board-btn-participate {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.875rem;
    font-weight: 700;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.2s;
}
.board-btn-participate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.board-btn-participate:not(:disabled):active {
    transform: scale(0.98);
}
.board-btn-participate--like {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
.board-btn-participate--like.is-active {
    background: var(--green-soft);
    border-color: var(--green-mute);
    color: var(--green);
}
.board-btn-participate--dislike {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
.board-btn-participate--dislike.is-active {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}/* 관리 액션: 수정/삭제 - 텍스트 버튼, 배경 없음 */
.board-btn-manage {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.board-btn-manage--edit {
    color: #475569;
}
.board-btn-manage--edit:hover {
    color: var(--green);
}
.board-btn-manage--edit:active {
    opacity: 0.8;
}
/* 삭제: 기본 연한 회색, hover 시에만 붉은색(경고) */
.board-btn-manage--delete {
    color: #94a3b8;
}
.board-btn-manage--delete:hover {
    color: #ef4444;
}
.board-btn-manage--delete:active {
    opacity: 0.8;
}