/* ============================================
   포트폴리오 그리드 최신글 스킨 - style.css
   v5 | 다중 게시판 + 반응형 + 여분필드
   ============================================ */

.pgrid-wrap {
    --cols: 4;
    --gap-x: 40px;
    --gap-y: 60px;
    --ratio: 72%;
    --f-title: 'PayboocFont', 'Noto Serif KR', Georgia, serif;
    --f-ui:    'PayboocFont', 'Noto Sans KR', sans-serif;
    --c-title: #222;
    --c-meta:  #333;
    --c-dash:  #1a1a1a;
    --c-info-bg:     #f7f7f5;
    --c-info-border: #e8e8e4;
    --c-info-label:  #888;
    --c-info-val:    #444;
    width: 100%;
    box-sizing: border-box;
}

/* ── 그리드 ── */
.pgrid-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap-y) var(--gap-x);
    margin: 0;
    padding: 0;
}

/* ── 카드 ── */
.pgrid-item {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: calc(var(--i, 0) * 60ms);
}
.pgrid-item.pgrid-on { opacity: 1; transform: translateY(0); }

.pgrid-item > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none !important;
    color: inherit;
}
.pgrid-item > a:hover { color: inherit; text-decoration: none !important; }

/* ── 썸네일 ── */
.pgrid-thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #e4e4e0;
    flex-shrink: 0;
}
.pgrid-thumb::before {
    content: '';
    display: block;
    padding-top: var(--ratio);
}
.pgrid-thumb img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
    display: block;
}
.pgrid-item > a:hover .pgrid-thumb img { transform: scale(1.05); }

.pgrid-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efefeb;
    color: #ccc;
}

/* 게시판명 뱃지 (이미지 위 좌상단) */
.pgrid-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 600;
    color: #004494;
    background: rgba(219, 234, 254, 0.92);
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: -0.3px;
    backdrop-filter: blur(2px);
    z-index: 1;
}

/* ── 제목 영역 ── */
.pgrid-body {
    padding-top: 18px;
    text-align: center;
}
.pgrid-title {
    font-family: var(--f-title);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--c-title);
    margin: 0 0 11px;
    line-height: 1.55;
    word-break: keep-all;
    transition: opacity .3s;
}
.pgrid-item > a:hover .pgrid-title { opacity: .5; }

.pgrid-dash {
    display: block;
    width: 22px; height: 1px;
    background: var(--c-dash);
    margin: 0 auto 10px;
    transition: width .35s ease;
}
.pgrid-item > a:hover .pgrid-dash { width: 42px; }

.pgrid-meta {
    font-family: var(--f-ui);
    font-size: 16px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--c-meta);
    margin: 0;
    line-height: 1.7;
}

/* ── 여분필드 ── */
.tree-info {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--c-info-bg);
    border: 1px solid var(--c-info-border);
    border-radius: 3px;
    font-family: var(--f-ui);
    font-size: 11.5px;
    line-height: 1.85;
    text-align: left;
    flex: 1;
}
.tree-info div {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
	row-gap: 0;
}
.ti-label {
    color: var(--c-info-label);
    flex-shrink: 0;
    min-width: 2.6em;
}
.ti-label::after { content: ' :'; }
.ti-val {
    color: var(--c-info-val);
	word-break: break-all;
}
.ti-sep {
    color: var(--c-info-label);
    padding: 0 2px;
}
.pgrid-item > a:hover .tree-info {
    border-color: #d0d0cc;
    background: #f2f2ee;
}

/* ── 빈 목록 ── */
.pgrid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 40px 0;
}

/* ══════════════════════════════════
   반응형
   ══════════════════════════════════ */
@media (max-width: 1200px) {
    .pgrid-wrap { --cols: 3; --gap-x: 30px; --gap-y: 48px; }
}
@media (max-width: 900px) {
    .pgrid-wrap { --cols: 2; --gap-x: 22px; --gap-y: 36px; }
    .pgrid-title { font-size: 18px; }
    .tree-info   { font-size: 11px; }
}
@media (max-width: 640px) {
    .pgrid-wrap  { --gap-x: 14px; --gap-y: 28px; }
    .tree-info   { font-size: 10.5px; padding: 10px 11px; }
}
@media (max-width: 480px) {
    .pgrid-wrap  { --cols: 1; --gap-y: 32px; }
    .pgrid-title { font-size: 18px; }
    .tree-info   { font-size: 12px; }
}