/**
 * 모바일 앱 틀 커뮤니티(2-a) — 목록 · 글쓰기 · 글 상세 · 댓글
 * 정본 docs/mobile-app/README.md 2-a · 채용 결과 docs/mobile-app/11-picks-community.md
 *   목록: 게시판 글자 탭(3장 강의 탭과 같게) → 「게시글 N개 · 최신순 ▾」 + 말머리 칩(F3 당근) → 글 카드(C1 당근) · 떠 있는 「글쓰기」(W1 당근)
 *   글쓰기: 전체 화면, 위 줄 [✕] 새 글 작성 [등록](P1 당근) — 버튼은 community-mobile.js 가 노드째 위 줄로 옮긴다
 *   상세: 카드 틀 없이 전폭 · 작성자 줄 먼저(D2 당근) · 3칸 반응 줄 · 굵은 회색 띠 · 채택 답변 맨 위(D1 ZIGZAG)
 *   댓글: 본문 전폭 · 세로 선 들여쓰기(R4 Digg) · 아래 고정 입력줄, 글을 쓰면 [등록](R2 당근)
 *
 * ⛔ 1024 이하 + body.omc-on.omc-oc 에서만(includes/mobile.php 가 켜진 요청에만 싣는다). PC 는 그대로.
 * ⛔ 카드·페이저·말머리·글쓰기 버튼 안쪽은 JS 가 다시 그린다 — 마크업을 바꾸지 않고 여기 CSS 로만 모양을 바꾼다.
 * ⛔ 숨겨 둔 요소([hidden])에 display 를 주는 규칙은 :not([hidden]) 을 붙인다 — 이 파일 명시도가 .oc-community .X[hidden] 을 이긴다.
 * ⛔ 카드 8px · 버튼·칩 var(--radius-md) · 채운 버튼·고른 칩 --brand-action · 공용 크롬 활성 = 무채 · 그라디언트·!important 없음.
 */

/* community-mobile.js 가 폭과 상관없이 넣는 모바일 전용 부품 — 1025 이상(PC)에서는 안 보인다(아래 1024 이하 규칙이 다시 보이게 한다) */
.oc-community .oc-detail-reactbar .oc-act.oc-omc-cmt,
.oc-community .oc-omc-cmt-empty {
    display: none;
}

@media screen and (max-width: 1024px) {

    /* ── 공통 ─────────────────────────────────────────────── */
    body.omc-on.omc-oc .oc-community {
        --nav-accent: var(--chrome-control);
        padding-bottom: 24px;
        background: var(--surface-white);
    }

    /* 941~1024 도 한 칸(원래는 PC 3칸 그리드가 그대로 나왔다) */
    body.omc-on.omc-oc .oc-community .oc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 16px;
    }

    body.omc-on.omc-oc .oc-community .oc-widgets {
        display: contents;
    }

    body.omc-on.omc-oc .oc-community .oc-badge {
        font-size: 12px;
    }

    /* ── 게시판 글자 탭 — 3장 강의 탭과 같은 모양, 상단 바 밑에 붙는다(2차 줄 z 190) ── */
    body.omc-on.omc-oc--list .oc-community .oc-nav {
        order: -2;
        position: sticky;
        top: var(--omc-appbar-h);
        z-index: 190;
        align-self: start;
        flex-direction: column;
        align-items: stretch;     /* 940 이하 옛 규칙의 center 가 남으면 탭 줄이 내용 폭(558px)으로 늘어 화면 밖으로 넘친다 */
        margin: 0 -16px;
        background: var(--surface-white);
        border-bottom: 1px solid var(--gray-200);
    }

    body.omc-on.omc-oc--list.admin-bar .oc-community .oc-nav {
        top: calc(var(--omc-appbar-h) + 32px);
    }

    body.omc-on.omc-oc--list .oc-community .oc-dd.oc-dd--navboard,
    body.omc-on.omc-oc--list .oc-community .oc-nav-search,
    body.omc-on.omc-oc--list .oc-community .oc-nav-label {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-nav-groups {
        display: block;
        min-width: 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-nav {
        flex-direction: row;
        gap: 4px;
        padding: 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-nav::-webkit-scrollbar {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item,
    body.omc-on.omc-oc--list .oc-community .oc-board-item:hover:not(.is-active),
    body.omc-on.omc-oc--list .oc-community .oc-board-item.is-active {
        position: relative;
        flex: 0 0 auto;
        gap: 0;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 0;
        background: none;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item.is-active {
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item.is-active::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        border-radius: 1px;
        background: var(--nav-accent);
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item > .oc-ic,
    body.omc-on.omc-oc--list .oc-community .oc-board-item-n {
        display: none;
    }

    /* 「커뮤니티 전체」 → 「전체」(includes/mobile.php 가 켜진 요청에만 짧은 이름을 붙인다) */
    body.omc-on.omc-oc--list .oc-community .oc-board-item:has(.oc-board-item-short) .oc-board-item-label {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item-short {
        display: inline;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-item:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: -4px;
    }

    /* ── ① 목록 위(F3 당근) — 「게시글 N개」 ··· 「최신순 ▾」 / 그 밑 말머리 칩 ── */
    body.omc-on.omc-oc--list .oc-community .oc-feed {
        gap: 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls:not([hidden]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        min-height: 0;
        margin: 0;
        padding: 8px 0 4px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls-left,
    body.omc-on.omc-oc--list .oc-community .oc-feed-controls-right {
        display: contents;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-name {
        grid-column: 1;
        grid-row: 1;
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-name-t {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-n {
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-n::before {
        content: '게시글 ';
    }

    body.omc-on.omc-oc--list .oc-community .oc-dd--sort {
        grid-column: 2;
        grid-row: 1;
    }

    /* 정렬 = 작은 글자 버튼. 누르면 community-mobile.js 가 공용 시트(정렬 + 보기)를 연다 */
    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--sort .oc-dd-btn {
        height: 44px;
        padding: 0 4px 0 8px;
        font-size: 14px;
        color: var(--gray-600);
    }

    body.omc-on.omc-oc--list .oc-community .oc-view-seg,
    body.omc-on.omc-oc--list .oc-community .oc-mine-toggle {
        display: none;
    }

    /* 말머리 = 옆으로 밀리는 칩 줄(드롭다운 버튼은 숨기고 목록을 펼쳐 둔다 — 칩을 누르면 원래 옵션 처리기가 그대로 돈다) */
    body.omc-on.omc-oc--list .oc-community .oc-heading-row:not([hidden]) {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block;
        min-width: 0;
        margin: 4px -16px 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-dd.oc-dd--head {
        display: block;
    }

    body.omc-on.omc-oc--list .oc-community .oc-dd--head > .oc-dd-btn {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-menu {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 8px;
        min-width: 0;
        max-height: none;
        margin: 0;
        padding: 4px 16px 8px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        background: none;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-menu::-webkit-scrollbar {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-opt,
    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-opt:hover {
        position: relative;
        flex: 0 0 auto;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-700);
    }

    /* 보이는 높이 36 · 누르는 높이 44 */
    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-opt::after {
        content: '';
        position: absolute;
        inset: -4px 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-controls .oc-dd--head .oc-dd-opt.is-active {
        border-color: var(--brand-action);
        background: var(--brand-action);
        font-weight: 600;
        color: var(--text-white);
    }

    /* 태그 필터 · 검색 결과 머리 */
    body.omc-on.omc-oc--list .oc-community .oc-tagfilter:not([hidden]),
    body.omc-on.omc-oc--list .oc-community .oc-searchinfo:not([hidden]) {
        margin: 12px 0 4px;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-searchinfo-clear,
    body.omc-on.omc-oc--list .oc-community .oc-tagfilter-clear {
        position: relative;
    }

    body.omc-on.omc-oc--list .oc-community .oc-searchinfo-clear::after,
    body.omc-on.omc-oc--list .oc-community .oc-tagfilter-clear::after {
        content: '';
        position: absolute;
        inset: -12px;
    }

    /* ── ② 글 카드(C1 당근) — 칩 → 제목 2줄 → 미리보기 1줄 → 「이름 · 시간」 ··· ♡ 💬, 사진은 오른쪽 72px ── */
    body.omc-on.omc-oc--list .oc-community .oc-feed-list:not(.is-compact):not(.is-photo) > .oc-feed-card {
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-list:not(.is-compact):not(.is-photo) > .oc-feed-card:hover {
        background: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card.oc-card-cert,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card.oc-card-cert:hover {
        box-shadow: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-chips {
        gap: 4px;
        margin-bottom: 6px;
    }

    /* ⋯ 는 휴대폰에서 뺀다(C1) — 스크랩·공유는 글 안에서 */
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-more {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-head {
        gap: 12px;
        margin-bottom: 8px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        font-size: 16px;
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-body {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        margin: 4px 0 0;
        font-size: 14px;
        line-height: 1.5;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-lead {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-thumb {
        width: 72px;
        height: 72px;
        border-radius: 8px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-meta {
        gap: 4px;
        font-size: 13px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-meta > .oc-av-link,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-feed-meta > .oc-avatar {
        display: none;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-author,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-time,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-comment-n {
        font-size: 13px;
        color: var(--gray-500);
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-author a {
        color: var(--gray-600);
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-like,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-comment-n,
    body.omc-on.omc-oc--list .oc-community .oc-checkin-cmt-n {
        position: relative;
    }

    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-like::after,
    body.omc-on.omc-oc--list .oc-community .oc-feed-card .oc-comment-n::after,
    body.omc-on.omc-oc--list .oc-community .oc-checkin-cmt-n::after {
        content: '';
        position: absolute;
        inset: -10px -4px;
    }

    /* 출석 줄 댓글 칩(28×22)은 옆이 비어 있어 가로로 더 넓힌다 */
    body.omc-on.omc-oc--list .oc-community .oc-checkin-cmt-n::after {
        inset: -11px -8px;
    }

    /* [전체] 맨 위 설문·투표 */
    body.omc-on.omc-oc--list .oc-community .oc-poll-feature {
        margin: 8px 0 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-poll-feature > .oc-feed-card,
    body.omc-on.omc-oc--list .oc-community .oc-poll-feature-row {
        padding-left: 0;
        padding-right: 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-poll-feature-fold {
        position: relative;
    }

    body.omc-on.omc-oc--list .oc-community .oc-poll-feature-fold::after {
        content: '';
        position: absolute;
        inset: -12px -6px;
    }

    /* 목록 끝 「더 보기」(community.js 가 번호 페이저 대신 그린다) · 번호 페이저(출석) 44px */
    body.omc-on.omc-oc--list .oc-community .oc-pagination-wrap {
        margin: 16px 0 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-page-btn {
        min-width: 44px;
        height: 44px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-page-more {
        width: 100%;
        height: 48px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        background: var(--surface-white);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
    }

    body.omc-on.omc-oc--list .oc-community .oc-page-more:disabled {
        color: var(--gray-400);
    }

    /* 목록 뒤 위젯(지금 커뮤니티 · 미해결 질문 · 광고) — 목록과 간격, 아래는 떠 있는 버튼 자리 */
    body.omc-on.omc-oc--list .oc-community .oc-now-card,
    body.omc-on.omc-oc--list .oc-community .oc-unsolved-card,
    body.omc-on.omc-oc--list .oc-community .oc-ad-slot {
        margin-top: 24px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-grid {
        padding-bottom: 80px;
    }

    /* ── ③ 글쓰기 버튼(W1 당근) — 탭 바 바로 위 오른쪽에 떠 있는 라벨 버튼. 출석·작성 중엔 JS 인라인 display:none 이 이긴다 ── */
    body.omc-on.omc-oc--list .oc-community .oc-write-cta {
        position: fixed;
        right: calc(16px + var(--omc-safe-r));
        bottom: calc(var(--omc-stack-b) + 16px);
        z-index: var(--z-sticky);
        order: 0;
        width: auto;
        height: 48px;
        padding: 0 18px;
        gap: 6px;
        border: 0;
        border-radius: 8px;
        background: var(--brand-action);
        font-size: 15px;
        font-weight: 700;
        color: var(--text-white);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--gray-900) 22%, transparent);
    }

    body.omc-on.omc-oc--list .oc-community .oc-write-cta:active {
        background: var(--brand-hover);
    }

    /* 출석체크는 위 입력줄이 글쓰기다 — 주소로 바로 들어오면 community.js 가 버튼을 안 숨긴다(탭으로 옮겨 올 때만 숨김, PC 도 같다) */
    body.omc-on.omc-oc--list .oc-community:has(.oc-checkin) .oc-write-cta {
        display: none;
    }

    /* ── ④ 글쓰기 화면(P1 당근) — 전체 화면, 위 줄 [✕] 새 글 작성 [등록] ── */
    body.omc-on.omc-oc .oc-community.is-composing .oc-composer:not([hidden]):not(.oc-line-mode) {
        position: fixed;
        inset: 0 0 var(--omc-kb-h, 0px) 0;
        z-index: 400;
        margin: 0;
        padding: 0 16px calc(24px + var(--omc-safe-b));
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--surface-white);
    }

    body.omc-on.omc-oc.admin-bar .oc-community.is-composing .oc-composer:not([hidden]):not(.oc-line-mode) {
        top: 32px;
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-composer-head {
        position: sticky;
        top: 0;
        z-index: 3;
        flex-wrap: wrap;
        gap: 0 4px;
        min-height: 56px;
        margin: 0 -16px 8px;
        padding: 0 4px;
        background: var(--surface-white);
        border-bottom: 1px solid var(--gray-100);
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-composer-headtitle {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        display: flex;
        align-items: center;
        font-size: 17px;
    }

    /* ✕ 닫기 — [취소] 버튼을 그대로 옮겨 와 글자는 숨기고(이름은 그대로 「취소」) 선 아이콘으로 */
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-composer-cancel,
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-cancel {
        order: -1;
        position: relative;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        font-size: 0;
        color: var(--text-primary);
    }

    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-composer-cancel::before,
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-cancel::before {
        content: '';
        position: absolute;
        inset: 11px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 22px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 22px no-repeat;
    }

    /* [등록] = 글자 버튼(P1 「완료」). 못 올릴 때는 회색 */
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-composer-submit,
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-submit {
        order: 9;
        flex: none;
        height: 44px;
        min-height: 44px;
        max-width: 132px;
        padding: 0 12px;
        overflow: hidden;
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        box-shadow: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--primary);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-composer-submit:disabled,
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-submit:disabled {
        background: none;
        color: var(--gray-400);
        opacity: 1;
    }

    /* 게시판을 고르기 전(「무엇을 남기시겠어요?」)엔 올릴 것이 없다 */
    body.omc-on.omc-oc .oc-community .oc-composer[data-picked="0"] .oc-composer-head .oc-composer-submit {
        display: none;
    }

    /* 게시판 고르기 = 위 줄 아래 한 줄 전체 → 누르면 하단 시트 모양 메뉴(P1 주제 시트) */
    body.omc-on.omc-oc .oc-community.is-composing .oc-composer-head .oc-boardsel {
        order: 10;
        flex: 1 1 100%;
        padding: 0 12px 4px;
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-boardsel-btn {
        min-height: 44px;
        padding: 0 4px;
        border-bottom: 0;
        font-size: 15px;
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-boardsel-menu:not([hidden]) {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
        padding: 20px 16px calc(20px + var(--omc-safe-b));
        border-radius: 12px 12px 0 0;
        background: var(--surface-white);
        animation: none;
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-boardsel[data-open="1"]::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 9;
        background: color-mix(in srgb, var(--gray-900) 40%, transparent);
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-boardsel-opt {
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        font-size: 15px;
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-boardsel-opt.is-active {
        border-color: var(--brand-action);
        background: var(--brand-action);
        color: var(--text-white);
    }

    body.omc-on.omc-oc .oc-community.is-composing .oc-composer-form.oc-slidein {
        animation: none;
    }

    /* 입력칸 16px(iOS 확대 방지) · 누르는 칸 44px */
    body.omc-on.omc-oc .oc-community .oc-composer-title,
    body.omc-on.omc-oc .oc-community .oc-composer-body,
    body.omc-on.omc-oc .oc-community .oc-opt-field,
    body.omc-on.omc-oc .oc-community .oc-poll-b-label,
    body.omc-on.omc-oc .oc-community .oc-poll-b-exp,
    body.omc-on.omc-oc .oc-community .oc-poll-edit-q,
    body.omc-on.omc-oc .oc-community .oc-checkin-body,
    body.omc-on.omc-oc .oc-community .oc-ccmt-input,
    body.omc-on.omc-oc .oc-community .oc-fc-input {
        font-size: 16px;
    }

    body.omc-on.omc-oc .oc-community .oc-composer .oc-dd-btn,
    body.omc-on.omc-oc .oc-community .oc-tag-auto,
    body.omc-on.omc-oc .oc-community .oc-qna-alert,
    body.omc-on.omc-oc .oc-community .oc-line-photo,
    body.omc-on.omc-oc .oc-community .oc-line-expand {
        min-height: 44px;
    }

    body.omc-on.omc-oc .oc-community .oc-tag-sug {
        min-height: 44px;
    }

    body.omc-on.omc-oc .oc-community .oc-attach-x {
        position: relative;
    }

    body.omc-on.omc-oc .oc-community .oc-attach-x::after {
        content: '';
        position: absolute;
        inset: -8px;
    }

    body.omc-on.omc-oc .oc-community.is-composing .mce-toolbar .mce-btn button {
        min-width: 44px;
        min-height: 44px;
    }

    /* 학습기록 한 줄 입력 — PC 의 왼쪽 22px 들여쓰기(게시판 머리 글자에 맞춘 것)는 모바일엔 머리가 없어 뺀다. 아래 줄 도구는 좁은 폭에서 겹치지 않게 */
    body.omc-on.omc-oc .oc-community .oc-composer.oc-line-mode {
        margin: 12px 0 0;
        padding: 12px;
    }

    body.omc-on.omc-oc .oc-community .oc-composer.oc-line-mode .oc-composer-foot {
        flex-wrap: wrap;
    }

    body.omc-on.omc-oc .oc-community .oc-composer.oc-line-mode .oc-composer-submit {
        min-height: 44px;
    }

    body.omc-on.omc-oc .oc-community .oc-composer.oc-line-mode .oc-char {
        display: none;
    }

    /* ── 출석체크 — 입력 줄을 두 줄로(360 폭에서 입력칸이 24px 까지 줄었다), 통계는 아래로 ── */
    body.omc-on.omc-oc--list .oc-community .oc-mode-panel {
        padding-left: 0;
        padding-right: 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-board-header:not([hidden]) {
        padding: 0;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-input {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-body {
        flex: 1 1 calc(100% - 42px);
        min-height: 44px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-refresh,
    body.omc-on.omc-oc--list .oc-community .oc-checkin-clear {
        width: 44px;
        height: 44px;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-submit {
        height: 44px;
        margin-left: auto;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-row {
        flex-wrap: wrap;
    }

    body.omc-on.omc-oc--list .oc-community .oc-checkin-stat {
        box-sizing: border-box;   /* 테마에 전역 리셋이 없다 — 없으면 100% 에 왼쪽 42px 가 더해져 화면 밖으로 넘친다 */
        flex-basis: 100%;
        padding-left: 42px;
        white-space: normal;
    }

    body.omc-on.omc-oc .oc-community .oc-ccmt-time {
        font-size: 12px;
    }

    /* 학습기록 목록 댓글 시트 — 누르는 칸 44, html 까지 잠그면 상단 바(sticky)가 풀린다 → body 만 */
    body.omc-on.omc-oc .oc-community .oc-sheet-x,
    body.omc-on.omc-oc .oc-community .oc-fc-replying-x {
        min-width: 44px;
        min-height: 44px;
    }

    body.omc-on.omc-oc .oc-community .oc-fc-compose--dock .oc-fc-submit {
        min-height: 44px;
    }

    /* ── ⑤ 글 상세(D2 당근 + D1 ZIGZAG) ── */
    body.omc-on.omc-oc--detail .oc-community.oc-detail-page .oc-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 목록의 게시판 고르기·검색 줄이 상세에서 또 나오던 것 — 상단 바 「← 게시판」이 대신한다 */
    body.omc-on.omc-oc--detail .oc-community .oc-nav {
        display: none;
    }

    /* 카드 틀 없이 전폭(D2) · 칩 → 작성자 줄 → 제목 → 본문(D2 순서) */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-article {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 16px 0 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-article > .oc-chips {
        order: 0;
        margin-bottom: 12px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-author {
        order: 1;
        gap: 10px;
        padding: 0;
        border: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-title {
        order: 2;
        margin: 14px 0 0;
        font-size: 20px;
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-article > :not(.oc-chips):not(.oc-detail-author):not(.oc-detail-title):not(.oc-detail-reactbar) {
        order: 3;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-av {
        width: 36px;
        height: 36px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-author-name {
        font-size: 15px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-author-sub {
        font-size: 13px;
    }

    /* 수정·삭제는 상단 바 ⋯ 시트로 옮겼다(설문·투표 소유자 줄은 그대로) */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-owner:has(> .oc-owner-btn),
    body.omc-on.omc-oc--detail .oc-community .oc-detail-owner:has(> .oc-owner-blocked) {
        display: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-body {
        padding: 16px 0 4px;
        font-size: 16px;
        line-height: 1.75;
    }

    /* 표 · 코드 = 칸 안에서 옆으로(페이지는 넘치지 않게) */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-body table,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-body pre {
        overflow-x: auto;
    }

    /* 3칸 반응 줄(D1) — 좋아요 · 댓글 N · 스크랩, 틀 없이 폭을 고르게. 공유는 상단 바에 있어 숨긴다(주소·제목은 이 버튼이 들고 있어 노드는 둔다) */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar {
        order: 6;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin: 16px -16px 0;
        border-top: 1px solid var(--gray-100);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar > .oc-reactions {
        margin: 0;
        justify-content: center;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-scrap,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-share {
        margin: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-share {
        display: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-like,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-like.is-liked,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-act {
        width: 100%;
        height: 48px;
        padding: 0 4px;
        border-radius: 0;
        font-size: 14px;
        color: var(--gray-700);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-act.oc-omc-cmt {
        display: inline-flex;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-scrap:has(.count) {
        color: var(--color-warning-text);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-like.is-mine {
        color: var(--like-red);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-like::after,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-act::after {
        content: none;
    }

    /* 좋아요 숫자만 보이던 칸에 「좋아요」를 붙인다(3칸이 같은 말투로) */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-reactbar .oc-like-n::before {
        content: '좋아요 ';
    }

    /* 굵은 회색 띠 뒤 댓글(D1) */
    body.omc-on.omc-oc--detail .oc-community .oc-comments {
        margin: 0 -16px;
        padding: 20px 16px 8px;
        border: 0;
        border-top: 8px solid var(--gray-50);
        border-radius: 0;
        box-shadow: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments-h {
        margin: 0 0 8px;
        font-size: 16px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-accept-hint {
        margin: 0 0 8px;
    }

    /* 채택된 답변을 맨 위로(D1 「채택된 댓글」) */
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-list {
        display: flex;
        flex-direction: column;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-list > .oc-cmt-accepted {
        order: -1;
    }

    /* 댓글 없을 때(R2) — community-mobile.js 가 목록이 비면 넣는다 */
    body.omc-on.omc-oc--detail .oc-community .oc-omc-cmt-empty {
        display: block;
        margin: 24px 0 16px;
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
        color: var(--gray-500);
    }

    /* ── ⑥ 댓글 한 개(R4 Digg) — 작은 아바타 + 굵은 이름 + 오른쪽 끝 시간, 본문은 전폭, 답글은 세로 선 ── */
    body.omc-on.omc-oc--detail .oc-community .oc-cmt {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
        padding: 16px 0;
        border-bottom: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt > .oc-cmt-main {
        display: contents;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-av,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-reply .oc-cmt-av {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-head {
        grid-column: 2;
        flex-wrap: wrap;
        gap: 4px 6px;
        margin: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-name {
        font-size: 14px;
        font-weight: 700;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-author,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-accept-badge {
        font-size: 12px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-time {
        margin-left: auto;
        font-size: 12px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt > .oc-cmt-main > :not(.oc-cmt-head) {
        grid-column: 1 / -1;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-body {
        margin: 8px 0 0;
        font-size: 15px;
        line-height: 1.65;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-actions {
        gap: 0 4px;
        margin: 4px 0 0 -8px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-cheer,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-reply-btn,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-edit,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-del,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-thank,
    body.omc-on.omc-oc--detail .oc-community .oc-cmt-accept:not(.oc-cmt-accept--cta) {
        min-height: 44px;
        padding: 0 8px;
        font-size: 13px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-accept--cta {
        min-height: 44px;
        margin: 0 8px;
        font-size: 13px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-file-size {
        font-size: 12px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-accepted {
        margin: 12px 0;
        padding: 16px;
        border-radius: 8px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-replies {
        margin: 8px 0 0;
        padding-left: 12px;
        border-left: 2px solid var(--gray-200);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-reply {
        padding: 12px 0;
        border-top: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-cmt-replies > .oc-cmt[data-vd="2"] {
        margin-left: 0;
        padding-left: 12px;
        border-left: 2px solid var(--gray-200);
    }

    /* ── 아래 고정 입력줄(R2 당근) — [📎] 회색 입력칸 [등록(글을 쓰면)]. 하단 탭 바 바로 위에 쌓는다(운영자 9/29 「본문에서도 하단 내비」) ──
       높이는 community-mobile.js 가 재서 --omc-dock-h 로 적는다(토스트·본문 아래 여백이 이 위로). .omc-dock 은 쓰지 않는다
       (키보드가 뜨면 숨고, body 로 옮겨져 .oc-community 범위·위임 처리기가 끊긴다).
       안전 영역은 탭 바가 덮으므로 아래 여백은 8px 만 — 높이 재는 식이 「아래 여백 − 8 = 안전 영역」 약속이라 여기선 0 이 빠진다.
       키보드가 뜨면 탭 바가 내려가고(html.omc-kb) community.js dockFit 이 키보드 높이를 인라인 bottom 으로 준다 */
    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--omc-tabbar-h) + var(--omc-safe-b));
        z-index: var(--z-sticky);
        margin: 0;
        padding: 8px calc(12px + var(--omc-safe-r)) 8px calc(8px + var(--omc-safe-l));
        border-top: 1px solid var(--gray-200);
        background: var(--surface-white);
    }

    html.omc-kb body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed {
        bottom: 0;
    }

    /* 입력줄과 탭 바가 한 판으로 보이게 — 상세의 탭 바는 위 모서리·테두리를 빼고 옅은 선 하나로 나눈다 */
    body.omc-on.omc-oc--detail .omc-tabbar {
        border-width: 1px 0 0;
        border-top-color: var(--gray-100);
        border-radius: 0;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-box {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 4px;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        cursor: auto;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-composer-foot {
        display: contents;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-attach-btn {
        order: -1;
        flex: none;
        width: 44px;
        height: 44px;
        color: var(--gray-600);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-input {
        order: 0;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        min-height: 44px;
        max-height: 132px;
        padding: 11px 12px;
        border: 0;
        border-radius: 8px;
        background: var(--gray-100);
        font-size: 16px;
        line-height: 22px;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-submit {
        order: 1;
        display: none;
        align-items: center;
        flex: none;
        height: 44px;
        padding: 0 12px;
        border: 0;
        background: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--primary);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-box.has-content .oc-cmt-submit,
    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-box:has(.oc-cmt-attach-pick:not([hidden])) .oc-cmt-submit {
        display: inline-flex;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-composer.is-collapsed .oc-cmt-attach-pick:not([hidden]) {
        display: inline-flex;
        order: -2;
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 0 4px;
    }

    /* 답글 모드 줄(「○○님에게 답글 · 취소」) — community-mobile.js 가 입력줄 맨 위에 넣는다 */
    body.omc-on.omc-oc--detail .oc-community .oc-omc-replying {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: -4px 0 4px;
        padding: 0 0 0 8px;
        font-size: 13px;
        color: var(--gray-600);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-omc-replying[hidden] {
        display: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-omc-replying-t {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-omc-replying-x {
        flex: none;
        min-width: 44px;
        min-height: 44px;
        padding: 0 8px;
        border: 0;
        background: none;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
    }

    /* 로그인 안 한 사람 — 입력줄 자리에 한 줄(누르면 이 글로 돌아오는 로그인. 줄 전체를 누를 수 있다) */
    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-login {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--omc-tabbar-h) + var(--omc-safe-b));
        z-index: var(--z-sticky);
        display: block;           /* flex 면 「로그인」 링크 뒤 글자의 앞 공백이 잘려 「로그인후」가 된다 */
        min-height: 56px;
        margin: 0;
        /* 탭 바 위에 쌓여 안전 영역은 탭 바가 덮는다 — 아래 여백 8px(높이 재는 식의 「아래 여백 − 8」 이 0). 세로 가운데는 줄 높이로(1+8+39+8=56) */
        padding: 8px calc(16px + var(--omc-safe-r)) 8px calc(16px + var(--omc-safe-l));
        box-sizing: border-box;
        border-top: 1px solid var(--gray-200);
        background: var(--surface-white);
        font-size: 15px;
        line-height: 39px;
        color: var(--gray-700);
    }

    body.omc-on.omc-oc--detail .oc-community .oc-comments .oc-cmt-login a::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    /* 옛 휴대폰 규칙의 아래 여백(96)·알림 위치 — 입력줄 높이를 --omc-dock-h 로 재서 body 여백이 대신한다 */
    body.omc-on.omc-oc--detail .oc-community.oc-detail-page {
        padding-bottom: 24px;
    }

    body.omc-on.omc-oc .oc-community .oc-snack {
        bottom: calc(var(--omc-stack-b) + 12px);
    }

    /* 옆 영역 — 글쓰기·작성자 카드·빈 광고 칸은 뺀다 */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-write,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-authorcard,
    body.omc-on.omc-oc--detail .oc-community .oc-detail-side .oc-ad-slot:not(.is-filled) {
        display: none;
    }

    /* 같은 게시판 최근 글 = 회색 띠 뒤 */
    body.omc-on.omc-oc--detail .oc-community .oc-detail-recent {
        margin: 0 -16px;
        padding: 20px 16px 8px;
        border: 0;
        border-top: 8px solid var(--gray-50);
        border-radius: 0;
        box-shadow: none;
    }

    body.omc-on.omc-oc--detail .oc-community .oc-detail-recent .oc-page-btn {
        min-width: 44px;
        height: 44px;
    }

    /* 편집 화면(?action=edit)은 목록 마크업을 통째로 다시 쓴다 — 게시판 줄은 필요 없다 */
    body.omc-on.omc-oc--edit .oc-community .oc-nav {
        display: none;
    }
}

/* ── body 로 옮겨지는 것(공용 시트 행 · 커뮤니티 검색 화면) — .oc-community 밖이라 --oc-* 대신 전역 토큰만 ── */
@media screen and (max-width: 1024px) {
    /* 글쓰기·검색 화면이 열린 동안 뒤 페이지는 body 만 잠근다(html 까지 잠그면 상단 바 sticky 가 풀린다) */
    html.oc-omc-lock body.omc-on {
        overflow: hidden;
    }

    body.omc-on .oc-omc-sheet__body {
        padding: 0 0 8px;
    }

    body.omc-on .oc-omc-sec {
        margin: 12px 16px 4px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
    }

    body.omc-on .oc-omc-row {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 8px 16px;
        border: 0;
        background: none;
        font: inherit;
        font-size: 16px;
        text-align: left;
        color: var(--gray-900);
        cursor: pointer;
    }

    body.omc-on .oc-omc-row .oc-omc-ic {
        flex: none;
        color: var(--gray-600);
    }

    body.omc-on .oc-omc-row__t {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.omc-on .oc-omc-row__s {
        font-size: 13px;
        color: var(--text-muted);
    }

    body.omc-on .oc-omc-row[aria-pressed="true"] {
        font-weight: 700;
    }

    body.omc-on .oc-omc-row .oc-omc-row__check {
        color: var(--gray-900);
    }

    body.omc-on .oc-omc-row.is-danger,
    body.omc-on .oc-omc-row.is-danger .oc-omc-ic {
        color: var(--color-danger-text);
    }

    body.omc-on .oc-omc-row:disabled {
        color: var(--gray-400);
        cursor: default;
    }

    body.omc-on .oc-omc-row:disabled .oc-omc-ic {
        color: var(--gray-400);
    }

    body.omc-on .oc-omc-row:active:not(:disabled) {
        background: var(--gray-50);
    }

    body.omc-on .oc-omc-row:focus-visible,
    body.omc-on .oc-omc-chip:focus-visible,
    body.omc-on .oc-omc-search__back:focus-visible,
    body.omc-on .oc-omc-search__clear:focus-visible {
        outline: 2px solid var(--chrome-focus);
        outline-offset: -2px;
    }

    /* 커뮤니티 검색 화면(상단 바 돋보기) — 공통 검색 화면과 같은 자리(z 400) */
    body.omc-on .oc-omc-search {
        position: fixed;
        inset: 0;
        z-index: 400;
        display: flex;
        flex-direction: column;
        background: var(--surface-white);
    }

    body.omc-on.admin-bar .oc-omc-search {
        top: 32px;   /* 관리자 바(z 99999)가 검색 줄을 가리지 않게. 782 이하 46px 는 파일 끝 */
    }

    body.omc-on .oc-omc-search[hidden] {
        display: none;
    }

    body.omc-on .oc-omc-search__bar {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: var(--omc-appbar-h);
        margin: 0;
        padding: env(safe-area-inset-top, 0px) calc(8px + var(--omc-safe-r)) 0 calc(4px + var(--omc-safe-l));
        border-bottom: 1px solid var(--gray-200);
    }

    body.omc-on .oc-omc-search__back,
    body.omc-on .oc-omc-search__clear {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        color: var(--gray-700);
        cursor: pointer;
    }

    body.omc-on .oc-omc-search__clear[hidden] {
        display: none;
    }

    body.omc-on .oc-omc-search__in {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0 12px;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--gray-100);
        font: inherit;
        font-size: 16px;
        color: var(--gray-900);
        -webkit-appearance: none;
        appearance: none;
    }

    body.omc-on .oc-omc-search__in::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    body.omc-on .oc-omc-search__in:focus {
        background: var(--gray-100);
        box-shadow: none;
        outline: 2px solid var(--chrome-focus);
        outline-offset: -2px;
    }

    body.omc-on .oc-omc-search__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 0 calc(24px + var(--omc-safe-b));
    }

    body.omc-on .oc-omc-search__body .oc-omc-sec {
        margin: 12px 16px 8px;
    }

    body.omc-on .oc-omc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 16px;
    }

    body.omc-on .oc-omc-chip {
        position: relative;
        min-height: 36px;
        max-width: 100%;
        padding: 0 12px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        background: var(--surface-white);
        font: inherit;
        font-size: 14px;
        color: var(--gray-700);
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    body.omc-on .oc-omc-chip__t {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.omc-on .oc-omc-chip::after {
        content: '';
        position: absolute;
        inset: -4px 0;
    }

    body.omc-on .oc-omc-search__site {
        margin-top: 16px;
        border-top: 1px solid var(--gray-100);
    }

    /* 설문 만들기 [올리기] — 「새 밸런스 게임 올리기」는 위 줄에 들어가지 않는다(이름은 그대로 두고 보이는 글자만 줄인다) */
    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-submit {
        font-size: 0;
    }

    body.omc-on.omc-oc .oc-community .oc-composer-head .oc-poll-b-submit::after {
        content: '올리기';
        font-size: 16px;
    }
}

/* 학습기록 목록 댓글 시트가 열리면 community.js 가 html 까지 잠근다 — 새 틀에서는 body 만(상단 바가 붙어 있게) */
@media screen and (max-width: 1024px) {
    html.oc-sheet-lock:has(> body.omc-on.omc-oc) {
        overflow: visible;
    }
}

@media screen and (max-width: 782px) {
    body.omc-on.omc-oc--list.admin-bar .oc-community .oc-nav {
        top: calc(var(--omc-appbar-h) + 46px);
    }

    body.omc-on.omc-oc.admin-bar .oc-community.is-composing .oc-composer:not([hidden]):not(.oc-line-mode),
    body.omc-on.admin-bar .oc-omc-search {
        top: 46px;
    }
}

@media screen and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    body.omc-on.omc-oc .oc-community.is-composing .oc-composer:not([hidden]):not(.oc-line-mode) {
        animation: omc-oc-compose-in 0.18s ease-out;
    }

    @keyframes omc-oc-compose-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}