로 두고, 카드 넓이만큼 투명한 링크(.pi-link)를
덮어 씌웁니다. 글쓴이 이름만 그 위로 올려서 프로필로 갈 수 있게 해요. */
.post-item {
position: relative;
display: grid;
/* 게시판 | 제목 | 닉네임 | 시간 | 조회 */
grid-template-columns: 108px minmax(0, 1fr) 150px 52px 46px;
gap: 12px; align-items: center;
padding: 9px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
/* 카드 전체를 덮는 투명한 링크 — 어디를 눌러도 글로 갑니다 */
.post-item .pi-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* ⚠️ 빛나는 칸의 2px 테두리 위만은 덮개가 닿지 않습니다.
inset 을 -2px 로 넓혀 봤지만 소용없었어요 — overflow:hidden 은
'패딩 상자' 까지만 자르기 때문에, 넓힌 만큼이 테두리에서 잘립니다.
테두리를 없애거나 box-shadow 로 바꾸면 덮을 수 있지만 그러면
칸 높이가 달라집니다. 2px 테두리 위는 사람 손가락으로 노려서
누를 수 없는 굵기라, 그대로 둡니다 (눌러도 아무 일도 안 일어날 뿐
엉뚱한 곳으로 가지는 않아요). */
/* ⚠️ 여기가 오래 말썽이던 자리입니다. 층(z-index)만으로는 못 풉니다.
빛나는 칸(전체 공지·이벤트·관리자 지정 빛깔)은 .pmain / .pright 를
z-index:1 로 올려 반짝임(::after) 위에 얹습니다. 덮개도 1 이라
층이 같고, DOM 에서 뒤에 오는 본문이 이겨서 덮개를 통째로
가려 버렸어요 — 공지 칸은 제목을 눌러도 아무 일이 없었습니다.
(보통 칸은 .pmain 에 층이 없어 멀쩡했고, 그래서 늦게 드러났어요.)
게다가 z-index 를 준 .pmain 은 '쌓임 맥락' 을 만들기 때문에,
그 안의 글쓴이 이름에 아무리 큰 층을 줘도 .pmain 밖으로는
못 나옵니다. 층 싸움으로는 이길 수 없는 구조예요.
그래서 층이 아니라 '누름을 받느냐' 로 가릅니다.
· 글자·사진처럼 눌러도 갈 곳이 없는 것 → 누름을 통과시켜 덮개로
· 제 갈 곳이 있는 것만 → 누름을 도로 켭니다
⚠️ 칸 안에 새로 눌리는 것을 넣으면 반드시 아래 목록에 더해 주세요.
빠뜨리면 눌러도 글로 가 버리는 죽은 단추가 됩니다. */
.post-item .pmain,
.post-item .pright,
.post-item .pboard,
.post-item .ptitle,
.post-item .pwho,
.post-item .pwhen,
.post-item .pviews { pointer-events: none; }
.post-item .author-link, /* 글쓴이 이름 → 작은 프로필 카드 */
.post-item .pcomments, /* 댓글 칸 → 글의 댓글 자리 */
.post-item .ptag-btn { /* 말머리 → 그 말머리만 모아 보기 */
pointer-events: auto;
position: relative; z-index: 4;
}
.post-item:hover { background: var(--chip-bg); }
.post-item .pmain { min-width: 0; }
/* ---------- 한 줄 목록의 다섯 칸 ---------- */
.post-item .pboard {
font-size: 0.8125rem; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 제목 칸 = 글자(말줄임) + 댓글수.
⚠️ [n] 을 글자와 같은 상자에 두면 말줄임에 함께 잘려 안 보입니다.
글자만 줄이고 [n] 은 늘 남기려고 둘로 나눴어요. */
.post-item .ptitle {
min-width: 0; display: flex; align-items: center;
font-size: 0.9375rem; color: var(--heading); line-height: 1.45;
}
.post-item .pt-text {
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-item .ptag { color: var(--brand); font-weight: 800; }
.post-item .pi-pic { margin-left: 4px; font-size: 0.75rem; opacity: .65; }
.post-item .pwho {
min-width: 0; display: flex; align-items: center; gap: 4px; justify-content: flex-end;
font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden;
}
.post-item .pwhen { font-size: 0.8125rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.post-item .pviews { font-size: 0.8125rem; color: var(--text-muted); text-align: right; }
/* ==========================================================
🗂️ 목록 나열법 — 간단형 · 카드형 · 앨범형
----------------------------------------------------------
⚠️ 마크업은 **셋이 같습니다.** 사진·본문 맛보기·메타 줄은 늘 들어
있고(community-data.js), 여기서 보이고 숨길 뿐이에요. 모양을
바꿀 때 목록을 다시 그리지 않으려고요 — 다시 그리면 스크롤이 튑니다.
⚠️ 모양 클래스는 **목록 칸 이름에 기대지 않습니다**(.pv-card 처럼
홀로 씁니다). 커뮤니티는 .post-list, 허브는 .hub-list 로 칸 이름이
서로 달라서, .post-list.view-card 로 묶으면 허브에서 안 걸려요.
⚠️ 기본은 **간단형**입니다. 아무 클래스가 없을 때도 지금까지의 모습이
그대로 나오도록, 새로 더한 조각만 숨깁니다.
⚠️ 공지 줄(.pi-notice)은 어느 모양에서도 한 줄입니다. 공지는 훑어
보는 것이지 사진을 보는 게 아니에요. 네이버 카페도 그렇게 합니다.
========================================================== */
/* 🖼 테두리가 있는 줄은 **안쪽 여백**을 더 줍니다.
----------------------------------------------------------
⚠️ 빛나는 줄(전체 공지·이벤트·당첨자)은 2px 테두리를 두릅니다. 그런데
안쪽 여백은 보통 줄과 같은 좌우 6px 이라, 글자가 테두리에 거의
닿아 보였습니다 — 특히 제목이 두 줄로 접힐 때요.
⚠️ 테두리가 없는 줄은 그대로 둡니다. 거기까지 넓히면 한 화면에 보이는
글이 줄어들어요. 테두리가 있는 줄만 손봅니다. */
.post-item.glow-red,
.post-item.glow-gold,
.post-item.glow-blue,
.post-item.glow-green { padding: 11px 14px; }
/* 새로 더한 조각 — 기본(간단형)에서는 안 보입니다.
⚠️⚠️ 이름 앞에 **pv-** 를 붙였습니다. 처음에 .pthumb · .pmeta 로
지었더니 이미 쓰고 있던 이름이었어요(.post-item .pthumb 는 이 파일
217줄에, .pmeta 는 06-pages·08-market 에 있습니다). 같은 이름을
쓰면 숨기려던 것이 다른 규칙에 밀려 그대로 보입니다 — 실제로
간단형에서 메타 줄이 보였습니다. 새 조각은 새 이름으로. */
.post-item .pv-excerpt,
.post-item .pv-thumb,
.post-item .pv-meta { display: none; }
/* 🐾 왼쪽 칸 — 동물 + 게시판 */
.post-item .pb-animal {
color: var(--brand); font-weight: 800;
}
.post-item .pb-animal::before { content: "["; }
.post-item .pb-animal::after { content: "] "; }
/* ----------------------------------------------------------
▤ 카드형 — 제목 + 본문 맛보기 + 사진
⚠️ 한 글이 한 덩어리입니다. 제목만 보고는 들어갈지 말지 못 정할 때,
맛보기 두 줄이 그 판단을 대신해 줍니다.
⚠️ 사진은 **오른쪽**에 둡니다. 왼쪽에 두면 제목 시작점이 글마다
달라져(사진 있는 글/없는 글) 줄이 들쭉날쭉해 보여요.
---------------------------------------------------------- */
.pv-card .post-item:not(.pi-notice) {
grid-template-columns: minmax(0, 1fr) 104px;
grid-template-areas:
"board thumb"
"title thumb"
"excerpt thumb"
"meta thumb";
gap: 4px 14px; align-items: start;
padding: 16px 6px;
}
.pv-card .post-item:not(.pi-notice) .pboard { grid-area: board; font-size: 0.75rem; }
.pv-card .post-item:not(.pi-notice) .ptitle { grid-area: title; font-size: 1.0625rem; font-weight: 700; }
.pv-card .post-item:not(.pi-notice) .pv-excerpt { grid-area: excerpt; display: -webkit-box; }
.pv-card .post-item:not(.pi-notice) .pv-thumb { grid-area: thumb; display: block; }
.pv-card .post-item:not(.pi-notice) .pv-meta { grid-area: meta; display: flex; }
/* 한 줄짜리 칸들은 카드형에서 메타 줄이 대신합니다 */
.pv-card .post-item:not(.pi-notice) .pwho,
.pv-card .post-item:not(.pi-notice) .pwhen,
.pv-card .post-item:not(.pi-notice) .pviews { display: none; }
/* 제목은 카드형에서 두 줄까지 — 긴 제목을 잘라 버리지 않습니다 */
.pv-card .post-item:not(.pi-notice) .pt-text { white-space: normal; }
/* ⚠️ 여기서 display 를 주면 안 됩니다. 위의 '기본에서는 숨김' 규칙과
**같은 세기**라서, 뒤에 오는 이것이 이겨 간단형에서도 보여 버려요.
(실제로 그렇게 났습니다 — flow-root 로 보였습니다.)
display 는 모양별 규칙에서만 켭니다. 여기는 생김새만. */
.post-item .pv-excerpt {
font-size: 0.875rem; color: var(--text-muted); line-height: 1.6;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-item .pv-meta {
align-items: center; flex-wrap: wrap; gap: 10px;
font-size: 0.8125rem; color: var(--text-muted);
}
.post-item .pv-meta .pm-like { color: var(--brand); }
/* ----------------------------------------------------------
▦ 앨범형 — 사진을 격자로
⚠️ 사진이 **없는 글도** 같은 칸을 차지합니다. 빠뜨리면 "내 글이 어디
갔지" 가 되거든요. 사진 자리에는 글자만 보여 줍니다.
⚠️ 1100px 아래에서는 세 칸, 760px 아래에서는 두 칸으로 줄입니다.
---------------------------------------------------------- */
.pv-album {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px 16px;
align-items: start;
}
/* 글이 아닌 것은 격자에 끼지 않고 **한 줄을 가로질러** 섭니다.
----------------------------------------------------------
· 공지 줄
· 「아직 글이 없어요」 · 「불러오는 중…」 · 「못 불러왔어요」 (.empty-state)
⚠️⚠️ 격자는 **자식을 가리지 않습니다.** 넣는 것은 뭐든 한 칸이 돼요.
그래서 글이 하나도 없을 때 「아직 이 게시판에 글이 없어요」 가
네 칸 중 **맨 왼쪽 한 칸**에만 들어가 가운데가 텅 비었습니다
— 센세가 잡아 주신 화면입니다.
⚠️ .empty-state 만 집어 쓰지 않고 **'글(.post-item)이 아닌 것 전부'**
로 잡았습니다. 나중에 안내 줄이 하나 더 늘어도 같은 일이 안 생기게요. */
.pv-album > :not(.post-item),
.pv-album .post-item.pi-notice { grid-column: 1 / -1; }
.pv-album .post-item:not(.pi-notice) {
display: flex; flex-direction: column; gap: 6px;
padding: 0 0 12px; border-bottom: 0;
}
/* ⚠️ 사진을 **맨 위로** 올립니다. 마크업 차례는 (게시판 → 제목 → … →
사진) 이라서 그대로 두면 사진이 제목 아래로 갑니다 — 앨범인데
사진이 두 번째 줄에 있으면 앨범이 아니에요.
마크업을 바꾸지 않고 order 로만 옮깁니다(간단형·카드형은 그대로). */
.pv-album .post-item:not(.pi-notice) .pv-thumb {
order: -1;
/* ⚠️⚠️ aspect-ratio 를 썼다가 **안 먹었습니다.** 폭이 268px 로 잡혀
있는데도 높이가 46px 로 나왔어요(실측). 세로 flex 안에서 주축
크기가 내용 기준이라 비율이 안 풀린 것으로 보입니다.
⚠️ 그래서 어디서나 도는 옛 방법을 씁니다 — 높이를 0 으로 두고
padding-top 을 100% 주면, 백분율 패딩은 **폭을 기준**으로 계산돼
정확히 정사각형이 됩니다. 실측 268px.
⚠️ 높이가 0 이므로 안의 사진은 절대배치로 깔아야 합니다. */
display: block; width: 100%; height: 0; padding-top: 100%;
position: relative;
border-radius: 10px; overflow: hidden; background: var(--chip-bg);
}
.pv-album .post-item:not(.pi-notice) .pv-thumb img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
.pv-album .post-item:not(.pi-notice) .ptitle { font-size: 0.9375rem; font-weight: 700; }
.pv-album .post-item:not(.pi-notice) .pt-text { white-space: normal; }
.pv-album .post-item:not(.pi-notice) .pboard { order: 0; font-size: 0.75rem; }
.pv-album .post-item:not(.pi-notice) .pv-meta { display: flex; }
.pv-album .post-item:not(.pi-notice) .pwho,
.pv-album .post-item:not(.pi-notice) .pwhen,
.pv-album .post-item:not(.pi-notice) .pviews,
.pv-album .post-item:not(.pi-notice) .pv-excerpt { display: none; }
/* 사진 없는 글의 빈 칸 — 격자 줄을 맞추려고 자리만 지킵니다.
⚠️ 카드형에서는 숨깁니다(아래). 회색 네모가 붙으면 "사진이 안 떴나?"
로 읽혀서, 없느니만 못해요. */
.pv-album .pv-thumb-none { background: var(--chip-bg); opacity: .5; }
.pv-card .pv-thumb-none { display: none; }
@media (max-width: 1100px) { .pv-album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pv-album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 카드형의 사진 칸 */
.pv-card .post-item .pv-thumb {
width: 104px; height: 104px; border-radius: 10px; overflow: hidden;
background: var(--chip-bg); position: relative;
}
.pv-card .post-item .pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 좀은 화면에서는 두 줄로 접습니다.
⚠️ 360px 에 다섯 칸을 우겨넣으면 제목이 서너 글자만 남아 아무것도
못 읽어요. 위 줄에 게시판+제목, 아래 줄에 글쓴이·시간·조회. */
@media (max-width: 700px) {
.post-item {
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas:
"board title title title"
"who who when views";
row-gap: 4px; column-gap: 8px; padding: 10px 6px;
}
.post-item .pboard { grid-area: board; max-width: 84px; }
.post-item .ptitle { grid-area: title; }
.post-item .pwho { grid-area: who; justify-content: flex-start; }
.post-item .pwhen { grid-area: when; }
.post-item .pviews { grid-area: views; }
}
.post-item .pright { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.post-item .pthumb {
position: relative; width: 76px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
background: var(--surface-2);
}
/* 사진 썸네일은 칸을 꽉 채워 자릅니다.
⚠️ :not(.emo) 가 중요해요. 사진이 없는 글은 분류 아이콘(🦀 같은 그림)을
대신 보여주는데, 그 아이콘까지 꽉 채우면 76x76 이 되어
60px 짜리 칸에서 아래가 16px 잘려 나갑니다. */
.post-item .pthumb img:not(.emo) { width: 100%; height: 100%; object-fit: cover; }
.post-item .pthumb-emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.875rem; }
/* 분류 아이콘은 칸 가운데에 적당한 크기로 */
.post-item .pthumb > .ff-emoji { width: 100%; height: 100%; display: grid; place-items: center; }
.post-item .pthumb .emo { width: 30px; height: 30px; object-fit: contain; }
.post-item .pthumb-badge {
position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff;
font-size: 0.6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
/* 댓글 칸 — 누르면 그 글의 댓글 자리로 바로 내려갑니다.
⚠️
라서 글자 밑줄과 색이 딸려 옵니다. 생김새는 그대로 두려고
여기서 되돌립니다. */
/* 댓글 수 — 붉은 [n]. 누르면 그 글의 댓글 자리로 내려갑니다. */
.post-item .pcomments {
margin-left: 5px; font-size: 0.8125rem; font-weight: 800;
color: #d0342c; text-decoration: none;
/* ⚠️ 안 넣으면 제목이 길 때 [2] 가 두 줄로 접힙니다 */
flex: 0 0 auto; white-space: nowrap;
}
/* ⚠️ 어두운 화면에서 진한 빨강은 잘 안 읽힙니다. 밝은 쪽으로 바꿔요. */
:root:not([data-theme="light"]) .post-item .pcomments { color: #ff7a6b; }
.post-item a.pcomments:hover { text-decoration: underline; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state .big { font-size: 3rem; margin-bottom: 12px; }
/* 글쓰기 사진 미리보기 */
.img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.imgp-item { position: relative; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; }
.imgp-item img { width: 100%; height: 100%; object-fit: cover; }
.imgp-item button {
position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 0.8125rem; line-height: 1; cursor: pointer;
}
/* 글 상세 읽기 화면 */
.modal-article { max-width: 720px; padding: 0; position: relative; }
.modal-x {
position: absolute; top: 14px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
border: none; background: var(--surface-2); color: var(--text); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.modal-x:hover { background: var(--chip-bg); color: var(--heading); }
.article { padding: 34px 36px 30px; }
.article-board {
display: inline-block; font-size: 0.75rem; font-weight: 800; color: var(--brand);
background: var(--chip-bg); padding: 4px 12px; border-radius: 999px;
}
.article-tag {
display: inline-block; margin-left: 6px; font-size: 0.75rem; font-weight: 800; color: var(--accent);
background: var(--surface-2); padding: 4px 12px; border-radius: 999px;
}
.article-title { font-size: clamp(1.375rem, 3.2vw, 1.875rem); color: var(--heading); line-height: 1.3; margin: 14px 0 16px; }
.article-byline { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.article-avatar {
width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
font-size: 1.375rem; background: var(--chip-bg); flex-shrink: 0;
}
.article-author { font-size: 0.9375rem; font-weight: 700; color: var(--heading); }
.article-sub { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }
.detail-imgs { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.detail-imgs .detail-img { width: 100%; border-radius: 14px; }
.detail-text { font-size: 1rem; color: var(--text); line-height: 1.85; white-space: pre-wrap; word-break: break-word; margin-top: 20px; }
/* 어드민 바 / 삭제 버튼 */
.admin-bar {
margin: 14px 0; padding: 10px 14px; border-radius: 10px; font-size: 0.8125rem; font-weight: 700;
background: var(--surface-2); color: var(--text); display: flex; align-items: center; gap: 10px;
}
/* 연한 빨강(#e05a5a)은 어느 바탕에서도 대비가 4.5 를 넘지 못했어요.
테마별로 잘 읽히는 진하기로 나눕니다. */
.admin-bar button {
border: 1px solid currentColor; background: none; color: #b3342f; font-weight: 700;
padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 0.8125rem;
}
:root[data-theme="dark"] .admin-bar button,
:root[data-theme="unit02"] .admin-bar button { color: #ff9b8a; }
.admin-bar button:hover { background: #b3342f; color: #fff; border-color: #b3342f; }
:root[data-theme="dark"] .admin-bar button:hover,
:root[data-theme="unit02"] .admin-bar button:hover { background: #a32617; color: #fff; border-color: #a32617; }
.cmt-del { background: none; border: none; cursor: pointer; font-size: 0.75rem; opacity: .5; padding: 0 2px; }
.cmt-del:hover { opacity: 1; }
/* 댓글 */
.cmt-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.cmt-title { font-size: 1rem; color: var(--heading); margin-bottom: 16px; }
.cmt-title span { color: var(--brand); }
.cmt-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.cmt { display: flex; gap: 11px; }
.cmt-avatar {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
font-size: 1.0625rem; background: var(--chip-bg); flex-shrink: 0;
}
.cmt-body { flex: 1; min-width: 0; }
/* 칭호를 여러 개 가진 분도 있어서 줄바꿈을 허용합니다
(안 그러면 뱃지가 옆으로 삐져나가요) */
.cmt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmt-head strong { font-size: 0.875rem; color: var(--heading); }
/* ⚠️ 이 규칙은 '몇 시간 전' 같은 옆글씨용입니다.
그냥 span 으로 잡으면 그 안의 뱃지(관리자·개척자 …)까지 회색으로
덮어써서 글씨가 안 보였어요. 뱃지는 자기 색을 쓰게 빼 둡니다.
(뱃지 규칙보다 이 규칙의 우선순위가 높아서 이겼습니다) */
.cmt-head span:not(.role-badge):not(.title-badge):not(.level-badge):not(.cmt-op) {
font-size: 0.75rem; color: var(--text-muted);
}
.cmt-text { font-size: 0.875rem; color: var(--text); line-height: 1.6; margin-top: 3px; word-break: break-word;
/* ⚠️ 댓글칸이 textarea 로 바뀌면서 줄바꿈을 칠 수 있게 됐습니다.
그런데 HTML 은 줄바꿈을 그냥 띄어쓰기로 바꿔 버려서,
줄을 나눠 쓴 댓글이 한 줄로 뭉개졌어요.
pre-wrap 은 줄바꿈은 살리고 긴 줄은 그대로 접어줍니다. */
white-space: pre-wrap;
}
.cmt-empty { font-size: 0.875rem; color: var(--text-muted); padding: 8px 0 16px; }
.cmt-reply-btn {
background: none; border: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
cursor: pointer; margin-top: 6px; padding: 2px 0;
}
.cmt-reply-btn:hover { color: var(--brand); }
/* 대댓글(답글): 부모 아래 들여쓰기 */
.cmt-reply { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.cmt-reply .cmt-avatar { width: 28px; height: 28px; font-size: 0.875rem; }
.cmt-reply-form { margin-top: 10px; }
.cmt-form { display: flex; flex-direction: column; gap: 8px; }
.cmt-form input {
width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
font-family: inherit; font-size: 0.875rem; background: var(--surface); color: var(--text);
}
.cmt-form input:focus { outline: none; border-color: var(--brand); }
.cmt-input-row { display: flex; gap: 8px; }
.cmt-input-row input { flex: 1; }
/* ↕️ 댓글·답글 칸 — 글에 따라 커집니다 (높이는 JS 가 맞춥니다).
한 줄짜리 칸이면 사육 상담처럼 긴 글을 쓸 때
앞에 쓴 말이 안 보여서 답답해집니다. */
.cmt-input-row textarea, .cmt-area {
flex: 1; width: 100%; padding: 10px 13px;
border: 1px solid var(--line); border-radius: 10px;
font-family: inherit; font-size: 0.875rem; line-height: 1.55;
background: var(--surface); color: var(--text);
resize: none; /* 높이는 자동이라 손잡이가 헷갈려요 */
overflow-y: hidden; /* JS 가 필요할 때만 auto 로 바꿉니다 */
min-height: 0; /* .field textarea 의 min-height:130px 을 막습니다 */
}
.cmt-input-row textarea:focus, .cmt-area:focus { outline: none; border-color: var(--brand); }
/* 등록 단추는 칸이 커져도 아래에 붙어 있어야 합니다.
가운데 정렬이면 글이 길어질수록 단추가 떠다니게 보여요. */
.cmt-input-row { align-items: flex-end; }
.cmt-input-row .btn { flex-shrink: 0; }
.cmt-as { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 8px; }
.cmt-as b { color: var(--brand); }
/* 글 상세 전용 페이지 */
/* 글·글쓰기·안내처럼 '읽는 화면' 의 가로폭.
760px 은 넓은 화면에서 양옆이 너무 휑했어요 (글자 한 줄에 36자 정도).
900px 으로 넓혀 한 줄에 45자쯤 들어가게 했습니다.
⚠️ 더 넓히지는 않았어요. 한 줄이 길어지면 눈이 다음 줄 첫 글자를
찾기 어려워져서, 넓은 게 꼭 읽기 좋은 건 아닙니다.
(사이트 전체 폭은 --maxw 1160px 이라 그보다 넓힐 수도 없어요) */
.container-narrow { max-width: 900px; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.write-as { font-size: 0.8125rem; color: var(--text-muted); margin: -2px 0 16px; }
.write-as b { color: var(--brand); }
/* 본문(상세 보기) — 문단/사진 블록 */
.detail-content { margin-top: 20px; }
.detail-content .detail-img { width: 100%; border-radius: 14px; display: block; margin: 8px 0 18px; }
.detail-para { font-size: 1rem; color: var(--text); line-height: 1.85; white-space: pre-wrap; word-break: break-word; margin: 0 0 16px; }
.detail-para:empty { display: none; }
/* ---------- 글쓰기 에디터 (네이버 카페 스타일) ---------- */
.write-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 26px 28px 24px; }
.write-row { display: flex; gap: 12px; }
.write-row .field { flex: 1; }
.write-title {
width: 100%; border: none; border-bottom: 2px solid var(--line); background: none;
font-family: inherit; font-size: 1.375rem; font-weight: 800; color: var(--heading); padding: 10px 2px; margin-top: 4px;
}
.write-title:focus { outline: none; border-bottom-color: var(--brand); }
.write-title::placeholder { color: var(--text-muted); font-weight: 700; }
/* 삽입 툴바 (아이콘 + 라벨) */
.ed-toolbar {
display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; padding: 8px 4px;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ed-tool {
display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px;
padding: 6px 8px; border: none; background: none; border-radius: 8px; cursor: pointer;
font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.ed-tool:hover { background: var(--chip-bg); color: var(--heading); }
.ed-tool .ed-ico { font-size: 1.1875rem; color: var(--brand); }
/* 서식 툴바 */
.ed-format { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ed-format select {
height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
font-family: inherit; font-size: 0.8125rem; padding: 0 8px;
}
.ed-fmt {
min-width: 32px; height: 32px; padding: 0 8px; border: none; background: none; border-radius: 7px; cursor: pointer;
font-size: 0.9375rem; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.ed-fmt:hover { background: var(--chip-bg); color: var(--heading); }
.ed-color { position: relative; overflow: hidden; }
.ed-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
/* ---------- 📑 제목 고르는 칸 ---------- */
.ed-block {
height: 28px; padding: 0 6px; border-radius: 8px;
border: 1px solid var(--line); background: var(--surface); color: var(--text);
font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}
/* ---------- 본문 안의 제목 · 목록 ----------
글쓰기 화면과 글을 읽는 화면이 똑같이 보이도록 함께 지정합니다.
(한쪽만 정해두면 "쓸 때랑 다르게 보인다" 는 말이 나와요) */
.editor-body h2, .detail-content h2 { font-size: 1.5em; font-weight: 800; color: var(--heading); margin: 1.1em 0 .45em; line-height: 1.35; }
.editor-body h3, .detail-content h3 { font-size: 1.28em; font-weight: 800; color: var(--heading); margin: 1em 0 .4em; line-height: 1.4; }
.editor-body h4, .detail-content h4 { font-size: 1.12em; font-weight: 800; color: var(--heading); margin: .9em 0 .35em; line-height: 1.45; }
/* 글 맨 앞의 제목은 위 여백을 줄여요 */
.editor-body > h2:first-child, .detail-content > h2:first-child,
.editor-body > h3:first-child, .detail-content > h3:first-child { margin-top: .2em; }
.editor-body ul, .detail-content ul,
.editor-body ol, .detail-content ol { margin: .6em 0 .8em; padding-left: 1.6em; }
.editor-body ul, .detail-content ul { list-style: disc; }
.editor-body ol, .detail-content ol { list-style: decimal; }
.editor-body li, .detail-content li { margin: .28em 0; line-height: 1.75; }
/* 목록 안의 목록은 한 단계 더 들여쓰고 모양도 바꿔요 */
.editor-body ul ul, .detail-content ul ul { list-style: circle; margin: .25em 0; }
.editor-body ol ol, .detail-content ol ol { list-style: lower-alpha; margin: .25em 0; }
/* ---------- 🎨 글자색 · 형광펜 · 글자 크기 ---------- */
/* 읽어주는 프로그램에만 들리고 화면에는 안 보이는 글자 */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 크기 조절 — [−] [16] px [+] */
.ed-size {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px 4px; border: 1px solid var(--line); border-radius: 8px;
}
.ed-size input[type="number"] {
width: 44px; padding: 3px 2px; text-align: center;
border: 0; background: transparent; color: var(--text);
font-size: 0.875rem; font-weight: 700;
-moz-appearance: textfield; /* 파이어폭스의 위아래 화살표 숨김 */
}
.ed-size input[type="number"]::-webkit-outer-spin-button,
.ed-size input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-size-unit { font-size: 0.71875rem; color: var(--text-muted); }
.ed-size-btn {
width: 22px; height: 22px; line-height: 1;
border: 0; border-radius: 6px; background: var(--chip-bg); color: var(--heading);
font-size: 0.9375rem; font-weight: 800; cursor: pointer;
}
.ed-size-btn:hover { background: var(--brand); color: var(--on-brand); }
/* 색 버튼 (가 / 형광펜 가) */
.ed-pal-btn { min-width: 30px; }
.ed-pal-ink { font-weight: 800; color: #b3342f; border-bottom: 3px solid currentColor; line-height: 1.1; }
/* 어두운 바탕에서는 밝은 쪽으로 (이 글자는 '지금 색' 을 보여주는 견본이라 눈에 띄어야 해요) */
:root[data-theme="dark"] .ed-pal-ink,
:root[data-theme="unit02"] .ed-pal-ink { color: #ff9b8a; }
.ed-pal-hl { font-weight: 800; background: #fff3a3; color: #111; padding: 0 3px; border-radius: 3px; }
/* 색 고르는 판 */
.ed-palette {
padding: 10px 12px; border-bottom: 1px solid var(--line);
background: var(--surface);
}
.ed-pal-head { font-size: 0.8125rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.ed-sw-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-sw {
width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
border: 1px solid rgba(0, 0, 0, .18);
}
.ed-sw:hover { transform: scale(1.12); }
.ed-sw-none {
background: var(--bg); color: var(--text-muted);
font-size: 0.8125rem; font-weight: 800; line-height: 1;
}
.ed-pal-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 10px;
}
.ed-pal-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.ed-pal-custom input[type="color"] {
width: 30px; height: 24px; padding: 0; border: 1px solid var(--line);
border-radius: 6px; background: none; cursor: pointer;
}
@media (max-width: 640px) {
.ed-size input[type="number"] { width: 38px; }
.ed-sw { width: 30px; height: 30px; } /* 손가락으로 누르기 좋게 */
}
/* 본문 (contenteditable) */
.editor-body {
min-height: 320px; padding: 18px 6px; font-size: 1rem; line-height: 1.85; color: var(--text);
outline: none; word-break: break-word;
}
.editor-body.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
/* 📷 본문 사진 크기 — 정보글·커뮤니티·업체소식 전부 같은 규칙입니다.
글은 읽으라고 있는 것이라, 사진이 글보다 커 보이면 안 됩니다.
그래서 두 가지를 함께 겁니다.
· 가로 520px 까지 — 본문 칸(646px)을 꽉 채우지 않게
· 세로는 화면의 55% 까지 — 세로로 긴 사진이 화면을 덮지 않게
둘 중 먼저 걸리는 쪽에 맞춰 줄어들고, 비율은 그대로예요.
원본이 이보다 작으면 억지로 키우지 않습니다. */
.editor-body img:not(.emo) { max-width: min(100%, 620px); max-height: 55vh; width: auto; height: auto;
border-radius: 12px; margin: 8px 0; display: block; }
.editor-body blockquote {
margin: 10px 0; padding: 8px 16px; border-left: 4px solid var(--brand-soft);
color: var(--text-muted); background: var(--surface-2); border-radius: 0 8px 8px 0;
}
.editor-body hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.editor-body a { color: var(--brand); text-decoration: underline; }
.write-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }
/* ---------- ✏️ 임시저장 ---------- */
/* 저장 상태 — 조용히 알려주고, 버튼들 왼쪽에 붙습니다 */
.draft-state { margin-right: auto; font-size: 0.8125rem; color: var(--text-muted); }
.draft-state.ok { color: var(--brand); }
.draft-state.warn { color: #c0392b; }
:root[data-theme="dark"] .draft-state.warn,
:root[data-theme="unit02"] .draft-state.warn { color: #ff9b8a; }
/* '쓰다 만 글이 있어요' 안내 */
.draft-resume {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
margin-bottom: 14px; padding: 12px 14px;
border: 1px solid var(--line); border-left: 4px solid var(--brand);
border-radius: 12px; background: var(--surface);
}
.draft-resume .dr-msg { flex: 1 1 240px; font-size: 0.875rem; color: var(--text); }
.draft-resume .dr-prev { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--text-muted); }
.draft-resume .dr-btns { display: flex; gap: 8px; }
@media (max-width: 640px) {
.write-actions { flex-wrap: wrap; }
.draft-state { flex: 1 1 100%; margin: 0 0 6px; }
}
/* 상세 본문에서도 인용구/구분선/링크 예쁘게 */
.detail-content blockquote {
margin: 14px 0; padding: 10px 18px; border-left: 4px solid var(--brand-soft);
color: var(--text-muted); background: var(--surface-2); border-radius: 0 8px 8px 0;
}
.detail-content hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.detail-content img:not(.emo) { max-width: min(100%, 620px); max-height: 55vh; width: auto; height: auto;
border-radius: 14px; margin: 10px 0; display: block; }
.detail-content a { color: var(--brand); text-decoration: underline; }
@media (max-width: 640px) {
.write-card { padding: 20px 16px; }
.write-row { flex-direction: column; gap: 0; }
.article { padding: 30px 20px 24px; }
}
/* ---------- 🐾 어느 동물의 글인지 (허브의 '전체' 목록에서만) ----------
여러 분류가 섞여 나오는 곳에서 "이건 파충류 글이구나" 를
한눈에 알 수 있게 제목 앞에 작게 붙입니다.
⚠️ 제목보다 눈에 띄면 안 됩니다. 주인공은 제목이에요. */
.pgroup {
display: inline-flex; align-items: center; gap: 4px;
margin-right: 6px; padding: 2px 8px;
border: 1px solid var(--line); border-radius: 999px;
background: var(--surface);
font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
vertical-align: middle; white-space: nowrap;
}
.pgroup .emo { width: 1.05em; height: 1.05em; }
/* 글 전체를 덮는 투명 링크(.pi-link) 아래에 두어, 눌러도 글로 들어가게 */
.post-item .pgroup { position: relative; z-index: 0; }
@media (max-width: 560px) {
/* 좁은 화면에선 이름을 접고 아이콘만 — 제목 자리를 뺏지 않게 */
.pgroup { padding: 2px 6px; margin-right: 5px; }
.pgroup > span { display: none; }
}
/* ✏️ 댓글을 그 자리에서 고치기 */
.cmt-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.cmt-edit-btns { display: flex; gap: 6px; }