/* ── 데스크탑 전용 앱 ────────────────────────────────────────────────────── * 반응형(모바일) 레이아웃은 지원하지 않는다. 뷰포트 폭 기반 @media * (max-width/min-width) 브레이크포인트를 새로 추가하지 말 것. * 모션 접근성용 @media (prefers-reduced-motion) 은 허용한다. * 화면 최소 폭은 --app-min-w 이며, 그보다 좁은 뷰포트에서는 레이아웃을 * 압축하지 않고 가로 스크롤을 노출한다. * * 🔴 **예외는 위키 하나다**(2026-09-06). 위키는 로그인 없이 읽는 공개 문서 사이트이고 구글은 * 모바일 우선 색인이라, 가로 스크롤이 곧 검색 노출 손해가 된다. `wiki-layout.php` 가 에 * `wiki-html` 을 붙이고 `wiki.css` 가 **그 스코프에서만** min-width 를 0 으로 되돌린다. * 게임·어드민은 여기 규약 그대로다 — 예외를 넓히지 말 것. */ @font-face { font-family: "Pretendard"; src: url("../../assets/fonts/pretendard/Pretendard-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("../../assets/fonts/pretendard/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("../../assets/fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("../../assets/fonts/pretendard/Pretendard-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --bg-0: #070910; --bg-1: #1a2030; --bg-2: #242c40; --border: #3a4358; --text-0: #f4f6fb; --text-1: #c6ccd9; --text-2: #8e96ab; --accent: #d9a441; --accent-hi: #f0c06a; --danger: #c04a4a; /* rgba() 가변 알파용 RGB 트리플 + 반복 색 토큰. */ --accent-rgb: 217, 164, 65; --accent-hi-rgb: 240, 192, 106; --danger-rgb: 192, 74, 74; --fx-attn-dur: 1.6s; /* 주목 글로우 펄스 주기 — reduced-motion 에서 0s 로 멈춤 */ --hover-bg: #232a3d; --hover-bg-2: #2a3348; --backdrop: rgba(0, 0, 0, 0.65); --overlay-backdrop: rgba(4, 6, 12, 0.72); --danger-soft: #ffb3b3; --success-soft: #b5e6c4; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --header-h: 3.5rem; /* 게임 화면 최소 폭 — 뷰포트가 이보다 좁으면 문서에 가로 스크롤바가 생긴다. 전체화면 오버레이(position:fixed)는 문서 스크롤을 따라오지 않으므로 각자 overflow:auto 로 자체 가로 스크롤을 갖는다. */ --app-min-w: 1280px; font-synthesis: none; } /* ── 아이템/장비 등급 색 — 단일 출처 ────────────────────────────────────── * data-rarity / data-grade 가 붙은 요소에서 --rarity-color(텍스트)·--rarity-edge(보더)를 * 정의한다. 자식 이름 요소는 `color: var(--rarity-color)` 한 줄로 색을 받는다(cascade). * 10단계: 유니크 > 고대 > 유물 > 전설 > 영웅 > 희귀 > 고급 > 일반 > 재료 > 잡템. * data-grade 블록은 뒤에 두어 동일 요소에서 등급(세트=녹색)이 rarity 색을 덮는다. */ [data-rarity="junk"] { --rarity-color: #9aa0ad; --rarity-edge: #7a7e89; } [data-rarity="common"] { --rarity-color: #e6e8ef; --rarity-edge: #cfd3df; } [data-rarity="material"] { --rarity-color: #9cd0c8; --rarity-edge: #7ab8b0; } [data-rarity="uncommon"] { --rarity-color: #8cc89a; --rarity-edge: #5d9b6a; } [data-rarity="rare"] { --rarity-color: #93b7e8; --rarity-edge: #5b88c8; } [data-rarity="epic"] { --rarity-color: #cc97e3; --rarity-edge: #a35cc7; } [data-rarity="legendary"] { --rarity-color: var(--accent-hi); --rarity-edge: #d9a441; } [data-rarity="artifact"] { --rarity-color: #f0dca8; --rarity-edge: #e6cc80; } [data-rarity="ancient"] { --rarity-color: #f0a64a; --rarity-edge: #e68a00; } [data-rarity="unique"] { --rarity-color: #ffb066; --rarity-edge: #ff8000; } [data-grade="set"] { --rarity-color: #34e0c0; --rarity-edge: #1fb89c; } /* 잔혼(영혼군단 전용 재료) 전용색 — 등급색과 무관하게 한눈에 구분. * data-grade 와 같은 후순위 블록이라 동일 요소에서 rarity/grade 색을 덮는다(source-order). * 8속성 재료(가루/결정/보석)는 연금·강화 범용 재료라 전용색 없이 등급색을 그대로 쓴다. */ [data-family="janhon"] { --rarity-color: #e87fb5; --rarity-edge: #d65a9a; } html { font-size: clamp(15px, 1.7vh, 27px); } html, body { margin: 0; padding: 0; min-width: var(--app-min-w); background: var(--bg-0); color: var(--text-0); font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } button { font-family: inherit; font-size: 1rem; color: inherit; background: transparent; border: 0; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.5; } /* ── 전역 스크롤바 — 황금 톤으로 통일. * 더 구체적인 컴포넌트 셀렉터(예: .exp-combat-log, .exp-combat-log-wrap)가 있으면 그쪽이 우선한다. */ * { scrollbar-width: thin; scrollbar-color: rgba(217, 164, 65, 0.45) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; margin: 0.4rem 0; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(240, 192, 106, 0.5), rgba(217, 164, 65, 0.35)); border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.3); } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(240, 192, 106, 0.78), rgba(217, 164, 65, 0.55)); } *::-webkit-scrollbar-corner { background: transparent; } /* ── 주목(attention) 글로우 펄스 — 단일 출처 ────────────────────────────── * 알림·NEW·수령 가능 배지에 일관된 "눈에 띄는" 박동 효과를 준다. 모션은 통일하고 * 색만 --fx-attn-rgb 로 바꾼다(기본 금색=보상/수령, 빨강=NEW/미확인 카운트). * tokens.css 는 번들 최상단·전 페이지 로드라 keyframe·변수가 페이지별 CSS 에서도 참조된다. * 사용: 셀렉터에 `animation: fx-attn-pulse var(--fx-attn-dur) ease-in-out infinite;` * (또는 .fx-attn 클래스). 빨강은 셀렉터에서 --fx-attn-rgb: var(--danger-rgb); 만 셋. * --fx-attn-dur 를 변수로 둬 reduced-motion 에서 한 번에 모션을 멈춘다(전역 가드). */ @keyframes fx-attn-pulse { 0%, 100% { box-shadow: 0 0 0.15rem 0 rgba(var(--fx-attn-rgb, var(--accent-hi-rgb)), 0.45); filter: brightness(1); } 50% { box-shadow: 0 0 0.7rem 0.12rem rgba(var(--fx-attn-rgb, var(--accent-hi-rgb)), 0.9); filter: brightness(1.18); } } /* ⚠ HTML 소비처는 현재 0 이지만 **지우지 말 것** — 토큰 계층의 공개 API 다. 같은 이름의 @keyframes 를 9개 CSS 파일의 20여 셀렉터가 쓰고, 아래 reduced-motion 가드 목록의 첫 항목이기도 하다. 새 주목 요소는 이 클래스나 위 animation 중 택1. */ .fx-attn { animation: fx-attn-pulse var(--fx-attn-dur) ease-in-out infinite; } /* reduced-motion: 주목 펄스를 쓰는 전 셀렉터를 한 곳에서 끈다(단일 가드). * 셀렉터가 다른 파일에 정의돼 있어도 규칙은 전역 적용된다. 새 주목 요소 추가 시 여기에도 등록. */ @media (prefers-reduced-motion: reduce) { .fx-attn, .lvms-badge, .item-cell__new-dot, .mail-card__new-dot, .stats-head__points.is-active, .hero-slots__talent-btn.has-points, .hero-slots__pt-badge, .codex-cell--item.is-claimable, .codex-ms.is-ready .codex-claim-btn--sm, .gq-claim:not(:disabled), .goal__claim:not(:disabled), .menu-tab__badge, .equip-slot-row__new, .equip-slot__new, .mypage-widget__badge, /* 제작 연출(연금 양조 · 대장간 · 세공대). 진행 바는 craft-fx.js 가 transition 없이 즉시 채운다. */ .crf-brew__bubble, .acf-forge__anvil::after, .acf-forge__spark, .acf-forge__gem { animation: none !important; } /* !important: tokens.css 가 번들 최상단이라 후순위 파일 룰을 이겨야 함(a11y 가드) */ } /* ── 배지형 컴포넌트 줄바꿈 금지 ────────────────────────────────────── * 배지·칩·태그·필(pill)은 한 줄짜리 라벨이 전제라 줄바꿈되면 높이가 튀고 * 그리드/행 정렬이 무너진다. 셀렉터가 다른 파일에 있어도 규칙은 전역 적용되므로 * 여기 한 곳에서 관리한다. 새 배지형 컴포넌트를 만들면 여기에도 등록. * 후순위 파일이 white-space 를 재선언하지 않는 한 이 규칙이 유지된다. */ .lvms-badge, .hero-slots__pt-badge, .mypage-widget__badge, .major-log-row__badge, .menu-tab__badge, .item-cell__badge, .item-cell__new-badge, .item-tooltip__godroll-badge, .dmg-pop__crit-tag, .section-head__tag, .class-card__tag, .enh-tag, .spire-floor-tag, .union-points-chip, .union-merit-chip, .union-ranks__you, .union-ranks__label, .cd-hero__rank, .gq-tier-badge, .gq-card__metric, .gq-card__chip, .gq-rank__badge, .shop-modal__chip, .cd-chip, .cd-grow-chip, .acf-chip, .crf-shop-card__badge, .crf-qty-chip, .crf-filter-chip, .codex-chip, .souls-resonance__chip, .souls-resonance__state, .system-hint__chip, .resonance__chip, .res-surge-banner__chip, .status-badge, .combat-actor__reaction-chip, .exp-status-badge, .exp-school-chip, .exp-step-chip, .exp-city-group__stage, .exp-region-card__dungeon-badge, .exp-city-cleared-badge, .gth-city-group__stage, .gth-region-card__rare-badge, .gth-step-chip, .gth-gated__tag, .gth-miss__tag, .gth-running-counts__chip, .union-supply-card__badge, .gdm-stat__armory, .gdm-resist__chip, .outpost-guard-card__resist { white-space: nowrap; }