@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   PLAYWEBON BOARD · 웹진세로(webzine_h) — 미니멀 카드
   테두리·그림자 없이 여백으로만 구분. 호버 시 모서리가 둥글어집니다.
   ────────────────────────────────────────────────────────────── */
.webzine_h.card-min{
    --wz-ink:#15181d;
    --wz-ink-2:#8a919a;
    --wz-ink-3:#aab0b8;
    --wz-accent:#7e9b40;
    --wz-paper-2:#f3f4f6;
    --wz-gap:26px;
    --wz-ease:cubic-bezier(.22,1,.36,1);

    list-style:none;
    margin:0 0 30px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(var(--pj-cols,3),minmax(0,1fr));
    gap:var(--wz-gap);
    letter-spacing:-.01em;
}
.webzine_h.card-min *{ box-sizing:border-box; text-decoration:none !important; }
.webzine_h.card-min > li{ margin:0; padding:0; border:0; list-style:none; background:none; min-width:0; max-width:100%; overflow:hidden; }

/* ── 카드 ── */
.webzine_h .pj{ position:relative; display:block; background:none; min-width:0; max-width:100%; }

/* ── 이미지 ── */
.webzine_h .pj-media{
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;              /* 4:3 고정 (aspect-ratio 미지원 브라우저 대응) */
    overflow:hidden;
    margin-bottom:16px;
    border-radius:14px;
    background:var(--wz-paper-2);
    transition:border-radius .45s var(--wz-ease);
}
.webzine_h .pj-media > img:not(.pj-highlight){
    position:absolute;
    top:0; left:0;
    width:100% !important;
    height:100% !important;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .9s var(--wz-ease);
}
.webzine_h .pj:hover .pj-media{ border-radius:26px; }
.webzine_h .pj:hover .pj-media img{ transform:scale(1.05); }

.webzine_h .pj-media .no_image{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--wz-paper-2);
}
.webzine_h .pj-media .no_image_text{
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    color:#b5bac1;
    transition:.3s;
}
.webzine_h .pj:hover .no_image_text{ color:#9aa0a8; }

.webzine_h .pj-highlight{ position:absolute; right:12px; top:12px; z-index:3; }

/* ── 본문 ── */
.webzine_h .pj-body{ padding:0; min-width:0; max-width:100%; }

.webzine_h .pj-cat{
    display:block;
    margin-bottom:9px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--wz-accent);
}
.webzine_h .pj-body h3{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 9px;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.03em;
    line-height:1.45;
    color:var(--wz-ink);
    overflow-wrap:anywhere;
    word-break:break-word;
    transition:.22s;
}
.webzine_h .pj:hover .pj-body h3{ color:var(--wz-accent); }

.webzine_h .pj-sum{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 12px;
    font-size:12.5px;
    line-height:1.68;
    color:var(--wz-ink-2);
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* ── 확장변수 ── */
.webzine_h ul.extra_item{ list-style:none; margin:0 0 10px; padding:0; }
.webzine_h ul.extra_item li{
    margin:0 0 4px;
    padding:0;
    border:0;
    font-size:12px;
    color:var(--wz-ink-2);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.webzine_h ul.extra_item li:last-child{ margin-bottom:0; }
.webzine_h ul.extra_item li a{ color:var(--wz-ink-2); }

/* ── 메타 ── */
.webzine_h .pj-info{
    display:flex;
    flex-wrap:wrap;
    gap:5px 13px;
    font-size:11.5px;
    color:var(--wz-ink-3);
    font-variant-numeric:tabular-nums;
}

/* ── 텍스트 정렬 옵션 (스킨설정) ── */
.webzine_h.ta-center .pj-body{ text-align:center; }
.webzine_h.ta-center .pj-info,
.webzine_h.ta-center ul.extra_item{ justify-content:center; text-align:center; }
.webzine_h.ta-right .pj-body{ text-align:right; }
.webzine_h.ta-right .pj-info,
.webzine_h.ta-right ul.extra_item{ justify-content:flex-end; text-align:right; }

/* ── 등장 애니메이션 ── */
.webzine_h .pj.fade{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s var(--wz-ease), transform .6s var(--wz-ease);
}
.webzine_h .pj.fade.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
    .webzine_h .pj.fade{ opacity:1; transform:none; transition:none; }
}

/* ── 반응형 ── */
@media(max-width:1080px){
    .webzine_h.card-min{ grid-template-columns:repeat(min(var(--pj-cols,3),3),minmax(0,1fr)); gap:20px; }
}
@media(max-width:768px){
    .webzine_h.card-min{
        --wz-gap:16px;
        grid-template-columns:repeat(min(var(--pj-cols,2),2),minmax(0,1fr));
        gap:26px var(--wz-gap);
        margin-bottom:24px;
    }
    .webzine_h .pj-media{
        padding-top:72%;
        margin-bottom:12px;
        border-radius:11px;
    }
    .webzine_h .pj:hover .pj-media{ border-radius:11px; }
    .webzine_h .pj:hover .pj-media img{ transform:none; }
    .webzine_h .pj-media .no_image_text{ font-size:12px; }
    .webzine_h .pj-highlight{ right:8px; top:8px; }

    .webzine_h .pj-cat{ margin-bottom:6px; font-size:10.5px; }
    .webzine_h .pj-body h3{
        margin-bottom:7px;
        font-size:15px;
        line-height:1.4;
        letter-spacing:-.035em;
        word-break:keep-all;
    }
    .webzine_h .pj-sum{
        margin-bottom:9px;
        font-size:12px;
        line-height:1.6;
        -webkit-line-clamp:2;
    }
    .webzine_h ul.extra_item{ margin-bottom:8px; }
    .webzine_h ul.extra_item li{
        margin-bottom:3px;
        font-size:11.5px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .webzine_h .pj-info{ gap:3px 9px; font-size:11px; }
}
/* 1단 배치일 때는 여유 있게 */
@media(max-width:768px){
    .webzine_h.card-min[style*="--pj-cols:1"] .pj-body h3{ font-size:17px; }
    .webzine_h.card-min[style*="--pj-cols:1"] .pj-sum{ font-size:13px; -webkit-line-clamp:3; }
    .webzine_h.card-min[style*="--pj-cols:1"]{ gap:30px; }
}
@media(max-width:420px){
    .webzine_h.card-min{ --wz-gap:12px; gap:22px var(--wz-gap); }
    .webzine_h .pj-media{ padding-top:70%; margin-bottom:10px; border-radius:9px; }
    .webzine_h .pj-body h3{ font-size:13.8px; margin-bottom:6px; }
    .webzine_h .pj-sum{ font-size:11.5px; -webkit-line-clamp:2; margin-bottom:8px; }
    .webzine_h .pj-cat{ font-size:10px; margin-bottom:5px; }
    .webzine_h ul.extra_item li{ font-size:11px; }
    .webzine_h .pj-info{ font-size:10.5px; gap:2px 7px; }
}

/* 그리드 넘침 방지 (긴 영문 제목 등으로 컬럼이 벌어지는 문제) */
.board_list{ overflow-x:hidden; }
.webzine_h.card-min{ width:100%; max-width:100%; min-width:0; }
.webzine_h .pj-info span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ══════════════════════════════════════════════════════════════
   썸네일 비율 강제 고정 (레이아웃/외부 CSS 간섭 차단)
   ────────────────────────────────────────────────────────────── */
div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:0 !important;
    padding-top:75% !important;          /* 4 : 3 */
    overflow:hidden !important;
}
div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media > img:not(.pj-highlight),
div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media > div.no_image{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
}
div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media > img.pj-highlight{
    position:absolute !important;
    width:auto;
    height:auto;
    max-width:40% !important;
    object-fit:contain !important;
}
@media ( max-width: 768px ){
    div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media{
        padding-top:72% !important;
    }
}
@media ( max-width: 420px ){
    div.board_list ul.webzine_h.card-min > li > a.pj > div.pj-media{
        padding-top:70% !important;
    }
}