/* ==========================================================================
   ZZAPS 커뮤니티 피드 전용 스타일
   --------------------------------------------------------------------------
   적용 범위  : 커뮤니티 목록 (community.index · community.board)
   로드 방식  : community/index.blade.php 의 @push('head') 에서만 link
                (공통 app.css 를 건드리지 않는다 — 다른 세션이 편집 중인 파일이다)

   무엇이 바뀌었나
     예전에는 제목만 줄줄이 나열하는 게시판이었고, 본문 검색줄과 "새 글 작성" 버튼이
     목록 위에 붙어 있었다. 읽는 화면인데 조작 버튼이 먼저 보였다.
     이제는 카드 하나에 카테고리 · 작성자 · 제목 · 본문 두 줄 · 사진 · 반응이 들어간다.
     스크롤만 하면서 계속 읽을 수 있는 모양이다.

   규칙
     - 모든 선택자는 .zz-board-page 하위로 스코프한다.
     - 전역 요소 선택자(div · a · button · img)를 쓰지 않는다.
     - 색·모서리는 공통 테마 변수를 읽기만 한다.
     - min-width 미디어쿼리를 쓰지 않는다. 화면이 넓어져도 카드가 커지지 않고
       공통 앱 컨테이너(.zz-app) 안에서 가운데에 그대로 선다.

   치수
     카드 사이 12px · 카드 안쪽 여백 16px · 사진 radius 10px · 프로필 36px
   ========================================================================== */

.zz-board-page .zzf {
    /* 카드가 화면 폭을 꽉 쓰도록 좌우 여백은 카드 안쪽에서만 준다 */
    padding: 0 0 24px;
}

/* --------------------------------------------------------------------------
   1. 제목
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-title {
    margin: 14px 16px 2px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}

.zz-board-page .zzf-desc {
    margin: 0 16px 10px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   2. 카테고리 칩 · 정렬 — 좌우 스크롤
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-chips,
.zz-board-page .zzf-sorts {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 첫 칩과 마지막 칩이 화면 끝에 붙지 않게 */
    padding: 8px 16px;
}

.zz-board-page .zzf-chips::-webkit-scrollbar,
.zz-board-page .zzf-sorts::-webkit-scrollbar { display: none; }

.zz-board-page .zzf-chips a,
.zz-board-page .zzf-sorts a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.zz-board-page .zzf-chips a[aria-current="page"],
.zz-board-page .zzf-sorts a[aria-current="page"] {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* 정렬은 게시판 칩보다 한 단계 약하게 (같은 무게면 어느 것이 지금 위치인지 헷갈린다) */
.zz-board-page .zzf-sorts {
    padding-top: 0;
    padding-bottom: 10px;
}

.zz-board-page .zzf-sorts a {
    height: 30px;
    padding: 0 12px;
    background: none;
    border-color: transparent;
    font-size: 13px;
}

.zz-board-page .zzf-sorts a[aria-current="page"] {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text);
}

/* 헤더 검색으로 들어온 경우에만 뜬다. 목록에는 검색창을 두지 않는다. */
.zz-board-page .zzf-keyword {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.zz-board-page .zzf-keyword a { color: var(--primary); font-weight: 600; }

.zz-board-page .alert { margin: 0 16px 12px; }

/* --------------------------------------------------------------------------
   3. 피드
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-feed {
    display: flex;
    flex-direction: column;
    /* 카드 사이 12px */
    gap: 12px;
}

.zz-board-page .zzf-card {
    /*
     * 카드 전체를 덮는 제목 링크(.zzf-hit)의 기준점.
     * 카드를 <a> 로 감싸지 않고 링크 하나를 덮는 방식이라 여기 relative 가 필요하다.
     */
    position: relative;
    padding: 14px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

/* 차단하면 그 자리에서 사라진다 (zzaps-author.js 가 hidden 을 건다) */
.zz-board-page .zzf-card[hidden] { display: none; }

/* 카드 아무 곳이나 누르면 상세로 간다 */
.zz-board-page .zzf-hit::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.zz-board-page .zzf-card:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   카테고리 + 더보기
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.zz-board-page .zzf-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.zz-board-page .zzf-notice {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.zz-board-page .zzf-card.is-notice .zzf-headline { color: var(--primary); }

/* ⋯ 는 카드 링크 위에 떠 있어야 눌린다 */
.zz-board-page .zzf-more {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 보이는 점 세 개는 작지만 누르는 곳은 44px 을 확보한다 */
    width: 44px;
    height: 32px;
    margin: -6px -12px -6px auto;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.zz-board-page .zzf-more:hover { background: var(--surface-3); color: var(--text); }

/* --------------------------------------------------------------------------
   4. 작성자 한 줄 — 프로필 · 닉네임 · 매너
      (작성시간·조회수는 카드 아래 줄 왼쪽으로 내려갔다)
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-who {
    position: relative;
    /* 프로필을 누르면 상세가 아니라 작성자 시트가 열려야 한다 */
    z-index: 1;
    display: flex;
    align-items: center;
    /* 한 줄에 다 넣는다. 좁으면 닉네임부터 말줄임된다. */
    gap: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    white-space: nowrap;
}

/* 프로필사진 36px (author-link 의 md 기본 32px 을 이 화면에서만 키운다) */
.zz-board-page .zzf-who .author-trig-avatar { width: 36px; height: 36px; }

.zz-board-page .zzf-who .author-trig-name {
    font-size: 13.5px;
    font-weight: 700;
    max-width: 8.5em;
}

/*
   매너 배지.

   공통 components/manner 는 "매너"를 윗줄, 숫자를 아랫줄에 쌓는다(flex-direction:column).
   프로필·상세처럼 세로로 여유가 있는 화면에는 맞지만, 이 한 줄짜리 작성자 줄에서는
   글자가 줄바꿈된 것처럼 보이고 min-width:74px 이 자리를 크게 먹는다.

   그래서 이 화면에서만 가로 알약으로 눕힌다. 공통 컴포넌트는 건드리지 않는다
   (다른 화면은 쌓인 모양을 그대로 쓴다).

   테두리와 배경을 주는 이유는 닉네임과 눈으로 구분되게 하기 위해서다.
   둘 다 같은 굵기의 글자로 나란히 있으면 어디까지가 이름인지 읽히지 않는다.
*/
.zz-board-page .zzf-who .manner {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-width: 0;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface-3);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.zz-board-page .zzf-who .manner-label {
    font-size: 10.5px;
    color: var(--text-dim);
}

.zz-board-page .zzf-who .manner-value {
    font-size: 11.5px;
    font-weight: 700;
}

/* 값만 등급 색을 쓴다. 배지 전체를 물들이면 닉네임보다 눈에 띈다. */
.zz-board-page .zzf-who .manner--low .manner-value { color: var(--danger); }
.zz-board-page .zzf-who .manner--mid .manner-value { color: var(--warning); }
.zz-board-page .zzf-who .manner--base .manner-value { color: var(--text); }
.zz-board-page .zzf-who .manner--good .manner-value,
.zz-board-page .zzf-who .manner--best .manner-value { color: var(--success); }

/* 닉네임 뒤에 살짝 간격을 더 준다 (배지가 이름에 붙어 보이지 않게) */
.zz-board-page .zzf-who .author-trig { margin-right: 2px; }

/* --------------------------------------------------------------------------
   3. 제목 · 본문 2줄 · 사진
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* 사진이 없으면 본문이 폭을 전부 쓴다.
   min-width:0 이 없으면 긴 제목이 썸네일을 화면 밖으로 밀어낸다. */
.zz-board-page .zzf-text { flex: 1 1 auto; min-width: 0; }

.zz-board-page .zzf-headline {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    /* 아무리 긴 제목도 두 줄까지만 (카드 높이가 들쭉날쭉해지지 않게) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.zz-board-page .zzf-headline .zzf-hit { color: inherit; }

.zz-board-page .zzf-excerpt {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.5;
    /* 본문 앞부분 2줄 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.zz-board-page .zzf-thumb {
    flex: 0 0 auto;
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-3);
}

.zz-board-page .zzf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   5. 아래 줄 — 왼쪽 작성시간·조회수 / 오른쪽 좋아요·댓글

   시간과 조회수는 "읽고 나서 확인하는 값"이라 작성자 줄에서 내렸다.
   작성자 줄에 다 넣으면 닉네임이 밀려 잘리고, 좁은 화면에서 가장 먼저 깨진다.
   -------------------------------------------------------------------------- */

.zz-board-page .zzf-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px -8px -6px 0;
}

.zz-board-page .zzf-react {
    position: relative;
    /* 하트는 상세로 넘어가지 않고 그 자리에서 눌려야 한다 */
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    /* 왼쪽 값이 아무리 길어도 반응 버튼은 오른쪽 끝에 붙는다 */
    margin-left: auto;
}

.zz-board-page .zzf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 8px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.zz-board-page .zzf-btn:hover { background: var(--surface-3); color: var(--text); }

.zz-board-page .zzf-btn-ico { font-size: 15px; line-height: 1; }

/* 누른 좋아요만 포인트색. 누르지 않은 것은 조용히 둔다. */
.zz-board-page .zzf-btn.is-on { color: var(--primary); }

/* --------------------------------------------------------------------------
   6. 더보기 시트 안쪽
   (껍데기 .sheet 와 줄 모양 .author-sheet-item 은 이미 있는 것을 그대로 쓴다)
   -------------------------------------------------------------------------- */

.post-sheet-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-sheet-menu .author-sheet-item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   7. 운영방침 안내 (커뮤니티 메인 최상단)
   --------------------------------------------------------------------------
   <details><summary> 그대로다. 자바스크립트를 한 줄도 쓰지 않는다.
   스크립트가 꺼져 있어도, 아직 내려받히지 않았어도 열고 닫힌다.
   기본은 접힘이고 열림 상태를 저장하지 않으므로 새로고침하면 다시 접힌다.

   흰 카드가 아니라 앱의 카드 표면(--surface)을 쓴다.
   이 디자인 시스템은 다크 한 벌뿐이라 순백 블록을 넣으면 그 자리만 조명처럼 뜬다.
   둥근 모서리와 은은한 입체감은 그대로 준다.
   -------------------------------------------------------------------------- */

.zz-board-page .zzp-policy {
    margin: 12px 16px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    /* 은은하게. 다크 배경에서 그림자는 넓고 옅어야 뜨는 느낌이 난다. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 20px -12px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* --- 머리줄 (항상 보이는 부분) --- */

.zz-board-page .zzp-policy-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    cursor: pointer;
    /* 사파리가 붙이는 기본 삼각형을 지운다 (우리가 글자로 대신 보여준다) */
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.zz-board-page .zzp-policy-head::-webkit-details-marker { display: none; }
.zz-board-page .zzp-policy-head::marker { content: ''; }

.zz-board-page .zzp-policy-head:hover { background: var(--surface-2); }

/* 키보드로 옮겨 왔을 때 어디에 있는지 분명히 보이게 한다 */
.zz-board-page .zzp-policy-head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.zz-board-page .zzp-policy-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.4;
    color: var(--text);
}

.zz-board-page .zzp-policy-ico { font-size: 18px; line-height: 1; }

.zz-board-page .zzp-policy-toggle {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* 접혀 있으면 "열어보기 ▾", 펼쳐져 있으면 "닫기 ▴" (자바스크립트 없이 바꾼다) */
.zz-board-page .zzp-policy-close,
.zz-board-page .zzp-policy[open] .zzp-policy-open { display: none; }
.zz-board-page .zzp-policy[open] .zzp-policy-close { display: inline; }

/* --- 본문 --- */

.zz-board-page .zzp-policy-inner {
    padding: 2px 16px 18px;
    border-top: 1px solid var(--line-soft);
}

.zz-board-page .zzp-policy-sec { margin-top: 14px; }

.zz-board-page .zzp-policy-sec h3 {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}

.zz-board-page .zzp-policy-sec p {
    margin: 0 0 8px;
    font-size: 14.5px;
    /* 법적 고지라 줄이 길다. 줄간격을 넉넉히 줘야 읽힌다. */
    line-height: 1.75;
    color: var(--text-muted);
    word-break: keep-all;
}

.zz-board-page .zzp-policy-sec ul {
    margin: 0 0 10px;
    padding-left: 2px;
    list-style: none;
}

.zz-board-page .zzp-policy-sec li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 5px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-muted);
    word-break: keep-all;
}

.zz-board-page .zzp-policy-sec li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-dim);
}

.zz-board-page .zzp-policy-rule {
    margin: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
}

.zz-board-page .zzp-policy-outro {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 600;
    color: var(--text);
    word-break: keep-all;
}

/* --------------------------------------------------------------------------
   펼침 애니메이션

   두 가지를 함께 둔다. 어느 쪽도 없으면 애니메이션만 빠지고 여닫기는 그대로 된다.

     1) ::details-content 를 아는 브라우저 — 열 때도 닫을 때도 높이가 움직인다.
        height:auto 로 전환하려면 interpolate-size 가 함께 필요하다.
     2) 모르는 브라우저 — 펼쳐질 때 살짝 밀려 나오며 나타난다.
        <details> 는 닫는 순간 내용을 지워 버려서 닫힘 전환은 만들 수 없다.

   레이아웃은 밀리지 않는다. 움직이는 것은 이 카드의 높이뿐이고
   아래 목록은 그 높이를 따라 자연스럽게 내려간다.
   -------------------------------------------------------------------------- */

@supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .zz-board-page .zzp-policy { interpolate-size: allow-keywords; }

    .zz-board-page .zzp-policy::details-content {
        height: 0;
        overflow: hidden;
        transition:
            height .3s cubic-bezier(.25, .8, .35, 1),
            content-visibility .3s allow-discrete;
    }

    .zz-board-page .zzp-policy[open]::details-content { height: auto; }
}

@supports not ((interpolate-size: allow-keywords) and selector(::details-content)) {
    .zz-board-page .zzp-policy[open] .zzp-policy-body {
        animation: zzpPolicyReveal .28s cubic-bezier(.25, .8, .35, 1);
    }

    @keyframes zzpPolicyReveal {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }
}

/* 움직임을 줄여 달라고 한 사람에게는 움직이지 않는다 (여닫기는 그대로 된다) */
@media (prefers-reduced-motion: reduce) {
    .zz-board-page .zzp-policy::details-content { transition: none; }
    .zz-board-page .zzp-policy[open] .zzp-policy-body { animation: none; }
}