/*
Theme Name: Merry Blog
Theme URI: https://blog.merryps.com
Description: 메리성형외과 커뮤니티 블로그 테마. 렌더 시점에 www.merryps.com 의 실제 헤더/GNB/우측 퀵메뉴/푸터를 가져와 감싸고(라이브 크롬 인클루드) 가운데만 블로그 글로 채운다 — merryps 메뉴가 바뀌어도 자동 동기화. 이 style.css 는 콘텐츠 영역(글 목록·본문)만 담당하며, 크롬 색/폰트/레이아웃은 원본 CSS(common/sub/board/font)에서 그대로 온다.
Author: Daboja
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: merryps-blog
*/

/* ============================================================
   라이브 크롬 조정
   찾아오시는길/지도 섹션(#c_guide)은 카카오맵 appkey 가 merryps.com 호스트에 도메인 제한돼
   blog 서브도메인·로컬에선 지도가 안 뜨고 AOS 로 텍스트가 겹쳐 깨진다. 주소·전화는 하단 #footer 에
   이미 있으므로 블로그에선 숨긴다. (blog.merryps.com 에 kakao appkey 등록하면 이 규칙만 제거해 재노출)
   ============================================================ */
#c_guide { display: none !important; }

/* 로그인/회원가입: 블로그는 별도 시스템(워드프레스)이라 merryps 로그인이 블로그에선 동작하지 않는다.
   혼란 방지를 위해 크롬의 로그인·회원가입 UI 를 숨긴다(데스크톱 GNB · 모바일 헤더/푸터/사이드메뉴).
   → 진짜 공유 로그인이 필요해지면 이 규칙 제거 + 백엔드 브릿지(쿠키/검증API/CORS) 연동. */
.member_wrap { display: none !important; }

/* ============================================================
   콘텐츠 폭 (사이트 본문 폭 1288px 에 맞춤)
   변수(--color-key 등)는 원본 common.css 에서 오며, 폴백값을 함께 둔다.
   ============================================================ */
#board_container {
    max-width: 1288px;
    margin: 0 auto;
    padding: 0 20px 120px;
}

/* ============================================================
   카테고리 필터 (merryps 메리 TV nav_container 이식 + hover 로 활성)
   ============================================================ */
#board .nav_container .nav { padding: 20px 0 60px; display: flex; flex-wrap: wrap; justify-content: center; }
#board .nav_container .nav .btn { position: relative; padding: 10px 26px; cursor: pointer; text-decoration: none; }
#board .nav_container .nav .btn:before { content: ''; top: 20%; left: 0; position: absolute; width: 1px; height: 60%; background: rgba(0,0,0,.2); }
#board .nav_container .nav .btn:last-child:after { content: ''; top: 20%; right: 0; position: absolute; width: 1px; height: 60%; background: rgba(0,0,0,.2); }
#board .nav_container .nav .btn .title {
    text-align: center;
    font-family: var(--font-sp1, 'Nanum Gothic', sans-serif);
    font-size: var(--font-size-title-pc, 17px);
    color: var(--color-dark, #333);
    transition: color .25s ease-out;
    margin: 0;
}
#board .nav_container .nav .btn:hover .title,
#board .nav_container .nav .btn.active .title { color: var(--color-key, #103623); font-weight: 700; }

/* ============================================================
   글 목록 박스 (merryps 비디오 카드 그리드 이식)
   ============================================================ */
#board .box_container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 50px; }
#board .box { width: calc((100% - 100px) / 3); border-radius: 6px; overflow: hidden; position: relative; text-decoration: none; display: block; }

#board .box .photo_wrap { width: 100%; margin: 0 auto; background: #fff; position: relative; }
#board .box .photo_wrap .photo {
    width: 100%; height: 0; padding-bottom: calc(360 / 640 * 100%);
    background: #000; overflow: hidden; position: relative;
}
#board .box .photo_wrap .photo > img,
#board .box .photo_wrap .photo > .ph {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .4s ease-out;
}
#board .box:hover .photo_wrap .photo > img { transform: scale(1.04); }

/* 썸네일 없을 때 그린 플레이스홀더 (실제 사진 미사용) */
#board .box .photo_wrap .photo > .ph {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-key, #103623) 0%, #2a7852 100%);
}
#board .box .photo_wrap .photo > .ph > span {
    font-family: var(--font-sp1, 'Nanum Myeongjo', serif);
    font-size: 46px; font-weight: 800; color: rgba(255,255,255,.85);
}

#board .box .txt_wrap { position: relative; padding: 24px 26px 20px; text-align: center; }
#board .box .txt_wrap .cat {
    margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #2a7852;
}
#board .box .txt_wrap .title {
    margin: 0; font-family: var(--font-default, 'Nanum Gothic', sans-serif);
    font-size: var(--font-size-list-pc, 18px); line-height: 1.4; color: var(--color-dark, #333);
    transition: color .25s ease-out;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#board .box .txt_wrap .date { margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 1px; color: #aaa; }

#board .box .objborder {
    top: 0; left: 0; position: absolute; width: 100%; height: 100%;
    background: transparent; border: 1px solid var(--color-key, #103623);
    border-radius: 6px; opacity: 0; transition: opacity .25s ease-out; pointer-events: none;
}
#board .box:hover .txt_wrap .title { color: var(--color-key, #103623); }
#board .box:hover .objborder { opacity: 1; }

.merryps-empty { text-align: center; color: #666; padding: 40px 0 80px; }

/* ============================================================
   페이지네이션
   ============================================================ */
#board .navigation.pagination { margin-top: 30px; text-align: center; }
#board .navigation .nav-links { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#board .navigation .page-numbers {
    min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e6e8e7; border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: #666; text-decoration: none;
}
#board .navigation .page-numbers:hover { border-color: #2a7852; color: var(--color-key, #103623); }
#board .navigation .page-numbers.current { background: var(--color-key, #103623); border-color: var(--color-key, #103623); color: #fff; }

/* ============================================================
   단일 글 / 페이지
   ============================================================ */
.merryps-single { max-width: 820px; margin: 0 auto; }
.single-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.single-meta .cat {
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; background: var(--color-key, #103623); padding: 5px 14px; border-radius: 999px; text-decoration: none;
}
.single-meta time { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: 1px; color: #aaa; }
.single-thumb { margin: 0 0 30px; border-radius: 6px; overflow: hidden; }

.single-content { font-family: var(--font-default, 'Nanum Gothic', sans-serif); font-size: 16px; line-height: 1.9; color: #2b2b2b; }
.single-content p { margin: 0 0 1.4em; }
.single-content h2 { font-family: var(--font-sp1, 'Nanum Myeongjo', serif); font-size: 24px; color: var(--color-key, #103623); margin: 1.6em 0 .6em; }
.single-content h3 { font-size: 20px; color: var(--color-key, #103623); margin: 1.4em 0 .5em; }
.single-content a { color: #2a7852; text-decoration: underline; }
.single-content img { border-radius: 6px; margin: 1em 0; }
.single-content blockquote { margin: 1.4em 0; padding: 12px 20px; border-left: 3px solid #7f9e8c; background: #f7f7f7; color: #666; }

/* ============================================================
   본문 표 (구텐베르크 core/table 블록)
   ------------------------------------------------------------
   ※ neulonclinic 에서 겪은 실패를 그대로 반영한 규칙이다. 수정 전에 읽을 것:
   ① 칸을 뭉개지 말고 표만 가로 스크롤시킨다. 폭을 억지로 맞추면 셀이 넘쳐
      옆 칸 글자 위에 겹쳐 그려진다(특히 text-align:right 면 왼쪽으로 흘러넘침).
   ② `white-space: nowrap` 을 공통 규칙에 절대 두지 말 것. 짧은 숫자 칸에서만
      안전하다. 서술형 한글 문장에 걸리면 그 즉시 셀이 터진다.
      열별 nowrap/정렬이 필요하면 그 글에만 클래스를 따로 부여한다.
   ③ min-width 는 `:where()` 로 감싸 특이도 0 으로 둔다. 그래야 아래 모바일
      카드 규칙의 `min-width: 0` 이 이길 수 있다. `:where()` 를 벗기면 카드가 안 펴진다.
   ============================================================ */

/* 블록 래퍼(<figure class="wp-block-table">)가 스크롤 컨테이너.
   본문이 아니라 표만 스크롤돼야 페이지 전체 가로 스크롤이 안 생긴다. */
.single-content .wp-block-table {
    margin: 1.6em 0 2.2em;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.single-content table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e6e8e7;
    font-size: 15px;
    line-height: 1.6;
}

/* 3열 이상이면 좁은 화면에서 칸이 뭉개진다 → 표를 넓게 두고 가로 스크롤에 맡긴다.
   :where() 로 특이도 0 (위 ③ 참고). */
.single-content table:where(:has(tr > *:nth-child(3))) {
    min-width: 480px;
}

.single-content th,
.single-content td {
    padding: 12px 14px;
    border: 1px solid #e6e8e7;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;      /* 한글은 어절 단위로 줄바꿈 */
    overflow-wrap: anywhere;   /* 긴 URL·숫자열만 강제 분리 */
}

.single-content thead th {
    background: var(--color-key, #103623);
    color: #fff;
    font-weight: 700;
    text-align: center;
    border-color: var(--color-key, #103623);
}

.single-content tbody tr:nth-child(even) td { background: #f7f9f8; }
.single-content tbody td:first-child { font-weight: 600; color: var(--color-dark, #333); }

.single-content .wp-block-table figcaption,
.single-content table caption {
    margin-top: 10px;
    font-size: 13px;
    color: #888;
    text-align: center;
    caption-side: bottom;
}

/* ── 모바일: 3열 이상 표는 가로 스크롤 대신 '행 = 카드' 로 재배치 ──
   가로 스크롤은 어포던스가 약해 표에 내용이 더 있다는 걸 놓치기 쉽다.
   항목명은 functions.php 의 render_block 필터가 심어둔 data-label 을 쓴다.
   (2열 표는 좁은 화면에서도 읽히므로 표 형태 유지)
   ⚠ 카드 모드는 thead 를 숨기므로 스크린리더 기준 표 의미구조가 사라진다.
      반응형 표의 통상적 맞교환으로 수용한다. */
@media (max-width: 600px) {
    .single-content table.merryps-table--stack {
        display: block;
        min-width: 0;
        border: 0;
        background: transparent;
        font-size: 14px;
    }
    .single-content .merryps-table--stack thead { display: none; }
    .single-content .merryps-table--stack tbody,
    .single-content .merryps-table--stack tr,
    .single-content .merryps-table--stack td { display: block; width: auto; }

    .single-content .merryps-table--stack tr {
        margin-bottom: 12px;
        border: 1px solid #e6e8e7;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }
    .single-content .merryps-table--stack tr:last-child { margin-bottom: 0; }

    .single-content .merryps-table--stack td { padding: 12px 14px; border: 0; }
    .single-content .merryps-table--stack td + td { border-top: 1px solid #e6e8e7; }

    /* 첫 칸은 카드 제목 — 라벨 없이 그 자체로 행을 대표한다. */
    .single-content .merryps-table--stack td:first-child {
        background: var(--color-key, #103623);
        color: #fff;
        font-weight: 700;
    }
    .single-content .merryps-table--stack td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        color: #2a7852;
    }
    /* 카드에서는 줄무늬가 카드 경계를 흐린다. */
    .single-content .merryps-table--stack tbody tr:nth-child(even) td { background: #fff; }
    .single-content .merryps-table--stack tbody tr:nth-child(even) td:first-child { background: var(--color-key, #103623); }
}

.single-tags { max-width: 820px; margin: 30px auto 0; }
.single-tags a { display: inline-block; font-size: 13px; color: #666; background: #f7f7f7; padding: 4px 12px; border-radius: 999px; margin: 0 6px 6px 0; text-decoration: none; }

.single-nav { max-width: 820px; margin: 46px auto 0; padding-top: 24px; border-top: 1px solid #e6e8e7; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.single-nav a { color: #666; text-decoration: none; }
.single-nav a:hover { color: var(--color-key, #103623); }
.single-nav .next { text-align: right; margin-left: auto; }

.single-back { text-align: center; margin: 40px 0 0; }
.single-back a {
    display: inline-block; padding: 12px 44px; border: 1px solid var(--color-key, #103623);
    border-radius: 999px; color: var(--color-key, #103623); font-weight: 700; text-decoration: none; transition: .2s;
}
.single-back a:hover { background: var(--color-key, #103623); color: #fff; }

.merryps-notfound { max-width: 820px; margin: 0 auto; text-align: center; padding: 20px 0; }

/* 검색 폼 */
.search-form { display: flex; gap: 8px; justify-content: center; margin: 24px 0; }
.search-form input[type="search"] { padding: 10px 16px; border: 1px solid #e6e8e7; border-radius: 4px; min-width: 260px; font-size: 15px; }
.search-form button { padding: 10px 22px; background: var(--color-key, #103623); color: #fff; border: 0; border-radius: 4px; cursor: pointer; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1024px) {
    #board .box { width: calc((100% - 50px) / 2); }
}
@media (max-width: 640px) {
    #board_container { padding-bottom: 60px; }
    #board .box_container { gap: 30px; }
    #board .box { width: 100%; }
    #board .nav_container .nav { padding-bottom: 30px; }
    #board .nav_container .nav .btn { padding: 8px 16px; }
    .single-content { font-size: 15px; }
}

/* ============================================================
   폴백(barebones) — 라이브·스냅샷 모두 실패 시 최소 크롬
   ============================================================ */
.merryps-barebones { font-family: 'Nanum Gothic', sans-serif; color: #333; }
.merryps-barebones .bb-topbar { background: #103623; color: #fff; padding: 10px 20px; font-size: 13px; }
.merryps-barebones .bb-topbar a { color: #fff; text-decoration: none; }
.merryps-barebones #contents { padding: 20px; }
.merryps-barebones .bb-footer { background: #103623; color: rgba(255,255,255,.8); padding: 40px 20px; text-align: center; font-size: 13px; margin-top: 60px; }
.merryps-barebones .bb-footer a { color: #fff; }