@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   PLAYWEBON BOARD · 포트폴리오(portfolio)
   배지 + 스펙행 카드 계열 디자인 10종 : pf-d1 ~ pf-d10
   ────────────────────────────────────────────────────────────── */

ul.pwb_portfolio{
    --pf-ink:#15181d;
    --pf-ink-2:#8b929b;
    --pf-ink-3:#a8aeb6;
    --pf-line:#e6e8ec;
    --pf-paper:#f4f5f7;
    --pf-ease:cubic-bezier(.22,1,.36,1);

    list-style:none;
    margin:0 0 40px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(var(--pf-col,2),minmax(0,1fr));
    gap:calc(var(--pf-gap,30px) * 1.25) var(--pf-gap,30px);
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
}
ul.pwb_portfolio *{ box-sizing:border-box; text-decoration:none !important; }
ul.pwb_portfolio > li{ margin:0; padding:0; border:0; background:none; list-style:none; min-width:0; }
ul.pwb_portfolio a.pf_link{ display:block; color:inherit; }
ul.pwb_portfolio a.pf_link.no_click{ cursor:default; }

/* ── 카드 ── */
ul.pwb_portfolio .pf_card{
    overflow:hidden;
    border-radius:var(--pf-radius,16px);
    background:#fff;
    box-shadow:0 1px 2px rgba(20,25,35,.05), 0 10px 28px rgba(20,25,35,.07);
    transition:transform .45s var(--pf-ease), box-shadow .45s var(--pf-ease);
}
ul.pwb_portfolio li:hover .pf_card{
    transform:translateY(-6px);
    box-shadow:0 4px 10px rgba(20,25,35,.07), 0 22px 48px rgba(20,25,35,.13);
}

/* ── 썸네일 ── */
ul.pwb_portfolio .pf_thumb{
    position:relative;
    overflow:hidden;
    aspect-ratio:100 / var(--pf-ratio-num,78);
    background:var(--pf-paper);
    font-size:0;
}
ul.pwb_portfolio .pf_thumb img{
    width:100%; height:100%;
    object-fit:cover; display:block;
    transition:transform .7s var(--pf-ease);
    transform:translateZ(0);
    backface-visibility:hidden;
}
ul.pwb_portfolio li:hover .pf_thumb img{ transform:scale(1.05); }
ul.pwb_portfolio .pf_thumb img.highlight{
    position:absolute; top:14px; right:14px; z-index:4;
    width:auto; height:auto; transform:none !important;
}
ul.pwb_portfolio .pf_noimg{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; background:var(--pf-paper);
}
ul.pwb_portfolio .pf_noimg span{ font-size:13px; font-weight:600; color:#b5bac1; }

/* ── 배지 ── */
ul.pwb_portfolio .pf_badge{
    position:absolute; left:16px; top:16px; z-index:3;
    display:inline-flex; align-items:center; gap:7px;
    height:38px; padding:0 18px;
    border-radius:999px;
    background:#fff;
    color:var(--pf-accent);
    font-size:13.5px; font-weight:800; letter-spacing:.03em;
    box-shadow:0 2px 10px rgba(20,25,35,.14);
    white-space:nowrap;
}
ul.pwb_portfolio .pf_badge i{ font-size:16px; line-height:1; }
ul.pwb_portfolio .pf_badge svg.pf_ico{ width:17px; height:17px; flex:none; display:block; }

/* ── 본문 ── */
ul.pwb_portfolio .pf_body{ padding:26px 24px 24px; }
ul.pwb_portfolio .pf_num{ display:none; }
ul.pwb_portfolio .pf_cate{
    display:inline-block; margin:0 0 8px;
    font-size:12.5px; font-weight:700; letter-spacing:-.01em;
    color:var(--pf-accent);
}
ul.pwb_portfolio .pf_cate.on_thumb{ display:none; }
ul.pwb_portfolio .pf_title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:0 0 18px; padding:0 0 18px;
    border-bottom:1px dashed var(--pf-line);
    font-size:21px; font-weight:800; letter-spacing:-.04em; line-height:1.35;
    color:var(--pf-ink);
    transition:color .25s;
}
ul.pwb_portfolio .pf_title.on_thumb{ display:none; }

/* ── 스펙 행 ── */
ul.pwb_portfolio ul.pf_spec{ list-style:none; margin:0; padding:0; }
ul.pwb_portfolio ul.pf_spec li{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0; padding:7px 0; border:0;
}
ul.pwb_portfolio ul.pf_spec .k{
    display:inline-flex; align-items:center; gap:10px;
    font-size:14.5px; font-weight:500; letter-spacing:-.03em;
    color:var(--pf-ink-2);
    white-space:nowrap;
}
ul.pwb_portfolio ul.pf_spec .k i{ font-size:16px; line-height:1; color:var(--pf-accent); }
ul.pwb_portfolio ul.pf_spec .k svg.pf_ico{ width:17px; height:17px; flex:none; display:block; color:var(--pf-accent); }
ul.pwb_portfolio ul.pf_spec .v{
    font-size:15px; font-weight:800; letter-spacing:-.03em;
    color:var(--pf-ink);
    text-align:right;
    font-variant-numeric:tabular-nums;
}

ul.pwb_portfolio .pf_meta{
    display:flex; flex-wrap:wrap; gap:4px 12px;
    margin-top:14px; padding-top:12px;
    border-top:1px dashed var(--pf-line);
}
ul.pwb_portfolio .pf_meta span{ font-size:12px; color:var(--pf-ink-3); font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   D1 · 화이트 카드 (기본 · 캡처 기준)
   ────────────────────────────────────────────────────────────── */
ul.pf-d1 li:hover .pf_title{ color:var(--pf-accent); }

/* ══════════════════════════════════════════════════════════════
   D2 · 아웃라인 카드 — 그림자 없이 얇은 선
   ────────────────────────────────────────────────────────────── */
ul.pf-d2 .pf_card{
    background:#fff;
    box-shadow:inset 0 0 0 1px var(--pf-line);
}
ul.pf-d2 li:hover .pf_card{
    transform:none;
    box-shadow:inset 0 0 0 1px var(--pf-accent);
}
ul.pf-d2 .pf_badge{
    border-radius:10px; height:34px; padding:0 14px;
    box-shadow:none; font-size:12.5px;
}

/* ══════════════════════════════════════════════════════════════
   D3 · 스펙 블록 — 정보 영역을 회색 블록으로 분리
   ────────────────────────────────────────────────────────────── */
ul.pf-d3 .pf_title{ border-bottom:0; padding-bottom:0; margin-bottom:14px; }
ul.pf-d3 ul.pf_spec{
    padding:12px 16px;
    border-radius:12px;
    background:var(--pf-paper);
}
ul.pf-d3 ul.pf_spec li{ padding:6px 0; }
ul.pf-d3 .pf_meta{ border-top:0; padding-top:0; margin-top:12px; }

/* ══════════════════════════════════════════════════════════════
   D4 · 배지 걸침 — 배지가 이미지와 본문 경계에 반쯤 걸침
   ────────────────────────────────────────────────────────────── */
ul.pf-d4 .pf_thumb{ overflow:visible; border-radius:var(--pf-radius,16px) var(--pf-radius,16px) 0 0; }
ul.pf-d4 .pf_thumb img{ border-radius:var(--pf-radius,16px) var(--pf-radius,16px) 0 0; }
ul.pf-d4 .pf_card{ overflow:visible; }
ul.pf-d4 .pf_badge{
    left:22px; top:auto; bottom:0; transform:translateY(50%);
    background:var(--pf-accent); color:#fff;
}
ul.pf-d4 .pf_body{ padding-top:38px; }

/* ══════════════════════════════════════════════════════════════
   D5 · 다크 카드
   ────────────────────────────────────────────────────────────── */
ul.pf-d5 .pf_card{ background:#14171c; box-shadow:0 10px 28px rgba(0,0,0,.18); }
ul.pf-d5 .pf_title{ color:#fff; border-bottom-color:rgba(255,255,255,.16); }
ul.pf-d5 ul.pf_spec .k{ color:rgba(255,255,255,.5); }
ul.pf-d5 ul.pf_spec .v{ color:#fff; }
ul.pf-d5 .pf_meta{ border-top-color:rgba(255,255,255,.14); }
ul.pf-d5 .pf_meta span{ color:rgba(255,255,255,.38); }
ul.pf-d5 .pf_badge{ background:var(--pf-accent); color:#fff; }

/* ══════════════════════════════════════════════════════════════
   D6 · 각진 카드 — 라운드 0, 배지 우상단 컬러 채움
   ────────────────────────────────────────────────────────────── */
ul.pf-d6 .pf_card{ border-radius:0; box-shadow:inset 0 0 0 1px var(--pf-line); }
ul.pf-d6 li:hover .pf_card{ transform:none; box-shadow:inset 0 0 0 1px var(--pf-line), 0 14px 34px rgba(20,25,35,.1); }
ul.pf-d6 .pf_badge{
    left:auto; right:0; top:0;
    border-radius:0 0 0 14px;
    background:var(--pf-accent); color:#fff;
    box-shadow:none;
}
ul.pf-d6 .pf_title{ border-bottom-style:solid; }

/* ══════════════════════════════════════════════════════════════
   D7 · 넘버 강조 — 이미지 배지 대신 본문에 큰 번호
   ────────────────────────────────────────────────────────────── */
ul.pf-d7 .pf_badge{ display:none; }
ul.pf-d7 .pf_num{
    display:block; margin:0 0 6px;
    font-size:13px; font-weight:800; letter-spacing:.12em;
    color:var(--pf-accent);
}
ul.pf-d7 .pf_num:after{
    content:''; display:inline-block; vertical-align:middle;
    width:26px; height:2px; margin-left:10px; background:var(--pf-accent);
}
ul.pf-d7 .pf_title{ font-size:23px; }

/* ══════════════════════════════════════════════════════════════
   D8 · 오버레이 타이틀 — 제목은 이미지 위, 본문은 스펙만
   ────────────────────────────────────────────────────────────── */
ul.pf-d8 .pf_thumb:after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(8,11,16,.82) 0%, rgba(8,11,16,.3) 40%, rgba(8,11,16,0) 72%);
}
ul.pf-d8 .pf_title.on_thumb{
    display:-webkit-box; position:absolute; left:22px; right:22px; bottom:20px; z-index:2;
    margin:0; padding:0; border:0; color:#fff; font-size:20px;
}
ul.pf-d8 .pf_body > .pf_title,
ul.pf-d8 .pf_body > .pf_cate{ display:none; }
ul.pf-d8 .pf_body{ padding:16px 24px 20px; }
ul.pf-d8 ul.pf_spec li{ padding:6px 0; }

/* ══════════════════════════════════════════════════════════════
   D9 · 실선 스펙 — 행마다 구분선, 값은 포인트 컬러
   ────────────────────────────────────────────────────────────── */
ul.pf-d9 .pf_title{ border-bottom:2px solid var(--pf-ink); padding-bottom:14px; margin-bottom:6px; }
ul.pf-d9 ul.pf_spec li{ padding:11px 0; border-bottom:1px solid var(--pf-line); }
ul.pf-d9 ul.pf_spec li:last-child{ border-bottom:0; }
ul.pf-d9 ul.pf_spec .v{ color:var(--pf-accent); }

/* ══════════════════════════════════════════════════════════════
   D10 · 컴팩트 — 카드 배경 없이 이미지 + 정보만
   ────────────────────────────────────────────────────────────── */
ul.pf-d10 .pf_card{ background:none; box-shadow:none; overflow:visible; }
ul.pf-d10 li:hover .pf_card{ transform:none; box-shadow:none; }
ul.pf-d10 .pf_thumb{ border-radius:var(--pf-radius,16px); }
ul.pf-d10 .pf_badge{
    left:12px; top:12px; height:30px; padding:0 13px;
    font-size:11.5px; gap:5px;
}
ul.pf-d10 .pf_badge i{ font-size:13px; }
ul.pf-d10 .pf_badge svg.pf_ico{ width:14px; height:14px; }
ul.pf-d10 .pf_body{ padding:16px 2px 0; }
ul.pf-d10 .pf_title{ font-size:18px; margin-bottom:12px; padding-bottom:12px; }
ul.pf-d10 ul.pf_spec li{ padding:4px 0; }
ul.pf-d10 ul.pf_spec .k{ font-size:13.5px; }
ul.pf-d10 ul.pf_spec .v{ font-size:14px; }

/* ══════════════════════════════════════════════════════════════
   반응형
   ────────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ){
    ul.pwb_portfolio{ grid-template-columns:repeat(min(var(--pf-col,2),2),minmax(0,1fr)); }
}
@media ( max-width: 768px ){
    ul.pwb_portfolio{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:28px; }
    ul.pwb_portfolio .pf_body{ padding:20px 18px 18px; }
    ul.pwb_portfolio .pf_title{ font-size:18px; margin-bottom:14px; padding-bottom:14px; }
    ul.pwb_portfolio .pf_badge{ left:12px; top:12px; height:32px; padding:0 14px; font-size:12px; }
    ul.pwb_portfolio .pf_badge i{ font-size:14px; }
    ul.pwb_portfolio .pf_badge svg.pf_ico{ width:15px; height:15px; }

    /* 스펙 : 항목명 / 값을 위아래 단락으로 분리 */
    ul.pwb_portfolio ul.pf_spec li{
        display:block;
        padding:7px 0;
    }
    ul.pwb_portfolio ul.pf_spec .k{
        display:flex; align-items:center; gap:8px;
        font-size:13px;
        white-space:normal; word-break:keep-all;
    }
    ul.pwb_portfolio ul.pf_spec .k svg.pf_ico{ width:15px; height:15px; }
    ul.pwb_portfolio ul.pf_spec .k i{ font-size:14px; }
    ul.pwb_portfolio ul.pf_spec .v{
        display:block;
        margin-top:3px; padding-left:23px;
        text-align:left;
        font-size:14.5px;
        word-break:break-all;
    }

    ul.pf-d7 .pf_title{ font-size:19px; }
    ul.pf-d8 .pf_title.on_thumb{ font-size:17px; left:16px; right:16px; bottom:16px; }
    ul.pf-d10 .pf_body{ padding:14px 0 0; }
}

/* 모바일 2단 : 카드 폭이 좁아지므로 축소 */
@media ( max-width: 560px ){
    ul.pwb_portfolio{
        gap:calc(var(--pf-gap,20px) * 1.2) min(var(--pf-gap,20px),14px);
    }
    ul.pwb_portfolio .pf_body{ padding:15px 13px 14px; }
    ul.pwb_portfolio .pf_title{
        font-size:16px; letter-spacing:-.045em;
        margin-bottom:11px; padding-bottom:11px;
        word-break:keep-all;
    }
    ul.pwb_portfolio .pf_cate{ font-size:11.5px; margin-bottom:6px; }
    ul.pwb_portfolio .pf_badge{
        left:9px; top:9px; height:27px; padding:0 10px;
        gap:5px; font-size:10.5px; letter-spacing:.01em;
    }
    ul.pwb_portfolio .pf_badge i{ font-size:12px; }
    ul.pwb_portfolio .pf_badge svg.pf_ico{ width:13px; height:13px; }

    ul.pwb_portfolio ul.pf_spec li{ padding:6px 0; }
    ul.pwb_portfolio ul.pf_spec .k{ font-size:12px; gap:6px; }
    ul.pwb_portfolio ul.pf_spec .k svg.pf_ico{ width:14px; height:14px; }
    ul.pwb_portfolio ul.pf_spec .k i{ font-size:13px; }
    ul.pwb_portfolio ul.pf_spec .v{ font-size:13.5px; padding-left:20px; margin-top:2px; }

    ul.pwb_portfolio .pf_meta{ margin-top:10px; padding-top:9px; gap:3px 8px; }
    ul.pwb_portfolio .pf_meta span{ font-size:11px; }

    ul.pf-d3 ul.pf_spec{ padding:10px 12px; }
    ul.pf-d4 .pf_body{ padding-top:26px; }
    ul.pf-d7 .pf_title{ font-size:17px; }
    ul.pf-d7 .pf_num{ font-size:11.5px; }
    ul.pf-d7 .pf_num:after{ width:18px; margin-left:7px; }
    ul.pf-d8 .pf_title.on_thumb{ font-size:15px; left:12px; right:12px; bottom:12px; }
    ul.pf-d8 .pf_body{ padding:12px 13px 14px; }
    ul.pf-d9 .pf_title{ padding-bottom:10px; }
    ul.pf-d9 ul.pf_spec li{ padding:9px 0; }
    ul.pf-d10 .pf_body{ padding:12px 0 0; }
    ul.pf-d10 .pf_title{ font-size:15.5px; margin-bottom:10px; padding-bottom:10px; }
}