{{제로셀/인물/스타일}}로 끼워 넣을 수 있습니다./* 틀:제로셀/인물/스타일 — 제로셀 캐릭터 인포박스 (상징색 기반 · 나무위키식 라벨) */ .zc-ch{ --zc-line: color-mix(in srgb, var(--zc-key) 50%, #10140f); --zc-key: var(--gold,#d9b04a); /* 인자 상징색 지정 시 컨테이너 인라인 style이 덮어씀 */ --zc-key-fg: #0b0b0d; --zc-notch: 14px; float:left; clear:left; width:336px; max-width:100%; margin:.3em 1.4em 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(0 0, calc(100% - var(--zc-notch)) 0, 100% var(--zc-notch), 100% 100%, var(--zc-notch) 100%, 0 calc(100% - var(--zc-notch))); } /* 테두리 프레임 — 콘텐츠(초상 등) 위에 얹어 대각선까지 안 잘리게 그린다 */ .zc-ch::after{ content:""; position:absolute; inset:0; z-index:20; pointer-events:none; border:1px solid var(--zc-line); background-image: linear-gradient(45deg, transparent calc(50% - 1.2px), var(--zc-line) calc(50% - 1.2px), var(--zc-line) calc(50% + 1.2px), transparent calc(50% + 1.2px)), linear-gradient(45deg, transparent calc(50% - 1.2px), var(--zc-line) calc(50% - 1.2px), var(--zc-line) calc(50% + 1.2px), transparent calc(50% + 1.2px)); background-repeat:no-repeat; background-position:top right,bottom left; background-size:var(--zc-notch) var(--zc-notch); } @media (max-width:680px){ .zc-ch{ float:none; width:100%; margin:.3em 0 1em; } } .zc-ch *{ box-sizing:border-box; }
/* ① 초상 — 밝은 배경 + 가운데 상징색 띠 + 옅은 사선. 하단 짙은 회색 ∨(골)은 인물 '뒤'(::before) */ .zc-ch-hero{ position:relative; } .zc-ch-portrait{ position:relative; aspect-ratio:63/80; overflow:hidden; background-color:#eceae3; background-image: repeating-linear-gradient(-45deg, rgba(120,120,120,.10) 0 1px, transparent 1px 9px), linear-gradient(90deg, transparent 0 30%, color-mix(in srgb, var(--zc-key) 55%, #efe9d5) 30%, color-mix(in srgb, var(--zc-key) 55%, #efe9d5) 70%, transparent 70%); background-repeat:repeat, no-repeat; } .zc-ch-portrait::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none; background:#2f2f33; clip-path:polygon(0 36%, 50% 60%, 100% 36%, 100% 100%, 0 100%); } .zc-ch-art{ position:absolute; inset:0; z-index:2; background-size:cover; background-position:top center; background-repeat:no-repeat; } .zc-ch-art--none{ background:transparent; }
/* 이름줄(헤더) — 문양 + 별칭 + 이름 + 원어 */ .zc-ch-namebar{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 14px 13px; margin-top:-1px; background:linear-gradient(180deg, color-mix(in srgb,var(--zc-key) 8%,var(--card,#14100f)), var(--card,#14100f)); border-top:1px solid var(--zc-line); } .zc-ch-emblem{ flex:0 0 auto; width:40px; height:40px; background-size:contain; background-position:center; background-repeat:no-repeat; filter:drop-shadow(0 1px 3px #000); } .zc-ch-namewrap{ min-width:0; } .zc-ch-epithet{ font-size:11px; color:var(--ink-soft,#9a8f86); letter-spacing:.03em; margin-bottom:3px; } .zc-ch-name{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:20px; font-weight:700; line-height:1.15; color:var(--ink,#e7e0d6); } .zc-ch-name::after{ content:""; display:block; width:32px; height:2px; margin-top:6px; background:var(--zc-key); box-shadow:0 0 6px color-mix(in srgb,var(--zc-key) 55%,transparent); } .zc-ch-orig{ font-size:12px; line-height:1.55; color:var(--ink-soft,#9a8f86); margin-top:6px; }
/* ② 대사 */ .zc-ch-quote{ padding:13px 16px; text-align:center; font-size:13px; line-height:1.6; color:#efe7db; background:#0a0606; border-top:1px solid var(--zc-line); } .zc-ch-qm{ color:var(--zc-key); font-weight:700; margin:0 2px; }
/* 개요 */ .zc-ch-intro{ padding:11px 15px; font-size:12.5px; line-height:1.65; color:var(--ink-soft,#9a8f86); background:color-mix(in srgb,var(--zc-key) 4%,var(--card,#14100f)); border-top:1px solid var(--zc-line); }
/* ③ 표 — 밝은 상징색 라벨. 글자색은 상징색/글자색(--zc-key-fg)으로 조절. !important 로 테마 th 오버라이드를 이긴다 */ .zc-ch-table{ width:100%; border-collapse:collapse; border-top:1px solid var(--zc-line); } .zc-ch-table th, .zc-ch-table td{ border:1px solid color-mix(in srgb, var(--zc-line) 65%, #000) !important; vertical-align:middle; } .zc-ch-th{ width:34%; padding:5px; background:color-mix(in srgb, var(--zc-key) 35%, #0c0f0c) !important; } .zc-ch-key{ display:block; padding:6px 9px; border-radius:6px; text-align:center; white-space:nowrap; font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--zc-key-fg, #17140c) !important; background:color-mix(in srgb, var(--zc-key) 82%, #0c0f0c) !important; border:none !important; } .zc-ch-td{ padding:8px 11px; background:color-mix(in srgb, var(--card,#14100f) 82%, #000) !important; color:var(--ink,#e7e0d6) !important; font-size:13px; line-height:1.5; } .zc-ch-td a{ color:var(--link,#e0a63e); text-decoration:none; } .zc-ch-td a:hover{ text-decoration:underline; } .zc-ch-td sup a{ color:var(--zc-key); } .zc-ch-stars{ color:var(--gold,#d9b04a); letter-spacing:2px; font-size:13px; text-shadow:0 0 6px rgba(217,176,74,.35); }
/* 푸터 — 상징색 스와치 · RPG/AI 태그 (분류 표식 없음) */ .zc-ch-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 15px 10px 22px; background:#0a0606; border-top:1px solid var(--zc-line); } .zc-ch-swatch{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono,"IBM Plex Mono",monospace); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft,#9a8f86); } .zc-ch-swatch-dot{ width:12px; height:12px; background:var(--zc-key); border:1px solid rgba(255,255,255,.14); } .zc-ch-flag{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:9.5px; font-weight:600; letter-spacing:.12em; padding:3px 8px; color:var(--gold,#d9b04a); background:rgba(6,4,4,.5); border:1px solid var(--zc-line); clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%); } /* 본문 헤더·목차를 인물틀(float) 아래로 내린다 (PC에서 목차가 옆으로 올라가는 것 방지) */ .zc-ch ~ .wiki-h, .zc-ch ~ .wiki-toc { clear: both; } /* 컨셉 아트 갤러리(현재 미사용, 무해) */ .zc-ch-gallery{ border-top:1px solid var(--zc-line); background:#0a0606; } .zc-ch-gallery-head{ font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft,#9a8f86); text-align:center; padding:8px 12px 2px; } .zc-ch-shot{ margin:0; padding:8px 11px 4px; } .zc-ch-shot-img{ display:block; width:100%; background-size:cover; background-position:top center; background-color:#100b0a; border:1px solid color-mix(in srgb,var(--zc-key) 22%,#10140f); } .zc-ch-shot-img--portrait{ aspect-ratio:3/4; } .zc-ch-shot-img--wide{ aspect-ratio:16/9; } .zc-ch-shot-cap{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:10px; letter-spacing:.04em; color:var(--ink-soft,#9a8f86); text-align:center; padding:5px 2px 3px; }
제로셀/인물 틀 전용 스타일
이 문서 첫 ---- 위 CSS는 틀:제로셀/인물을 쓴 문서에서만 실린다.
핵심: .zc-ch-th+.zc-ch-key = 평평 단색 상징색 라벨(글자색 = 상징색/글자색) · .zc-ch-portrait::before = 하단 짙은 회색 ∨(인물 뒤).
라벨 글자색 — 인자 상징색/글자색으로 정함(기본 어두움 #0b0b0d). 밝은 라벨엔 어두운 색 권장.