/* G.O.H Change Wiki v2 — Light Theme */ @font-face{font-family:'Paperlogy';font-weight:300;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2')} @font-face{font-family:'Paperlogy';font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2')} @font-face{font-family:'Paperlogy';font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2')} @font-face{font-family:'Paperlogy';font-weight:600;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2')} @font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2')} @font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2')} /* Paperlogy 의 empty glyph 우회 — JS 에서 특정 글자를 .glyph-fallback span 으로 감싸 시스템 폰트 강제 */ .glyph-fallback{font-family:'Apple SD Gothic Neo','AppleGothic','Noto Sans CJK KR','Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important} /* ── Toast — 우측 하단 비차단 알림 / confirm 대체 ─────────────── */ #wiki-toast-root{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none} .wiki-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;background:var(--bg-card);color:var(--text);font-size:.9em;line-height:1.45;box-shadow:0 4px 16px rgba(0,0,0,.12);opacity:0;transform:translateX(40px);transition:opacity .2s ease-out,transform .2s ease-out} .wiki-toast.show{opacity:1;transform:translateX(0)} .wiki-toast.hide{opacity:0;transform:translateX(40px)} .wiki-toast-icon{flex:0 0 auto;font-size:1.1em;font-weight:700;line-height:1.2;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary-light);color:var(--primary)} .wiki-toast-msg{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word} .wiki-toast-close{flex:0 0 auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.1em;line-height:1;padding:0 2px;margin:-2px -2px 0 0} .wiki-toast-close:hover{color:var(--text)} .wiki-toast-info {border-left-color:var(--primary)} .wiki-toast-info .wiki-toast-icon{background:var(--primary-light);color:var(--primary)} .wiki-toast-success{border-left-color:var(--success)} .wiki-toast-success .wiki-toast-icon{background:var(--success-bg);color:var(--success)} .wiki-toast-warn {border-left-color:var(--warning)} .wiki-toast-warn .wiki-toast-icon{background:var(--warning-bg);color:var(--warning)} .wiki-toast-error {border-left-color:var(--error)} .wiki-toast-error .wiki-toast-icon{background:var(--error-bg);color:var(--error)} .wiki-toast-confirm{flex-wrap:wrap;border-left-color:var(--warning);min-width:280px} .wiki-toast-confirm .wiki-toast-icon{background:var(--warning-bg);color:var(--warning)} .wiki-toast-actions{flex-basis:100%;display:flex;gap:6px;justify-content:flex-end;margin-top:8px} .wiki-toast-btn{padding:5px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;font-size:.85em;font-weight:600;cursor:pointer;transition:all .12s} .wiki-toast-btn:hover{border-color:var(--primary);color:var(--primary)} .wiki-toast-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)} .wiki-toast-btn.primary:hover{background:var(--primary-dark)} @media(max-width:600px){ #wiki-toast-root{right:10px;left:10px;bottom:10px;max-width:none} } /* ── FOUC 방지: CSS 로드 완료 전엔 body 숨김 (이미지 unstyled flash 차단) ── */ html:not(.wiki-ready) body{visibility:hidden} html.wiki-ready body{visibility:visible;opacity:1;transition:opacity .12s ease-out} /* 이미지 기본값 — 페이지 CSS 로드 전에도 깨지지 않게 */ img{vertical-align:middle;max-width:100%;height:auto} *{box-sizing:border-box;margin:0;padding:0} :root{ --primary:#1e3a5f; --primary-light:#e8f0fe; --primary-dark:#0f2440; --sidebar-w:260px; --header-h:56px; --bg:#fafbfc; --bg-card:#fff; --border:#e5e7eb; --text:#1a1a1a; --text-sub:#374151; --text-muted:#6b7280; --radius:10px; --shadow:0 1px 4px rgba(0,0,0,.07); /* 등급 색상 */ --grade-E-bg:#f3f4f6; --grade-E-fg:#6b7280; --grade-D-bg:#dcfce7; --grade-D-fg:#16a34a; --grade-C-bg:#dbeafe; --grade-C-fg:#2563eb; --grade-B-bg:#f3e8ff; --grade-B-fg:#9333ea; --grade-A-bg:#fef9c3; --grade-A-fg:#ca8a04; --grade-S-bg:#ffedd5; --grade-S-fg:#ea580c; --grade-SS-bg:#fee2e2; --grade-SS-fg:#dc2626; --grade-SSS-bg:#ffd700; --grade-SSS-fg:#78350f; /* 필터 버튼 테두리 색상 */ --grade-E-border:#d1d5db; --grade-D-border:#86efac; --grade-C-border:#93c5fd; --grade-B-border:#d8b4fe; --grade-A-border:#fde047; --grade-S-border:#fdba74; --grade-SS-border:#fca5a5; --grade-SSS-border:#fbbf24; /* 모바일 브레이크포인트 */ --sidebar-bp:900px; /* 미정의 변수 보완 */ --accent:var(--primary); /* 탭·버튼 강조 — pass/memorial_shop/event_shop active 상태 */ --bg-alt:#f1f5f9; /* 보조 배경 — gacha 행 hover, grade-sep 배경 */ --gc:var(--text-muted); /* grade chip 기본값 — JS에서 data-grade별로 덮어씀 */ /* 재사용 색 변수 */ --bg-subtle:#f8f9fa; /* 섹션 배경, 테이블 헤더, 버튼 기본 배경 */ --bg-muted:#f3f4f6; /* 이미지 배경, chip 배경, 카드 배경 */ --bg-hover:#f0f4ff; /* 행 hover 배경 */ --bg-purple:#f5f3ff; /* pvequip desc 배경 */ --border-strong:#d1d5db; /* 헤더 하단 구분선 */ --border-dim:#9ca3af; /* 두 번째 헤더 구분선 */ --primary-border:#c7d2fe; /* primary 계열 테두리 */ --success:#16a34a; /* 녹색 성공/긍정 색상 */ --success-bg:#dcfce7; /* 녹색 배경 */ --success-bg-light:#f0fdf4; /* 연녹색 배경 */ --success-dark:#15803d; /* 진녹색 텍스트 */ --success-deep:#065f46; /* 깊은 녹색 */ --error:#dc2626; /* 빨간 오류/경고 */ --error-bg:#fee2e2; /* 빨간 배경 */ --error-dark:#b91c1c; /* 진빨간 */ --warning:#d97706; /* 주황 경고 */ --warning-bg:#fef3c7; /* 주황 배경 */ /* 토스트 / 검색 하이라이트 */ --toast-bg:#333; --toast-text:#fff; --search-hl-bg:#fef08a; --search-hl-text:#78350f; /* 게시판 카테고리 배지 색상 */ --cat-wiki-bg:#2a2a3a; --cat-wiki-border:#5a5a8a; --cat-wiki-text:#c0c0ef; --cat-notice-bg:#1a3a5c; --cat-notice-border:#2d6a9a; --cat-notice-text:#7ec4ef; --cat-update-bg:#1a4a2e; --cat-update-border:#2d7a4f; --cat-update-text:#7ecf9e; --cat-event-bg:#3a2a1a; --cat-event-border:#8a5a2d; --cat-event-text:#cfaa7e; --cat-default-bg:#2a2a3a; --cat-default-border:#444; --cat-default-text:#aaa; /* ── 신규 확장 변수 (Phase2-B) ───────────────────────────────────── */ /* info 계열 */ --info:#2563eb; --info-bg:#eff6ff; --info-dark:#1e40af; --info-border:#93c5fd; /* success/error/warning 테두리 + warning-dark */ --success-border:#86efac; --error-border:#fca5a5; --warning-dark:#92400e; --warning-border:#fcd34d; /* text-dim: text-muted보다 옅은 보조 텍스트 */ --text-dim:#9ca3af; /* syntax highlight (코드 블록 전용) */ --syntax-bg:#0d0d1a; --syntax-fg:#bfbfe8; --syntax-comment:#94a3b8; --syntax-keyword:#7dd3fc; --syntax-literal:#fbbf24; --syntax-function:#c084fc; --syntax-string:#16a34a; /* 랭킹 1~3위 */ --rank-gold:#b45309; --rank-silver:#64748b; --rank-bronze:#c2410c; /* 속성 색상 */ --attr-fire:#e74c3c; --attr-water:#3498db; --attr-wind:#2ecc71; --attr-dark:#9b59b6; --attr-light:#f1c40f; /* 다크 카드 (runner / 코드 블록) */ --dark-card-bg:#1a1a2e; --dark-card-border:#2d2d4a; --dark-card-text:#e0e0ff; /* 난이도 팔레트 (admin + board 공통, 10단계) */ --diff-1-bg:#1a4a2e; --diff-1-border:#2d7a4f; --diff-1-text:#7ecf9e; --diff-2-bg:#1a3a5c; --diff-2-border:#2d6a9a; --diff-2-text:#7ec4ef; --diff-3-bg:#2a3a1a; --diff-3-border:#4a6a2d; --diff-3-text:#a0cf7e; --diff-4-bg:#3a2a1a; --diff-4-border:#6a4a2d; --diff-4-text:#cfaa7e; --diff-5-bg:#3a1a1a; --diff-5-border:#6a2d2d; --diff-5-text:#ef9e9e; --diff-6-bg:#2a1a3a; --diff-6-border:#4a2d6a; --diff-6-text:#bf9ef0; --diff-7-bg:#1a2a3a; --diff-7-border:#2d4a6a; --diff-7-text:#7eaeef; --diff-8-bg:#3a3a1a; --diff-8-border:#6a6a2d; --diff-8-text:#efef7e; --diff-9-bg:#2a2a3a; --diff-9-border:#5a5a8a; --diff-9-text:#c0c0ef; --diff-10-bg:#1a1a1a; --diff-10-border:#3a3a3a; --diff-10-text:#aaaaaa; /* 픽업 배지 (gacha sim) */ --pickup:#f59e0b; --pickup-bg:var(--warning-bg); --pickup-border:#f59e0b; --pickup-text:#92400e; /* hold 타입 칩 (coll_char) */ --hold-atk-bg:#eff6ff; --hold-atk-fg:#1d4ed8; --hold-hp-bg:#f0fdf4; --hold-hp-fg:#15803d; --hold-crit-bg:#faf5ff; --hold-crit-fg:#7c3aed; --hold-boss-bg:#fff7ed; --hold-boss-fg:#c2410c; --hold-skill-bg:#eff6ff; --hold-skill-fg:#2563eb; --hold-stat-bg:#f1f5f9; --hold-stat-fg:#475569; --hold-content-bg:#fefce8; --hold-content-fg:#a16207; /* purple 계열 (sk-type-r, 스킬 해방 칩) */ --purple-bg:#fdf4ff; --purple-fg:#9333ea; } body{ font-family:'Paperlogy',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR','Noto Sans KR',sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.6; overflow-x:hidden; } a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-dark);text-decoration:underline} /* ── Header ── */ .wiki-header{ position:fixed;top:0;left:0;right:0; height:var(--header-h); background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); display:flex;align-items:center; /* 오른쪽 gutter 는 wiki-content 와 동일한 max(28px, (main-1400)/2) 공식 — main = viewport - sidebar */ padding:0 max(28px, calc((100% - var(--sidebar-w) - 1400px) / 2)) 0 20px; z-index:200; box-shadow:0 2px 12px rgba(15,52,96,.35); } .wiki-header .logo{ color:#fff;font-size:1.15em;font-weight:800; letter-spacing:-.01em; display:flex;align-items:center;gap:8px; text-decoration:none; } .wiki-header .logo span{font-size:1.2em} .wiki-header .search-box{margin-left:auto;position:relative;} .wiki-header .search-box input{ width:240px; padding:7px 12px 7px 34px; border:none;border-radius:999px; background:rgba(255,255,255,.18); color:#fff;font-size:.88em;outline:none; transition:background .2s; } .wiki-header .search-box input::placeholder{color:rgba(255,255,255,.6)} .wiki-header .search-box input:focus{background:rgba(255,255,255,.28)} .wiki-header .search-box svg{ position:absolute;left:10px;top:50%;transform:translateY(-50%); width:16px;height:16px;pointer-events:none; } .hamburger{ display:none; background:none;border:none;color:#fff;font-size:1.4em;cursor:pointer; margin-right:12px;padding:4px; } /* ── 테마 토글 버튼 ─────────────────────────────────────────────── */ .theme-toggle{ margin-left:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25); color:#fff;border-radius:8px;width:34px;height:32px;padding:0; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:background .15s; } .theme-toggle:hover{background:rgba(255,255,255,.28)} .theme-toggle svg{width:16px;height:16px} .theme-toggle .icon-moon{display:none} .theme-toggle .icon-sun{display:block} html[data-theme="dark"] .theme-toggle .icon-sun{display:none} html[data-theme="dark"] .theme-toggle .icon-moon{display:block} /* ── 관리자 버튼 / 모달 ─────────────────────────────────────────── */ .admin-btn{ margin-left:12px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25); color:#fff;border-radius:8px;padding:5px 12px;font-size:.82em;font-weight:600; cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap; transition:background .15s; } .admin-btn:hover{background:rgba(255,255,255,.28)} .admin-logged-in{background:rgba(16,185,129,.35);border-color:rgba(16,185,129,.5)} .admin-logged-in:hover{background:rgba(16,185,129,.5)} /* 로컬 테스트 전용 권한 드롭다운 */ .test-role-select{ margin-left:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3); color:#fff;border-radius:8px;padding:5px 10px;font-size:.82em;font-weight:600; cursor:pointer;font-family:inherit;outline:none; } .test-role-select:hover{background:rgba(255,255,255,.28)} .test-role-select option{background:#1e3a5f;color:#fff} .admin-modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999; display:none;align-items:center;justify-content:center; } .admin-modal-overlay.show{display:flex} .admin-modal-box{ background:var(--bg-card);border-radius:14px;padding:28px 32px; width:320px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.18); } .admin-modal-title{font-size:1.1em;font-weight:800;margin-bottom:16px;color:var(--text)} .admin-modal-error{ background:#fef2f2;color:var(--error);border:1px solid #fecaca; border-radius:8px;padding:8px 12px;font-size:.88em;margin-bottom:12px; } .admin-modal-input{ width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px; font-size:.95em;font-family:inherit;outline:none;box-sizing:border-box; } .admin-modal-input:focus{border-color:var(--primary)} .admin-modal-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end} .admin-modal-cancel{ padding:8px 18px;border:1px solid var(--border);border-radius:8px; background:var(--bg-card);color:var(--text-muted);font-size:.9em;font-weight:600; cursor:pointer;font-family:inherit; } .admin-modal-submit{ padding:8px 22px;border:none;border-radius:8px; background:var(--primary);color:#fff;font-size:.9em;font-weight:700; cursor:pointer;font-family:inherit; } .admin-modal-submit:hover{background:var(--primary-dark)} /* ── Sidebar ── */ .wiki-sidebar{ position:fixed;top:var(--header-h);left:0;bottom:0; width:var(--sidebar-w); background:var(--bg-card); border-right:1px solid var(--border); overflow-y:auto; z-index:100; padding:12px 0; } .nav-group{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--border)} .nav-group:last-child{border-bottom:none} .nav-group-title{ font-size:.92em;font-weight:700;letter-spacing:.04em; color:var(--text-muted); display:flex;align-items:center;gap:6px; padding:10px 14px 4px; } .nav-link{ display:block;padding:6px 18px 6px 26px; color:var(--text-sub);font-size:.88em; transition:background .15s,color .15s; border-left:3px solid transparent; } .nav-link:hover{background:var(--primary-light);color:var(--primary);text-decoration:none} .nav-link.active{ background:var(--primary-light);color:var(--primary); font-weight:600;border-left-color:var(--primary); } /* ── Main ── */ .wiki-main{ margin-left:var(--sidebar-w); padding-top:var(--header-h); min-height:100vh; } /* ── Breadcrumb ── */ /* PC 에서 content max-width(1400px) 기준 좌우 gutter 동적 계산 — namu.wiki 식 가운데 정��. max(28px, ...) 로 좁은 화면에서는 28px 고정, 넓은 화��에서는 여분 공간 절반을 양쪽에 둠 */ .wiki-breadcrumb{ position:sticky;top:var(--header-h);z-index:50; background:var(--bg);border-bottom:1px solid var(--border); padding:10px max(28px, calc((100% - 1400px) / 2)); font-size:.82em;color:var(--text-muted); display:flex;align-items:center;gap:6px; } .wiki-breadcrumb a{color:var(--text-muted)} .wiki-breadcrumb a:hover{color:var(--primary)} .wiki-breadcrumb span{color:var(--text)} /* ── Content ── */ .wiki-content{ padding:20px max(28px, calc((100% - 1400px) / 2)) 0; min-height:calc(100vh - var(--header-h) - 41px); display:flex;flex-direction:column; } .page-title{ font-size:1.5em;font-weight:700;color:var(--text); margin-bottom:18px;padding-bottom:12px; border-bottom:2px solid var(--primary-light); } .wiki-content-body{flex:1;width:100%} .wiki-footer{ margin-top:auto;padding:16px max(28px, calc((100% - 1400px) / 2)) 14px; border-top:2px solid var(--border); color:var(--text-muted);font-size:.78em;text-align:center; flex-shrink:0;line-height:1.6; } /* ── Mobile overlay ── */ .sidebar-overlay{ display:none;position:fixed;inset:0; background:rgba(0,0,0,.35);z-index:99; } /* ══════════════════════════════════════════════ TABLE — 통일 디자인 시스템 ══════════════════════════════════════════════ */ /* 공용 테이블 래퍼: 동적 높이, 내부 스크롤 */ .wiki-table-wrap{ width:100%;overflow-x:auto;overflow-y:auto; max-height:none; /* JS fitLongTables()가 필요 시 제한 */ -webkit-overflow-scrolling:touch; border-radius:8px;border:1px solid var(--border); margin:4px 0 16px; } /* 21행 이상: main.js 의 fitLongTables() 가 각 wrap 의 실제 offset 기준으로 footer 직전까지 채우는 max-height 를 인라인 style 로 주입. CSS 확장 규칙 없음. */ @media(max-width:900px){ /* = var(--sidebar-bp) */ table{font-size:.8em} thead th{padding:6px 8px;font-size:.85em} td{padding:6px 8px} } /* 테이블 기본 */ table{width:100%;border-collapse:collapse;font-size:.9em} .wiki-table-wrap table{width:100%} /* 헤더: sticky + 스타일 통일 */ thead th{ background:var(--bg-subtle);color:var(--text);font-weight:600; padding:8px 12px;text-align:center;vertical-align:middle; border-bottom:2px solid var(--border-strong);white-space:nowrap; position:sticky;top:0;z-index:2; box-shadow:0 2px 0 var(--border-strong); } .wiki-table-wrap thead th{background:#f1f5f9;box-shadow:0 2px 0 var(--border-dim)} /* 바디 행 */ tbody tr{background:var(--bg-card)} tbody tr:nth-child(even){background:#f9fafb} tbody tr:hover td{background:var(--bg-hover)} /* 셀 기본 */ td{ padding:8px 12px;border-bottom:1px solid var(--border); vertical-align:middle;text-align:center;color:var(--text); } td:last-child,th:last-child{border-right:none} /* 2행 헤더 sticky */ thead tr:nth-child(2) th{position:sticky;top:35px;z-index:2;border-bottom:2px solid var(--border-dim);box-shadow:0 2px 0 var(--border-dim)} /* ── 테이블 유틸 클래스 ───────────────────────── */ .td-left,.th-left{text-align:left!important} .td-right,.th-right{text-align:right!important} .td-bold{font-weight:700} .td-muted{color:var(--text-muted)} .td-nowrap{white-space:nowrap} .td-sm{font-size:.85em} /* 구 호환: lv-table */ .lv-table{max-height:500px;overflow-y:auto;border-radius:6px;border:1px solid var(--border)} .lv-table table{font-size:.85em;margin:0;border-radius:0} .lv-table thead th{padding:6px 10px;font-size:.88em;background:var(--bg-subtle)} .lv-table tbody td{padding:5px 10px} /* .table-scroll-wrap 은 .wiki-table-wrap 으로 통일되어 제거됨 (2026-04-12) */ /* Cell image */ .cell-img{ width:40px;height:40px; object-fit:contain; border-radius:6px;background:var(--bg-muted); display:block; } .cell-img-lg{ width:48px;height:48px; object-fit:contain; border-radius:6px;background:var(--bg-muted); display:block; } /* Dedicated narrow image column */ td.td-img{ width:48px; padding:6px 4px 6px 10px; } td.td-img-sm{ width:40px; padding:6px 4px 6px 10px; } /* Name cell: left-aligned */ td.td-name{ text-align:left; } /* ── Grade badges ── */ .grade{ padding:2px 8px;border-radius:4px; font-weight:700;font-size:.78em; display:inline-block;white-space:nowrap; } .grade-sss{background:var(--grade-SSS-bg);color:var(--grade-SSS-fg)} .grade-ss {background:var(--grade-SS-bg);color:var(--grade-SS-fg)} .grade-s {background:var(--grade-S-bg);color:var(--grade-S-fg)} .grade-a {background:var(--grade-A-bg);color:var(--grade-A-fg)} .grade-b {background:var(--grade-B-bg);color:var(--grade-B-fg)} .grade-c {background:var(--grade-C-bg);color:var(--grade-C-fg)} .grade-d {background:var(--grade-D-bg);color:var(--grade-D-fg)} .grade-e {background:var(--grade-E-bg);color:var(--grade-E-fg)} /* ── Star rating ── */ .star-badge{ display:inline-block;padding:2px 8px;border-radius:4px; font-size:.8em;font-weight:700; background:var(--bg-muted);color:var(--text-sub); border:1px solid var(--border-strong); } .star-1{background:var(--bg-muted);color:var(--text-muted);border-color:var(--border-strong)} .star-2{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe} .star-3{background:#dcfce7;color:#15803d;border-color:#bbf7d0} .star-4{background:#f3e8ff;color:#7e22ce;border-color:#e9d5ff} .star-5{background:#fef3c7;color:#92400e;border-color:#fde68a} .star-6{background:#ffedd5;color:#c2410c;border-color:#fed7aa} .star-7{background:#fee2e2;color:#b91c1c;border-color:#fecaca} /* Monster grade badges */ .mon-badge{ display:inline-block;padding:2px 8px;border-radius:4px; font-size:.78em;font-weight:700; } .mon-일반{background:var(--bg-muted);color:var(--text-muted)} .mon-고급{background:var(--grade-D-bg);color:var(--success-dark)} .mon-희귀{background:var(--grade-C-bg);color:#1d4ed8} .mon-영웅{background:var(--grade-B-bg);color:#7e22ce} .mon-전설{background:var(--grade-S-bg);color:#c2410c} .mon-신화{background:var(--error-bg);color:var(--error-dark)} /* ── Filter bar (공통) ── */ .grade-filter,.cat-filter{ display:flex;flex-wrap:wrap;gap:8px; margin-bottom:16px;align-items:center; } .grade-btn,.cat-btn,.f-btn{ padding:5px 14px;border-radius:999px; border:1px solid var(--border); background:var(--bg-card);color:var(--text-sub); font-size:.85em;font-weight:600;cursor:pointer; font-family:inherit; transition:all .15s; } .grade-btn:hover,.cat-btn:hover,.f-btn:hover{border-color:var(--primary);color:var(--primary)} .grade-btn.active,.cat-btn.active,.f-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .grade-count{font-size:.82em;color:var(--text-muted);margin-left:4px} /* 등급 필터 버튼 색상 */ .grade-btn-sss{border-color:var(--grade-SSS-border);color:var(--grade-SSS-fg)} .grade-btn-ss {border-color:var(--grade-SS-border);color:var(--grade-SS-fg)} .grade-btn-s {border-color:var(--grade-S-border);color:var(--grade-S-fg)} .grade-btn-a {border-color:var(--grade-A-border);color:var(--grade-A-fg)} .grade-btn-b {border-color:var(--grade-B-border);color:var(--grade-B-fg)} .grade-btn-c {border-color:var(--grade-C-border);color:var(--grade-C-fg)} .grade-btn-d {border-color:var(--grade-D-border);color:var(--grade-D-fg)} .grade-btn-e {border-color:var(--grade-E-border);color:var(--grade-E-fg)} .grade-btn-sss.active{background:var(--grade-SSS-fg);color:#fff;border-color:var(--grade-SSS-fg)} .grade-btn-ss.active {background:var(--grade-SS-fg);color:#fff;border-color:var(--grade-SS-fg)} .grade-btn-s.active {background:var(--grade-S-fg);color:#fff;border-color:var(--grade-S-fg)} .grade-btn-a.active {background:var(--grade-A-fg);color:#fff;border-color:var(--grade-A-fg)} .grade-btn-b.active {background:var(--grade-B-fg);color:#fff;border-color:var(--grade-B-fg)} .grade-btn-c.active {background:var(--grade-C-fg);color:#fff;border-color:var(--grade-C-fg)} .grade-btn-d.active {background:var(--grade-D-fg);color:#fff;border-color:var(--grade-D-fg)} .grade-btn-e.active {background:var(--grade-E-fg);color:#fff;border-color:var(--grade-E-fg)} /* ── Cards (manastone, talisman, formation, monsters, voidorb, essence) ── */ .card-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px} .card{ background:#fff;border:1px solid var(--border); border-radius:10px;padding:14px; flex:1 1 320px;max-width:500px; box-shadow:var(--shadow); } .card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px} .card-header img{flex-shrink:0} .card-title{font-size:1em;font-weight:700;color:var(--text)} .card-sub{font-size:.82em;color:var(--text-muted);margin-top:2px} .card-effects{margin:8px 0;display:flex;flex-wrap:wrap;gap:4px} .card-effects span{ display:inline-block;background:var(--primary-light); color:var(--primary);border:1px solid var(--primary-border); padding:2px 8px;border-radius:4px;font-size:.82em; } .card-effects .bonus{background:var(--warning-bg);color:#92400e;border-color:#fde68a} /* ── 공용 탭 (pill 스타일, 전역 통일 2026-04-12) ────────────────── 모든 페이지의 탭 클래스를 동일한 pill 디자인으로 통일: .wiki-tab-btn / .char-detail-tab / .growth-tab / .dn-tab-btn / .mech-tab-btn .attr-tab / .gacha-tab / .chat-tab / .mem-tab / .equip-main-tab / .equip-sub-tab .cd-dir-tab */ .wiki-tabs, .char-detail-tabs, .growth-tabs, .dn-tabs, .mech-tabs, .attr-tabs, .gacha-tabs, .chat-tabs, .mem-tabs, .equip-main-tabs, .equip-sub-tabs, .cd-dir-tabs, .dn-sub-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; border-bottom:none; padding-bottom:0; } .wiki-tab-btn, .char-detail-tab, .growth-tab, .dn-tab-btn, .mech-tab-btn, .attr-tab, .gacha-tab, .chat-tab, .mem-tab, .equip-main-tab, .equip-sub-tab, .cd-dir-tab { padding:8px 16px; border:1px solid var(--border); border-radius:20px; background:var(--bg-card); color:var(--text-sub); font-size:.9em; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, border-color .15s; white-space:nowrap; line-height:1.2; /* 기존 클래스의 잔존 property 초기화 */ margin-bottom:0; box-shadow:none; position:static; bottom:auto; } .wiki-tab-btn:hover, .char-detail-tab:hover, .growth-tab:hover, .dn-tab-btn:hover, .mech-tab-btn:hover, .attr-tab:hover, .gacha-tab:hover, .chat-tab:hover, .mem-tab:hover, .equip-main-tab:hover, .equip-sub-tab:hover, .cd-dir-tab:hover { border-color:var(--primary); color:var(--primary); background:var(--bg-card); } .wiki-tab-btn.active, .char-detail-tab.active, .growth-tab.active, .dn-tab-btn.active, .mech-tab-btn.active, .attr-tab.active, .gacha-tab.active, .chat-tab.active, .mem-tab.active, .equip-main-tab.active, .equip-sub-tab.active, .cd-dir-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); } .wiki-tab-panel, .char-detail-panel, .growth-tab-panel, .dn-tab-panel, .mech-section, .attr-tab-panel, .gacha-tab-panel, .chat-tab-panel, .mem-tab-panel { display:none; } .wiki-tab-panel.active, .char-detail-panel.active, .growth-tab-panel.active, .dn-tab-panel.active, .mech-section.active, .attr-tab-panel.active, .gacha-tab-panel.active, .chat-tab-panel.active, .mem-tab-panel.active { display:block; } /* ── 공용 필터 칩 (pill) — 2026-04-12 통일 ───────────────────── .chip / .lv-badge / .dn-range-badge / .cf-badge / .sim-pool-btn 전부 같은 pill 디자인 */ .lv-badges, .chip-group{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px} .chip, .lv-badge, .dn-range-badge, .cf-badge { padding:4px 12px;border-radius:999px; border:1px solid var(--border);background:var(--bg-card); font-size:.82em;font-weight:600;color:var(--text-sub); cursor:pointer;transition:all .12s;white-space:nowrap;font-family:inherit; line-height:1.3; } .chip:hover, .lv-badge:hover, .dn-range-badge:hover, .cf-badge:hover { border-color:var(--primary);color:var(--primary); } .chip.active, .lv-badge.active, .dn-range-badge.active, .cf-badge.active { background:var(--primary);color:#fff;border-color:var(--primary); } /* pickup modifier — amber 팔레트 (sim-pool-btn.pickup, badge-pickup과 동일) */ .chip.pickup { border-color:var(--pickup-border); color:var(--pickup-text); } .chip.pickup:hover { border-color:var(--pickup); color:var(--pickup-text); } .chip.pickup.active { background:var(--pickup); color:#fff; border-color:var(--pickup); } /* ── 공용 CTA 액션 버튼 ──────────────────────────────────────── .action-btn — primary 실행 버튼 표준. 모든 페이지에서 사용 권장 페이지별 alias 클래스(cc-btn, sw-calc-btn, sim-btn, ps-btn-go)도 동일 스타일 공유 */ .action-btn, .cc-btn, .sw-calc-btn, .sim-btn, .ps-btn-go { padding:7px 18px; border:none; border-radius:8px; font-size:.9em; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .12s, background .12s; background:var(--primary); color:#fff; line-height:1.3; } .action-btn:hover, .cc-btn:hover, .sw-calc-btn:hover, .sim-btn:hover, .ps-btn-go:hover { filter:brightness(1.12); } .action-btn:disabled, .cc-btn:disabled, .sw-calc-btn:disabled, .sim-btn:disabled, .ps-btn-go:disabled { opacity:.4; cursor:not-allowed; filter:none; } .action-btn.danger { background:var(--error); } .action-btn.danger:hover { background:var(--error-dark); filter:none; } .action-btn.success { background:var(--success); } .action-btn.warning { background:var(--warning); } .action-btn.ghost { background:var(--bg); border:1px solid var(--border); color:var(--text-sub); } .action-btn.ghost:hover { border-color:var(--primary); color:var(--primary); filter:none; } details{margin-top:8px} details summary{ cursor:pointer;color:var(--primary);font-size:.85em; padding:4px 0;user-select:none; list-style:none; } details summary::-webkit-details-marker{display:none} details summary::before{content:'\25B6 ';font-size:.75em} details[open] summary::before{content:'\25BC '} details summary:hover{color:var(--primary-dark)} .lv-table{max-height:380px;overflow-y:auto;margin-top:6px;border-radius:6px;border:1px solid var(--border)} .lv-table table{font-size:.82em;margin:0;border-radius:0} .lv-table thead th{padding:6px 10px;font-size:.85em;background:var(--bg-subtle)} .lv-table tbody td{padding:5px 10px;color:var(--text)} .lv-table tbody tr:hover td{background:var(--bg-hover)} /* Formation */ .formation-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:10px;padding:18px;margin-bottom:16px; box-shadow:var(--shadow); } .f-header{display:flex;align-items:center;gap:16px;margin-bottom:14px} .f-section{margin-top:12px} .f-section-title{font-size:.9em;font-weight:600;color:var(--success);margin-bottom:6px} .f-opts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .f-opt{ background:var(--success-bg-light);border:1px solid #bbf7d0; color:var(--success-dark);padding:3px 10px;border-radius:4px;font-size:.84em; } .f-opt-join{background:var(--bg-subtle);border-color:var(--border);color:var(--text-sub)} /* Monster grid */ .monster-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;margin-top:12px; } .m-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:8px;padding:12px;text-align:center; box-shadow:var(--shadow); } .m-card img{width:64px;height:64px;object-fit:contain;border-radius:8px; background:var(--bg-muted);display:block;margin:0 auto 6px} .m-name{font-weight:700;color:var(--text);font-size:.9em;margin-bottom:6px} .m-effects{font-size:.8em;text-align:left;margin-top:8px} .m-effects div{padding:3px 0;border-bottom:1px solid var(--bg-muted);color:var(--text-sub)} .m-effects div:last-child{border-bottom:none} .m-bonus{color:var(--success);font-weight:600} /* VoidOrb grid */ .vo-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px} .vo-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:8px;width:300px;padding:12px; box-shadow:var(--shadow); } .vo-card summary{ cursor:pointer;list-style:none; display:flex;align-items:center;gap:8px; font-size:.92em;padding:0; } .vo-card summary::-webkit-details-marker{display:none} .vo-title{font-weight:700;color:var(--text)} /* Essence cards */ .ess-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px} .ess-card{ background:var(--bg-card);border:1px solid var(--border); border-radius:8px;width:420px;padding:14px; box-shadow:var(--shadow); } .ess-card > summary{ cursor:pointer;list-style:none; display:flex;align-items:center;gap:10px; font-size:1em; } .ess-card > summary::-webkit-details-marker{display:none} .ess-lv-table{width:100%;font-size:.8em;margin-top:6px;border-collapse:collapse; max-height:280px;display:block;overflow-y:auto} .ess-lv-table th{background:var(--bg-subtle);color:var(--text-sub);padding:5px 8px;text-align:right; position:sticky;top:0;border-bottom:1px solid var(--border)} .ess-lv-table td{padding:4px 8px;text-align:right;border-bottom:1px solid var(--bg-muted);color:var(--text)} .ess-lv-table tr:hover td{background:var(--bg-hover)} /* Section headers (items, equip, shop categories) */ .section-header{ font-size:1em;font-weight:700;color:var(--text); margin:24px 0 10px;padding:8px 12px; background:var(--bg-subtle);border-left:3px solid var(--primary); border-radius:0 6px 6px 0; } /* Diff page */ .diff-env-badge{ display:inline-block;border-radius:4px;padding:1px 8px; font-size:.78em;font-weight:700;color:#fff;margin:0 4px; } .diff-env-Live{background:var(--success)} .diff-env-Dev{background:#2563eb} .diff-env-QA{background:var(--warning)} .diff-env-Review{background:var(--text-muted)} .diff-max{color:var(--success);font-weight:700} .diff-min{color:var(--error);font-weight:600} /* ── Modal ── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;justify-content:center;align-items:center;padding:20px} .modal-overlay.show{display:flex} .modal{background:var(--bg-card);border-radius:12px;width:100%;max-width:700px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:modalIn .2s ease-out} @keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0} .modal-head img{width:48px;height:48px;object-fit:contain;border-radius:6px;background:var(--bg-muted)} .modal-head .modal-title{font-size:1.05em;font-weight:700;color:var(--text)} .modal-head .modal-sub{font-size:.82em;color:var(--text-muted);margin-top:2px} .modal-head .modal-close{margin-left:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:var(--bg-muted);color:var(--text-muted);font-size:1.1em;cursor:pointer;flex-shrink:0} .modal-head .modal-close:hover{background:var(--border);color:var(--text)} .modal-body{overflow-y:auto;padding:16px 20px;flex:1} .modal-body .lv-table{max-height:none;border:none;border-radius:0} .modal-body table{margin:0 0 16px} .modal-section-title{font-size:.9em;font-weight:600;color:var(--primary);margin:0 0 8px;padding:0 0 4px;border-bottom:1px solid var(--primary-light)} .detail-btn{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--text-sub);font-size:.82em;cursor:pointer;transition:all .15s;font-family:inherit} .detail-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary-border)} /* ── Attack type badges ── */ .atk-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:.82em;font-weight:600;white-space:nowrap} .atk-melee{background:var(--error-bg);color:var(--error-dark)} .atk-ranged{background:var(--grade-C-bg);color:#1d4ed8} .atk-magic{background:#ede9fe;color:#7c3aed} /* ── Character modal styles ── */ .char-modal-info{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:4px} .char-stat-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-subtle);border-radius:8px} .char-stat-label{font-size:.8em;color:var(--text-muted);min-width:70px;flex-shrink:0} .char-skill-card{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px} .skill-type-badge{display:inline-block;font-size:.74em;padding:1px 7px;border-radius:10px;font-weight:600;margin-top:4px} .skill-normal{background:var(--success-bg);color:var(--success-dark)} .skill-release{background:var(--warning-bg);color:#b45309} .char-row:hover td{background:#f5f3ff} /* ── Character growth page ── */ .char-growth-select-wrap{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .char-growth-select{padding:7px 12px;border-radius:8px;border:1px solid var(--border);font-size:.95em;font-family:inherit;background:var(--bg-card);color:var(--text);min-width:200px} .char-growth-header{display:flex;align-items:center;gap:14px;padding:12px 0 16px;border-bottom:1px solid var(--border);margin-bottom:16px} /* .growth-tabs / .growth-tab 는 style.css 상단 공통 pill 통일 그룹에서 처리됨 */ .grade-sep td{border-top:2px solid var(--border);position:sticky;left:0;z-index:1;background:var(--bg-alt)!important;vertical-align:middle} .skill-desc-box{background:var(--bg-subtle);border-radius:8px;padding:10px 14px;font-size:.88em;color:var(--text);line-height:1.6;margin-bottom:4px;white-space:pre-wrap} .free-badge{display:inline-block;font-size:.72em;padding:1px 6px;border-radius:8px;font-weight:700;background:var(--success-bg);color:var(--success-deep);margin-left:6px;vertical-align:middle} .skill-hold-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82em;color:var(--text-muted);margin:6px 0;padding:6px 10px;background:var(--primary-light);border-radius:6px} .skill-hold-tag{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.95em;color:var(--text);white-space:nowrap} .th-hold{color:var(--success-dark)!important;background:var(--success-bg-light)!important} .td-hold{color:var(--success-deep);font-weight:600} /* ── Responsive ── */ @media(max-width:900px){ /* = var(--sidebar-bp) */ .wiki-sidebar{transform:translateX(-100%);transition:transform .25s} .wiki-sidebar.open{transform:translateX(0)} .wiki-main{margin-left:0} .hamburger{display:block} .sidebar-overlay.show{display:block} .wiki-header .search-box input{width:160px} .monster-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .ess-card{width:100%} .vo-card{width:100%} } @media(max-width:768px){ body{font-size:13px} .wiki-content{padding:10px 10px 40px} .wiki-breadcrumb{padding:6px 10px;font-size:.76em;gap:4px} .card{flex:1 1 100%;max-width:100%} .wiki-header .search-box{display:none} .wiki-header .theme-toggle{margin-left:auto} .page-title{font-size:1.2em;margin-bottom:12px;padding-bottom:8px} /* 테이블 더 압축 */ table{font-size:.78em} thead th{padding:5px 6px;font-size:.82em} td{padding:5px 6px} .wiki-table-wrap{max-height:none} /* 필터 버튼 */ .grade-filter{gap:4px;margin-bottom:8px} .grade-btn{padding:3px 8px;font-size:.76em} /* 등급/뱃지 */ .grade{font-size:.72em;padding:1px 5px} .atk-badge{font-size:.72em;padding:1px 5px} /* 탭 — 모바일에서도 공통 pill 그대로. 별도 override 없음 */ /* 캐릭터 상세 헤더 */ .char-detail-header{gap:10px;padding-bottom:14px;margin-bottom:14px} .char-detail-img{width:60px;height:60px} /* 캐릭터 카드 — 모바일 칩 모드는 coll_char.php 인라인