{{제로셀/컨셉아트/스타일}}로 끼워 넣을 수 있습니다./* 틀:제로셀/컨셉아트/스타일 — 컨셉아트 갤러리 (종류별 비율 · 폭 채움 · 노치 프레임 · 사선 캡션) */ .zc-g{ --zcg-key: var(--gold,#d9b04a); --zcg-notch: 12px; overflow:hidden; width:auto; min-width:0; margin:.3em 0 1.1em 0; font-family:Pretendard,"Pretendard Variable",system-ui,sans-serif; color:var(--ink,#e7e0d6); background:var(--card,#14100f); position:relative; clip-path:polygon(var(--zcg-notch) 0,100% 0,100% calc(100% - var(--zcg-notch)),calc(100% - var(--zcg-notch)) 100%,0 100%,0 var(--zcg-notch)); } .zc-g *{ box-sizing:border-box; } /* 테두리 프레임 — 노치(대각선 컷) 변에도 선을 그어 채운다. ::after엔 clip 없음(부모가 클립), 노치 방향 -45°, 위치 좌상·우하 */ .zc-g::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border:1px solid color-mix(in srgb,var(--zcg-key) 42%,#10140f); background-image: linear-gradient(-45deg, transparent calc(50% - .9px), color-mix(in srgb,var(--zcg-key) 42%,#10140f) calc(50% - .9px), color-mix(in srgb,var(--zcg-key) 42%,#10140f) calc(50% + .9px), transparent calc(50% + .9px)), linear-gradient(-45deg, transparent calc(50% - .9px), color-mix(in srgb,var(--zcg-key) 42%,#10140f) calc(50% - .9px), color-mix(in srgb,var(--zcg-key) 42%,#10140f) calc(50% + .9px), transparent calc(50% + .9px)); background-repeat:no-repeat; background-position:top left,bottom right; background-size:var(--zcg-notch) var(--zcg-notch); } .zc-g-head{ font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#f2ece2; text-align:center; padding:8px 12px; background:linear-gradient(180deg,color-mix(in srgb,var(--zcg-key) 28%,#0c0f0c),color-mix(in srgb,var(--zcg-key) 15%,#0c0f0c)); border-bottom:1px solid color-mix(in srgb,var(--zcg-key) 40%,#10140f); } /* 종류 섹션 */ .zc-g-sec{ padding:11px 11px 13px; } .zc-g-sec + .zc-g-sec{ border-top:1px solid color-mix(in srgb,var(--zcg-key) 18%,#10140f); } .zc-g-sec-h{ font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb,var(--zcg-key) 72%, var(--ink-soft,#9a8f86)); margin-bottom:9px; } /* 종류별 열: 포트레잇 2열, 시트·스플래쉬·추가는 1열(크게) */ .zc-g-grid{ display:grid; gap:10px; } .zc-g-sec--portrait .zc-g-grid{ grid-template-columns:1fr 1fr; } .zc-g-sec--sheet .zc-g-grid, .zc-g-sec--splash .zc-g-grid, .zc-g-sec--extra .zc-g-grid{ grid-template-columns:1fr; } .zc-g-item{ margin:0; display:flex; flex-direction:column; border:1px solid color-mix(in srgb,var(--zcg-key) 30%,#10140f); background:#0f0b0a; overflow:hidden; } /* 종류별 비율(cover 유지) — 포트레잇 3:4, 시트 9:4, 스플래쉬 16:9 */ .zc-g-img{ display:block; width:100%; background-size:cover; background-position:top center; background-color:#100b0a; } .zc-g-sec--portrait .zc-g-img{ aspect-ratio:3/4; } .zc-g-sec--sheet .zc-g-img{ aspect-ratio:9/4; } .zc-g-sec--splash .zc-g-img{ aspect-ratio:16/9; } .zc-g-sec--extra .zc-g-img{ aspect-ratio:16/9; } /* 사선(빗금) 캡션 배너 — 검정→상징색, 대각선 컷 */ .zc-g-cap{ position:relative; padding:8px 12px 8px 16px; min-height:30px; display:flex; align-items:center; background:linear-gradient(100deg, #0a0808 0%, #0a0808 42%, color-mix(in srgb,var(--zcg-key) 62%,#3a0f0d) 100%); border-top:1px solid color-mix(in srgb,var(--zcg-key) 40%,#10140f); } .zc-g-cap::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:color-mix(in srgb,var(--zcg-key) 75%,#3a0f0d); clip-path:polygon(0 0, 100% 0, 0 100%); } .zc-g-cap-t{ font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:700; font-size:11px; letter-spacing:.02em; color:#f4eee6; text-shadow:0 1px 2px rgba(0,0,0,.5); line-height:1.25; } @media (max-width:680px){ .zc-g{ width:100%; margin:.3em 0 1em; } }