/* ══════════════════════════════════════════════════════════════
   PLAYWEBON BOARD · 웹진세로(webzine_h)
   ARGO ENERGY — Track Record / Portfolio card grid
   ────────────────────────────────────────────────────────────── */
.webzine_h.port-grid{
  /* design tokens (scoped) */
  --paper:#FFFFFF;--paper-2:#F5F8F9;
  --teal:#f2614d;--teal-600:#C73D29;
  --ink:#14202B;--stone:#5B6770;--stone-2:#8A949C;
  --line:#E4E8EB;
  --t3:clamp(19px,1.7vw,24px);--t4:16px;--t-sm:14px;--t-xs:11.5px;
  --gap-grid:22px;
  --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),1fr);gap:var(--gap-grid);
  font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:-.01em;
}
.webzine_h.port-grid *{box-sizing:border-box;text-decoration:none!important;}
.webzine_h.port-grid > li{margin:0;padding:0;border:0;list-style:none;background:none;}

/* ── card ── */
.webzine_h .pj{
  position:relative;display:block;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:.4s var(--ease);
}
.webzine_h .pj:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(20,32,43,.14);}

/* ── media ── */
.webzine_h .pj-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.webzine_h .pj-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease);}
.webzine_h .pj:hover .pj-media img{transform:scale(1.06);}
.webzine_h .pj-media .no_image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--paper-2);}
.webzine_h .pj-media .no_image_text{font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--stone-2);transition:.4s;}
.webzine_h .pj:hover .no_image_text{font-size:20px;}

.webzine_h .pj-badge{
  position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--teal-600);font-size:var(--t-xs);font-weight:800;letter-spacing:.05em;
  padding:9px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.webzine_h .pj-badge i{color:var(--teal);}
.webzine_h .pj-highlight{position:absolute;right:14px;top:14px;z-index:3;}

/* ── body ── */
.webzine_h .pj-body{padding:26px 28px 28px;}
.webzine_h .pj-body h3{font-size:var(--t3);font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.35;}
.webzine_h .pj-div{border-top:1.5px dashed var(--line);margin:18px 0 4px;}
.webzine_h .pj-spec{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;}
.webzine_h .pj-spec .l{display:inline-flex;align-items:center;gap:11px;font-size:var(--t-sm);color:var(--stone);font-weight:600;white-space:nowrap;}
.webzine_h .pj-spec .l i{color:var(--teal);width:18px;text-align:center;}
.webzine_h .pj-spec .v{font-size:var(--t4);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;}
.webzine_h .pj-info{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:10px;color:var(--stone-2);font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;}

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

/* ── entrance ── */
.webzine_h .pj.fade{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.webzine_h .pj.fade.in{opacity:1;transform:none;}

/* ── responsive ── */
@media(max-width:1080px){.webzine_h.port-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .webzine_h.port-grid{grid-template-columns:1fr;gap:16px;}
  .webzine_h .pj-body{padding:22px 22px 24px;}
}

/* ── 반응형 보정 : 1680 / 1440 / 1280 / 1024 / 960 / 폴더블 / 360 / 320 ── */
@media(max-width:1680px){ .webzine_h.port-grid{gap:26px;} }
@media(max-width:1440px){ .webzine_h.port-grid{gap:22px;} .webzine_h .pj-body{padding:24px 24px 26px;} }
@media(max-width:1280px){ .webzine_h.port-grid{grid-template-columns:repeat(min(var(--pj-cols),3),1fr);gap:20px;} }
@media(max-width:1024px){ .webzine_h.port-grid{grid-template-columns:repeat(2,1fr);gap:18px;} }
@media(max-width:960px){ .webzine_h .pj-body{padding:22px 20px 24px;} }
@media(min-width:769px) and (max-width:884px){ .webzine_h.port-grid{grid-template-columns:repeat(2,1fr);gap:14px;} .webzine_h .pj-body{padding:18px 16px 20px;} }
@media(max-width:360px){ .webzine_h.port-grid{gap:12px;} .webzine_h .pj-body{padding:18px 16px 20px;} }
@media(max-width:320px){ .webzine_h.port-grid{gap:10px;} .webzine_h .pj-body{padding:16px 14px 18px;} }