/* =============================================================================
 * 게시글 화면 — 2026-10-08 고객 시안 「달쉼장터 개편안」의 「개선안 · 게시글」
 *
 * 싣는 화면(functions.php): 게시글 목록(/log/) · 글쓰기(/write/).
 *   1. 목록 줄 두 줄 — 1줄 「LOG 제목」, 2줄 「작성자 · 날짜 · 조회 N · 댓글 N」, 표 머리글 없음
 *   2. 정렬 탭 「최신순 / 조회수 / 좋아요」 둥근 알약 + 줄 오른쪽 끝 「＋ 글쓰기」
 *   3. 목록 아래 「사고팔기는 달쉼장터에서」 배너(→ /market/)
 *   4. 글쓰기 제목 칸 아래 「달쉼장터에 올리면 더 잘 보여요 → 물건 올리기」 안내
 * 근거와 결정의 경위는 index.php 머리말의 ━━━ 2026-10-08 문단.
 *
 * ★ 목록 규칙은 전부 #screen-log 스코프다. 줄 파트(parts/board-row.php)를 홈 「지금 인기」·「최신 글」과
 *   마이 차고도 쓰는데, 그 화면들은 표 모양 그대로여야 한다. 두 줄 모양은 .row.r2 에만 걸린다.
 * ★ 색은 tokens.css 변수만. 다크모드는 tokens.css 가 값을 바꿔 준다. 강한 테두리(2.5px --ink)는
 *   시안 다크 메모대로 「핵심 목록(게시글)」에 그대로 둔다(dalshim.css 의 #screen-log .board).
 * ★ dalshim.css 가 아니라 이 파일인 이유: 같은 시기에 다른 작업이 dalshim.css 를 크게 고치고 있다.
 *
 * 새 이름 충돌 점검: .r2, .r2-top, .r2-sub, .r2-au, .r2-dt, .r2-vw, .r2-cm, .log-market-banner, .lmb-ico,
 * .lmb-txt, .lmb-go, .write-market-tip — 이 레포(css·php·js)에 없던 이름이다(grep 0건).
 * ============================================================================= */

/* ── 1. 두 줄 목록 ─────────────────────────────────────────────────────── */
#screen-log .board .row.r2{flex-direction:column; align-items:stretch; gap:4px; padding:12px 4px}
#screen-log .board .row.r2 .r2-top{display:flex; align-items:center; gap:8px; min-width:0}
#screen-log .board .row.r2 .ttl{font-size:15px; font-weight:700}
#screen-log .board .row.r2 .r2-sub{
  display:flex; flex-wrap:wrap; align-items:center; min-width:0;
  font-size:12.5px; color:var(--muted);
}
/* 가운뎃점은 글자로 넣지 않고 사이에만 그린다 — 날짜가 없는 줄에서 점이 겹치지 않는다. */
#screen-log .board .row.r2 .r2-sub > * + *::before{content:"·"; margin:0 6px; color:var(--muted)}
/* 작성자는 넘치면 말줄임 — 긴 별명이 둘째 줄을 통째로 밀어 숫자가 다음 줄로 떨어지지 않게. */
#screen-log .board .row.r2 .r2-au{max-width:12em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
/* 숫자(날짜·조회·댓글)만 모노 — 자릿수가 세로로 맞는다. 한글 「조회」·「댓글」은 tokens.css 의 --mono 스택이
 * 한글 글꼴로 받아 준다(2026-09-21 글꼴 스택 주석). */
#screen-log .board .row.r2 .r2-dt,
#screen-log .board .row.r2 .r2-vw,
#screen-log .board .row.r2 .r2-cm{font-family:var(--mono); font-size:12px}

/* ── 2. 둥근 정렬 탭 + 「＋ 글쓰기」 ──────────────────────────────────────
 * 사이트 공용 .tabs 의 링크 계약(a + role=tab + aria-selected)은 그대로 쓰고 모양만 바꾼다. */
#screen-log .log-tabs{gap:6px}
#screen-log .log-tabs a[role="tab"]{
  border-radius:999px; padding:6px 14px;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0;
  border:1.5px solid var(--card-line); background:var(--card); color:var(--ink);
}
#screen-log .log-tabs a[role="tab"][aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
@media(hover:hover){#screen-log .log-tabs a[role="tab"]:hover{border-color:var(--action)}}
/* 좁은 화면에서도 시안처럼 탭 셋과 버튼을 한 줄에 둔다. dalshim.css 의 560px 규칙은 탭이 넷(사진만 포함)이라
 * 버튼을 줄바꿈해 폭을 채웠는데, 탭이 셋으로 줄어 한 줄에 들어간다. 그래도 안 들어가는 폭이면 flex-wrap 으로 내려간다. */
@media(max-width:560px){
  #screen-log .log-tabs .log-write{width:auto; margin-left:auto}
}

/* ── 3. 「사고팔기는 달쉼장터에서」 배너 ──────────────────────────────────── */
#screen-log .log-market-banner{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 0; padding:14px 16px; border-radius:10px;
  background:var(--notice-row); color:var(--ink); text-decoration:none;
  transition:background .15s;
}
@media(hover:hover){#screen-log .log-market-banner:hover{background:var(--notice-row-hover)}}
#screen-log .lmb-ico{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--action);
}
#screen-log .lmb-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
#screen-log .lmb-txt b{font-size:15px; font-weight:800}
#screen-log .lmb-txt span{font-size:12.5px; color:var(--muted)}
#screen-log .lmb-go{flex:none; font-size:20px; color:var(--muted)}

/* ── 4. 글쓰기 안내 줄 ────────────────────────────────────────────────────
 * 제목 칸·안내(.ctitle-hint)와 같은 왼쪽 선(13px)에 맞춘다 — 어느 칸에 붙은 말인지 보이게. */
.composer .write-market-tip{
  margin:6px 13px 0; padding:8px 12px; border-radius:6px;
  background:var(--notice-row); font-size:12.5px; color:var(--ink);
}
.composer .write-market-tip a{font-weight:800; color:var(--action); text-decoration:none}
@media(hover:hover){.composer .write-market-tip a:hover{text-decoration:underline}}