@charset "utf-8";

/* ============================================================================
   board.css — 게시판 한 벌 (목록 · 상세 · 검색 바 · 메타 · 버튼 묶음)
   ----------------------------------------------------------------------------
   쓰는 곳: /fellowship/* · /mypage/* · 도서 상세 · 약관 — 서브 페이지 전반.

   옛 additional.css 안에서 이 묶음은 펠로우십 꾸러미 꼬리에 스코프 없이 붙어
   있었다. 앞선 개편이 «.review / .coworker» 로 스코프를 두른 새 판을 얹으면서
   옛 판을 지우려다 «.post-area» 선택자 한 줄만 지워, 뒤따르는 선언들이 여는 짝을
   잃고 통째로 버려지고 있었다 (상세·등록 화면의 안내 띠가 맨몸이던 이유).

   실제로는 펠로우십 전용이 아니라 게시판을 쓰는 화면이 두루 기대는 공통 묶음이라
   (마이페이지의 .total-box, 도서 상세의 .btn-box 가 여기에 기댄다) 제 파일로
   세웠다. 펠로우십만의 생김새는 page/fellowship.css 가 덮는다.

   로드 순서는 page/*.css 다음, ui.css 앞 — 옛 파일 안에서의 앞뒤를 그대로 지킨다.
   ============================================================================ */

.post-area {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:20px 28px;
    background:var(--paper-warm);
    border:1px solid var(--gold-line);
    border-radius:var(--r-xl);
    margin-bottom:28px;
    box-shadow:var(--sh-soft);
}
.post-area p {
    font-size:15px;
    color:var(--copy);
    font-weight:600;
    line-height:1.55;
    margin:0;
}

/* 안내 띠의 동작 단추는 띠 안에서 «부름»이라 한 치수 크다 —
   ui.css 의 한 벌(2.75rem)을 이 자리에서만 키운다. 오른쪽의 옛 형태가 기준.
   글자 크기는 한 벌 그대로 두고(--fs-md), 앞에 아이콘 하나를 세운다.
   아이콘은 .btn-search 와 같은 방식 — 마스크에 currentColor 를 부어 단추 색을 따른다.
   마크업은 그대로다: 안내 띠 안의 주 동작은 언제나 «글 세우기»뿐이라
   화면마다 <i> 를 심는 대신 자리(.post-area)와 갈래(.video)가 그림을 정한다. */
.post-area .btn-primary {
    flex-shrink:0;
    min-height:3.5rem;
    min-width:10rem;
    max-width:100%;
    padding:0 var(--sp-6);
}
.post-area .btn-primary:before {
    flex:0 0 auto;
    width:1.25rem;
    height:1.25rem;
    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='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
    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='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
    content:'';
}
/* 영상 화면에서는 유튜브 link 를 거는 자리라 그림도 영상이다 */
.video .post-area .btn-primary:before {
    -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%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3C/svg%3E") no-repeat center / contain;
    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%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 🌟 2. 메인 피처드 아티클 카드 (.newest) */
.newest {
    margin-bottom:36px;
}
.newest a {
    display:block;
    text-decoration:none;
    color:inherit;
}
.newest .inner-narrow {
    background:var(--paper);
    border:1px solid var(--gold-line);
    border-radius:var(--r-xl);
    overflow:hidden;
    box-shadow:var(--sh-card);
    display:flex;
    transition:background-color var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base), transform var(--t-base), opacity var(--t-base);
}
.newest:hover .inner-narrow {
    border-color:var(--gold);
    transform:translateY(-4px);
    box-shadow:var(--sh-lift);
}
.newest .img-box {
    width:280px;
    min-height:220px;
    flex-shrink:0;
    overflow:hidden;
    position:relative;
    background:var(--paper-warm);
}
.newest .img-box img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--t-base);
}
.newest:hover .img-box img {
    transform:scale(1.05);
}
.newest .text-box {
    flex-grow:1;
    padding:28px 32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.newest .text-box h2 {
    font-size:1.35rem;
    font-weight:700;
    color:var(--ink);
    line-height:1.35;
    margin:0 0 12px;
    letter-spacing:-.02em;
    transition:color var(--t-fast);
}
.newest:hover .text-box h2 {
    color:var(--gold-deep);
}
.newest .text-box p.text {
    font-size:14.5px;
    line-height:1.65;
    color:var(--copy-soft);
    margin:0 0 18px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

/* 🏷️ 공통 메타 정보 리스트 (.con-ul) */
.con-ul {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 16px;
    padding:0;
    margin:0;
    list-style:none;
}
.con-ul li {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-sm);
    color:var(--muted);
    font-weight:500;
    margin:0;
}

.con-ul li.date {
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.con-ul li .views {
    font-size:var(--fs-xs);
    color:var(--gold-deep);
    background:var(--gold-wash);
    padding:2px 8px;
    border-radius:var(--r-pill);
    font-weight:700;
}

/* 항목 앞의 작은 그림표 — 지은이 · 나라 · 날짜 · 조회수.
   background-image 는 currentColor 를 못 받으므로 --muted(#918b80) 를 데이터 URI 에
   구워 넣었다. 토큰 값이 바뀌면 여기 넷도 같이 고쳐야 한다.
   그림표가 항목을 가르므로 예전의 가운뎃점(·) 구분자는 지웠다. */
.con-ul li.writer:before,
.con-ul li.contry:before,
.con-ul li.date:before,
.con-ul li.views:before {
    content:'';
    display:inline-block;
    width:0.875rem;
    height:0.875rem;
    margin:0;
    flex-shrink:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.75;
}
.con-ul li.writer:before { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.con-ul li.contry:before { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20'/></svg>"); }
.con-ul li.date:before   { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>"); }
.con-ul li.views:before  { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* 조회수는 알약이 아니라 값이다 — 다른 항목과 같은 무게로 읽힌다 */
.con-ul li.views {
    padding:0;
    background:none;
    border-radius:0;
    font-size:var(--fs-sm);
    font-weight:500;
    color:var(--muted);
}

/* 🔍 3. 목록 머리 — 건수와 검색 바 한 줄 (.total-box)
   왼쪽은 «몇 건인가», 오른쪽은 «찾기». 좁아지면 위아래로 선다.
   검색 바 자체는 ui.css 의 .input-group 한 벌이 맡는다 — 여기서는 자리만 준다.

   위 여백은 예전에 마크업이 «.total-box .pdt30» 유틸(!important)로 들고 있었다.
   같은 컴포넌트가 화면마다 다른 간격을 갖게 되는 자리라 컴포넌트로 들여왔다. */
.total-box {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--sp-3) var(--sp-5);
    box-sizing:border-box;
    margin:0 0 var(--sp-5);
    padding:var(--sp-6) 0 var(--sp-4);
    border-bottom:1px solid var(--line);
}
.total-box strong.total {
    display:inline-flex;
    align-items:center;
    gap:var(--sp-3);
    color:var(--copy-soft);
    font-size:var(--fs-base);
    font-weight:600;
    letter-spacing:-.01em;
}
/* 앞의 골드 바 — 섹션 제목과 같은 표시 (design-language.md §3) */
.total-box strong.total:before {
    content:'';
    flex:0 0 auto;
    width:3px;
    height:0.9375rem;
    border-radius:var(--r-pill);
    background:var(--gold);
}
.total-box .total-right {
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    margin-inline-start:auto;
}

/* 📜 4. 목록 카드 한 벌 (.message-list · .message-img-list)
   ----------------------------------------------------------------------------
   후기 · 서신 · 동역자 서신이 쓰는 «그림 + 글» 줄이다.

   이름이 둘인 것은 옛 구분이 남은 것이다 — «그림 있는 피드(.message-img-list)» 와
   «글 피드(.message-list)». 지금은 둘 다 그림을 싣고 마크업도 같은데
   (li > .img-box + .title-area > num · 제목 · 본문 · con-ul), 정의만 두 벌이라
   후기 목록과 동역자 서신이 서로 다르게 보였다 — 그림 200×140 대 220×150,
   제목 1.15rem 대 1.18rem, 번호는 한쪽만 골드 알약, 본문은 2줄 대 4줄.

   한 벌로 합친다. 이름 둘은 마크업 260곳에 흩어져 있어 그대로 두고,
   여기서 같은 값을 함께 받는다.
   ========================================================================== */
.message-list,
.message-img-list {
    display:flex;
    flex-direction:column;
    gap:var(--sp-4);
    margin:0 0 var(--sp-6);
    padding:0;
    list-style:none;
}

/* 줄은 «그림 + 글» 두 칸이다. 예전에는 float:left + margin-left:224px 로 짰다.
   그 방식은 RTL 에서 그림이 왼쪽에 남았고(논리 방향을 모르는 물리 속성이라),
   글 칸의 왼쪽 여백을 그림 폭과 손으로 맞춰야 해서 둘이 어긋나면 겹쳤다.
   실제로 그랬다 — 마크업이 인라인으로 그림을 240px 로 넓히자, 후기 목록은
   16px 이 글 위로 올라탔고 동역자 서신은 글 칸이 그림 아래로 떨어졌다.
   flex 는 방향을 알아서 뒤집고 간격도 gap 하나가 정한다. */
.message-list > li,
.message-img-list > li {
    display:flex;
    align-items:flex-start;
    gap:var(--sp-5);
    box-sizing:border-box;
    padding:var(--sp-5);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--sh-soft);
    overflow:hidden;
    cursor:pointer;
    min-height:auto;
    transition:background-color var(--t-base), border-color var(--t-base),
               box-shadow var(--t-base), transform var(--t-base);
}
/* 구판의 얼룩말 무늬 — nth-child 특이도를 클래스로 못 이겨 !important 를 남긴다 */
.message-list > li:nth-child(2n),
.message-img-list > li:nth-child(2n) {
    background:var(--paper) !important;
}
.message-list > li:hover,
.message-img-list > li:hover {
    border-color:var(--gold-line);
    background:var(--gold-wash) !important;
    transform:translateY(-2px);
    box-shadow:var(--sh-card);
}
.message-list > li:after,
.message-img-list > li:after {
    display:none;
}

/* 줄 전체가 링크다 — 예전에는 <li onclick> 이라 키보드로 갈 수 없었고
   가운데 클릭·새 탭·주소 복사도 되지 않았다. 안쪽 <a> 가 그 자리를 다 채운다 */
.message-list > li > .row-link,
.message-img-list > li > .row-link {
    display:flex;
    align-items:flex-start;
    gap:var(--sp-5);
    flex:1;
    min-width:0;
    color:inherit;
    text-decoration:none;
}
.message-list > li:focus-within,
.message-img-list > li:focus-within {
    border-color:var(--gold-line);
    box-shadow:var(--sh-card);
}
.message-list > li > .row-link:focus-visible,
.message-img-list > li > .row-link:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:4px;
    border-radius:var(--r-md);
}

/* 그림 칸 — 3:2 상자. 크기는 여기가 정하고 object-fit 이 채운다 */
.message-list li .img-box,
.message-img-list li .img-box {
    flex:0 0 13.75rem;
    width:13.75rem;
    height:9.375rem;
    position:relative;
    overflow:hidden;
    border-radius:var(--r-md);
    background:var(--paper-warm);
}
.message-list li .img-box img,
.message-img-list li .img-box img {
    width:100%;
    height:100%;
    object-fit:cover;
    position:static;
    transform:none;
    transition:transform var(--t-base);
}
.message-list li:hover .img-box img,
.message-img-list li:hover .img-box img {
    transform:scale(1.05);
}

/* 글 칸 */
.message-list li .title-area,
.message-img-list li .title-area {
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    box-sizing:border-box;
    padding:0;
    overflow:visible;
}
.message-list li .title-area em,
.message-list li .title-area h2,
.message-img-list li .title-area em,
.message-img-list li .title-area h2 {
    margin:0 0 var(--sp-2);
    padding:0;
    color:var(--ink);
    font-size:var(--fs-lg);
    font-weight:700;
    line-height:1.4;
    letter-spacing:-.01em;
    transition:color var(--t-fast);
}
.message-list li:hover .title-area h2,
.message-list li:hover .title-area em,
.message-img-list li:hover .title-area h2,
.message-img-list li:hover .title-area em {
    color:var(--gold-deep);
}
.message-list li .title-area span,
.message-img-list li .title-area span {
    font-size:inherit;
    color:inherit;
}
.message-list li p.text,
.message-img-list li .title-area p.text {
    margin:0 0 var(--sp-3);
    color:var(--copy-soft);
    font-size:var(--fs-base);
    line-height:var(--lh-base);
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    height:auto;
}

/* 번호 배지 — 골드 알약 한 벌 */
.message-list strong.num,
.message-img-list strong.num {
    display:inline-block;
    align-self:flex-start;
    margin:0 0 var(--sp-2);
    padding:1px var(--sp-2);
    background:var(--gold-wash);
    border-radius:var(--r-sm);
    color:var(--gold-deep);
    font-size:var(--fs-xs);
    font-weight:700;
}

/* 메타 줄 — 지은이 · 나라 · 날짜 · 조회수. con-ul 바탕 위에 자리만 얹는다 */
.message-list li .title-area .con-ul,
.message-img-list li .title-area .con-ul {
    justify-content:flex-start;
    margin-top:auto;
    padding-top:var(--sp-2);
}
.message-list li .title-area .date,
.message-img-list li .title-area .date {
    float:none;
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    color:var(--muted);
    font-size:var(--fs-sm);
    line-height:1.4;
}
.message-list li .title-area .date .views,
.message-img-list li .title-area .date .views {
    padding:2px var(--sp-2);
    background:var(--gold-wash);
    border-radius:var(--r-pill);
    color:var(--gold-deep);
    font-size:var(--fs-xs);
    font-weight:700;
}
.message-list li .title-area .date .views:before,
.message-img-list li .title-area .date .views:before {
    display:none;
}

/* 📄 쪽 넘김 (.list-paging)
   동그란 칸이 한 줄로 선다. 지금 쪽만 골드 면을 갖고 나머지는 글자만 선다.

   구조(폭·높이·둥글기)는 sub.css 가, 색은 여기가 나눠 갖고 있었다. 그래서
   «.review / .coworker» 로 스코프가 둘린 화면만 골드였고, 복음성가·마이페이지처럼
   다른 이름을 단 화면은 옛 보라 알약 그대로였다. 한 곳으로 합친다.

   화살표는 배경 그림이 아니라 마스크다 — 예전에는 SVG 안에 회색(#918b80)이 박혀
   있어서 호버에도 비활성에도 늘 같은 회색이었다. currentColor 를 받으면 상태를 따라간다. */
.list-paging {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--sp-2);
    margin:var(--sp-7) 0 0;
}
.list-paging > a {
    display:inline-flex;
    flex:0 0 auto;
    width:2.5rem;
    height:2.5rem;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background-color:var(--paper);
    color:var(--muted);
    font-size:0;
    transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.list-paging > a:before {
    content:'';
    width:100%;
    height:100%;
    background-color:currentColor;
    -webkit-mask:var(--arrow) no-repeat center / 0.875rem auto;
            mask:var(--arrow) no-repeat center / 0.875rem auto;
}
.list-paging > a.paging-prev2 {
    --arrow: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6 5 12l6 6'/%3E%3Cpath d='M18 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.list-paging > a.paging-prev {
    --arrow: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.list-paging > a.paging-next {
    --arrow: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
.list-paging > a.paging-next2 {
    --arrow: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6-6 6'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.list-paging > a:hover {
    border-color:var(--gold);
    background-color:var(--gold-wash);
    color:var(--gold-deep);
}
.list-paging > a:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:2px;
}
/* RTL — 방향 아이콘은 뒤집는다 (design-language.md §3) */
.align-right .list-paging > a:before {
    transform:scaleX(-1);
}

.list-paging ul {
    display:flex;
    align-items:center;
    gap:var(--sp-1);
    margin:0 var(--sp-2);
    padding:0;
    list-style:none;
}
.list-paging ul li {
    margin:0;
}
.list-paging ul li a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    min-width:2.5rem;
    height:2.5rem;
    padding:0 var(--sp-2);
    border:1px solid transparent;
    border-radius:var(--r-pill);
    color:var(--muted);
    font-size:var(--fs-base);
    font-weight:600;
    transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.list-paging ul li a:hover {
    background-color:var(--gold-wash);
    border-color:var(--gold-line);
    color:var(--gold-deep);
}
.list-paging ul li a:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:2px;
}
.list-paging ul li.active a {
    background-color:var(--gold);
    border-color:var(--gold);
    color:var(--paper);
    box-shadow:var(--sh-gold);
}

/* 하단 단추 묶음은 ui.css 의 .btn-box 한 벌이 맡는다.
   여기(그리고 page/fellowship.css)에는 «.btn-box button» 으로 묶음 안의 모든 단추를
   골드 알약으로 칠하는 사본이 각각 있었다. 역할(주/보조)이 지워져 «목록»과 «저장»이
   똑같이 보였고, color 에 !important 와 하드코딩 #ffffff, transition:all 까지 얹혀
   있었다. 단추의 생김새는 단추가 정한다 — 묶음은 자리만 잡는다. */

/* 📱 7. Fellowship 반응형 미디어쿼리 */
@media (max-width:1024px) {
    .newest .inner-narrow {
        flex-direction:column;
    }
    .newest .img-box {
        width:100%;
        height:240px;
    }
    .message-list > li,
    .message-img-list > li {
        gap:var(--sp-4);
    }
    .message-list li .img-box,
    .message-img-list li .img-box {
        flex-basis:11.25rem;
        width:11.25rem;
        height:8.125rem;
    }
}

@media (max-width:767px) {
    .post-area {
        flex-direction:column;
        align-items:flex-start;
        padding:18px 20px;
        gap:12px;
    }
    .newest .text-box {
        padding:20px;
    }
    /* 좁은 폭에서는 두 칸이 위아래로 선다 */
    .message-list > li,
    .message-img-list > li {
        flex-direction:column;
        gap:var(--sp-3);
        padding:var(--sp-4);
    }
    .message-list > li > .row-link,
    .message-img-list > li > .row-link {
        flex-direction:column;
        gap:var(--sp-3);
        width:100%;
    }
    .message-list li .img-box,
    .message-img-list li .img-box {
        flex:0 0 auto;
        width:100%;
        height:10rem;
    }
    .message-list li .title-area,
    .message-img-list li .title-area {
        width:100%;
    }
    .total-box {
        flex-direction:column;
        align-items:flex-start;
        gap:var(--sp-3);
        padding-top:var(--sp-5);
    }
    .total-box .total-right {
        width:100%;
        margin-inline-start:0;
    }
    .list-paging {
        margin-top:var(--sp-6);
        gap:var(--sp-1);
    }
    .list-paging > a,
    .list-paging ul li a {
        width:2.125rem;
        min-width:2.125rem;
        height:2.125rem;
    }
    .list-paging ul {
        margin:0 var(--sp-1);
    }
}