/**
 * 기사 상단 메타 줄 — 날짜 · 작성자 · 글수정을 한 줄로 (2026-10-15)
 *
 * 문제: tagdiv 가 만든 3단 그리드(`td-pb-span4` × 3)라 모바일에서 각 칸이 100% 너비가 되며
 *       날짜 / BY 작성자 / 글 수정 이 **세 줄로 쌓였다**.
 *
 * 해법: 그 행만 flex 로 바꿔 한 줄에 둔다. 좁으면 줄바꿈은 허용하되(넘침 방지)
 *       기본값은 한 줄이다.
 *
 * 선택자: 템플릿에 직접 붙인 `.post-meta-row` 를 쓴다.
 *   tagdiv 의 `tdi_50` 은 생성 일련번호라 블록을 다시 저장하면 바뀔 수 있다.
 *
 * 작성 규칙: 모바일 우선 — `min-width` 쿼리만 쓴다 (`max-width` 0개).
 * enqueue: includes/theme/single-meta.php 가 is_singular('post') 한정으로 싣는다.
 *
 * ⚠ 케이팝포스트 `kpop-clear` 에 같은 파일을 개별 이식한다 (@.claude/rules/ai-safety.md 6번).
 *   인트라매거진은 기사 레이아웃이 달라(`intra-article-meta-bar`) 해당 없음.
 */

/* tagdiv 는 이 행을 이미 flex 로 만들지만 모바일 미디어쿼리에서
   `.tdi_50{flex-direction:column}` 으로 세워 버린다 — 그래서 세 줄로 쌓였다.
   방향을 되돌리는 것이 이 파일의 핵심이다. */
.post-meta-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 16px;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* 칸(날짜·작성자·글수정)과 그 안의 tagdiv 래퍼들을 **전부 같은 축으로** 세운다.
 *
 * 2026-10-15 2차 수정 — 이 부분이 핵심이다.
 * 1차에서는 바깥 행만 flex 로 만들고 안쪽 래퍼(.vc_column-inner > .wpb_wrapper >
 * .td_block_wrap > .tdb-block-inner)는 블록인 채로 뒀다. 그러면 칸마다 안쪽
 * 높이가 달라 **글자 밑줄이 제각각**으로 보인다.
 * 중간 래퍼까지 flex + align-items:center 로 맞춰야 수평이 선다.
 *
 * `> div` 로 잡는 이유: 자식 클래스 조합이 사이트·블록마다 달라질 수 있다.
 */
.post-meta-row > div {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
}

/* 날짜는 왼쪽 끝, 나머지(작성자·글수정)는 오른쪽 끝에 붙인다.
   첫 칸에 auto 여백을 줘서 뒤따르는 칸들을 전부 오른쪽으로 민다 —
   항목이 2개(비로그인: 날짜·작성자)든 3개(관리자: +글수정)든 같은 규칙으로 동작한다. */
.post-meta-row > div:first-child {
    margin-right: auto !important;
}

/* 테두리·그림자 전부 제거 — tagdiv 가 .td-pb-border-top 등으로 칸마다 선을 넣는다 */
.post-meta-row,
.post-meta-row *,
.post-meta-row *::before,
.post-meta-row *::after {
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.post-meta-row .vc_column-inner,
.post-meta-row .wpb_wrapper,
.post-meta-row .td_block_wrap,
.post-meta-row .tdb-block-inner,
.post-meta-row .tdb-author-name-wrap {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* 오른쪽 묶음(작성자·글수정)은 서로 붙되 사이 한 칸만 둔다 */
.post-meta-row > div:first-child ~ div + div {
    margin-left: 16px !important;
}

/* 글자 크기·색은 테마 값을 그대로 쓰되 줄높이만 맞춘다.
   줄높이가 칸마다 다르면 위 flex 정렬로도 베이스라인이 어긋나 보인다. */
.post-meta-row .entry-date,
.post-meta-row .tdb-author-by,
.post-meta-row .tdb-author-name,
.post-meta-row .tdb-author-name-wrap {
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

/* 「BY」 와 이름 사이 한 칸 */
.post-meta-row .tdb-author-by {
    margin-right: 5px !important;
}

/*
 * 항목 구분은 **gap 만** 쓴다.
 *
 * 1차에서는 `> div + div::before { content:"·" }` 로 가운뎃점을 넣었는데,
 * 그 의사요소가 flex 아이템(블록 컨테이너) 안의 **첫 줄**로 떨어져 내용을 한 줄
 * 아래로 밀었다. 그래서 점은 위에 떠 있고 칸마다 높이가 달라졌다.
 * 구분선이 꼭 필요하면 border-left 로 넣어야지 ::before 로는 넣지 않는다.
 */

/* 아주 좁은 화면에서 제목이 길어도 메타가 가로로 넘치지 않게 */
.post-meta-row,
.post-meta-row * {
    min-width: 0;
}

/* ===== 480px 이상: 간격을 조금 넓힌다 ===== */
@media (min-width: 480px) {
    .post-meta-row {
        gap: 0 20px;
    }
}

/* ============================================================
 * 본문 이미지 중앙정렬 (2026-10-15)
 *
 * 문제: 에디터에서 정렬을 지정하지 않은 이미지는 `alignnone` 으로 들어온다.
 *       워드프레스 기본값이 왼쪽 정렬이라, 본문 폭(약 700~800px)보다 좁은
 *       이미지(예: 500px)가 왼쪽에 치우쳐 붙는다.
 *
 * 조치: 본문 안의 이미지 블록을 가운데로 보낸다.
 *   - `figure.wp-caption`(클래식 에디터 캡션) · `figure.wp-block-image`(블록 에디터)
 *   - 캡션 없는 맨 `img` 도 블록으로 만들어 가운데로
 *   - 캡션 글자도 가운데
 *
 * `alignleft`/`alignright`(= 글이 옆으로 흐르는 의도적 배치)는 건드리지 않는다.
 *
 * ⚠ 3사 공통 규칙이다. 인트라매거진은 같은 내용이
 *    custom-parts/css/article-enhancements.css 에 들어 있다 (이 사이트에는 그 파일이 없다).
 *    한쪽을 고치면 나머지도 본다 — @.claude/rules/ai-safety.md 6번.
 * ============================================================ */

.td-post-content figure.wp-caption:not(.alignleft):not(.alignright),
.td-post-content figure.wp-block-image:not(.alignleft):not(.alignright),
.td-post-content .wp-caption.alignnone,
.tdb-block-inner figure.wp-caption:not(.alignleft):not(.alignright),
.tdb-block-inner figure.wp-block-image:not(.alignleft):not(.alignright) {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    max-width: 100%;
}

.td-post-content figure.wp-caption img,
.td-post-content figure.wp-block-image img,
.tdb-block-inner figure.wp-caption img,
.tdb-block-inner figure.wp-block-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

/* 캡션 없는 맨 이미지(= p 안의 img.alignnone) */
.td-post-content img.alignnone,
.tdb-block-inner img.alignnone {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

.td-post-content .wp-caption-text,
.td-post-content figcaption,
.tdb-block-inner .wp-caption-text,
.tdb-block-inner figcaption {
    text-align: center;
}