/* 분신 용사 창 층 — 키트 목업 규약(RT-WINDOWS). 전 ui_windows.css(RB-22 · 마이 티니 창 키트 · EFZ 구조)와 battle.js drawTalk(캔버스 대화 창)을 옮긴 것. 목업 페이지(ui/mockup.html) · 게임(index.html #ui) · Unity(목업 엔진)가 같은 이 파일을 쓴다. 모양은 전 창 그대로이고 목업 엔진이 그릴 수 있게 바꾼 곳만 있다: - 무대 = HUD 와 같은 GUI(화면 높이 450, 목업 800x450). 게임은 .win-in 을 zoom(--u = 캔버스 높이/450)으로만 키운다(폰 가로 375 에서 창이 HUD 와 같이 .83 배). 창 크기는 무대 800x450 에서의 전 값(min(…, 100%) · 높이 − 20)을 px 로 적었다: 더 넓은 화면에서도 창은 가운데 같은 크기, 어두운 막만 가로 전체(.shade = edge-fill). - JS 가 재던 물품 창 폭(--eq · --dt · --cell)도 800 무대 값 px(218 · 247.5 · 40). - aria 상태 → 키트 상태 클래스: 고름·켬 = .on, 못 누름 = .off, 만료 = .bad. 숨김은 [hidden] 한 줄. - 아이콘 색(흰 메뉴 아이콘 · 빈 칸 그림)은 가짜 요소 ::after/::before mask(엔진이 가짜 요소 mask 를 그린다), 그림 = 칸 클래스마다 url. - 글꼴 = 공장 UI 글꼴(GFUIFont = NotoSansKR-SemiBold, hud.css · Unity 와 같은 파일). 닫기 ✕ 는 글자 대신 두 막대. - 대화 창(전 drawTalk): 캔버스 식의 GUI 값(판 높이 clamp(450 × .34, 144, 198) × .78 등)을 풀어 px 로. 초상은 게임이 그리는 칸(그림 키 talk-portrait = 토순이 층 리그). */ #ui { position: fixed; z-index: 5; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; --ink: #5e3d22; --ink-soft: #8d6c47; --ui-font: "GFUIFont"; font-family: var(--ui-font); color: var(--ink); } #ui * { box-sizing: border-box; margin: 0; scrollbar-width: none; } /* 스크롤 막대 없음(Unity 목업 엔진과 같다 — 손가락 끌기 · 휠로 스크롤) */ #ui *::-webkit-scrollbar { display: none; } #ui [hidden] { display: none !important; } #ui .win-in { position: absolute; left: 0; top: 0; width: var(--hw, 800px); height: 450px; zoom: var(--u, 1); } #ui button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* 팝업(마이 티니 .dim/.popup) — 어두운 막(.shade)은 형제로 두어 넓은 화면에서만 가로로 늘인다 */ #ui .dim { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 10px; opacity: 0; pointer-events: none; transition: opacity .18s ease; } #ui .dim.open { opacity: 1; pointer-events: auto; } /* 닫힌 창(opacity 0) 안은 누름도 받지 않는다 — 자식이 pointer-events: auto 를 따로 주면(지도 .ct-spot · .ct-foot) 닫힌 뒤에도 안 보이는 칸이 판 누름을 가로챈다 */ #ui .dim:not(.open) * { pointer-events: none !important; } /* 닫힌 창 렌더 쉬기(Note20 실측): 닫힌 창(.dim 투명 0)도 화면 밖에서 무한 연출(꾸밈 칸 cos-breathe box-shadow · inv-sheen left · 순위 rk-glow text-shadow · 변신 mf-go-glow …)을 매 프레임 스타일 계산 · 칠하기 해 주 스레드 (program) 이 약 320 → 210 ms/s. 닫힘 페이드(.18s)가 끝난 뒤에만 content-visibility: hidden(안 보이는 판의 속만 건너뜀 — 연출 시계 · 스크롤 · 측정은 그대로). 열 때는 바로 visible(전환은 열린 뒤 스타일 기준). allow-discrete 를 모르는 브라우저는 규칙 전체를 뺀다(@supports) · ?dimrest=0 = 끔(windows-js 01-store 가 html.dimrest-off) */ @supports (transition-behavior: allow-discrete) { html:not(.dimrest-off) #ui .dim:not(.open) { content-visibility: hidden; transition: opacity .18s ease, content-visibility 0s linear .18s allow-discrete; } } #ui .shade { position: absolute; left: 0; top: 0; width: 100%; height: 450px; background: #1e2a1266; } #ui .popup { position: relative; border: 24px solid transparent; border-image: url(../assets/ui/panel.webp) 72 fill / 24px stretch; /* EFZ 창 테가 얇다 */ filter: drop-shadow(0 10px 18px #0006); /* 여는 연출(팝)은 ui_fx.css */ } #ui .popup-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; border-bottom: 2px solid #d6bd92; margin-bottom: 10px; } #ui .popup-head h2 { font-size: 17px; font-weight: 800; } /* EFZ 창 제목 font_big 21(장체) ≈ 이 글꼴 17 */ #ui .close { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; /* EFZ 닫기 32 */ background: radial-gradient(circle at 35% 30%, #e59a7a, #c0603f 70%); border: 3px solid #8e3f25; box-shadow: inset 0 2px #f6c3ad, 0 2px 0 #6f2f1b; } #ui .close::before, #ui .close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 3px; margin: -1.5px 0 0 -6.5px; border-radius: 2px; background: #fff7ea; transform: rotate(45deg); } #ui .close::after { transform: rotate(-45deg); } /* 전체화면 창: EFZ scr_ui_window_fit_screen(창 = GUI 화면 전체) + scr_ui_title(맨 위 줄 왼쪽 ‹ 다음 제목, 그 자리를 누르면 닫힘). 판이 무대 전체(폭 --hw × 450)를 덮는다. 판 = 도깨비의 세계 전체화면 창(설정 · 도술 · 멤버십) 결 — 뒤 장면이 비치는 어두운 반투명 판 + 맨 위 어두운 머리 띠(‹ · 아이콘 · 흰 제목 · 재화). 탭 = 어두운 알약 줄 + 고른 탭만 베이지 알약 · 단추 = 짧은 둥근 알약(기본 베이지 · gold = 청록 결정 · danger = 적갈 · plain = 회색 반투명), 폭은 글자만큼 — 칸 폭으로 늘이지 않는다. 글자색은 --ink 를 밝게 바꿔 창 안 모든 조각이 따라온다. 닫기 = 머리 띠 맨 왼쪽 ‹(.close.back — 바인딩 node "close" · [data-close] 그대로, 상자 없는 흰 꺾쇠) · Esc. */ #ui .popup.full { --ink: #f2f0e7; --ink-soft: #9a9d98; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 18px 22px; border: 0; border-image: none; background: linear-gradient(rgba(20, 22, 24, .72), rgba(12, 13, 15, .82)); color: var(--ink); filter: none; display: flex; flex-direction: column; } #ui .dim.open .popup.full { animation: fx-fade .2s ease-out both; } /* 판이 화면 전체라 튀어 오르는 팝(ui_fx fx-pop) 대신 스며들기 */ /* 전체화면 창이 깔려 있는 동안 HUD(조이스틱 · 미니맵 · 도구 줄 · 경험치 줄) 숨김 — 반투명 판 뒤로 비치지 않게(도깨비의 세계 전체화면 창 = 뒤 장면만, HUD 없음). body.gf-fullwin = windows-js 04 UiDepth onChange. 판이 다 스며든 뒤(.2s) 숨기고, 닫으면 바로 돌아온다 */ body.gf-fullwin #hud { visibility: hidden; transition: visibility 0s .2s; } /* 머리 띠 46 + 아래 12 → 본문 높이 450 − 58 − 22 = 370(물품 본문 368) */ #ui .popup.full > :is(.popup-head, .au-head, .sk-head) { flex: none; height: 46px; margin: 0 -18px 12px; padding: 0 18px 0 8px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .25)); } #ui .popup.full > :is(.popup-head, .sk-head) > h2 { display: flex; align-items: center; gap: 6px; white-space: nowrap; } #ui .popup.full > :is(.popup-head, .sk-head) > h2::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--ink); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } /* 제목 앞 메뉴 아이콘(경매장 au-mark 와 같은 결) */ #ui .popup.full.inv > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-inventory.png); mask-image: url(../assets/icons/menu-inventory.png); } #ui .popup.full.shop > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-shop.png); mask-image: url(../assets/icons/menu-shop.png); } #ui .popup.full.sk > .sk-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-skills.png); mask-image: url(../assets/icons/menu-skills.png); } #ui .popup.full .win-wallet { margin-right: 0; } #ui .popup.full .win-wallet .w-gold { color: #e8c979; } #ui .popup.full .win-wallet .w-diamond { color: #8fc6ff; } #ui .close.back { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; box-shadow: none; } #ui .close.back:active { background: rgba(255, 255, 255, .12); } #ui .close.back::before { width: 12px; height: 12px; margin: -6px 0 0 -3px; border-radius: 1px; background: none; border: solid var(--ink); border-width: 0 0 3px 3px; transform: rotate(45deg); } #ui .close.back::after { display: none; } /* 탭 줄 = 어두운 알약 줄, 고른 탭 = 베이지 알약(도깨비의 세계 설정 · 보스 토벌 탭). 줄 높이는 창마다(물품 26 · 상점 34) — 탭은 줄 높이만 채우고 폭은 글자만큼(왼쪽 정렬, 판 폭으로 늘이지 않는다) */ #ui .popup.full .tabs { display: flex; width: fit-content; max-width: 100%; align-self: flex-start; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.full .tab { flex: none; min-width: 72px; height: auto; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); box-shadow: none; transition: background .15s, color .15s; } #ui .popup.full .tab.on { background: linear-gradient(#e6decd, #c7bba3); color: #26221c; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.full .btn { min-height: 28px; padding: 0 14px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } #ui .popup.full .btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui .popup.full .btn.danger { background: linear-gradient(#a64646, #742c2c); color: #fff; } #ui .popup.full .btn.plain { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup.full .btn.off { filter: grayscale(1); opacity: .45; } #ui .btn { min-height: 32px; padding: 4px 18px; border: 10px solid transparent; border-image: url(../assets/ui/button-green.webp) 22 72 fill / 10px 24px stretch; display: inline-flex; align-items: center; justify-content: center; color: #fffce7; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #435022; transition: transform .1s ease, filter .1s ease; } #ui .btn.gold { border-image-source: url(../assets/ui/button-gold.webp); text-shadow: 0 1px 2px #876025; } #ui .btn.danger { border-image-source: url(../assets/ui/button-gold.webp); filter: hue-rotate(-38deg) saturate(1.5) brightness(.92); text-shadow: 0 1px 2px #6a1c10; } #ui .btn:not(.off):active { transform: scale(.95); } #ui .btn.off { filter: grayscale(1) brightness(1.05); opacity: .6; cursor: default; } #ui .btn.danger.off { filter: hue-rotate(-38deg) saturate(1.5) brightness(.92) grayscale(1) brightness(1.05); } #ui .btn.plain { border-image: none; border: 2px solid #c9ac77; border-bottom-width: 4px; border-radius: 10px; background: #fbf1da; color: var(--ink); text-shadow: none; } /* 우편·설정(마이 티니 .sheet — EFZ 우편 560x430, 설정 380x430) */ #ui .popup.sheet { display: flex; flex-direction: column; } #ui .popup.mail { width: 560px; height: 430px; } #ui .popup.settings { width: 380px; height: 430px; } #ui .popup-head .count { margin-left: auto; margin-right: 12px; font-size: 13px; font-weight: 700; color: var(--ink-soft); } #ui .sheet-body { flex: 1; min-height: 0; overflow: auto; border: 2px solid #d6bd92; border-radius: 10px; background: #efe0c0; padding: 8px; box-shadow: inset 0 2px 4px #a17c4a40; } #ui .sheet-foot { flex: none; display: flex; justify-content: center; padding-top: 10px; } #ui .mail-list { display: flex; flex-direction: column; gap: 8px; } #ui .mail-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: 74px; padding: 0 2px; border: 14px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 14px stretch; } #ui .mail-icon { position: relative; width: 52px; height: 52px; border-radius: 10px; background: #e3cfa4; border: 2px solid #c9ac77; box-shadow: inset 0 2px #f7ecd2; } #ui .mail-icon img { position: absolute; left: 4px; top: 4px; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } #ui .mail-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #ui .mail-text b { font-size: 15px; font-weight: 800; } #ui .mail-text span { font-size: 12px; color: var(--ink-soft); font-weight: 700; } #ui .mail-text .bad { color: #b0492f; } #ui .mail-row .btn { width: 72px; min-height: 30px; padding: 2px 0; font-size: 13px; } #ui .empty { height: 100%; min-height: 100px; display: grid; place-items: center; color: var(--ink-soft); font-weight: 700; text-align: center; } #ui .tabs { flex: none; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 6px; margin-bottom: 10px; } #ui .tab { height: 34px; border-radius: 9px; font-size: 14px; font-weight: 800; border: 2px solid #c9ac77; background: #f3e6c8; color: var(--ink-soft); } #ui .tab.on { background: #fff8e6; color: var(--ink); border-color: #a9793e; box-shadow: inset 0 -3px #e5c98e; } /* 설정 창 = 스크롤 없이 한 화면: EFZ obj_setting_window 380x430 고정 · 탭 높이 34 · 버튼 높이 clamp(24~34) · 글 = EFZ font_little 9pt(=12px, 탭·버튼·계정 줄) · font_basic 12pt 장체(=16px) 는 이 게임 글꼴(Noto SemiBold, 더 넓음)로 같은 폭인 14px(줄 이름). 유저 탭 = 버튼 2열 + 아이콘(Codex 그림 ui/art/set-*.png), 위험(로그아웃 · 계정 삭제)은 아래 따로 한 줄 · 붉은 판(EFZ 로그아웃 #4b1515/#8b2a2a 의 구분 — 색은 창 키트 닫기 단추 계열) */ #ui .user-panel { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 4px 0 0; } #ui .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; } #ui .btn.set-btn { min-width: 0; min-height: 0; height: 32px; padding: 0 6px 0 4px; justify-content: flex-start; gap: 5px; border-radius: 8px; border-bottom-width: 3px; font-size: 12px; font-weight: 800; } #ui .btn.set-btn img { flex: none; width: 22px; height: 22px; } #ui .btn.set-btn span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 13px; text-align: left; overflow-wrap: anywhere; } /* 긴 말(Link Google Account)은 32 높이 안 두 줄 */ #ui .btn.set-btn.risk { border-color: #b4664d; background: #f8e3d8; color: #8e3f25; } #ui .account-box { width: 100%; padding: 6px 10px; border: 2px solid #d6bd92; border-radius: 8px; background: #f8eed8; font-size: 12px; line-height: 14px; font-weight: 700; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; } #ui .account-box div { display: flex; justify-content: space-between; gap: 8px; } #ui .account-box span { min-width: 0; overflow-wrap: anywhere; } /* 긴 계정 아이디가 Version 을 칸 밖으로 밀지 않게 줄바꿈 */ #ui .toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 10px; margin-bottom: 10px; border: 2px solid #d6bd92; border-radius: 8px; background: #f8eed8; font-size: 15px; font-weight: 800; } /* 켬 · 끔은 모양만 바꾼다(키트 상태): 글자 둘 · 손잡이 둘을 제자리에 두고 불투명도로 갈음 */ #ui .toggle { position: relative; flex: none; width: 76px; height: 28px; border-radius: 14px; background: #cdbb98; border: 2px solid #a8916a; box-shadow: inset 0 2px 3px #0002; font-size: 12px; font-weight: 900; } #ui .toggle::before, #ui .toggle::after { content: ""; position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fffaf0; box-shadow: 0 1px 2px #0004; } #ui .toggle::before { left: 50px; opacity: 0; } #ui .toggle::after { left: 2px; } #ui .toggle.on { background: #8fae4c; border-color: #5f7d2c; } #ui .toggle.on::before { opacity: 1; } #ui .toggle.on::after { opacity: 0; } #ui .toggle span { position: absolute; top: 5px; line-height: 14px; } #ui .toggle .t-on { left: 12px; color: #fff; opacity: 0; } #ui .toggle .t-off { right: 10px; color: #7a6a52; } #ui .toggle.on .t-on { opacity: 1; } #ui .toggle.on .t-off { opacity: 0; } #ui .version { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-top: 14px; } #ui .settings .toggle-row { font-size: 14px; margin-bottom: 8px; } #ui .settings .version { margin-top: 10px; } /* 볼륨 바: 마일드티니 SettingWindow 게이지(빈 홈 + 채움 % + 손잡이 32x34 끌기, 기본 60) 를 이 창 크기로. 줄 = EFZ 설정 줄 높이 44 · 왼쪽 아이콘(소리 · 음악) 24 + 이름 + 홈(높이 14, 마일드티니 게이지 높이) + 숫자. 그림 = Codex 한 벌(ui/art/vol-track · vol-fill · vol-knob, 가로 9-slice). 채움 폭 = 바인딩 fill(prefs.*Ratio), 손잡이 = 채움 끝 가운데. 끌기 = windows.js volWire(0 = 음소거 → 아이콘 흐림) */ #ui .vol-row { justify-content: flex-start; gap: 8px; } #ui .vol-ico { flex: none; width: 24px; height: 24px; transition: filter .15s, opacity .15s; } #ui .vol-row:has(.vol-bar:not(.on)) .vol-ico { filter: grayscale(1); opacity: .55; } #ui .vol-name { flex: none; width: 40px; } #ui .vol-bar { position: relative; flex: 1; min-width: 0; height: 30px; margin: 0 10px; touch-action: none; cursor: pointer; } #ui .vol-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; border-image: url(art/vol-track.png) 0 24 fill / 0 7px stretch; } #ui .vol-in { position: absolute; left: 3px; right: 3px; top: 50%; height: 8px; margin-top: -4px; } #ui .vol-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-image: url(art/vol-fill.png) 0 18 fill / 0 4px stretch; } #ui .vol-knob { position: absolute; right: -13px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: url(art/vol-knob.png) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px #0005); transition: transform .1s ease; } #ui .vol-bar.drag .vol-knob { transform: scale(1.12); } #ui .vol-num { flex: none; width: 26px; text-align: right; font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* 언어 줄(release-red22 I18N): 설정 게임 탭 한 줄 = 이름(위) + 자기 이름 칩 5개(아래 한 줄 — 가장 긴 简体中文 · English 가 380 창 안에). 목록 locale.list · 행동 locale.set */ #ui .toggle-row.lang-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; } #ui .lang-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } /* 칩 5개 = 한 줄 고르게(가장 긴 简体中文 · English 도 11px 로 칸 안) */ #ui .lang-chip { min-width: 0; height: 24px; padding: 0 2px; border-radius: 7px; border: 2px solid #c9ac77; background: #f3e6c8; color: var(--ink-soft); font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .lang-chip.on { background: #8fae4c; border-color: #5f7d2c; color: #fff; } /* 설정 > 문의 창: 설정 창 스킨(양피지 판 · 갈색 테 · .btn) 그대로, 크기 = EFZ 우편 창 560x430, 스크롤 없음. 안 = 제목 한 줄(높이 32 · ≤ 80) · 내용 칸(남는 높이 · 5~2000 · 오른쪽 아래 글자 수, 5자 못 되면 붉게) · 스크린샷 줄(칸 46 × 최대 6 + 사진 추가 칸, 빼기 = 창 닫기 단추 작은 판) · 취소/보내기(34). 보내는 동안 보내기 단추 = 진행 막대(.inq-send-fill 폭) + "사진 올리는 중 i/n". 키보드가 덮으면 .kb(windows.js inqFit): 제목줄 · 사진 줄을 숨기고 보이는 곳 크기로 */ #ui .popup.inquiry { width: 560px; height: 430px; } #ui .inquiry .popup-head h2 { display: flex; align-items: center; gap: 6px; } #ui .inquiry .inq-ico { width: 26px; height: 26px; } #ui .inq-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } #ui .inq-line, #ui .inq-area { position: relative; display: block; } #ui .inq-area { flex: 1; min-height: 0; } #ui .inq-subject, #ui .inq-text { width: 100%; border: 2px solid #c9ac77; border-radius: 8px; background: #fffaf0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); user-select: text; -webkit-user-select: text; outline: none; box-shadow: inset 0 2px 4px #a17c4a30; } #ui .inq-subject { height: 32px; padding: 0 56px 0 10px; } #ui .inq-text { height: 100%; resize: none; padding: 8px 10px 20px; line-height: 18px; } #ui .inq-subject:focus, #ui .inq-text:focus { border-color: #a9793e; } #ui .inq-subject::placeholder, #ui .inq-text::placeholder { color: var(--ink-soft); opacity: .75; } #ui .inq-sub-count, #ui .inq-count { position: absolute; right: 10px; font-size: 11px; font-weight: 700; color: var(--ink-soft); pointer-events: none; font-variant-numeric: tabular-nums; } #ui .inq-sub-count { top: 50%; transform: translateY(-50%); } #ui .inq-count { bottom: 6px; } #ui .inq-count.bad { color: #b0492f; } #ui .inq-shots-row { flex: none; display: flex; align-items: center; gap: 6px; height: 60px; padding: 0 8px; border: 2px solid #d6bd92; border-radius: 8px; background: #efe0c0; box-shadow: inset 0 2px 4px #a17c4a40; } #ui .inq-shots-name { flex: none; width: 66px; display: flex; flex-direction: column; gap: 2px; } #ui .inq-shots-name b { font-size: 12px; font-weight: 800; } #ui .inq-n { font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui .inq-shots { display: flex; gap: 8px; } #ui .inq-shot { position: relative; flex: none; width: 46px; height: 46px; border: 2px solid #c9ac77; border-radius: 6px; background: #fffaf0; } #ui .inq-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } #ui .inq-del { position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e59a7a, #c0603f 70%); border: 2px solid #8e3f25; box-shadow: 0 1px 0 #6f2f1b; } /* 창 닫기 단추(.close) 작은 판 */ #ui .inq-del::before, #ui .inq-del::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; border-radius: 1px; background: #fff7ea; transform: rotate(45deg); } #ui .inq-del::after { transform: rotate(-45deg); } #ui .inq-del.off { opacity: .4; } #ui .inq-add { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 2px dashed #b99a66; border-radius: 6px; background: #f8eed8; transition: transform .1s ease; } #ui .inq-add img { width: 32px; height: 32px; } #ui .inq-add:not(.off):active { transform: scale(.94); } #ui .inq-add.off { opacity: .4; cursor: default; } #ui .inq-foot { gap: 10px; padding-top: 8px; } #ui .inq-foot .btn { width: 150px; min-height: 34px; padding: 2px 10px; font-size: 13px; } #ui .btn.inq-send { position: relative; overflow: hidden; gap: 6px; } #ui .inq-send-ico { position: relative; width: 20px; height: 20px; } #ui .inq-send-label { position: relative; white-space: nowrap; } #ui .inq-send-fill { position: absolute; left: -10px; top: -10px; bottom: -10px; width: 0; background: #fff6d266; transition: width .2s ease; } #ui .btn.inq-send.busy.off { filter: none; opacity: 1; cursor: progress; } #ui .inquiry-dim.kb .popup { border-width: 14px; border-image-width: 14px; transform: none; transition: none; } #ui .inquiry-dim.kb .popup-head, #ui .inquiry-dim.kb .inq-shots-row { display: none; } #ui .inquiry-dim.kb .inq-body { gap: 6px; } #ui .inquiry-dim.kb .inq-foot { padding-top: 6px; } #ui .inquiry-dim.kb .inq-foot .btn { min-height: 30px; } /* 확인·입력(마이 티니 .ask) — 물품 창 위에 뜬다 */ #ui .dim.ask-dim { z-index: 20; } #ui .popup.ask { width: 300px; text-align: center; } #ui .ask p { font-size: 14px; font-weight: 800; line-height: 20px; padding: 4px 0 12px; white-space: pre-line; } #ui .ask input { display: block; width: 100%; height: 34px; margin-bottom: 14px; padding: 0 10px; border: 2px solid #c9ac77; border-radius: 8px; background: #fffaf0; font: inherit; font-weight: 700; color: var(--ink); user-select: text; } #ui .ask-buttons { display: flex; justify-content: center; gap: 10px; } #ui .ask-buttons .btn { min-width: 92px; } /* 메뉴(EFZ obj_ingame_system Draw_64 메뉴 줄: 판·칸 배경 없음 — 아이콘 뒤 어두운 빛번짐 + 테두리 있는 흰 글자, 5칸씩 두 줄 오른쪽 정렬) 머리줄 top 14.4 + 36 + 6 바로 아래. 둘째 줄은 남는 칸만큼 오른쪽에 붙는다. 칸 간격 = EFZ 그대로(같은 GUI 높이 450): 가로 EFZ_TOP_MENU_ICON_PITCH_X 40 · 세로 56 · 아이콘 28(scr_ingame_top_menu_icon_center). */ #ui .menu-pop { position: absolute; z-index: 9; top: 56.4px; right: 12px; pointer-events: auto; width: 216px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; padding: 6px 8px; border-radius: 12px; background: rgba(12, 13, 15, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .35); /* 뒤 스킬 단추와 겹쳐도 읽히게 깐 판: 칸 5 × 40 + 좌우 8 */ } #ui .menu-item { position: relative; isolation: isolate; width: 40px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 800; white-space: nowrap; color: #fff; paint-order: stroke; -webkit-text-stroke: 3px rgba(14,16,22,.85); text-shadow: 0 1px 2px #000a; transition: transform .1s ease; } #ui .menu-item::before { content: ""; position: absolute; left: 50%; top: 18px; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(8,10,16,.62) 0, rgba(8,10,16,.4) 42%, rgba(8,10,16,0) 70%); } #ui .menu-item:active { transform: scale(.94); } #ui .white-icon { position: relative; flex: none; width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(22,26,32,.45)) drop-shadow(0 0 1px rgba(22,26,32,.55)); } #ui .white-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#fff 12%, #f7f7f7 44%, #c7c9cc); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #ui .m-inventory .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-inventory.png); mask-image: url(../assets/icons/menu-inventory.png); } #ui .m-skills .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-skills.png); mask-image: url(../assets/icons/menu-skills.png); } #ui .m-ranking .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-ranking.png); mask-image: url(../assets/icons/menu-ranking.png); } #ui .m-notice .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-notice.png); mask-image: url(../assets/icons/menu-notice.png); } #ui .m-attendance .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-event.png); mask-image: url(../assets/icons/menu-event.png); } /* 이벤트 아이콘 = Codex 이미지 생성(assets/icons/menu-event.prompt.txt) */ #ui .m-pass .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-pass.png); mask-image: url(../assets/icons/menu-pass.png); } #ui .m-shop { position: relative; } #ui .m-shop .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-shop.png); mask-image: url(../assets/icons/menu-shop.png); } #ui .m-friends .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-friends.png); mask-image: url(../assets/icons/menu-friends.png); } #ui .m-guild .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-guild.png); mask-image: url(../assets/icons/menu-guild.png); } #ui .m-auction { position: relative; } /* 끝난 거래 점(au-dot) · Lv 잠금 자물쇠(features/auction/auction_gate.css) — 11-04 W13 메뉴 칸 복구 */ #ui .m-auction .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-auction.png); mask-image: url(../assets/icons/menu-auction.png); } #ui .m-profile .white-icon::after { -webkit-mask-image: url(../assets/icons/menu-profile.png); mask-image: url(../assets/icons/menu-profile.png); } /* Codex 이미지 생성(menu-profile.prompt.txt) */ /* 물품(인벤토리): EFZ obj_inventory_window 가로 배치 — 장비창 218 | 물품 칸(auto-fill, 남는 폭을 받음) | 아이템 정보 247.5. 본문 368 = 전체화면 창(01-popup) 머리 띠 아래. 물품 창(#inv-dim) 칸만 39 로 줄였다 — 같은 .item-cell 을 쓰는 다른 창은 52 그대로. 움직임은 features/bag/inv_fx.css · inv_fx.js, 참고 화면은 dokkaebi-world.md §11.9. */ #ui .inv-body { flex: none; height: 368px; display: grid; grid-template-columns: 218px 1fr 247.5px; gap: 8px; } #ui .inv-pane { position: relative; height: 368px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(10, 12, 13, .45); } /* 판 안 칸은 절대 배치(800 무대 값): 목록 · 숨김이 바뀌어도 Unity 엔진이 판을 다시 재지 않게 */ #ui .inv-pane > * { position: absolute; left: 8px; right: 8px; } #ui .inv-pane > .inv-label { top: 6px; height: 19px; } #ui .inv-pane > .tabs { top: 29px; height: 26px; margin: 0; } #ui .inv-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #d6d0ba; } #ui .inv-label::before { content: ""; flex: none; width: 3px; height: 12px; border-radius: 2px; background: #e6decd; } /* 판 이름 앞 세로 막대 */ #ui .inv .tabs { margin-bottom: 6px; gap: 3px; } #ui .inv .tabs .tab { min-width: 0; padding: 0 10px; font-size: 12px; } /* 가운데 판 ≈ 265 에 탭 5개가 들어가게 01-popup 최소 폭 72 를 끔 */ #ui .eq-box { top: 61px; height: 297px; } #ui .eq-box > .tab-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* 탭 판은 같은 자리에 겹침 — 바인딩이 하나만 보인다 */ #ui .inv-empty.off { opacity: 0; pointer-events: none; } #ui .inv-preview { display: block; } /* 정보 판(202 × 297) = 캐릭터 무대 172(tickPreview 가 그림) → 이름 줄 20(Lv · 이름) → 길드 | 칭호 줄 16 → 맨 아래 전투력 띠 50. 공격력 등 세부 값은 능력치 탭. 장비 판 = 머리 글 16 · 장비 8칸(2열 × 4줄, 칸 42) | 치장 4칸(1열, EFZ 장비창 외형 칸 자리). 능력치 판 = features/stats/stats.js. */ #ui .hero-stage { position: absolute; left: 0; top: 4px; width: 100%; height: 172px; } #ui .hero-tag { position: absolute; left: 0; top: 168px; width: 100%; height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; white-space: nowrap; } #ui .hero-tag b { min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; } #ui .hero-tag span { flex: none; height: 15px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 15px; color: #26221c; background: linear-gradient(#e6decd, #c7bba3); } #ui .hero-sub { position: absolute; left: 0; top: 190px; width: 100%; height: 16px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; font-size: 9.5px; font-weight: 700; line-height: 16px; white-space: nowrap; } #ui .hero-sub > span { min-width: 0; display: inline-flex; align-items: center; gap: 3px; overflow: hidden; } #ui .hero-sub > span + span::before { content: ""; flex: none; width: 1px; height: 9px; margin-right: 2px; background: rgba(255, 255, 255, .18); } /* 길드 | 칭호 */ #ui .hero-guild { color: #b9d6d3; } /* 01-popup .btn.gold 색 */ #ui .hero-guild svg, #ui .hero-guild img { flex: none; width: 13px; height: 13px; } #ui .hero-title { color: #e8c979; } /* 01-popup 지갑 금 */ #ui .hero-sub .none { font-style: normal; color: var(--ink-soft); opacity: .7; } #ui .hero-floor { position: absolute; left: 50%; top: 136px; width: 104px; height: 24px; margin-left: -52px; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 222, 205, .22), rgba(230, 222, 205, .06) 62%, transparent); box-shadow: 0 0 0 1px rgba(230, 222, 205, .07); } /* 발밑 빛 */ #ui .hero-box { position: absolute; left: 0; top: 30px; width: 100%; height: 160px; } /* 발 = 칸 아래에서 약 42 위(서기 그림 아래 여백) → 발밑 빛 136 에 닿게 */ #ui .inv-hero { position: absolute; left: 0; top: 0; width: 100%; height: 160px; } /* 게임이 그리는 칸(그림 키 hero: 서기 클립 숨쉬기, 정수 배 · 발 = 아래 가운데) */ /* 전투력 띠(정보 판 맨 아래) */ #ui .inv-cp { position: absolute; left: -8px; right: -8px; width: auto; top: auto; bottom: 4px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .5) 22%, rgba(0, 0, 0, .5) 78%, transparent); } #ui .inv-cp::before, #ui .inv-cp::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 228, 160, .55), transparent); } #ui .inv-cp::before { top: 0; } #ui .inv-cp::after { bottom: 0; } #ui .inv-cp span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #d9c9a0; line-height: 13px; } #ui .inv-cp b { font-size: 24px; font-weight: 900; line-height: 28px; color: #fff4dc; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255, 210, 120, .55), 0 1px 0 rgba(0, 0, 0, .6); } /* 장비 판: 장비 2열 + 치장 1열, 칸 42 */ #ui .eq-head { position: absolute; left: 0; top: 2px; width: 100%; height: 14px; } #ui .eq-head span { position: absolute; top: 0; font-size: 10.5px; font-weight: 800; line-height: 14px; color: var(--ink-soft); } #ui .eq-head span:first-child { left: 14px; width: 94px; text-align: center; } #ui .eq-head span.cos { left: 138px; width: 42px; text-align: center; color: #e8cf8a; } #ui .eq-slots { position: absolute; left: 14px; top: 20px; width: 94px; display: grid; grid-template-columns: repeat(2, 42px); grid-auto-rows: 42px; gap: 10px; } #ui .cos-slots { position: absolute; left: 138px; top: 20px; width: 42px; display: grid; grid-template-columns: 42px; grid-auto-rows: 42px; gap: 10px; } #ui .cos-slots::before { content: ""; position: absolute; left: -15px; top: 2px; bottom: 2px; width: 1px; background: linear-gradient(transparent, rgba(232, 207, 138, .35), transparent); } /* 장비 | 치장 나눔 선 */ #ui .p-equip .equip-cell { width: 42px; height: 42px; } #ui .p-equip .equip-cell .icon { left: 6px; top: 6px; width: 27px; height: 27px; } #ui .p-equip .empty-slot-icon { left: 7.5px; top: 7.5px; width: 24px; height: 24px; } #ui .eq-slots .equip-cell { cursor: pointer; transition: transform .06s ease-out; } #ui .eq-slots .equip-cell.on:active { transform: scale(.92); } /* 누르면 물품 칸에서 그 장비를 고른다(inv_fx.js) */ /* 장비 칸 아래(약 60)는 펫 등 다음 칸 자리로 비워 둔다 */ /* 세부 능력치 12칸(능력치 판 안) */ #ui .eq-sum { flex: none; padding: 6px 4px; border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 28px; gap: 0 4px; align-content: start; } #ui .equip-cell { --gc: #6b7073; position: relative; width: 36px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, .34); border: 1.5px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px rgba(255, 255, 255, .05); } #ui .equip-cell.on { background: radial-gradient(120% 80% at 30% 15%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--gc) 60%, #1d2124), color-mix(in srgb, var(--gc) 20%, #121517)); border-color: color-mix(in srgb, var(--gc) 75%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--gc) 40%, transparent); } /* --gc 는 inv_fx.js 가 착용 물품 등급색으로 넣는다 */ #ui .equip-cell .icon { position: absolute; left: 5.6px; top: 5.6px; width: 22.5px; height: 22.5px; object-fit: contain; image-rendering: pixelated; } #ui .empty-slot-icon.off { opacity: 0; } #ui .empty-slot-icon { position: absolute; left: 7.5px; top: 7.5px; width: 18px; height: 18px; opacity: .32; } #ui .empty-slot-icon::before { content: ""; position: absolute; inset: 0; background: #c9ccc6; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* 빈 칸 부위 그림: assets/ui/eqslot = Codex 이미지 생성(receipt.json), assets/icons = 코드 SVG */ #ui .s-head .empty-slot-icon::before { -webkit-mask-image: url(../assets/icons/slot-head.png); mask-image: url(../assets/icons/slot-head.png); } #ui .s-face .empty-slot-icon::before { -webkit-mask-image: url(../assets/icons/slot-face.png); mask-image: url(../assets/icons/slot-face.png); } #ui .s-melee_look .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/melee-look.png); mask-image: url(../assets/ui/eqslot/melee-look.png); } #ui .s-weapon .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/weapon.png); mask-image: url(../assets/ui/eqslot/weapon.png); } #ui .s-cos_hat .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/cos-hat.png); mask-image: url(../assets/ui/eqslot/cos-hat.png); } #ui .s-helmet .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/helmet.png); mask-image: url(../assets/ui/eqslot/helmet.png); } #ui .s-cos_outfit .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/cos-outfit.png); mask-image: url(../assets/ui/eqslot/cos-outfit.png); } #ui .s-armor .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/armor.png); mask-image: url(../assets/ui/eqslot/armor.png); } #ui .s-cos_bag .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/cos-bag.png); mask-image: url(../assets/ui/eqslot/cos-bag.png); } #ui .s-bag .empty-slot-icon::before { -webkit-mask-image: url(../assets/icons/slot-bag.png); mask-image: url(../assets/icons/slot-bag.png); } #ui .s-shoes .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/shoes.png); mask-image: url(../assets/ui/eqslot/shoes.png); } #ui .s-gloves .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/gloves.png); mask-image: url(../assets/ui/eqslot/gloves.png); } #ui .s-cape .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/cape.png); mask-image: url(../assets/ui/eqslot/cape.png); } #ui .s-ring .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/ring.png); mask-image: url(../assets/ui/eqslot/ring.png); } #ui .s-necklace .empty-slot-icon::before { -webkit-mask-image: url(../assets/ui/eqslot/necklace.png); mask-image: url(../assets/ui/eqslot/necklace.png); } #ui .grid-box { top: 61px; height: 251px; } #ui .item-grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, 39px); gap: 4px; align-content: start; justify-content: center; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, .22); } /* 칸 상태: 기본 = 물품 칸(등급 바탕 g-*), .off = 빈 칸, .on = 고른 칸 */ #ui .item-cell { --gc: #6b7073; position: relative; width: 52px; height: 52px; border-radius: 8px; cursor: pointer; transition: transform .06s ease-out; background: radial-gradient(120% 80% at 30% 12%, rgba(255, 255, 255, .2), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--gc) 58%, #1d2124), color-mix(in srgb, var(--gc) 16%, #121517)); border: 1.5px solid color-mix(in srgb, var(--gc) 78%, #fff); box-shadow: inset 0 -12px 14px -10px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22); } #ui .item-cell:not(.off):active { transform: scale(.92); } /* 뗄 때 튕김은 inv_fx.css */ #ui .item-cell.g-rare { --gc: #3f8fe0; } #ui .item-cell.g-epic { --gc: #9a5cd0; } #ui .item-cell.g-unique { --gc: #e0a020; } #ui .item-cell.g-legendary { --gc: #e2583a; } #ui .item-cell.off { background: rgba(0, 0, 0, .26); border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); cursor: default; } #ui .item-cell.on { outline: 2px solid #f2f0e7; outline-offset: 2px; box-shadow: inset 0 -12px 14px -10px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22), 0 0 12px rgba(255, 255, 255, .35); } #ui .item-cell .icon { position: absolute; left: 8.16px; top: 4.8px; width: 31.68px; height: 31.68px; object-fit: contain; image-rendering: pixelated; } #ui #inv-dim .item-cell { width: 39px; height: 39px; border-radius: 7px; box-shadow: inset 0 -9px 11px -8px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22); } /* 52 × 0.75 — 아래 등급 빛도 같은 비율 */ #ui #inv-dim .item-cell.off { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); } #ui #inv-dim .item-cell.on { box-shadow: inset 0 -9px 11px -8px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22), 0 0 10px rgba(255, 255, 255, .35); } #ui #inv-dim .item-cell .icon { left: 6.12px; top: 3.6px; width: 23.76px; height: 23.76px; } #ui #inv-dim .item-cell .cnt { font-size: 9px; line-height: 10px; } #ui #inv-dim .item-cell .worn { font-size: 7px; line-height: 9px; left: 1px; top: 1px; } #ui .item-cell .cnt { position: absolute; left: 0; right: 4px; bottom: 1px; text-align: right; font-size: 10px; font-weight: 900; line-height: 12px; color: #fff; text-shadow: 1.5px 0 #111, -1.5px 0 #111, 0 1.5px #111, 0 -1.5px #111, 1.1px 1.1px #111, -1.1px 1.1px #111, 1.1px -1.1px #111, -1.1px -1.1px #111; } #ui .item-cell .worn { position: absolute; left: 2px; top: 2px; font-size: 8px; font-weight: 900; line-height: 11px; color: #fff; background: #c8701e; border-radius: 4px; padding: 0 2px; } /* 착용 배지 */ #ui .inv-empty { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--ink-soft); pointer-events: none; } #ui .inv-foot { top: 312px; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; } #ui .inv .inv-foot .btn { flex: none; min-width: 76px; padding: 0 12px; font-size: 12px; } /* 폭 = 글자만큼 — 칸 폭으로 늘이지 않는다 */ #ui .inv-foot .inv-sell.on { filter: brightness(1.18) saturate(1.25); box-shadow: 0 0 0 2px #ffd36b, 0 0 10px 2px rgba(255, 211, 107, .6); } /* 일괄 판매 모드 */ #ui .detail { top: 29px; height: 292px; overflow: auto; display: flex; flex-direction: column; gap: 6px; } #ui .detail-none { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 0; } /* 고른 것 없음 글(겹침) */ #ui .detail-top { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; } #ui .detail-top .item-cell { width: 58px; height: 58px; } #ui .detail-top .item-cell .icon { left: 9.18px; top: 5.4px; width: 35.64px; height: 35.64px; } #ui .detail-name { font-size: 14px; font-weight: 800; } #ui .detail-sub { font-size: 12px; font-weight: 700; color: var(--ink-soft); } #ui .detail-rows > div { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; padding: 3px 6px; border-radius: 5px; } #ui .detail-rows > .odd { background: rgba(255, 255, 255, .05); } #ui .inv-actions { top: 321px; height: 37px; display: flex; justify-content: center; gap: 6px; padding-top: 6px; } #ui .inv .inv-actions .btn { min-width: 84px; min-height: 30px; } /* 대화 창(전 battle.js drawTalk, VN 식): 어두운 막 · 초상(리그 · NPC 일러스트) · 아래 판 · 이름 · 선 · 대사 · 다음 표시. 값 = 전 식을 GUI 로: 판 높이 clamp(153, 144, 198) × .78 = 119.34, 여백 12 → 판 위 py = 318.66, 초상 = 판 윗선(285) 위로 높이 × .86, 높이 = (285 − 12)/.86 = 317.44 × 1.2. 2026-10-18 사용자 "NPC 크기 줄이지 말고 대화창 밑으로 내리지 마" → 초상 자리 · 크기 그대로(28,18 · 253.93x380.9), 판도 전 판 위(318)보다 내리지 않는다 · 어두운 색 그대로. 2026-10-20 사용자 "지금처럼 캐릭터 일러스트에 대화창 ui 레이아웃은 맞는데 글자간격이라던지 배치 크기등을 참고해서 구현해줘 지금은 너무 글자도 크고 배치도 어색함" → 도깨비의 세계 NPC 대화(docs/one-click-game-factory/analysis/dokkaebi-world.md §4, 게임메카1 · 2): 화면 아래 화면 폭 약 85 % 의 살짝 둥근 상자 · 반신 초상이 상자 왼쪽 가장자리에 걸침(초상이 상자 앞, 아래는 상자 속으로 스며듦) · 글은 초상 오른쪽부터 · 이름 굵게 + 아래 얇은 구분선 · 오른쪽 아래 작은 다음 표시. 글자 = 이름 14 굵게 · 대사 13.5 / 자간 −0.2 / 줄 1.55(3줄) — 전 16px · 줄 24 · 화면 가로 전체 글 줄이 크고 어색하던 것. */ #ui .talk { position: absolute; left: 0; top: 0; width: 100%; height: 450px; pointer-events: none; } /* 대화 중(#ui.talking — 12-talk-frame) = 대화 판 밖 창 층을 숨긴다(11-04 W17 사용자 "대화 스크립트 떠 있을 때 UI 같은 게 떠 있을 때가 자주 있음"). visibility = 자리 · 상태(스크롤 · 입력)는 그대로 · 누름도 안 받는다 — 대화가 끝나면 그대로 다시 보인다. 자식까지 거는 것은 자식의 visibility: visible 이 뚫고 나오지 않게. .talk-ok = 대화가 연 창(이름 짓기 확인 — ask { talk: true })은 대화 위에 그대로 */ #ui.talking > :not(#win-screen), #ui.talking > :not(#win-screen) *, #ui.talking #win-screen > :not(#talk-screen):not(.talk-ok), #ui.talking #win-screen > :not(#talk-screen):not(.talk-ok) * { visibility: hidden !important; } #ui .talk > * { position: absolute; } #ui .talk-dim { left: 0; top: 0; width: 100%; height: 450px; background: rgba(0,0,0,.48); } /* 초상 = 상자 앞(z 1) · 아래 20 % 는 상자 속으로 흐려진다(잘린 아래 끝 398.9 가 보이지 않게) */ #ui .talk-portrait { z-index: 1; left: 28px; top: 18px; width: 253.93px; height: 380.9px; -webkit-mask-image: linear-gradient(#000 78%, transparent 99%); mask-image: linear-gradient(#000 78%, transparent 99%); } /* 상자 = 화면 폭 85 % 가운데 · 위 316(전 판 윗선 318.66 보다 살짝 위) · 아래 442(전 판 끝 450 보다 위) · 둥근 12 · 전 판 어두운 남색 그대로 */ #ui .talk-shade { left: 7.5%; top: 316px; width: 85%; height: 126px; border-radius: 12px; background: linear-gradient(rgba(20,24,35,.93), rgba(12,16,24,.97)); box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(222,226,237,.10); } /* 글 = 초상 오른쪽 끝(282) + 14 부터 상자 오른쪽 안쪽 22 까지 */ #ui .talk-mark { left: 296px; top: 333px; width: 3px; height: 12px; border-radius: 1.5px; background: #f0aaa4; } #ui .talk-name { left: 305px; top: 330px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -.2px; color: #fff1ed; white-space: nowrap; } #ui .talk-rule { left: 296px; right: calc(7.5% + 22px); top: 354px; height: 1px; background: rgba(222,226,237,.14); } #ui .talk-line { left: 296px; right: calc(7.5% + 22px); top: 361px; height: 63px; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.55; letter-spacing: -.2px; color: #eef0f4; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; } #ui .talk-next { right: calc(7.5% + 16px); top: 425px; height: 12px; display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 500; line-height: 12px; color: #aeb9c9; white-space: nowrap; } #ui .talk-next i { flex: none; width: 8px; height: 6px; background: #f0aaa4; clip-path: polygon(0 0, 100% 0, 50% 100%); } /* 상점 — 공용 호스트 web_ui/shop_ui.js(GfShopUi). 카드 크기 · 배치 근거 = docs/one-click-game-factory/execution/F00/rt-battle-shop-1018/REFERENCES.md (메이플 키우기 상점 한 줄 4장 · 둘째 줄이 보여 스크롤을 알림 / 버섯커 키우기 카드 = 가운데 아이템 칸 + 아래 가격 버튼). 전체화면 창(.popup.full, 01-popup): 5열 × 높이 160 — 폰 가로에서 넓어진 폭은 카드 폭이 받는다. 목록 = 어두운 반투명 판, 카드 = 어두운 남색 둥근 판 + 얇은 밝은 테, 가격 = 카드 폭으로 늘이지 않는 짧은 알약 104(골드 가격 = 청록 결정색 · 현금/다이아 = 금색), 보상 · 장비 칸 = 등급색 그라데이션 칸. 카드(투명 테 7, 안 121x146): 제한 글자 좌상단 · 그림 58 · 이름 13 · 보상 칸 29 · 간격 4(최대 4) · 가격 알약 104 × 22. 카드 색 = 상품마다 accent 하나(--ac) · 흰 사선 반짝임(transform 만 움직임 — 칸 수십 개가 스크롤 중 다시 칠해지지 않게, 장비 탭은 끔). 빨간 점(.dot) = 받을 것(VIP 칸) · 볼 수 있는 광고(재화 옆 AD) — 키트 red-dots claim. 못 삼 = .off(불투명도만). 끄는 중(host[data-gf-dragging])에는 눌림 모양을 끈다. */ #ui .dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #e2412f; border: 2px solid #fff4e0; box-shadow: 0 1px 2px #0005; pointer-events: none; } #ui .shop-tabs { height: 34px; margin-bottom: 10px; } #ui .shop-tabs .tab { position: relative; font-size: 13px; } #ui .shop .sheet-body { overflow: hidden; padding: 0; border: 0; background: rgba(0, 0, 0, .22); box-shadow: none; } /* 틀 안쪽 전체 = 목록(스크롤 영역): 여백도 목록이라 어디를 끌어도 넘어간다 · 둥근 테가 넘친 줄을 자른다 */ #ui .shop-grid { box-sizing: border-box; height: 100%; padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 8px; align-content: start; } #ui .shop-grid::-webkit-scrollbar { display: none; } /* ---- 카드 공통: 판 = 어두운 둥근 판(투명 테 7 = 안쪽 여백), 안 요소는 고정 자리(절대 배치 — 목록이 다시 그려져도 칸마다 같은 상자) */ #ui .shop-card { --ac: #c9a25c; position: relative; display: block; min-width: 0; text-align: left; border: 7px solid transparent; border-radius: 10px; background: linear-gradient(#272c33, #181b20) border-box; outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; transition: transform .12s ease; } #ui .shop-card:not(.off):active { transform: scale(.96); } #ui[data-gf-dragging] .shop-card:not(.off):active { transform: none; } #ui .shop-card.off { opacity: .55; cursor: default; } #ui .shop-card > * { position: absolute; } #ui :is(.shop-card, .buy-art, .got-cell).g-rare { --ac: #3f8fe0; } #ui :is(.shop-card, .buy-art, .got-cell).g-epic { --ac: #9a5cd0; } #ui :is(.shop-card, .buy-art, .got-cell).g-unique { --ac: #e0a020; } #ui :is(.shop-card, .buy-art, .got-cell).g-legendary { --ac: #e2583a; } #ui .shop-card.t-gold { --ac: #e0a020; } #ui .shop-card.t-green { --ac: #4fa63a; } #ui .shop-card.t-red { --ac: #d64a3a; } #ui .shop-card.t-purple { --ac: #9a5cd0; } #ui .shop-card.t-blue { --ac: #3f8fe0; } #ui .shop-card.t-teal { --ac: #26a08f; } /* 색 판(EFZ accent 대각 그라데이션) · 사선 반짝임 — 구매 판 · 받음 칸(창 07 조각)이 쓰는 공통 모양. 상점 카드 안은 아래에서 판 안쪽 둥근 상자로 바꾼다 */ #ui :is(.card-tint, .card-sheen) { left: -10px; top: -10px; right: -10px; bottom: -10px; pointer-events: none; -webkit-mask-box-image: url(../assets/hud/slot.webp) 72 fill / 10px stretch; } #ui .card-tint { background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 30%, transparent), color-mix(in srgb, var(--ac) 8%, transparent) 55%, transparent 80%); } #ui .card-sheen { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 47%, rgba(255, 255, 255, .15) 52%, transparent 58%) no-repeat; background-size: 300% 100%; animation: shop-sheen 4.2s ease-in-out infinite; } #ui .shop-card :is(.card-tint, .card-sheen) { left: -3px; top: -3px; right: -3px; bottom: -3px; border-radius: 6px; -webkit-mask-box-image: none; } #ui .shop-card .card-sheen { overflow: hidden; background: none; animation: none; } #ui .shop-card .card-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .22) 50%, transparent 85%); transform: translateX(-120%); animation: shop-card-sheen 4.2s ease-in-out infinite; } #ui .shop-card:nth-child(3n+2) .card-sheen::before { animation-delay: -1.4s; } #ui .shop-card:nth-child(3n) .card-sheen::before { animation-delay: -2.8s; } #ui .card-limit { left: -2px; top: -3px; z-index: 1; font-size: 10.5px; font-weight: 800; line-height: 13px; color: color-mix(in srgb, var(--ac) 45%, #fff); white-space: nowrap; text-shadow: 0 1px 2px #000; } /* EFZ 제한 배지 = 박스 없이 글자만, 좌상단 */ #ui .card-name { left: -3px; right: -3px; top: 62px; text-align: center; font-size: 13px; font-weight: 900; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f2f0e7; } #ui .card-rule { display: none; } #ui .card-art { left: calc(50% - 29px); top: 2px; width: 58px; height: 58px; } #ui .card-halo { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; /* EFZ 후광 원 3겹(반지름 .46/.38/.30) */ background: radial-gradient(circle, color-mix(in srgb, var(--ac) 34%, transparent) 0 30%, color-mix(in srgb, var(--ac) 22%, transparent) 30% 38%, color-mix(in srgb, var(--ac) 12%, transparent) 38% 46%, transparent 47%); animation: shop-halo 2.2s ease-in-out infinite; } #ui .card-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); } #ui .card-sub { font-size: 10px; font-weight: 700; line-height: 12.5px; color: var(--ink-soft); overflow: hidden; } #ui .card-rw { display: flex; justify-content: center; gap: 8px; } /* 보상 칸(구매 판 · 받음 창과 같은 칸 — 상점 카드 안은 29) */ #ui .rw { position: relative; flex: none; width: 40px; height: 40px; border-radius: 7px; background: #fbf3df; border: 2px solid color-mix(in srgb, var(--ac, #c9ac77) 55%, #c9ac77); box-shadow: inset 0 2px #fffaf0; } #ui .rw-icon { position: absolute; left: 3px; top: 2px; width: 30px; height: 30px; object-fit: contain; } #ui .rw-icon[src^="data:"] { image-rendering: pixelated; } /* 장비 칩셋 아이콘 = 도트 그대로 */ #ui .rw-n { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 900; line-height: 12px; color: #fff; white-space: nowrap; text-shadow: 1.2px 0 #3b2412, -1.2px 0 #3b2412, 0 1.2px #3b2412, 0 -1.2px #3b2412, 1px 1px #3b2412, -1px 1px #3b2412, 1px -1px #3b2412, -1px -1px #3b2412; } #ui .rw-c { position: absolute; left: -8px; right: -8px; top: 39px; text-align: center; font-size: 9.5px; font-style: normal; font-weight: 900; line-height: 12px; color: #b0662a; white-space: nowrap; } #ui .shop-card .card-rw { left: -4px; right: -4px; top: 80px; gap: 4px; } #ui .shop-card .rw { width: 29px; height: 29px; border-radius: 6px; border-width: 1.5px; border-color: color-mix(in srgb, var(--ac) 75%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 45%, #1d2124), color-mix(in srgb, var(--ac) 15%, #121517)); box-shadow: none; } #ui .shop-card .rw-icon { left: 2px; top: 1px; width: 22px; height: 22px; } #ui .shop-card .rw-n { left: -4px; right: -4px; bottom: -2px; text-align: center; font-size: 8.5px; line-height: 10px; letter-spacing: -.3px; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111, .8px .8px #111, -.8px .8px #111, .8px -.8px #111, -.8px -.8px #111; } #ui .shop-card .rw-c { left: -6px; right: -6px; top: 28px; font-size: 8.5px; line-height: 10px; color: #e8c979; } #ui .card-bonus { left: -3px; right: -3px; top: 80px; text-align: center; font-size: 11.5px; font-weight: 900; line-height: 14px; color: #ffd384; white-space: nowrap; } /* EFZ "+N% 추가" 색 그대로 */ #ui .card-extra { left: -3px; right: -3px; top: 96px; text-align: center; font-size: 10.5px; font-weight: 900; line-height: 13px; color: #ffb6a6; white-space: nowrap; } /* EFZ 첫 구매 보너스 수 #ffb6a6 */ #ui .card-badge { right: -5px; top: -5px; z-index: 1; height: 16px; padding: 0 5px; border: 1px solid #ffd384; border-radius: 4px; background: #6b2831; /* EFZ 1+1 배지(카드 크기에 맞춰 작게) */ color: #fff; font-size: 9.5px; font-style: normal; font-weight: 900; line-height: 14px; text-align: center; white-space: nowrap; box-shadow: 0 1px 2px #0004; animation: shop-badge 1.6s ease-in-out infinite; } #ui .card-price { left: 50%; bottom: 1px; width: 104px; height: 22px; margin-left: -52px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 999px; /* 짧은 알약 — 카드 폭으로 늘이지 않는다 */ background: linear-gradient(#83c3bf, #548f8c); color: #fff; font-size: 12px; font-weight: 900; box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 2px 4px rgba(0, 0, 0, .4); } #ui .shop-card:is(.pack, .dia) .card-price { background: linear-gradient(#f0d58a, #c99a3c); color: #2b2012; } #ui .price-v { flex: 1; text-align: center; white-space: nowrap; } #ui .buy-ok { position: relative; gap: 4px; } #ui .price-cur, #ui .buy-cost-cur { position: absolute; left: 3px; top: 50%; margin-top: -9px; width: 18px; height: 18px; object-fit: contain; } /* 흐름 밖: 숨겨도(현금 가격) 글자 자리가 그대로 — Unity 는 숨긴 요소 자리를 가로로 되돌려 주지 않는다 */ #ui .shop-card .price-cur { left: 6px; margin-top: -8px; width: 16px; height: 16px; } /* ---- 패키지(.pack): 그림 · 이름 · 보상 칸 · 가격 */ #ui .pack :is(.card-sub, .card-bonus, .card-extra) { display: none; } /* ---- 다이아(.dia): 단계 더미 그림 · 이름 · "+N% 추가" · 첫 구매 보너스 · 첫 구매 배지(우상단) */ #ui .dia :is(.card-rule, .card-rw, .card-sub) { display: none; } /* ---- 장비(.gear): 등급 칸(바탕 = 물품 창 등급색) · 이름 등급색 · 능력치 줄 · 초록 가격 */ #ui .gear .card-art { left: calc(50% - 31px); top: 6px; width: 62px; height: 62px; box-sizing: border-box; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--ac) 80%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 55%, #1d2124), color-mix(in srgb, var(--ac) 18%, #121517)); box-shadow: 0 0 6px color-mix(in srgb, var(--ac) 45%, transparent); } #ui .gear.g-common { --ac: #6b7073; } /* 일반 = 회색 칸(물품 창 칸과 같은 색) */ #ui .gear :is(.card-halo, .card-sheen) { display: none; } #ui .gear .card-icon { left: 5px; top: 5px; width: 48px; height: 48px; image-rendering: pixelated; filter: none; } #ui .gear .card-name { top: 74px; font-size: 12.5px; color: color-mix(in srgb, var(--ac) 45%, #fff); } #ui .gear.g-common .card-name { color: #f2f0e7; } #ui .gear .card-sub { left: -3px; right: -3px; top: 92px; height: 26px; text-align: center; } #ui .gear :is(.card-rule, .card-rw, .card-bonus, .card-extra, .card-limit, .card-tint) { display: none; } #ui .vip-panel { display: flex; flex-direction: column; gap: 8px; height: 100%; } #ui .vip-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } #ui .vip-total { font-size: 14px; font-weight: 800; } #ui .vip-row { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; } #ui .vip-card { position: relative; flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border: 10px solid transparent; border-radius: 10px; background: linear-gradient(#272c33, #181b20) border-box; outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; } #ui .vip-card.off { opacity: .55; } #ui .vip-amt { font-size: 14px; font-weight: 900; } #ui .vip-lines { font-size: 11px; font-weight: 700; line-height: 15px; color: var(--ink-soft); text-align: center; } #ui .shop .vip-done { color: #7fd88a; } @keyframes shop-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -20% 0; } } @keyframes shop-halo { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } } @keyframes shop-card-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(260%); } } @keyframes shop-badge { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } } /* [골드] 탭(11-04 PLAN 2-3): 다이아 바로 뒤(탭 줄 순서 = features/costume costume_shop CSS order — 다이아 4 · VIP 5, 같은 order 는 마크업 순서). [무료] 탭은 없앴다(11-04 S 레인) — 무료 칸은 [다이아] · [골드] 맨 앞, 볼 수 있는 광고가 있으면 그 탭에 빨간 점 */ #ui .shop-tabs .tab.s-gold { order: 4; } #ui .shop-tabs .tab:is(.s-diamond, .s-gold) { position: relative; } /* ---- [패키지] · [한정] 배너 카드(목록 판 .pk = 2열 × 높이 150). 흥행작 패키지 카드 공통 구조(세븐나이츠 키우기 스페셜 패키지 · 버섯커 키우기 패키지 줄 · 메이플 키우기 패키지 상세): 왼쪽 = 상품색 판 + 큰 그림(후광) + 위 왼쪽 꼬리표, 오른쪽 = 이름 15 · 구성품 칸 40(아이콘 규격) 줄 · 아래 왼쪽 남은 횟수/기간 · 아래 오른쪽 가격 알약 112 × 28(글자 폭 알약 — 판 폭으로 늘이지 않는다). 카드 밖 튐 없음: 스크롤 칸 안이라 등장 = fx-card-in(아래 6px · .97 → 1), 누름 = .97. */ #ui .card-meta { display: none; } #ui .shop-grid.pk { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } #ui .shop-grid.pk .pack:not(.off):active { transform: scale(.97); } #ui .shop-grid.pk .pack .card-tint { right: auto; width: 150px; border-radius: 6px 0 0 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 52%, #1d2124), color-mix(in srgb, var(--ac) 14%, #15181c) 70%); box-shadow: inset -1px 0 color-mix(in srgb, var(--ac) 45%, transparent); } #ui .shop-grid.pk .pack .card-art { left: 17px; top: 14px; width: 110px; height: 110px; } #ui .shop-grid.pk .pack .card-limit { left: -3px; top: -3px; height: 18px; padding: 0 8px; border-radius: 6px 0 6px 0; background: rgba(0, 0, 0, .55); font-size: 10.5px; line-height: 18px; } #ui .shop-grid.pk .pack .card-name { left: 158px; right: 4px; top: 0; text-align: left; font-size: 15px; line-height: 20px; } #ui .shop-grid.pk .pack .card-rule { display: block; left: 158px; right: 0; top: 24px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, #fff), transparent); opacity: .7; } #ui .shop-grid.pk .pack .card-rw { left: 158px; right: 0; top: 32px; justify-content: flex-start; gap: 6px; } #ui .shop-grid.pk .pack .rw { width: 40px; height: 40px; border-radius: 7px; border-width: 2px; } #ui .shop-grid.pk .pack .rw-icon { left: 3px; top: 3px; width: 30px; height: 30px; } #ui .shop-grid.pk .pack .rw-n { bottom: -1px; font-size: 10px; line-height: 12px; } #ui .shop-grid.pk .pack .rw-c { left: -8px; right: -8px; top: 41px; font-size: 9.5px; line-height: 12px; } #ui .shop-grid.pk .pack .card-meta { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; left: 158px; right: 120px; bottom: 1px; height: 30px; white-space: nowrap; } #ui .shop-grid.pk .pack .card-left { font-size: 11px; font-weight: 700; line-height: 13px; color: #c9d0d6; } #ui .shop-grid.pk .pack .card-time { font-size: 11px; font-weight: 900; line-height: 13px; color: #ff8a6a; } /* 남은 기간 = 붉은 값(버섯커 키우기 "… 후 패키지 소멸" 붉은 시간) */ #ui .shop-grid.pk .pack .card-price { left: auto; right: 0; bottom: 0; width: 112px; height: 28px; margin-left: 0; font-size: 13px; } #ui .dim.fx-intro .shop-grid.pk .shop-card { animation-name: fx-card-in; animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .3, 1); } /* 처음 열 때 순서 지연은 ui_fx 그대로 */ #ui .shop-grid.pk.pk-swap .shop-card { animation: fx-card-in .3s cubic-bezier(.2, .8, .3, 1) both; } #ui .shop-grid.pk.pk-swap .shop-card:nth-child(2) { animation-delay: .04s; } #ui .shop-grid.pk.pk-swap .shop-card:nth-child(3) { animation-delay: .08s; } #ui .shop-grid.pk.pk-swap .shop-card:nth-child(4) { animation-delay: .12s; } #ui .shop-grid.pk.pk-swap .shop-card:nth-child(n+5) { animation-delay: .16s; } /* ---- [패키지] 탭(.pkg) = 물품 현금 묶음: 왼쪽 세로 세부 탭(.pk-subs — 성장 재화 · 잠재 주문서 · 기타 주문서) + 오른쪽 세로 타일 5열. 참고(shoppack-1105 REFERENCE.md에서 직접 연 화면): 메이플 키우기 상점 = 왼쪽 세로 분류 탭 · 상세 = 큰 그림 + 구성 + 가격 단추, 세븐나이츠 키우기 = 큰 그림 · 수량 ×N · 금색 가격, 버섯커 키우기 = 큰 그림 · 가치 띠 · 가격 단추. 하이랜드 = 무대(물품 색 후광 + 천천히 도는 빛살) 위 큰 그림 80 · 받는 수 ×N(오른쪽 아래) · 효율 "+N% 추가"(초록 = 좋아짐) · [X1|X10|X30] 한 알약 줄(고른 것 = 탭 베이지, X30 = BEST) · 글자 폭 금색 가격 알약 28. 한 줄 5장 · 둘째 줄이 보여 스크롤을 알린다(06 머리 주석 — 메이플 키우기). */ #ui .shop .sheet-body { position: relative; } #ui .pk-subs { position: absolute; left: 8px; top: 8px; z-index: 1; width: 100px; display: none; flex-direction: column; gap: 6px; } #ui .pk-subs.show { display: flex; } #ui .pk-sub { position: relative; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; text-align: left; white-space: nowrap; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: var(--ink-soft); font-size: 12px; font-weight: 800; transition: background .15s, color .15s, transform .08s; } #ui .pk-sub img { flex: none; width: 24px; height: 24px; object-fit: contain; filter: grayscale(.7) brightness(.75); transition: filter .15s; } #ui .pk-sub.on { background: linear-gradient(#e6decd, #c7bba3); color: #26221c; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* 01-popup 탭 고른 알약과 같은 베이지 */ #ui .pk-sub.on img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); } #ui .pk-sub:active { transform: scale(.94); } /* [패키지 | 다이아] 스위치 = 세부 탭 열 왼쪽 아래 · 수량 줄(.pk-qty)과 같은 어두운 알약 줄 28 + 고른 쪽 베이지 */ #ui .pk-pay { position: absolute; left: 8px; bottom: 8px; z-index: 1; width: 100px; height: 28px; padding: 2px; gap: 2px; border-radius: 999px; display: none; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .pk-pay.show { display: flex; } #ui .pk-pay .pp { flex: 1; min-width: 0; height: 24px; padding: 0 4px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft, #9a9d98); font-size: 11.5px; font-weight: 900; line-height: 24px; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s, transform .08s ease; } #ui .pk-pay .pp.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .pk-pay .pp:active { transform: scale(.9); } #ui .shop-grid.pk.pkg { padding-left: 118px; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 228px; } /* 타일(카드 투명 테 7 안쪽 기준): 이름 13 · 무대 0~132 · 수량 줄 138 · 가격 알약 아래 */ #ui .shop-grid.pk.pkg .shop-card.pack { background: linear-gradient(#232831, #15181d) border-box; } #ui .shop-grid.pk.pkg .shop-card.pack .card-tint { left: -6px; right: -6px; top: -6px; bottom: auto; width: auto; height: 138px; border-radius: 6px 6px 0 0; background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--ac) 46%, transparent) 0, color-mix(in srgb, var(--ac) 16%, transparent) 40%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--ac) 20%, #1b1f26), rgba(21, 24, 29, 0)); } #ui .shop-grid.pk.pkg .shop-card.pack .card-name { left: -2px; right: -2px; top: 0; text-align: center; font-size: 13px; line-height: 18px; text-shadow: 0 1px 2px #000; } #ui .shop-grid.pk.pkg .shop-card.pack .card-rule { display: none; } #ui .shop-grid.pk.pkg .shop-card.pack .card-art { left: calc(50% - 40px); top: 28px; width: 80px; height: 80px; } #ui .shop-grid.pk.pkg .shop-card.pack .card-art::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; pointer-events: none; will-change: transform; /* 빛살 = 회전만(다시 칠하지 않음) */ background: repeating-conic-gradient(color-mix(in srgb, var(--ac) 34%, transparent) 0 7deg, transparent 7deg 30deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: pk-rays 16s linear infinite; } #ui .shop-grid.pk.pkg .shop-card.pack .card-halo { inset: -10px; } #ui .shop-grid.pk.pkg .shop-card.pack .card-icon { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); } #ui .shop-grid.pk.pkg .shop-card.pack:not(.off):active .card-icon { transform: scale(1.06); transition: transform .06s; } /* 받는 수 ×N = 무대 오른쪽 아래(메인) · 효율 = 무대 왼쪽 아래 초록 알약 */ #ui .shop-grid.pk.pkg .shop-card.pk-main .card-sub { display: block; left: auto; right: 0; top: 108px; font-size: 16px; font-weight: 900; line-height: 20px; color: #fff; overflow: visible; text-shadow: 1.4px 0 #111, -1.4px 0 #111, 0 1.4px #111, 0 -1.4px #111, 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111; } #ui .shop-grid.pk.pkg .shop-card.pk-main .card-bonus { display: block; left: 0; right: auto; top: 110px; height: 16px; padding: 0 6px; border-radius: 8px; font-size: 10px; line-height: 16px; color: #c6f59a; background: rgba(46, 96, 30, .72); box-shadow: inset 0 0 0 1px rgba(160, 230, 110, .35); } #ui .shop-grid.pk.pkg .shop-card.pack .card-rw { display: none; } #ui .pk-qty { display: none; } #ui .shop-grid.pk.pkg .shop-card.pk-main .pk-qty { display: flex; left: 0; right: 0; top: 138px; height: 28px; padding: 2px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .pk-qty .q { position: relative; flex: 1; min-width: 0; height: 24px; border-radius: 999px; text-align: center; font-size: 11.5px; font-style: normal; font-weight: 900; line-height: 24px; color: var(--ink-soft, #9a9d98); transition: background .15s, color .15s, transform .08s ease; } #ui .pk-qty .q.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* 01-popup 탭 고른 알약 */ #ui .pk-qty .q:active { transform: scale(.9); } #ui .pk-qty .q2::after { content: "BEST"; position: absolute; right: -3px; top: -11px; height: 13px; padding: 0 4px; border-radius: 4px; background: #d64a3a; color: #fff; /* 빨간 점과 같은 붉은 강조 */ font-size: 8.5px; font-weight: 900; line-height: 13px; letter-spacing: .2px; box-shadow: 0 1px 2px #0006; animation: shop-badge 1.6s ease-in-out infinite; } /* 작은 타일 = 수량 고르기 없음: 받는 수를 같은 자리 알약으로 */ #ui .shop-grid.pk.pkg .shop-card.pk-small .card-sub { display: block; left: 0; right: 0; top: 138px; width: fit-content; height: 28px; margin: 0 auto; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 900; line-height: 28px; color: #f2f0e7; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .shop-grid.pk.pkg .shop-card:is(.pk-small, .pk-main) :is(.card-rw, .card-limit, .card-meta) { display: none; } /* 잠재 · 기타 주문서: 현금 칸 수량 줄 아래 "다이아보다 N% 이득"(초록 = 좋아짐, 효율 알약과 같은 색) · 다이아 칸 값 알약 = 다이아 아이콘 + 하늘색 */ #ui .shop-grid.pk.pkg .shop-card:is(.pk-small, .pk-main) .card-extra:not([hidden]) { display: block; left: -4px; right: -4px; top: 168px; text-align: center; font-size: 10.5px; font-weight: 900; line-height: 14px; color: #a8ec7e; text-shadow: 0 1px 2px #000; } #ui .shop-grid.pk.pkg .shop-card.pk-small:has(.price-cur:not([hidden])) .card-price { background: linear-gradient(#d6f0ff, #6fb4ea); color: #0f2740; box-shadow: 0 2px 4px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .7); } /* 묶음 상품(성장 패키지 · 월정액) = 구성품 칸 줄을 같은 자리에 */ /* 11-05 pkrw: 칸 줄 = 무대(0~132) 아래 · 남은 횟수 위(136~166), 칸 수가 많으면 타일 폭 안에서 줄어든다(월정액 4칸 · PC 타일 폭 ~120). "매일" = 칸 위 꼬리표(칸 밖 글 없음) */ #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .card-rw { display: flex; left: 0; right: 0; top: 136px; justify-content: center; gap: 3px; } #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .rw { flex: 0 1 30px; min-width: 0; width: auto; height: auto; aspect-ratio: 1; } #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .rw-icon { left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); } #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .rw-c:not(:empty) { left: 50%; right: auto; top: -7px; transform: translateX(-50%); height: 11px; padding: 0 3px; border-radius: 3px; font-size: 8px; line-height: 11px; color: #fff; background: #c4572e; box-shadow: 0 1px 2px #0008; } #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .card-meta { left: -2px; right: -2px; bottom: 32px; height: 13px; align-items: center; } #ui .shop-grid.pk.pkg .shop-card.pack:not(.pk-main, .pk-small) .card-limit { left: -4px; top: 20px; } /* 가격 = 글자 폭 금색 알약(카드 폭으로 늘이지 않음) */ #ui .shop-grid.pk.pkg .shop-card.pack .card-price { left: 0; right: 0; bottom: 0; width: fit-content; min-width: 96px; height: 28px; margin: 0 auto; padding: 0 14px; font-size: 13px; box-shadow: 0 2px 4px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 246, 214, .6); } @keyframes pk-rays { to { transform: rotate(360deg); } } /* 목록 칸 글자 = 칸 너비에 고정된 상자(Unity 목록은 견본 칸의 요소 상자를 그대로 쓰고 글자만 맞춘다 — 글자 길이로 줄고 느는 상자는 칸마다 어긋난다) */ #ui .vip-amt, #ui .vip-lines { align-self: stretch; text-align: center; overflow: hidden; } #ui .vip-claim { min-width: 80px; margin-top: auto; } #ui .vip-done { margin-top: auto; font-size: 12px; font-weight: 800; color: #5f7d2c; } /* 구매 판(EFZ: 장비 = 아이템 정보 판 scr_item_info_popup — 등급 칸 · 이름 등급색 · 칸 이름 · 능력치 줄, 패키지·다이아 = 원화 결제 확인 — 그림 + 보상 칸). EFZ 다이아·골드 상품은 확인 없이 바로 보내지만 이 게임 장비는 되돌릴 수 없는 재화 사용이라 정보 판을 한 번 보인다. 원화는 결제 시트 전 확인. */ #ui .popup.buy { width: 380px; border-width: 22px; border-image: url(../assets/ui/panel.webp) 72 fill / 22px stretch; } #ui .buy .popup-head { padding-bottom: 6px; margin-bottom: 10px; } #ui .buy .popup-head h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .buy.gear .buy-name.g-rare { color: #2f77c8; } #ui .buy.gear .buy-name.g-epic { color: #8442bd; } #ui .buy.gear .buy-name.g-unique { color: #b97a0c; } #ui .buy.gear .buy-name.g-legendary { color: #cf4228; } #ui .buy-card { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 0 4px 14px; } /* 창 높이 짝수(가운데 놓일 때 반 px 위치 → Unity 와 가장자리가 갈린다) */ #ui .buy-art { --ac: #e0a020; position: relative; flex: none; width: 96px; height: 96px; } #ui .buy-rays, #ui .buy-halo { position: absolute; left: 50%; top: 50%; pointer-events: none; border-radius: 50%; } #ui .buy-halo { width: 128px; height: 128px; margin: -64px 0 0 -64px; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 38%, transparent) 0 30%, color-mix(in srgb, var(--ac) 22%, transparent) 30% 40%, transparent 52%); animation: shop-halo 2.2s ease-in-out infinite; } #ui .buy-rays { width: 170px; height: 170px; margin: -85px 0 0 -85px; opacity: 0; background: repeating-conic-gradient(color-mix(in srgb, var(--ac) 55%, #fff) 0 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 70%); mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 70%); animation: fx-spin 16s linear infinite; } #ui .buy-art:is(.g-epic, .g-unique, .g-legendary) .buy-rays, #ui .buy:is(.pack, .dia) .buy-rays { opacity: .55; } #ui .buy-cell { position: absolute; inset: 0; } #ui .buy-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(60, 36, 14, .35)); } #ui .buy-cell .card-sheen { display: none; } #ui .buy.gear .buy-cell { left: 10px; top: 10px; right: 10px; bottom: 10px; border-radius: 10px; background: #f4e8cc; border: 2px solid color-mix(in srgb, var(--ac) 60%, #a9793e); box-shadow: inset 0 2px #ecdcb8, 0 0 10px color-mix(in srgb, var(--ac) 55%, transparent); } #ui .buy.gear .g-rare .buy-cell { background: #d6ecd9; } #ui .buy.gear .g-epic .buy-cell { background: #e3d6ef; } #ui .buy.gear .g-unique .buy-cell { background: #f3e1a8; } #ui .buy.gear .g-legendary .buy-cell { background: #f3c9c1; } #ui .buy.gear .buy-cell .card-sheen { display: block; position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; -webkit-mask-box-image: none; border-radius: 10px; } #ui .buy.gear .buy-icon { left: 8px; top: 6px; width: 56px; height: 56px; image-rendering: pixelated; filter: none; } #ui .buy.gear .buy-art.g-common .buy-halo { opacity: .45; } #ui .buy-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; } #ui .buy-sub { font-size: 12px; font-weight: 800; color: var(--ink-soft); } #ui .buy-stats { display: flex; flex-direction: column; } #ui .buy-stat { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; line-height: 16px; padding: 3px 6px; border-radius: 5px; } #ui .buy-stat.odd { background: #f8eed8; } #ui .buy-stat b { color: #3f7d2c; } #ui .buy:not(.gear) .buy-stats { display: none; } #ui .buy-lines { font-size: 12px; font-weight: 900; line-height: 16px; color: #c2412f; } #ui .buy-rw { display: flex; gap: 6px; padding-bottom: 12px; } #ui .buy.gear .buy-rw, #ui .buy.dia .buy-rw { display: none; } #ui .buy-bonus { font-size: 14px; font-weight: 900; color: #e07a10; } #ui .buy-note { font-size: 11px; font-style: normal; font-weight: 800; color: #b0492f; } #ui .buy-ok { min-width: 150px; } /* 받음 창(EFZ obj_item_get_direction + 광마 이름 창): 판 없이 어두운 막 α.74 위에 띠 · 제목 · 칸. 칸 크기는 아래(40 · 하나면 56) · 최대 5열 · 가로 간격 30 · 세로 48 · 칸마다 70ms 시차 420ms 팝인(obj_reward_window) · 등급 빛(scr_reward_flair: 맥동 1047ms · 유니크↑ 광선 10줄/전설 18 · 고리 2400/1500ms) · 확인 132x38. 움직임은 ui/ui_fx.css(fx-got-*), 여기는 자리 · 크기. */ #ui #got-dim .shade { background: rgba(6, 8, 10, .74); } #ui .popup.got { width: 560px; min-height: 250px; padding: 22px 0 6px; border: 0; border-image: none; filter: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } #ui .got-band, #ui .got-line { position: absolute; left: 50%; width: var(--hw, 800px); margin-left: calc(var(--hw, 800px) / -2); pointer-events: none; } #ui .got-band { top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .42) 22%, rgba(0, 0, 0, .42) 78%, rgba(0, 0, 0, 0)); } #ui .got-line { height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 30%, rgba(255, 255, 255, .22) 70%, rgba(255, 255, 255, 0)); overflow: hidden; } #ui .got-line.top { top: 0; } #ui .got-line.bottom { bottom: 0; } #ui .got-line::after { content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 100%; background: linear-gradient(90deg, rgba(255, 236, 170, 0), #ffe9a8, rgba(255, 236, 170, 0)); } #ui .got-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: 0; pointer-events: none; background: #fff6cf; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } #ui .got-title { position: relative; font-size: 21px; font-weight: 900; line-height: 26px; color: #fff4d6; letter-spacing: 1px; text-shadow: 1.5px 0 #2a1a0c, -1.5px 0 #2a1a0c, 0 1.5px #2a1a0c, 0 -1.5px #2a1a0c, 1.1px 1.1px #2a1a0c, -1.1px 1.1px #2a1a0c, 1.1px -1.1px #2a1a0c, -1.1px -1.1px #2a1a0c, 0 0 12px rgba(255, 210, 110, .55); } #ui .got-title::before, #ui .got-title::after { content: ""; position: absolute; top: 12px; width: 70px; height: 2px; background: linear-gradient(90deg, rgba(255, 219, 130, 0), #ffdb82); } #ui .got-title::before { right: calc(100% + 12px); } #ui .got-title::after { left: calc(100% + 12px); transform: scaleX(-1); } /* 칸 목록은 자르지 않는다: overflow 상자는 원형 빛살(230px)을 네모로 자른다. 네 줄(28칸)까지는 넘쳐 그린다. 29칸부터만 스크롤 — 그때는 위아래를 부드럽게 흐리고(직선 경계 없음) 빛살은 끈다(맥동 빛·고리만). */ #ui .got-grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 22px; max-width: 340px; overflow: visible; padding: 18px 10px 4px; } #ui .got-grid:has(> .got-cell:nth-child(29)) { max-height: 196px; overflow-y: auto; -webkit-mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent); } #ui .got-grid:has(> .got-cell:nth-child(29)) .got-rays { display: none; } /* 칸 40(하나면 56) = 경매장 au-tile 결 어두운 등급색 네모(테 = 등급색) · 빛 · 빛살 · 고리도 같은 비율. 확인 = 띠 아래 바깥(아래 빛선 + 14)의 글자 폭 베이지 알약(01-popup 전체화면 단추 값), 창은 그만큼 위로(margin-bottom). */ #ui .popup.got { margin-bottom: 58px; gap: 14px; } #ui .got-cell { --ac: #ffe08a; position: relative; flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; } #ui .got-slot { position: relative; width: 40px; height: 40px; border: 0; border-image: none; border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 50%, #1d2124), color-mix(in srgb, var(--ac) 16%, #121517)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ac) 75%, #fff); } #ui .got-slot::before { display: none; } #ui .got-slot .card-sheen { left: 0; top: 0; right: 0; bottom: 0; border-radius: 8px; -webkit-mask-box-image: none; animation-duration: 2.6s; } #ui .got-icon { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); } #ui .got-icon[src^="data:"] { left: 4px; top: 4px; width: 32px; height: 32px; image-rendering: pixelated; filter: none; } #ui .got-n { position: absolute; right: -3px; bottom: -4px; font-size: 10px; font-weight: 900; line-height: 12px; color: #fff; white-space: nowrap; text-shadow: 1.2px 0 #000, -1.2px 0 #000, 0 1.2px #000, 0 -1.2px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000; } #ui .got-name { width: 62px; max-height: 28px; font-size: 11px; font-weight: 800; line-height: 14px; color: #f2f0e7; overflow: hidden; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 폭 = 칸 간격(40 + 22) — 이웃 이름과 겹치지 않게, 두 줄 넘으면 … */ text-shadow: 1.2px 0 #000, -1.2px 0 #000, 0 1.2px #000, 0 -1.2px #000; } #ui .got-cell.g-rare .got-name { color: #9fd0ff; } #ui .got-cell.g-epic .got-name { color: #dcb6ff; } #ui .got-cell.g-unique .got-name { color: #ffe08a; } #ui .got-cell.g-legendary .got-name { color: #ffb08a; } #ui .got-glow, #ui .got-rays, #ui .got-ring { position: absolute; left: 50%; top: 20px; pointer-events: none; border-radius: 50%; } #ui .got-glow { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: radial-gradient(circle, color-mix(in srgb, var(--ac) 55%, transparent) 0 22%, color-mix(in srgb, var(--ac) 22%, transparent) 40%, transparent 66%); mix-blend-mode: screen; } #ui .got-rays { width: 108px; height: 108px; margin: -54px 0 0 -54px; display: none; mix-blend-mode: screen; background: repeating-conic-gradient(color-mix(in srgb, var(--ac) 80%, #fff) 0 5deg, transparent 5deg 36deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 36%, rgba(0, 0, 0, .5) 52%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 36%, rgba(0, 0, 0, .5) 52%, transparent 70%); } #ui .got-cell:is(.g-unique, .g-legendary, .g-epic) .got-rays, #ui .got.one .got-rays { display: block; } #ui .got.one .got-cell:is(.g-common, .g-uncommon, .g-rare) .got-rays { opacity: .5; } /* 하나만 받으면 낮은 등급도 옅은 빛살 — 그림이 주인공 */ #ui .got-cell.g-legendary .got-rays { background: repeating-conic-gradient(color-mix(in srgb, var(--ac) 60%, #ffd24a) 0 4deg, transparent 4deg 20deg); } #ui .got-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid #fff; opacity: 0; } /* 칸 수 단계(보상 판 quest.css .qr-grid 와 같은 단계): 6칸까지 그림 + 이름, 7칸부터 그림 + 수량만(누르면 아이템 정보), 19칸부터 칸 34 */ #ui .got-grid:has(> .got-cell:nth-child(7)) { gap: 10px; } #ui .got-grid:has(> .got-cell:nth-child(7)) .got-name { display: none; } #ui .got-grid:has(> .got-cell:nth-child(19)) { gap: 8px; max-width: 320px; } #ui .got-grid:has(> .got-cell:nth-child(19)) :is(.got-cell, .got-slot) { width: 34px; } #ui .got-grid:has(> .got-cell:nth-child(19)) .got-slot { height: 34px; border-radius: 7px; } #ui .got-grid:has(> .got-cell:nth-child(19)) :is(.got-icon, .got-icon[src^="data:"]) { left: 4px; top: 4px; width: 26px; height: 26px; } #ui .got-grid:has(> .got-cell:nth-child(19)) :is(.got-glow, .got-rays, .got-ring) { top: 17px; scale: .85; } /* 하나만 받으면 한 단 크게(56) */ #ui .got.one .got-grid { padding-top: 20px; } #ui .got.one .got-cell { width: 56px; } #ui .got.one .got-slot { width: 56px; height: 56px; border-radius: 10px; } #ui .got.one .got-slot .card-sheen { border-radius: 10px; } #ui .got.one .got-icon, #ui .got.one .got-icon[src^="data:"] { left: 6px; top: 6px; width: 44px; height: 44px; } #ui .got.one :is(.got-glow, .got-rays, .got-ring) { top: 28px; } #ui .got.one .got-glow { width: 100px; height: 100px; margin: -50px 0 0 -50px; } #ui .got.one .got-rays { width: 154px; height: 154px; margin: -77px 0 0 -77px; } #ui .got.one .got-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; } #ui .got.one .got-name { width: 180px; max-height: 17px; font-size: 13px; line-height: 17px; } #ui .got.one .got-n { font-size: 11px; } #ui .got .ask-buttons { position: absolute; left: 0; right: 0; top: calc(100% + 14px); display: flex; justify-content: center; } #ui .btn.got-ok { flex: none; min-width: 108px; min-height: 30px; padding: 0 18px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; font-size: 13px; font-weight: 800; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .5); } #ui .popup.adp { width: 300px; text-align: center; } #ui .ad-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 12px; } #ui .ad-icon { width: 44px; height: 44px; object-fit: contain; } #ui .ad-reward { font-size: 15px; font-weight: 900; } #ui .ad-left, #ui .ad-wait { font-size: 12px; font-weight: 700; color: var(--ink-soft); } #ui .ad-watch { min-width: 132px; } /* 큰 지도 창(features/worldmap — 미니맵 누름), 칸 = 손그림 지도 두 겹 캔버스(바탕 · 표시). 칸은 넘치지 않고(캔버스 = 칸 크기) 끌기 = 옮기기 · 핀치 · 휠 = 확대·축소(host RtBattleWorldMap 카메라). 전체화면 창(01-popup .popup.full — 머리 띠 46 = ‹ + 흰 선 지도 아이콘 + 지금 필드 이름 · HUD 숨김 · 상자 X 없음). 지도 칸은 머리 띠 아래 판 전체(좌우 · 아래 여백 없이 끝까지) — 도깨비의 세계 지도 화면처럼 지도가 화면을 채우고 창 장식은 머리 띠뿐. 넓은 화면은 지도 칸이 넓어져 섬이 더 크게 들어온다(배율은 host RtBattleWorldMap.layout 이 칸 크기로 다시 잡음) */ #ui .popup.full.map { padding-bottom: 0; } #ui .popup.full.map > .popup-head { margin-bottom: 0; position: relative; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } /* 띠 아래 그림자 = 지도 위에 얹힌 띠 */ #ui .popup.full.map > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-map.png); mask-image: url(../assets/icons/menu-map.png); } #ui .map-body { flex: 1; min-height: 0; margin: 0 -18px; padding: 0; overflow: hidden; touch-action: none; cursor: grab; background: #1f3235; } /* 바탕색 = 미니맵 MM.sea 와 같은 먹빛 바다(굽기 전 · 바탕 밖) */ #ui .map-body:active { cursor: grabbing; } #ui .map-pan { position: relative; width: 100%; height: 100%; } #ui .map-pan canvas { position: absolute; left: 0; top: 0; display: block; } /* 설정 조작 탭(EFZ 조작 탭): 탭 셋 · [전체 버튼 조정] · 공격 방식 두 칸 · 켬/끔 — 둘레·색은 켬/끔 줄(.toggle-row · .toggle)과 같은 톤. 연출(탭 판 등장은 ui_fx.css): 탭을 열면 줄이 차례로 떠오름 · 켬/끔 손잡이·색이 미끄러지듯 · 고른 칸이 살짝 튐 · 누르면 눌림 */ #ui .popup.settings .stabs { --n: 4; } /* 유저 · 게임 · 조작 · 그래픽 — 그래픽 판(.p-gfx)도 ctl-panel 모양(카메라 막대 + 켬/끔 두 칸씩) */ #ui .popup.settings .stabs .tab { padding: 0 4px; font-size: 12px; line-height: 13px; white-space: normal; overflow: hidden; overflow-wrap: anywhere; } /* 셋이라 칸이 좁다: 긴 말은 두 줄(34 높이 안). 글 12px = EFZ 탭 font_little(9pt) */ #ui .ctl-panel:not([hidden]) > * { animation: ctl-row .3s ease-out both; } #ui .ctl-panel > :nth-child(2) { animation-delay: .05s; } #ui .ctl-panel > :nth-child(3) { animation-delay: .1s; } #ui .ctl-panel > :nth-child(4) { animation-delay: .15s; } #ui .ctl-panel > :nth-child(5) { animation-delay: .2s; } #ui .ctl-panel > :nth-child(6) { animation-delay: .2s; } @keyframes ctl-row { from { opacity: 0; transform: translateY(10px); } } #ui .ctl-panel .toggle-row { margin-bottom: 8px; } /* 켬/끔 넷(스킬 연출 · 타격감 효과 · 화면 흔들림 · 피해 화면 효과)은 두 칸씩 — 한 줄씩이면 폰 가로(412 높이)에서 설정 창 밑으로 잘린다 */ #ui .popup.settings .ctl-panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5px; align-content: start; } #ui .popup.settings .ctl-panel > .ctl-edit-all, #ui .popup.settings .ctl-panel > .ctl-mode, #ui .popup.settings :is(.ctl-panel, .gfx-grp) > .ctl-cam { grid-column: 1 / -1; } /* 그래픽 탭 [전투 | 배경]: 위 두 칸(조이스틱 방식 줄과 같은 칸 모양) + 고른 묶음 하나 — 묶음도 두 칸씩, 바꾸면 묶음이 다시 떠오른다 */ #ui .popup.settings .gfx-seg { grid-column: 1 / -1; margin-bottom: 8px; } /* 그래픽 품질 줄([자동 | 낮음 | 중간 | 높음]): 날씨 줄과 같은 이름 | 칸 모양, 탭 맨 위 한 줄(어느 묶음에서나 보인다) */ #ui .popup.settings .gfx-q { grid-column: 1 / -1; margin-bottom: 8px; white-space: nowrap; padding-right: 4px; } #ui .popup.settings .gfx-q .vol-name { width: 62px; white-space: normal; line-height: 1.1; } #ui .popup.settings .sl-pot .vol-name { width: 62px; white-space: normal; line-height: 1.1; } /* 11-04 W23 R23 물약 자동 사용 % — 그래픽 막대와 같은 이름 칸 */ #ui .popup.settings .q-seg { flex: 1; grid-template-columns: repeat(4, 1fr); margin: 0 2px 0 8px; } #ui .popup.settings .gfx-grp { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5px; animation: ctl-row .3s ease-out both; } #ui .popup.settings .gfx-grp[hidden] { display: none; } /* 배경 묶음: 그림자 · 시간 흐름 = 이름 | 켬/끔 | 막대 | 값, 날씨 = 이름 | 켬/끔 | [자동 · 비 · 눈] — 한 줄씩(스위치 왼쪽 · 막대나 선택지 오른쪽). 잠긴 막대 · 칸(그림자 끔 · 시간 흐름 켬 · 날씨 끔)은 흐리게 · 안 눌림. */ #ui .popup.sheet.settings .sheet-body { height: 228px; } /* 그래픽 품질 줄(31 + 8) + 배경 묶음 넷이 안 잘리는 높이 · 설정 창 높이 ≈ 317 이 폰 가로 412 안 */ #ui .popup.settings .gfx-grp > :is(.gfx-sl, .gfx-wx) { grid-column: 1 / -1; white-space: nowrap; padding-right: 4px; } #ui .popup.settings .gfx-grp .gfx-sl .vol-name, #ui .popup.settings .gfx-wx .vol-name { width: 62px; white-space: normal; line-height: 1.1; } #ui .popup.settings .gfx-grp :is(.gfx-sl, .gfx-wx) > .toggle { flex: none; margin-left: 2px; } #ui .popup.settings .gfx-sl .vol-num { width: 38px; } #ui .popup.settings .gfx-sl .vol-bar, #ui .popup.settings .gfx-wx .wx-seg { transition: opacity .2s, filter .2s; } #ui .popup.settings .gfx-sl.off .vol-bar, #ui .popup.settings .gfx-sl.off .vol-num { opacity: .35; filter: grayscale(1); pointer-events: none; } #ui .popup.settings .gfx-wx .wx-seg { flex: 1; grid-template-columns: repeat(3, 1fr); margin: 0 2px 0 8px; } #ui .popup.settings .gfx-wx .wx-seg button.off { opacity: .35; filter: grayscale(1); pointer-events: none; } /* 카메라 세로 각도 막대: 볼륨 바(account 02-sheet-settings .vol-*) 그대로 · 아이콘 없음 · 이름은 글자 폭 · 숫자 = "30°" */ #ui .popup.settings :is(.ctl-panel, .gfx-grp) > .ctl-cam { white-space: nowrap; } #ui .popup.settings .ctl-cam .vol-name { width: auto; } #ui .popup.settings .ctl-cam .vol-num { width: 28px; } #ui .popup.settings :is(.ctl-panel, .gfx-grp) > .toggle-row:not(.ctl-mode) { min-width: 0; gap: 3px; padding: 0 4px 0 7px; font-size: 11.5px; line-height: 1.15; } /* 긴 말(영어 · 일본어)은 두 줄로 접힘 */ :is(html:lang(ko), html:lang(zh)) #ui .popup.settings :is(.ctl-panel, .gfx-grp) > .toggle-row:not(.ctl-mode) { white-space: nowrap; } /* 짧은 말은 한 줄("피해 화면 효/과"처럼 접히지 않게) */ #ui .ctl-edit-all { display: block; width: 100%; margin-bottom: 8px; min-height: 32px; padding: 2px 10px; font-size: 12px; } /* EFZ 조작 탭 [전체 버튼 조정] 높이 30 · font_little */ #ui .ctl-mode { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; } #ui .ctl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #ui .ctl-seg button { height: 30px; border-radius: 8px; border: 2px solid #c9ac77; background: #f3e6c8; color: var(--ink-soft); font-size: 12px; font-weight: 800; transition: background .2s, color .2s, border-color .2s, transform .08s; } #ui .ctl-seg button.on { background: #8fae4c; border-color: #5f7d2c; color: #fff; animation: ctl-pop .25s ease-out; } #ui .ctl-seg button:active, #ui .ctl-edit-all:active { transform: scale(.96); } @keyframes ctl-pop { 40% { transform: scale(1.06); } } #ui .ctl-panel .toggle { transition: background .2s, border-color .2s; } #ui .ctl-panel .toggle::before, #ui .ctl-panel .toggle::after, #ui .ctl-panel .toggle span { transition: opacity .18s; } /* 채팅 · 친구 · 파티(party 레인 2026-10-18 — 채팅 창은 10-20 전체화면, 아래 '채팅 창 = 전체화면' 묶음). 틀 = 이 창 층 그대로(.popup.sheet 나인패치 판 · .tabs · .sheet-body · .btn / .btn.plain · 닫기), 새 그림 없음. 수치 = EFZ: 채팅 창 560x360(obj_chat_window Create_0.gml:9) · 탭 4개 · 말 줄 최대폭 66% · 최소 96(Draw_64.gml:83-87) · 입력 100자 + [보내기](548-577) · HUD 미리보기 = 반투명 검정 .55 · 작은 흰 글자 · 이름 = 범위 색(obj_chat_direction Draw_64.gml:76-97, 색 표 198-222) · 파티 칸 92x34 · 간격 7 · GUI 높이 − 108(=342) 가운데 · 체력 막대 6 · 파티장 별 · ✕(scr_unit_manager.gml:6346-6459) · 친구 줄 = 이름 Lv · 온라인 · 장소(obj_profile_window 735-773). 범위 색: 어두운 HUD 위는 EFZ 값 그대로, 밝은 양피지 창 안은 같은 색상의 진한 톤(글자만 — 띠 · 배경색 칠 없음). */ /* 2026-10-18 사용자 "우측 상단 골드·다이아 빼고 그 자리에 채팅창" → "채팅아이콘 왜 왼쪽이고 왜 저렇게 크기가 크냐" · "편지, 설정 아이콘 크기로" · "EFZ 좀 참고 좀 제대로": EFZ obj_chat_direction/Draw_64.gml 그대로(GUI px = 이 HUD 무대 px — 미니맵 (62,64) r50 이 같은 값): 오른쪽 끝 x2 = W − (108 + 40) · 폭 = min(280 − 40, max(180, W − 220 − 40)) · y1 = 34 · 높이 30 · 검정 .55 둥근 판 · 최근 한 줄 "이름 : 말"(이름 = 순위 색, 없으면 흰색) · 글 칸 = 폭 − 50 · font_little 9pt · 말이 없으면 입력 안내 · 채팅 아이콘 = 판 안 오른쪽 끝, 가운데 x2 − 17 — 크기만 사용자 지시대로 머리줄 편지 · 설정과 같은 크기(칠해진 그림 긴 변이 설정 톱니와 같게) · 누름: 판 왼쪽(x1 ~ x2 − 36) = 채팅 창, 아이콘 칸(x2 − 36 ~ x2) = 바로 입력. 창이 떠 있거나 대화 중이면 숨김(17b chatHudShow). 레벨 10 미만 숨김은 따르지 않는다(sandbox 게스트가 Lv1 이라 요청한 미리보기 자체가 안 보인다). 판은 HUD 층 .hud-in(머리줄과 같은 배율)에 둔다 */ #hud .chat-hud { right: 148px; top: 34px; width: clamp(180px, calc(var(--hw, 800px) - 260px), 240px); height: 30px; box-sizing: border-box; padding: 0 0 0 8px; border-radius: 6px; background: rgba(59, 36, 18, .62); box-shadow: inset 0 0 0 1px rgba(201, 172, 119, .32); display: flex; align-items: center; color: #f4e8d1; font-size: 10.5px; font-weight: 600; line-height: 30px; pointer-events: auto; cursor: pointer; } #hud .chat-hud p b { font-weight: 700; color: #f3d998; } /* 이름 = 옅은 금빛(순위 색 자리), 말 = 크림 — 10-18 사용자 "완전 쌩 검정 · 완전 흰색 쓰지 말라" · "글자 좀 더 작게" */ #hud .chat-hud-text { flex: 1; min-width: 0; margin-right: 6px; } #hud .chat-hud p, #hud .chat-hud-hint { display: block; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hud .chat-hud-hint { display: none; } #hud .chat-hud.empty .chat-hud-hint { display: block; } #hud .chat-hud-icon { position: relative; flex: none; width: 36px; height: 30px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } #hud .chat-hud-icon img { left: 2.43px; top: -1.58px; width: 33.15px; height: 33.15px; } /* 가운데 = 칸 오른쪽에서 17(EFZ _icon_x). 33.15 = 머리줄 설정 톱니와 같은 크기(39)의 85 %(10-18 사용자 "채팅 말풍선 아이콘 좀 더 작게 85% 정도로") — 가운데 · 누름 칸 36 그대로 */ #hud .chat-hud-icon:active img { transform: scale(.92); } #hud .chat-hud:active { background: rgba(59, 36, 18, .76); } #ui .party-hud { position: absolute; left: 50%; top: 342px; transform: translateX(-50%); display: flex; gap: 7px; pointer-events: auto; } #ui .pslot { position: relative; width: 128px; height: 34px; padding: 3px 5px 0 33px; border-radius: 6px; background: rgba(59, 36, 18, .6); box-shadow: inset 0 0 0 1px rgba(201, 172, 119, .3); color: #f4e8d1; text-shadow: 0 1px 1px rgba(42, 26, 12, .85); cursor: pointer; } /* 폭 92 → 128: 닉네임 7글자 + 파티장 별을 자르지 않고 다 보인다(10-25 사용자 "닉네임은 전광판효과없이 길어도 그냥 다 보여줘야") */ #ui .pslot .p-face { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; } #ui .pslot b { display: block; font-size: 11px; font-weight: 800; line-height: 14px; white-space: nowrap; overflow: hidden; } #ui .pslot .pbar { position: absolute; left: 33px; right: 5px; bottom: 7px; height: 6px; border-radius: 3px; background: rgba(42, 26, 12, .6); overflow: hidden; } #ui .pslot .pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(rgba(255, 90, 74, .9), rgba(224, 31, 22, .9)); transition: width .25s ease; } #ui .pslot .pwhere { display: block; font-size: 9.5px; font-weight: 700; line-height: 13px; color: #d6bd92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .pslot.away { background: rgba(59, 36, 18, .42); } #ui .pkick { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #c0603f; border: 2px solid #8e3f25; } #ui .pkick::before, #ui .pkick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; background: #fff7ea; transform: rotate(45deg); } #ui .pkick::after { transform: rotate(-45deg); } #ui i.star { display: inline-block; width: 10px; height: 10px; margin: 0 2px -1px 0; background: #e6b43a; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } #ui .party-invite { position: absolute; z-index: 30; left: 50%; top: 58px; width: 300px; transform: translateX(-50%) scale(.9); opacity: 0; pointer-events: auto; text-align: center; border: 22px solid transparent; border-image: url(../assets/ui/panel.webp) 72 fill / 22px stretch; filter: drop-shadow(0 8px 14px #0006); transition: opacity .18s ease, transform .18s cubic-bezier(.3, 1.5, .6, 1); } #ui .party-invite.show { opacity: 1; transform: translateX(-50%) scale(1); } #ui .party-invite p { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #2f6f91; padding-bottom: 10px; } #ui .party-invite-buttons { display: flex; justify-content: center; gap: 10px; } #ui .party-invite-buttons .btn { min-width: 96px; } #ui .social-toast { position: absolute; z-index: 31; left: 50%; top: 96px; max-width: 420px; padding: 7px 16px; border-radius: 14px; background: rgba(59, 36, 18, .9); color: #f4e8d1; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, -6px); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; } #ui .social-toast.show { opacity: 1; transform: translate(-50%, 0); } #ui .social-tabs { --n: 3; } #ui .social-tabs .tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } /* 친구 창 입력 줄(양피지 창 결 그대로 — 채팅 입력 줄은 아래 전체화면 묶음) */ #ui .social-add-row { flex: none; display: flex; gap: 8px; padding-top: 8px; } #ui .social-add-input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 2px solid #c9ac77; border-radius: 8px; background: #fffaf0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); user-select: text; -webkit-user-select: text; outline: none; } #ui .social-add-input::placeholder { color: #a8916a; } #ui .social-add-btn { flex: none; min-width: 86px; white-space: nowrap; } /* 얼굴 칸(features/looks faceHtml — 채팅 줄 · 친구 · 파티 · 초대): 바탕 = 말 칸과 같은 양피지(10-18 사용자 "뒷배경은 왜 검은색"), 테 = 그 줄 범위 색(말 칸과 같다). 내 얼굴 = 좌우 반전(왼쪽, 곧 말 칸 쪽을 본다 — EFZ 와 같다) */ #ui .look-face { position: relative; flex: none; width: 42px; height: 42px; padding: 0; border: 0; background: #efe0c0; overflow: hidden; } #ui .look-face.mine { background: #f3e1b8; } #ui .look-face::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 4px solid transparent; border-image: url(art/face-frame.png) 14 / 4px stretch; pointer-events: none; } /* 얼굴 액자(나무 테 · 금빛 립 · 모서리 징) */ #ui .pslot .look-face::after, #ui .pi-face::after { border-width: 3px; border-image-width: 3px; } #ui .look-face img { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #ui .look-face.mine img { transform: scaleX(-1); } #ui .chat-face.mine { cursor: default; } #ui .f-face { width: 34px; height: 34px; } #ui .pi-face { width: 30px; height: 30px; margin-right: 8px; } /* ── 채팅 창 = 전체화면(2026-10-20 사용자 "고품질 UI 문서 참고해서 채팅 UI 전체화면으로 문서에 맞게 수정해줘") ── 틀 = 공용 .popup.full(01-popup: 어두운 반투명 판 · 머리 띠 ‹ + 흰 선 아이콘 + 흰 굵은 제목 · HUD 숨김 · 스며들기) — 근거 .claude/skills/hq-ui(도깨비의 세계 전체화면 창 결). 줄 순서 · 수치는 EFZ obj_chat_window 그대로(탭 4 · 남 = 왼쪽 얼굴 · 나 = 오른쪽 · 말 칸 최대 66 % · 줄 간격 10 · 입력 100자 + [보내기], Draw_64.gml:83-87 · 298-316 · 548-577), 양피지 나인패치 말 칸 · 꼬리만 걷어 낸다(고품질 문서: 색은 거의 무채색, 강조색만 — 범위 꼬리표는 도깨비 채팅 색 꼬리표 결, dokkaebi-world.md §5 왼쪽 아래 채팅). */ #ui .popup.full.chat > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-friends.png); mask-image: url(../assets/icons/menu-friends.png); } /* 채팅 흰 선 아이콘이 없어 메뉴 친구 아이콘(사람 둘) — 소셜 묶음 같은 그림 */ /* 탭 = 공용 어두운 알약 줄(높이 30 · 글자 폭) — 바탕 .tabs 의 1fr 격자 · 양피지 탭을 덮는다 */ #ui .popup.full.chat .chat-tabs { flex: none; height: 30px; margin-bottom: 8px; } #ui .popup.full.chat .chat-tabs .tab { font-size: 12.5px; font-weight: 800; white-space: nowrap; } /* 기록 칸 = 어두운 반투명 판(판 안 판 — 물품 · 랭킹 목록 칸과 같은 결). 넓은 화면은 칸 폭만 넓어지고 말 칸 · 얼굴은 그대로 */ #ui .popup.full.chat .chat-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } /* EFZ _row_gap 10 · 얼굴 = 영역 끝에서 14 */ #ui .popup.full.chat .chat-log .empty { min-height: 0; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; } #ui .popup.full.chat .chat-row { flex: none; display: flex; align-items: flex-start; gap: 8px; } #ui .popup.full.chat .chat-row.mine { justify-content: flex-end; } /* 얼굴 36(어두운 판 위라 양피지 바탕 · 나무 테 대신 옅은 회색 바탕 + 가는 흰 테 — 검정 칸으로 보이지 않게) */ #ui .popup.full.chat .look-face { width: 36px; height: 36px; border-radius: 10px; background: #5a5750; } #ui .popup.full.chat .look-face.mine { background: #6a6457; } #ui .popup.full.chat .look-face::after { border: 1px solid rgba(255, 255, 255, .16); border-image: none; border-radius: 10px; } /* 말 칸: 남 = 어두운 반투명 둥근 칸(얼굴 쪽 위 모서리만 덜 둥글게 — 꼬리 대신), 나 = 살짝 밝은 베이지 기운. 최대 66 %(EFZ) · 넓은 화면도 480 까지만 */ #ui .popup.full.chat .chat-bub { position: relative; display: flex; flex-direction: column; max-width: min(66%, 480px); min-width: 96px; min-height: 0; padding: 6px 12px 7px; border: 0; border-image: none; border-radius: 4px 12px 12px 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); } #ui .popup.full.chat .chat-row.mine .chat-bub { border-radius: 12px 4px 12px 12px; background: rgba(230, 220, 198, .16); box-shadow: inset 0 0 0 1px rgba(236, 226, 205, .12); } #ui .popup.full.chat .chat-bub::before, #ui .popup.full.chat .chat-bub::after { display: none; } #ui .popup.full.chat .chat-row.failed .chat-bub { opacity: .55; } /* 머리줄 = [범위] 이름 — 작은 회백 굵은 글자, 범위만 어두운 판 위 밝은 톤(시스템 = 주황, 도깨비 채팅 색 꼬리표) */ #ui .popup.full.chat .chat-head { display: flex; align-items: center; gap: 4px; padding-right: 0; font-size: 11px; font-weight: 700; line-height: 15px; color: #c9cbc6; white-space: nowrap; } #ui .popup.full.chat .chat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } #ui .popup.full.chat .chat-row.mine .chat-name { cursor: default; } #ui .popup.full.chat :is(.s-world, .s-system) .chat-scope { color: #d8c9a8; } #ui .popup.full.chat .s-channel .chat-scope { color: #9fd0a6; } #ui .popup.full.chat .s-party .chat-scope { color: #8fc6ff; } #ui .popup.full.chat .s-guild .chat-scope { color: #c6a8ff; } #ui .popup.full.chat .s-whisper .chat-scope { color: #f0a6c0; } /* 신고 = 머리줄 오른쪽 끝 작은 회색 테 글자(EFZ 오른쪽 위 자리 그대로, 상자 색은 빼고) */ #ui .popup.full.chat .chat-report { position: static; flex: none; width: auto; height: 15px; margin-left: auto; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: none; color: #a7aaa5; font-size: 9.5px; font-weight: 700; line-height: 13px; transition: transform .16s cubic-bezier(.3, 1.8, .5, 1); } #ui .popup.full.chat .chat-report:active { transform: scale(.92); transition-duration: .06s; background: rgba(255, 255, 255, .1); } #ui .popup.full.chat .chat-head:has(.chat-report) .chat-name { margin-right: 12px; } #ui .popup.full.chat .chat-text { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -.1px; color: #eceae2; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; } #ui .popup.full.chat .chat-time { position: static; align-self: flex-end; margin-top: 2px; font-size: 9.5px; font-weight: 600; line-height: 11px; color: #8d908b; } /* EFZ 시각 = 오른쪽 아래 */ #ui .popup.full.chat .chat-sys { flex: none; align-self: center; max-width: min(80%, 560px); padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .32); color: #e3a35c; font-size: 11.5px; font-weight: 700; line-height: 16px; text-align: center; } /* 새 말 = 아래에서 살짝 밀려 들어옴(.2s) — 처음 연 기록은 그대로(17b renderChat 이 새 줄에만 .fresh) */ #ui .popup.full.chat .chat-log > .fresh { animation: chat-in .2s cubic-bezier(.2, .8, .3, 1.1) both; } #ui .popup.full.chat .chat-log > .chat-row.fresh:not(.mine) { animation-name: chat-in-l; } #ui .popup.full.chat .chat-log > .chat-row.fresh.mine { animation-name: chat-in-r; } @keyframes chat-in { from { opacity: 0; transform: translateY(8px); } } @keyframes chat-in-l { from { opacity: 0; transform: translate(-14px, 4px); } } @keyframes chat-in-r { from { opacity: 0; transform: translate(14px, 4px); } } /* 입력 줄 = 어두운 입력 칸 + 가는 밝은 테 · [보내기] = 청록 결정 알약(글자 폭) */ #ui .popup.full.chat .chat-input-row { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 10px; } #ui .popup.full.chat .chat-input { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(0, 0, 0, .4); font: inherit; font-size: 13px; font-weight: 500; color: #f2f0e7; user-select: text; -webkit-user-select: text; outline: none; transition: border-color .15s; } #ui .popup.full.chat .chat-input:focus { border-color: rgba(131, 195, 191, .7); } #ui .popup.full.chat .chat-input:disabled { background: rgba(0, 0, 0, .25); } #ui .popup.full.chat .chat-input::placeholder { color: #80837e; } #ui .popup.full.chat .chat-send { flex: none; width: auto; min-width: 0; height: 32px; padding: 0 18px; } /* 누름 = 60ms .92 로 눌렸다가 놓으면 살짝 튀어 돌아옴(고품질 문서 손맛) — 탭 · 단추 · ‹ */ #ui .popup.full.chat :is(.tab, .btn, .close.back) { transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .15s, color .15s; } #ui .popup.full.chat :is(.tab, .btn:not(.off), .close.back):active { transform: scale(.92); transition-duration: .06s; } #ui .social-add { flex: none; display: flex; flex-direction: column; margin-bottom: 8px; } #ui .social-add-row { padding-top: 4px; } #ui .social-code { font-size: 12px; font-weight: 800; color: var(--ink-soft); user-select: text; -webkit-user-select: text; } #ui .social-list { display: flex; flex-direction: column; gap: 6px; } #ui .friend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 54px; padding: 0 2px; border: 12px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 12px stretch; } #ui .f-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #ui .f-text b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .f-text b i { font-style: normal; font-size: 11px; color: var(--ink-soft); } #ui .f-where { font-size: 11.5px; font-weight: 700; color: #8d7a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .f-where.on { color: #3f7a4c; } #ui .f-hp { position: relative; height: 6px; border-radius: 3px; background: #cdbb98; overflow: hidden; } #ui .f-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff5a4a, #e01f16); } #ui .f-acts { display: flex; gap: 4px; } #ui .btn.plain.sm { min-height: 26px; padding: 0 8px; border-width: 2px 2px 3px; border-radius: 8px; font-size: 12px; white-space: nowrap; } #ui .btn.plain.sm[data-danger] { color: #b0492f; } /* ── 친구 = 내 프로필 [친구] 탭(.mp-fr — 11-04 W15 사용자 "우측 상단 메뉴에 친구 있는데, 이거 내 프로필 세부 탭에 … 넣자"). 아래 줄 · 단추 결은 옛 친구 전체화면 창 그대로 ── 옛 창: 전체화면(2026-10-20 사용자 "샌드박스에 고품질 UI 문서 참고해서 친구랑 공지탭도 퀄리티높게, 전체화면으로 바꿔봐") 틀 = 공용 .popup.full(01-popup: 어두운 반투명 판 · 머리 띠 46 ‹ + 흰 선 아이콘 + 흰 굵은 제목 · HUD 숨김 · 스며들기). 근거 .claude/skills/hq-ui · dokkaebi-world.md §8~§10 (친구 화면은 도깨비 그림이 없어 §14 #10 "못 봄" — 같은 게임 랭킹 창 줄 결(11-ranking rk-row 50 · 얼굴 40)과 채팅 전체화면 입력 줄을 그대로 쓴다). 줄 내용 · 순서는 EFZ obj_profile_window 735-773(얼굴 · 이름 Lv · 온라인 · 장소 · 단추) 그대로. 넓은 화면은 칸을 키우지 않고 목록 열을 가운데 760(EFZ 창 폭)까지만. */ #ui .mp-fr { display: flex; flex-direction: column; } /* 머리 줄 = 목록 · 요청 · 파티 작은 알약(세부 탭 아래 둘째 줄이라 높이 26 · 글자 12) + 바로 옆 회색 숫자(친구 수 · 파티 인원 — 옛 창 제목 옆 숫자 자리) */ #ui .mp-fr-head { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } #ui .popup.full .mp-fr .social-tabs { flex: none; height: 26px; margin: 0; } #ui .popup.full .mp-fr .social-tabs .tab { min-width: 0; padding: 0 14px; font-size: 12px; font-weight: 800; } #ui .mp-fr-head .count { margin-left: 2px; font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui .mp-tab-fr { position: relative; } /* 추가 줄 = 어두운 입력 칸(채팅 입력과 같은 값) + 청록 결정 알약 [추가](글자 폭) · 내 친구 코드 = 오른쪽 끝 회색 작은 글자 */ #ui .popup.full .mp-fr .social-add { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 10px; } #ui .popup.full .mp-fr .social-add[hidden] { display: none; } #ui .popup.full .mp-fr .social-add-row { order: -1; flex: 1; max-width: 420px; padding: 0; } #ui .popup.full .mp-fr .social-add-input { height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(0, 0, 0, .4); font-size: 13px; font-weight: 500; color: #f2f0e7; transition: border-color .15s; } #ui .popup.full .mp-fr .social-add-input:focus { border-color: rgba(131, 195, 191, .7); } #ui .popup.full .mp-fr .social-add-input::placeholder { color: #80837e; } #ui .popup.full .mp-fr .social-add-btn { min-width: 0; height: 32px; padding: 0 18px; background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui .popup.full .mp-fr .social-code { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; } /* 목록 = 판 위에 바로 줄(랭킹과 같다 — 판 안 판 없음). 빈 목록 = 가운데 무채색 사람 글리프 + 회색 글자 */ #ui .popup.full .mp-fr .social-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 2px 4px; border: 0; border-radius: 0; background: none; box-shadow: none; } #ui .popup.full .mp-fr .social-list .empty { flex: 1; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--ink-soft); animation: fx-fade .2s ease-out both; } #ui .popup.full .mp-fr .social-list .empty::before { content: ""; width: 44px; height: 44px; background: rgba(255, 255, 255, .22); -webkit-mask: url(../assets/icons/menu-friends.png) center / contain no-repeat; mask: url(../assets/icons/menu-friends.png) center / contain no-repeat; } /* 줄 54 = 랭킹 rk-row 결(어두운 반투명 둥근 네모 · 얇은 밝은 테). 접속 중 = 줄 왼쪽 3px 초록 막대(랭킹 메달 막대 자리) · 끊김 = 얼굴 흐리게 */ #ui .popup.full .mp-fr .friend-row { position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 12px 6px 10px; border: 0; border-image: none; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.full .mp-fr .friend-row:has(.f-where.on)::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 2px 2px 0; background: #7fcf8e; box-shadow: 0 0 6px rgba(127, 207, 142, .7); } #ui .popup.full .mp-fr .friend-row.invite { background: rgba(131, 195, 191, .12); box-shadow: inset 0 0 0 1px rgba(131, 195, 191, .32); } /* 받은 파티 초대 = 청록 기운(결정할 것) */ #ui .popup.full .mp-fr .look-face { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); transition: transform .08s ease-out, filter .2s, opacity .2s; } #ui .popup.full .mp-fr .look-face::after { border: 0; border-image: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup.full .mp-fr button.look-face:active { transform: scale(.92); } #ui .popup.full .mp-fr .friend-row:not(:has(.f-where.on)):not(.invite) .look-face { filter: grayscale(.85); opacity: .6; } #ui .popup.full .mp-fr .f-text { flex: 1; gap: 3px; } #ui .popup.full .mp-fr .f-text b { font-size: 14px; color: var(--ink); } #ui .popup.full .mp-fr .f-text b i { margin-left: 2px; font-size: 11px; font-weight: 700; color: var(--ink-soft); } #ui .popup.full .mp-fr .f-where { font-size: 11px; font-weight: 600; color: #8d908b; } #ui .popup.full .mp-fr .f-where.on { color: #9fd0a6; } /* 채팅 창 채널 범위 초록과 같은 값 */ #ui .popup.full .mp-fr .f-hp { width: min(100%, 180px); height: 5px; margin-top: 1px; background: rgba(0, 0, 0, .45); } #ui .popup.full .mp-fr .f-hp i { border-radius: 3px; } /* 단추 = 글자 폭 작은 알약(높이 26) — 귓속말 · 초대 = 보조 반투명, 수락 = 청록 결정, 삭제 · 내보내기 · 나가기 = 적갈 위험 글자 */ #ui .popup.full .mp-fr .f-acts { flex: none; gap: 6px; } #ui .popup.full .mp-fr .btn.plain.sm { min-height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; } /* 바탕 .btn.plain.sm 둥근 8 을 알약으로 */ #ui .popup.full .mp-fr .btn.plain.sm:is([data-act="accept"], [data-act="p-accept"]) { background: linear-gradient(#83c3bf, #548f8c); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 2px 4px rgba(0, 0, 0, .35); } #ui .popup.full .mp-fr .btn.plain.sm[data-danger] { background: rgba(166, 70, 70, .2); color: #eba79c; box-shadow: inset 0 0 0 1px rgba(196, 96, 86, .45); } /* 연출(hq-ui 기본 탑재): 처음 열 때(ui_fx .fx-intro 800ms) · 탭을 바꿀 때(17b .fx-swap 600ms) 줄이 30ms 간격으로 떠오름 — 접속 상태가 바뀌어 다시 그려도 다시 튀지 않는다. 누름 = 60ms .92 → 놓으면 살짝 튀어 돌아옴(채팅 창과 같은 값) */ #ui :is(.dim.fx-intro .popup.full .mp-fr, .popup.full .mp-fr .social-list.fx-swap) .friend-row { animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .03s + .12s); } #ui .popup.full .mp-fr .social-list.fx-swap .friend-row { animation-delay: calc(var(--i, 0) * .03s); } #ui .popup.full .mp-fr .friend-row:nth-child(2) { --i: 1; } #ui .popup.full .mp-fr .friend-row:nth-child(3) { --i: 2; } #ui .popup.full .mp-fr .friend-row:nth-child(4) { --i: 3; } #ui .popup.full .mp-fr .friend-row:nth-child(5) { --i: 4; } #ui .popup.full .mp-fr .friend-row:nth-child(6) { --i: 5; } #ui .popup.full .mp-fr .friend-row:nth-child(n+7) { --i: 6; } #ui .popup.full .mp-fr :is(.tab, .btn) { transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .15s, color .15s; } #ui .popup.full .mp-fr :is(.tab, .btn:not(.off)):active { transform: scale(.92); transition-duration: .06s; } /* 머리 위 이름 · 말풍선 누름 칸(투명 — 다른 유저 프로필) */ #ui .who-hits { position: absolute; left: 0; top: 0; width: 0; height: 0; } #ui .who-hit { position: absolute; left: 0; top: 0; width: 96px; height: 20px; pointer-events: auto; background: none; } /* 재화(물품 · 상점 창 머리줄 — 머리줄 HUD 에서 옮김, 아이콘 = 같은 assets/hud 그림) */ #ui .win-wallet { margin-left: auto; margin-right: 12px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; white-space: nowrap; } #ui .win-wallet .ww { position: relative; display: flex; align-items: center; gap: 3px; padding: 0 4px; font-weight: 900; } #ui .win-wallet img { width: 22px; height: 22px; filter: drop-shadow(0 1px .5px #0004); } #ui .win-wallet b { min-width: 24px; margin-right: 8px; } #ui .win-wallet .add-mark { position: absolute; right: -3px; bottom: -5px; width: 12px; height: 12px; border-radius: 50%; background: #3f7d2c; box-shadow: 0 0 0 1.5px #fffce7; color: #fffce7; font-size: 11px; font-style: normal; font-weight: 900; line-height: 12px; text-align: center; } /* 재화 칸 누름 = 상점(11-04 PLAN 2-3 — 광고 AD 딱지 대신 + 딱지) */ body.gf-no-paid #ui .win-wallet .add-mark { display: none; } #ui .win-wallet .w-gold { color: #c0640c; } #ui .win-wallet .w-diamond { color: #2f6fb8; } /* 프로필(EFZ obj_profile_window 300x450 → 이 창 층 판 · 장비 칸 = 물품 창 칸 그림 slot.webp · 등급 바탕 g-*) */ #ui .popup.profile { width: 384px; height: 326px; } /* 10-24 사용자 "창도 크고 요소들도 큰데 1.25배 줄여" = 480 × 372 의 0.8 — 글자 · 칸 · 단추도 0.8. 10-25 전투력 · 인기도 줄(26 + 틈) 만큼 300 → 326(폰 가로 412 안) */ #ui .popup.sheet.profile { padding: 16px 18px 16px; } /* 18-popup-dark 작은 팝업 여백 20 · 22 의 0.8(같은 무게 선택자보다 하나 무겁게) */ #ui .popup.profile .popup-head { padding: 0 2px 6px; margin-bottom: 8px; } #ui .popup.profile .popup-head h2 { font-size: 14px; } #ui .popup.profile .close { width: 24px; height: 24px; } #ui .popup.profile .close::before, #ui .popup.profile .close::after { width: 11px; height: 2.5px; margin: -1.25px 0 0 -5.5px; } #ui .pf-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; } /* 행 = 남은 높이(내용이 길면 자기소개 칸이 스크롤 — 아래 단추 줄을 덮지 않게, 10-25 sandbox 실측) */ /* 외형 칸 = 캐릭터(10-24 사용자 "캐릭터 미리보기 2배 작게" — 옛 182 × 213 칸 → 높이 92) + 밑에 Lv · 이름 줄 · 길드 줄 · 접속/친구 코드(물품 창 정보 판 hero-tag · hero-sub 결) */ #ui .pf-look { position: relative; border: 2px solid #d6bd92; border-radius: 10px; background: #efe0c0; box-shadow: inset 0 2px 4px #a17c4a40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; overflow: hidden; } #ui .pf-hero { flex: none; width: 92px; height: 92px; margin-bottom: 4px; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; } /* features/looks lookFigure 한 장 */ #ui .pf-id { max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; } #ui .pf-id b { min-width: 0; font-size: 11.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; } #ui .pf-level { flex: none; height: 14px; padding: 0 5px; border-radius: 999px; font-size: 9px; font-weight: 900; line-height: 14px; color: #26221c; background: linear-gradient(#e6decd, #c7bba3); } /* Lv = 이름 앞 베이지 알약(04-inventory .hero-tag span) */ #ui .pf-level:empty { display: none; } #ui .pf-guild { max-width: 100%; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; line-height: 14px; color: #b9d6d3; white-space: nowrap; overflow: hidden; } /* 길드 = 04-inventory .hero-guild */ #ui .pf-guild b { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #ui .pf-guild :is(svg, img) { flex: none; width: 12px; height: 12px; } #ui .pf-guild:empty { display: none; } #ui .pf-where { max-width: 100%; font-size: 9px; font-weight: 800; color: #3f7a4c; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .pf-side { min-width: 0; display: flex; flex-direction: column; gap: 5px; } #ui .pf-sub { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); } #ui .pf-gear { display: grid; grid-template-columns: repeat(4, 38px); gap: 4px; } #ui .pf-cell { position: relative; width: 38px; height: 38px; border: 8px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 8px stretch; padding: 0; display: grid; place-items: center; } #ui .pf-cell img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; } #ui .pf-cell:disabled { cursor: default; } #ui .pf-cell .empty-slot-icon { inset: 0; margin: auto; width: 24px; height: 24px; } /* 10-24 사용자 "슬롯 아이콘 중앙 · 크기 작음": 왼쪽 위 18 → 칸 가운데 24 */ #ui .pf-cell.has:active { transform: scale(.94); } #ui .pf-slot { font-style: normal; font-size: 9px; font-weight: 800; color: #a8916a; line-height: 10px; text-align: center; } #ui .pf-item { flex: 1; min-height: 0; overflow: auto; padding: 5px 7px; border: 2px solid #d6bd92; border-radius: 8px; background: #f8eed8; font-size: 10px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; } #ui .pf-item b { font-size: 10.5px; font-weight: 900; } #ui .pf-item span { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); } #ui .pf-item span i { font-style: normal; color: var(--ink-soft); } #ui .pf-item .item-hint { color: #a8916a; } #ui .pf-acts { flex: none; display: flex; justify-content: center; gap: 4px; padding-top: 8px; } #ui .popup.profile .pf-acts .btn { min-width: 0; min-height: 22px; padding: 0 7px; font-size: 10px; } /* 18-popup-dark 알약 28 · 12.5 의 0.8, 폭 = 글자 폭(Invite to Guild 가 잘리지 않게) */ #ui .pf-cell.g-rare { background: #d6ecd9; } #ui .pf-cell.g-epic { background: #e3d6ef; } #ui .pf-cell.g-unique { background: #f3e1a8; } #ui .pf-cell.g-legendary { background: #f3c9c1; } #ui .pf-item b.g-rare { color: #2f8a4a; } #ui .pf-item b.g-epic { color: #7a45b0; } #ui .pf-item b.g-unique { color: #b07a10; } #ui .pf-item b.g-legendary { color: #c0442a; } /* 유저 정보(남) 칭호 · 전투력 · 인기도 · 자기소개(2026-10-25 사용자 "상대방 유저정보에서 인기도 올리고 내리기 · 상대방 전투력 · 장비칸을 누르면 … 부분을 자기소개란으로"). 칭호 = 이름 위 금색 한 줄(빛 번짐) · 오른쪽 열 맨 위 한 줄 판 = 전투력(금 숫자) | ▼ 인기도 N ▲(둥근 18 단추, 오늘 누른 쪽 = 초록 · 빨강, 다른 쪽 흐림) · 장비 칸 아래 판 = 자기소개(칸을 누르면 그 아이템 상세, 같은 칸을 다시 누르면 자기소개로 — 고른 칸 = 금 테). 누르면 숫자가 튀고 그 쪽 색으로 번쩍(UI 연출 기본). */ #ui .pf-title { max-width: 100%; font-size: 10px; font-weight: 900; line-height: 13px; color: #e8c979; text-shadow: 0 0 6px rgba(232, 201, 121, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .pf-title:empty { display: none; } #ui .pf-nums { flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 3px 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .pf-num { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; white-space: nowrap; } #ui .pf-num i { font-style: normal; font-weight: 700; color: var(--ink-soft); } #ui .pf-num b { display: inline-block; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; } #ui .pf-power b { color: #e8c979; } #ui .pf-fame b { min-width: 14px; text-align: center; } #ui .pf-vote { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 9px; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .08s ease-out, background .15s; } #ui .pf-vote:not(.off):active { transform: scale(.86); } #ui .pf-vote.up.on { color: #fff; background: #3f8f5a; box-shadow: 0 0 6px rgba(127, 216, 138, .6); } #ui .pf-vote.down.on { color: #fff; background: #8f3f3f; box-shadow: 0 0 6px rgba(255, 138, 122, .55); } #ui .pf-vote.off { opacity: .3; } #ui .pf-fame b.bump.up { animation: pf-bump-up .5s ease-out; } #ui .pf-fame b.bump.down { animation: pf-bump-down .5s ease-out; } @keyframes pf-bump-up { 35% { transform: scale(1.7); color: #7fd88a; text-shadow: 0 0 8px #7fd88a; } } @keyframes pf-bump-down { 35% { transform: scale(1.7); color: #ff8a7a; text-shadow: 0 0 8px #ff8a7a; } } #ui .pf-item.intro { gap: 3px; } #ui .pf-item .pf-intro-label { font-size: 9.5px; font-weight: 800; color: var(--ink-soft); } #ui .pf-intro { font-size: 10.5px; font-weight: 700; line-height: 15px; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; user-select: text; animation: mp-in .22s ease-out both; } #ui .pf-intro.none { color: var(--ink-soft); font-weight: 600; } #ui .popup.profile .pf-cell.on { box-shadow: 0 0 0 2px #e8c979, 0 0 8px rgba(232, 201, 121, .5); } /* 내 프로필 창(2026-10-25 사용자 "유저프로필 UI · 칭호 · 자기소개 수정 · 신고 · 건의에 운영자 답장") — 01-popup 전체화면 판(어두운 반투명 · 머리 띠 46 · ‹ · 열린 동안 HUD 숨김). 머리 아래 가운데 탭 알약 줄 [프로필 | 문의 · 신고(안 읽은 답 = 빨간 점)]. 본문 열 = 가운데 760(랭킹 창과 같은 폭). 프로필 = 왼쪽 210 내 모습 판(그림 120 · 금 칭호 · Lv 알약 + 이름 · 길드 · 전투력 | 인기도 두 칸) + 오른쪽 지금 칭호 한 줄(누르면 칭호 팝업) · 자기소개 두 줄 칸 + [저장]. 문의 · 신고 = 안내 한 줄 + [건의하기] [문의하기] · 줄 44(종류 알약 색 = 신고 적갈 · 건의 청록 · 버그 호박 · 나머지 회색 | 제목 | 시각 | 상태 알약 — 답 · 처리 완료 = 초록) → 누르면 글타래(내 말 = 오른쪽 청록 · 운영자 = 왼쪽 금 테 · 접수 안내 = 가운데 작은 회색) + 아래 답장 줄. 새 줄 · 새 말 = 아래서 스며 오름, 칭호 고름 = 알약 튐. */ #ui .popup.full.mp > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-profile.png); mask-image: url(../assets/icons/menu-profile.png); } #ui .mp .mp-tabs { flex: none; height: 30px; margin-bottom: 10px; align-self: center; } #ui .mp-tab-tk { position: relative; } #ui .mp-dot { position: absolute; top: 4px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 5px #ff5a4a; animation: mp-dot 1.4s ease-in-out infinite; pointer-events: none; } @keyframes mp-dot { 50% { transform: scale(1.35); } } #ui .mp-state, #ui .mp-tk-state, #ui .mp-th-msg { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--ink-soft); } #ui .mp-card, #ui .mp-fr, #ui .mp-tk { flex: 1; min-height: 0; width: 100%; max-width: 760px; align-self: center; } /* 칭호 팝업(11-02 사용자 "자기소개랑 세부 탭을 나눠 칭호가 나중에 많아지면 자기소개 밑으로 내려갈것도아니고" → 칭호 탭 → 같은 날 "칭호는 팝업으로 그린다거나"): 프로필 쪽 지금 칭호 한 줄을 누르면 창 위에 작은 팝업(18-popup-dark 어두운 둥근 판 + 모서리 문양 — 설정 창 330 결, 줄 카드가 들어가 380) · 머리 = 제목 15 + 가진 수 / 전체 + ✕. 줄 카드가 늘면 목록만 스크롤(높이 상한 = 창의 78%) · 뒤 판을 눌러도 닫힌다. 열 때 판 fx-pop(최대 1.025) · 줄 70 ms 간격 fx-card-in(스크롤 칸 안 덩어리라 1 을 넘지 않는다). */ #ui .mp-tdim { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; } #ui .mp-tshade { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: fx-fade .18s ease-out both; } #ui .popup.mp-tpop { position: relative; width: min(380px, 92%); max-height: 78%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; animation: fx-pop .24s cubic-bezier(.2, .9, .3, 1.15) both; } #ui .mp-thead { flex: none; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); } #ui .mp-thead h2 { margin: 0; font-size: 15px; font-weight: 900; } #ui .mp-thead small { font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui .mp-thead .mp-tx { position: relative; margin-left: auto; flex: none; } #ui .mp-tpop .mp-titles { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; } #ui .mp-tpop .mp-trow { flex: none; animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; } #ui .mp-tpop .mp-trow.on { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both, mp-on 1.6s ease-in-out .3s infinite; } #ui .mp-tpop .mp-trow:nth-child(2) { animation-delay: 70ms; } #ui .mp-tpop .mp-trow:nth-child(3) { animation-delay: 140ms; } #ui .mp-tpop .mp-trow:nth-child(4) { animation-delay: 210ms; } #ui .mp-tpop .mp-trow:nth-child(n+5) { animation-delay: 280ms; } /* 프로필 쪽 지금 칭호 한 줄 = 줄 카드와 같은 판(높이 36) · 금빛 이름(mp-title 과 같은 #e8c979) · 오른쪽 › — 누르면 칭호 팝업. 칭호 없음 = 흐린 글자 */ #ui .mp-tnow { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; text-align: left; font: inherit; color: var(--ink); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); transition: transform .06s; } #ui .mp-tnow b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 900; color: #e8c979; text-shadow: 0 0 8px rgba(232, 201, 121, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-tnow.none { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .mp-tnow.none b { font-weight: 700; color: var(--ink-soft); text-shadow: none; } #ui .mp-tnow i { flex: none; font-style: normal; font-size: 16px; color: var(--ink-soft); } #ui .mp-tnow:active { transform: scale(.98); } #ui .mp-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; } #ui .mp-look { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px; border-radius: 12px; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .mp-hero { flex: none; width: 120px; height: 120px; margin-bottom: 4px; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; } /* 내 모습 위 칭호 = 이름 띠(11-02): 지역 칭호 말씨(짙은 반투명 띠 양 끝 흐림 + 위아래 1px 금빛 선) — 칭호 없음이면 띠 없이 흐린 글자 */ #ui .mp-title { max-width: 100%; padding: 3px 18px; font-size: 12px; font-weight: 900; color: #e8c979; text-shadow: 0 0 8px rgba(232, 201, 121, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(90deg, transparent, rgba(232, 201, 121, .55), transparent) top / 100% 1px no-repeat, linear-gradient(90deg, transparent, rgba(232, 201, 121, .55), transparent) bottom / 100% 1px no-repeat, linear-gradient(90deg, transparent, rgba(0, 0, 0, .5) 18%, rgba(0, 0, 0, .5) 82%, transparent); } #ui .mp-title.none { padding: 0; font-weight: 700; color: var(--ink-soft); text-shadow: none; background: none; } #ui .mp-id { max-width: 100%; display: flex; align-items: center; gap: 5px; white-space: nowrap; } #ui .mp-lv { flex: none; height: 16px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 16px; color: #26221c; background: linear-gradient(#e6decd, #c7bba3); } #ui .mp-name { min-width: 0; font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; } #ui .mp-guild { max-width: 100%; font-size: 11px; font-weight: 700; color: #b9d6d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-guild.none { color: var(--ink-soft); } #ui .mp-nums { width: 100%; display: flex; gap: 6px; margin-top: 8px; } #ui .mp-num { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .mp-num i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-soft); } #ui .mp-num b { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; } #ui .mp-power b { color: #e8c979; } #ui .mp-side { min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 4px; overflow-y: auto; } #ui .mp-sub { flex: none; display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; } #ui .mp-sub small { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* 칭호 목록(2026-11-02 사용자 "칭호 그리고 저런식으로 허접하게 선택할수있게하지말고 UI 퀄리티좀 높여주면안됨?"): 알약 칩 줄 → 칭호 한 줄씩 카드. 참고 = 메이플스토리M 칭호 목록(엠블럼 칸 + 칭호 이름 줄) · 로드나인 이름 위 칭호(등급색 글자) 실제 화면(11-02 열어 봄). 못 얻은 칭호도 보여서 목표가 된다(조건 = 그 보스 처치). 줄 46 · 엠블럼 36(보스 초상 — 못 얻으면 검은 실루엣) · 이름 12.5 금빛(mp-title 과 같은 #e8c979) · 조건 10 · 알약 28 글자 폭(장착 = 청록 결정 · 해제 = 보조 반투명) · 장착 중 = 금 1px 테 + 맥박. 연출: 처음 열 때 줄 70 ms 간격 fx-card-in(스크롤 칸 안 덩어리라 1 을 넘지 않는다) · 장착하면 엠블럼 튐(줄 여백 안) · 누름 0.92. */ #ui .mp-titles { flex: none; display: flex; flex-direction: column; gap: 6px; } #ui .mp-trow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 6px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .2s, box-shadow .2s; } #ui .mp-trow.on { background: linear-gradient(90deg, rgba(232, 201, 121, .17), rgba(232, 201, 121, .04) 70%); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .6); animation: mp-on 1.6s ease-in-out infinite; } #ui .mp-temb { width: 36px; height: 36px; border-radius: 50%; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a3f4c, #15171d 75%); box-shadow: 0 0 0 1px rgba(232, 201, 121, .55), 0 0 6px rgba(232, 201, 121, .25); } #ui .mp-trow.on .mp-temb { box-shadow: 0 0 0 1.5px #e8c979, 0 0 9px rgba(232, 201, 121, .55); animation: mp-emb .42s cubic-bezier(.3, 1.6, .5, 1); } #ui .mp-trow.lock .mp-temb { filter: brightness(0) opacity(.55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); background: #2a2d34; } #ui .mp-tinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #ui .mp-tline { min-width: 0; display: flex; align-items: center; gap: 6px; } #ui .mp-tname { min-width: 0; font-size: 12.5px; font-weight: 900; color: #e8c979; text-shadow: 0 0 8px rgba(232, 201, 121, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-trow.lock .mp-tname { color: var(--ink-soft); text-shadow: none; } #ui .mp-ttag { flex: none; height: 15px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 15px; color: #26221c; background: linear-gradient(#f2dc9c, #d9b25c); } #ui .mp-tcond { font-size: 10px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .popup.full .mp-tbtn { flex: none; justify-self: end; min-width: 56px; height: 28px; padding: 0 14px; font-size: 11.5px; } #ui .popup.full .mp-trow.lock .mp-tbtn { min-width: 0; padding: 0 2px; background: none; box-shadow: none; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; opacity: 1; filter: none; pointer-events: none; } #ui .mp-tbtn:not(.off):active { transform: scale(.92); } #ui .dim.fx-intro .mp-trow { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; } #ui .dim.fx-intro .mp-trow:nth-child(2) { animation-delay: 70ms; } #ui .dim.fx-intro .mp-trow:nth-child(3) { animation-delay: 140ms; } #ui .dim.fx-intro .mp-trow:nth-child(4) { animation-delay: 210ms; } @keyframes mp-on { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .6), 0 0 0 rgba(232, 201, 121, 0); } 50% { box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .85), 0 0 10px rgba(232, 201, 121, .22); } } @keyframes mp-emb { 45% { transform: scale(1.14); } } #ui .mp-none { flex: none; font-size: 11px; color: var(--ink-soft); } #ui .mp-intro-row { flex: none; display: flex; align-items: center; gap: 8px; } #ui .mp-intro { flex: 1; min-width: 0; height: 52px; padding: 7px 10px; border: 0; border-radius: 10px; resize: none; font: inherit; font-size: 12px; font-weight: 700; line-height: 18px; color: var(--ink); background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); user-select: text; } #ui .mp-reply { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); user-select: text; } #ui :is(.mp-intro, .mp-reply)::placeholder { color: var(--ink-soft); } #ui :is(.mp-intro, .mp-reply):focus { outline: none; box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .65); } #ui .mp-tk { display: flex; flex-direction: column; gap: 8px; } #ui .mp-tk-head { flex: none; display: flex; align-items: center; gap: 6px; } #ui .mp-tk-head p { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-tk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px; overflow-y: auto; } #ui .mp-tk-row { position: relative; flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 10px; border: 0; border-radius: 9px; text-align: left; color: var(--ink); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: transform .08s ease-out, background .15s; animation: mp-in .24s ease-out both; } #ui .mp-tk-row.odd { background: rgba(255, 255, 255, .045); } #ui .mp-tk-row:active { transform: scale(.985); background: rgba(255, 255, 255, .11); } #ui .mp-kind { flex: none; min-width: 34px; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 18px; text-align: center; color: #fff; background: #5d6265; } #ui .mp-kind[data-kind="player_report"] { background: #a64646; } #ui .mp-kind[data-kind="suggestion"] { background: #548f8c; } #ui .mp-kind[data-kind="bug"] { background: #a8761a; } #ui .mp-tk-subj { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-tk-at { flex: none; font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui .mp-st { flex: none; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 20px; white-space: nowrap; color: #f3d28a; background: rgba(232, 201, 121, .14); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); } #ui :is(.mp-tk-row.done .mp-st, .mp-st[data-st="answered"], .mp-st[data-st="resolved"]) { color: #8fe0a0; background: rgba(127, 216, 138, .12); box-shadow: inset 0 0 0 1px rgba(127, 216, 138, .35); } #ui .mp-tk-row .mp-dot { top: 5px; right: 5px; } #ui .mp-th { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } #ui .mp-th-head { flex: none; display: flex; align-items: center; gap: 8px; } #ui .mp-th-subj { flex: 1; min-width: 0; font-size: 13px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .mp-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); overflow-y: auto; } #ui .mp-say { flex: none; display: flex; animation: mp-in .24s ease-out both; } #ui .mp-say.me { justify-content: flex-end; } #ui .mp-say.sys { justify-content: center; } #ui .mp-bub { max-width: 78%; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 5px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .mp-say.me .mp-bub { border-bottom-right-radius: 4px; background: rgba(84, 143, 140, .38); } #ui .mp-say.op .mp-bub { border-bottom-left-radius: 4px; background: rgba(232, 201, 121, .13); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .32); } #ui .mp-bub small { font-size: 10px; font-weight: 900; color: #e8c979; } #ui .mp-bub p { font-size: 12px; font-weight: 700; line-height: 17px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; } #ui .mp-bub i { align-self: flex-end; font-style: normal; font-size: 9.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui :is(.mp-say.me, .mp-say.sys) .mp-bub small { display: none; } #ui .mp-say.sys .mp-bub { max-width: 90%; align-items: center; padding: 2px 10px; background: none; box-shadow: none; } #ui .mp-say.sys .mp-bub p { font-size: 10.5px; color: var(--ink-soft); text-align: center; } #ui .mp-reply-row { flex: none; display: flex; align-items: center; gap: 8px; } @keyframes mp-in { from { opacity: 0; transform: translateY(6px); } } /* 레벨 랭킹 창 — 배치 = EFZ obj_exercise_ranking_window(줄 56 · 얼굴 40 · 내 순위 54 아래 고정, GUI 높이 450 은 EFZ 와 같다). 2026-10-20 사용자 "랭킹이랑 길드ui도 경매장 구현했던것처럼 전체화면으로 변경해줘 고품질 ui 에 맞게 퀄리티 높여줘": 창 = 01-popup 전체화면 판(.popup.full — 어두운 반투명 판 · 머리 띠 46 · 맨 왼쪽 ‹ · 열린 동안 HUD 숨김). 머리 = ‹ + 메뉴 랭킹 흰 선 아이콘 + 흰 굵은 제목 + 회색 기준 한 줄 (도깨비의 세계 §11.6 문파 제목 줄 = 흰 굵은 제목 + 회색 시즌 글자). 줄 = 도술 목록 줄 결(§8 — 어두운 반투명 둥근 네모 · 간격 좁게, 경매장 au-row 와 같은 값) 50 · 얼굴 40. 1~3위 = 큰 메달 그림 대신 메달색 숫자 + 얇은 빛 + 줄 왼쪽 옅은 메달색 번짐(hq-ui "만화풍 · 광택 버블 금지"). 내 순위 = 조금 밝은 띠 + 얇은 밝은 테(§8 고른 줄 = 흰 빛 테). 넓은 화면은 칸을 키우지 않고 목록 열을 가운데 760(EFZ 창 폭)까지만 — 폰 가로(무대 ≈ 1000)에서 줄이 화면 끝까지 늘어나 점수가 멀어지지 않게. */ #ui .popup.full.rk > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-ranking.png); mask-image: url(../assets/icons/menu-ranking.png); } /* 제목 앞 흰 선 아이콘(01-popup 물품 · 상점 · 스킬과 같은 자리) */ #ui .rk-sub { flex: 1; min-width: 0; margin: 3px 0 0 6px; font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 문파 제목 줄 회색 시즌 글자 자리 */ #ui .rk-list, #ui .rk-me, #ui .rk .rk-state { width: 100%; max-width: 760px; align-self: center; } #ui .rk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 4px; } #ui .rk-row { --mc: transparent; position: relative; display: flex; align-items: center; gap: 10px; height: 50px; margin-bottom: 4px; padding: 0 16px 0 0; border-radius: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 16%, transparent), transparent 42%), rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .rk-row.mine { background-color: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } /* 순위 숫자: 4위부터 회색, 1~3위 = 금 · 은 · 동 숫자 + 같은 색 얇은 빛(금 #e8c979 = 01-popup 재화 금색 · 은 · 동은 같은 명도로 맞춤) + 줄 왼쪽 3px 막대 */ #ui .rk-rank { flex: none; width: 50px; text-align: center; font-size: 15px; font-weight: 800; color: #a3a6a0; font-variant-numeric: tabular-nums; } #ui .rk-row:has(.rk-rank.top1) { --mc: #e8c979; } #ui .rk-row:has(.rk-rank.top2) { --mc: #c9d3d8; } #ui .rk-row:has(.rk-rank.top3) { --mc: #d39a6a; } #ui .rk-row:has(.rk-rank:is(.top1, .top2, .top3))::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--mc); box-shadow: 0 0 6px var(--mc); } #ui .rk-rank:is(.top1, .top2, .top3) { font-size: 18px; font-weight: 900; } #ui .rk-rank.top1 { color: #e8c979; text-shadow: 0 0 8px rgba(232, 201, 121, .55); } #ui .rk-rank.top2 { color: #d5dde2; text-shadow: 0 0 8px rgba(201, 211, 216, .45); } #ui .rk-rank.top3 { color: #d9a477; text-shadow: 0 0 8px rgba(211, 154, 106, .45); } /* 얼굴 40: 나무 액자(social face-frame) 대신 어두운 둥근 칸 + 얇은 밝은 테(물품 빈 칸 결). 누르면 프로필(EFZ — 얼굴만) → 누름 반응 */ #ui .rk .rk-face { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); transition: transform .08s ease-out; } #ui .rk .rk-face::after { border: 0; border-image: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .rk button.rk-face:active { transform: scale(.92); } #ui .rk-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; } #ui .rk-who b { min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .rk-who small { flex: none; font-size: 11px; color: var(--ink-soft); } #ui .rk-score { flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } /* 내 순위(아래 고정 52): 목록보다 한 단 밝은 띠 + 얇은 밝은 테 */ #ui .rk-me { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 8px; padding: 0 16px 0 14px; border-radius: 10px; background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .09)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 4px 12px rgba(0, 0, 0, .35); } #ui .rk-me-label { flex: none; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 20px; color: var(--ink-soft); background: rgba(0, 0, 0, .3); } #ui .rk-me-rank { flex: none; min-width: 36px; font-size: 15px; font-weight: 900; } #ui .rk-me-rank.off { font-weight: 800; color: var(--ink-soft); } #ui .rk-me-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 불러오는 중 · 실패 · 빈 목록 = 목록 자리 가운데. 다시 시도 = 글자 폭 알약(01-popup .btn.plain) */ #ui .rk-state { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 16px; font-size: 13px; color: var(--ink-soft); animation: fx-fade .2s ease-out both; } #ui .rk-msg { font-size: 14px; font-weight: 700; color: #c9ccc6; } #ui .rk-retry { flex: none; } #ui .rk-spin { position: relative; width: 36px; height: 36px; animation: rk-spin 1.05s steps(8) infinite; } #ui .rk-spin b { position: absolute; left: 15px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); transform-origin: 3px 17px; } #ui .rk-spin b:nth-child(1) { transform: rotate(0deg); opacity: .18; } #ui .rk-spin b:nth-child(2) { transform: rotate(45deg); opacity: .28; } #ui .rk-spin b:nth-child(3) { transform: rotate(90deg); opacity: .38; } #ui .rk-spin b:nth-child(4) { transform: rotate(135deg); opacity: .48; } #ui .rk-spin b:nth-child(5) { transform: rotate(180deg); opacity: .58; } #ui .rk-spin b:nth-child(6) { transform: rotate(225deg); opacity: .68; } #ui .rk-spin b:nth-child(7) { transform: rotate(270deg); opacity: .78; } #ui .rk-spin b:nth-child(8) { transform: rotate(315deg); opacity: .88; } @keyframes rk-spin { to { transform: rotate(360deg); } } /* 연출(hq-ui 기본 탑재): 목록이 처음 들어올 때(불러오는 중 → 순위) 줄이 30ms 간격으로 떠오름 — 17c 가 .rk-fresh 를 900ms 만 붙인다(30초 다시 읽기 · 얼굴 그림 도착으로 다시 그려도 다시 튀지 않게). 1위 숫자 빛은 등급 빛 주기(1047ms, ui-juice)로 숨쉰다 · 내 순위 띠는 목록 뒤에 올라온다 */ #ui .rk-list.rk-fresh .rk-row { animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .03s + .04s); } #ui .rk-list.rk-fresh + .rk-me { animation: fx-rise .32s .22s cubic-bezier(.2, .8, .3, 1.1) both; } #ui .rk-rank.top1 { animation: rk-glow 1.047s ease-in-out infinite alternate; } @keyframes rk-glow { from { text-shadow: 0 0 5px rgba(232, 201, 121, .35); } to { text-shadow: 0 0 10px rgba(232, 201, 121, .75); } } /* 업데이트 노트 창 — 배치 = EFZ obj_update_note_window(머리 46 · 왼쪽 목록 182 · 줄 48 + 간격 5 · 오른쪽 본문). 2026-10-20 사용자 "샌드박스에 고품질 UI 문서 참고해서 친구랑 공지탭도 퀄리티높게, 전체화면으로 바꿔봐": 창 = 01-popup 전체화면 판(.popup.full — 어두운 반투명 판 · 머리 띠 46 · 맨 왼쪽 ‹ + 메뉴 공지 흰 선 아이콘 + 흰 굵은 제목 · 열린 동안 HUD 숨김). 근거 .claude/skills/hq-ui · dokkaebi-world.md §8 (왼쪽 목록 + 오른쪽 상세 = 도깨비 설정 · 도술 창의 목록/상세 두 칸 결). 줄 = 랭킹 rk-row 결(어두운 반투명 둥근 네모 · 얇은 밝은 테), 고른 줄 = 흰 빛 테 + 왼쪽 베이지 막대(고른 탭 베이지), 안 읽은 글 = 빨간 점(ui-juice 628ms 맥동). 줄 높이 48 + 간격 5 는 17d ROW(넘침 "a-b / N" 셈)와 같아야 한다. 넓은 화면은 두 칸 합이 가운데 960 까지만(본문 줄 길이). */ #ui .popup.full.an > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-notice.png); mask-image: url(../assets/icons/menu-notice.png); } #ui .an-body { flex: 1; min-height: 0; width: 100%; max-width: 960px; align-self: center; display: flex; gap: 12px; } #ui .an-list { position: relative; flex: none; width: clamp(160px, 30%, 240px); overflow-y: auto; padding: 2px 2px 4px; } #ui .an-list.more { padding-bottom: 24px; } #ui .an-row { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 48px; margin-bottom: 5px; padding: 6px 22px 6px 12px; text-align: left; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #d9dbd5; transition: background .15s, box-shadow .15s, transform .18s cubic-bezier(.3, 1.8, .5, 1); } #ui .an-row:active { transform: scale(.96); transition-duration: .06s; } #ui .an-row.on { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .3); color: var(--ink); } #ui .an-row.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: #e6decd; box-shadow: 0 0 6px rgba(230, 222, 205, .6); } /* 01-popup 고른 탭 베이지 */ #ui .an-row b { display: block; font-size: 12.5px; font-weight: 800; line-height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 줄 48 고정 = 제목 한 줄 + 날짜(두 줄이면 날짜와 겹침), 전체 제목은 오른쪽 본문 */ #ui .an-row small { margin-top: auto; font-size: 10.5px; font-weight: 600; color: #8d908b; font-variant-numeric: tabular-nums; } #ui .an-row.new:not(.on)::after { content: ""; position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff4b3e; box-shadow: 0 0 0 1.5px rgba(20, 22, 24, .8); animation: an-dot .628s ease-in-out infinite alternate; } /* 빨간 점 = 새것(ui-juice 628ms) */ @keyframes an-dot { to { transform: scale(1.25); box-shadow: 0 0 0 1.5px rgba(20, 22, 24, .8), 0 0 6px rgba(255, 75, 62, .8); } } #ui .an-count { display: none; position: sticky; bottom: -18px; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } #ui .an-list.more .an-count { display: block; } /* 상세 = 판 안 어두운 반투명 칸(채팅 기록 칸과 같은 값). 분류 · 날짜 회색 한 줄 → 흰 굵은 제목 17 → 옅은 구분선 → 본문 13 */ #ui .an-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 18px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .an-detail:empty { align-items: center; justify-content: center; } #ui .an-detail:empty::before { content: ""; width: 44px; height: 44px; background: rgba(255, 255, 255, .18); -webkit-mask: url(../assets/icons/menu-notice.png) center / contain no-repeat; mask: url(../assets/icons/menu-notice.png) center / contain no-repeat; } /* 공지 없음 = 무채색 글리프만(EFZ 도 빈 칸) */ #ui .an-meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: #8d908b; font-variant-numeric: tabular-nums; } #ui .an-detail h3 { margin-top: 6px; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ink); } #ui .an-detail hr { margin: 10px 0 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); } #ui .an-text { flex: 1; min-height: 0; overflow-y: auto; font-size: 13px; line-height: 1.6; color: #d9dbd5; user-select: text; -webkit-user-select: text; } #ui .an-text h3, #ui .an-text h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); } #ui .an-text p { margin: 0 0 8px; } #ui .an-text ul { margin: 0 0 8px 18px; } #ui .an-text li::marker { color: #8d908b; } #ui .an-text a { color: #8fc6ff; text-decoration: underline; } #ui .an-text strong, #ui .an-text b { color: var(--ink); } /* 연출(hq-ui 기본 탑재): 처음 열 때(ui_fx .fx-intro 800ms) 목록 줄이 30ms 간격으로 떠오름 · 글을 고를 때마다 상세가 살짝 밀려 들어옴(17d 가 상세를 새로 그린다) · ‹ 누름 */ #ui .dim.fx-intro .an-row { animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .03s + .12s); } #ui .an-row:nth-child(2) { --i: 1; } #ui .an-row:nth-child(3) { --i: 2; } #ui .an-row:nth-child(4) { --i: 3; } #ui .an-row:nth-child(5) { --i: 4; } #ui .an-row:nth-child(n+6) { --i: 5; } #ui .an-detail > * { animation: an-in .22s cubic-bezier(.2, .8, .3, 1.1) both; } #ui .an-detail > h3 { animation-delay: .03s; } #ui .an-detail > .an-text { animation-delay: .06s; } @keyframes an-in { from { opacity: 0; transform: translateX(8px); } } #ui .popup.full.an .close.back { transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .15s; } #ui .popup.full.an .close.back:active { transform: scale(.92); transition-duration: .06s; } /* 읽기 보상 띠(noteprize-1105): 본문 맨 아래 — 왼쪽 회색 "공지 보상" · 재화 아이콘 22 + 굵은 수 · 오른쪽 글자 폭 청록 알약 28(판 폭으로 늘이지 않는다, hq-ui). 받기 전 = 띠 테가 금빛으로 숨 쉬고(ui-juice 1.2s) 알약이 살짝 맥동 · 받은 뒤 = 흐린 띠 + "받음" 도장 · 막 받은 순간(.just) = 도장이 튀어 들어옴. 목록 줄 .pz = 보상 남은 공지(다이아 점 대신 금빛 점). */ #ui .an-prize { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(232, 201, 121, .14), rgba(232, 201, 121, .04)); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); animation: an-pz-glow 1.2s ease-in-out infinite alternate; } @keyframes an-pz-glow { to { box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .7), 0 0 10px rgba(232, 201, 121, .22); } } #ui .an-pz-l { flex: none; font-size: 11px; font-weight: 700; color: #c9b98f; } #ui .an-pz-r { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } #ui .an-pz { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; } #ui .an-pz img { width: 22px; height: 22px; filter: drop-shadow(0 1px .5px #0006); } #ui .an-prize .an-claim { flex: none; animation: an-pz-beat 1.2s ease-in-out infinite; } #ui .an-prize .an-claim.off { animation: none; pointer-events: none; } @keyframes an-pz-beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.07); } 90% { transform: scale(.98); } } #ui .an-prize.got { animation: none; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .an-prize.got .an-pz { opacity: .5; } #ui .an-got { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #9fd8a8; background: rgba(120, 200, 140, .12); box-shadow: inset 0 0 0 1px rgba(159, 216, 168, .35); } #ui .an-got::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); } /* 흰 선 체크 */ #ui .an-prize.just .an-got { animation: an-stamp .42s cubic-bezier(.3, 1.8, .5, 1) both; } @keyframes an-stamp { from { opacity: 0; transform: scale(1.8) rotate(-8deg); } } #ui .an-row.pz.new:not(.on)::after { background: #f2c14e; animation-name: an-dot-pz; } @keyframes an-dot-pz { to { transform: scale(1.25); box-shadow: 0 0 0 1.5px rgba(20, 22, 24, .8), 0 0 6px rgba(242, 193, 78, .9); } } #ui .m-notice { position: relative; } /* 메뉴 [공지] 점(nt-dot) = 받을 읽기 보상이 남은 공지가 있을 때 */ /* 길드 창 — EFZ obj_guild_window + scr_guild_ui.gml 수치(660×430 · 머리 52 · 위 탭 112×30 · 레일 104×34 · 줄 48/44/40/38/34/72 · 상점 5×2 + 세금 34) 딸린 창 = obj_guild_joinreq(520×400) · info(520×430) · post(520×400) · create(620×430) · rank_reward(480×400). 틀 · 칸 · 버튼 = 분신 용사 나인패치(panel · slot · button) */ #ui .popup.gd { width: 660px; height: 430px; display: flex; flex-direction: column; } #ui .gd-head { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding-bottom: 6px; border-bottom: 2px solid #d6bd92; } #ui .gd-head h2 { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gd-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px 0; border-radius: 6px; background: #00000022; } #ui .gd-icon[hidden] { display: none; } #ui .gd-chips { flex: none; display: flex; gap: 6px; } #ui .gd-chip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 800; white-space: nowrap; background: #fff6e1; box-shadow: inset 0 0 0 1px currentColor; } #ui .gd-chip.gold { color: #a87b15; } #ui .gd-chip.accent { color: #6f6146; } #ui .gd-chip.muted { color: #8b8274; } #ui .gd-chip-ico { height: 13px; image-rendering: pixelated; } #ui .gd-coin { height: 15px; margin-right: 2px; vertical-align: -3px; image-rendering: pixelated; } #ui .gd-tabs { flex: none; display: flex; gap: 6px; margin: 8px 0 10px; } #ui .gd-tab { position: relative; width: 112px; height: 30px; border-radius: 5px; font-size: 13px; font-weight: 800; color: #8b7a62; background: #00000010; box-shadow: inset 0 0 0 1px #0000001c; } #ui .gd-tab.on { color: var(--ink, #3b2f22); background: #fff6e1; box-shadow: inset 0 0 0 1px #c9961e; } #ui .gd-tab.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 3px; border-radius: 2px; background: #c9961e; } #ui .gd-main { flex: 1; min-height: 0; display: flex; gap: 14px; } #ui .gd-rail { flex: none; display: flex; flex-direction: column; gap: 6px; width: 104px; padding: 4px; margin: -4px; border-radius: 6px; background: #00000012; } #ui .gd-side { position: relative; height: 34px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #8b7a62; background: #fff6e133; box-shadow: inset 0 0 0 1px #0000001c; } #ui .gd-side.on { color: var(--ink, #3b2f22); background: #fff6e1; box-shadow: inset 0 0 0 1px #c9961e; } #ui .gd-side.on::before { content: ""; position: absolute; left: 1px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #c9961e; } #ui .gd-body { position: relative; flex: 1; min-width: 0; overflow-y: auto; padding: 6px; border-radius: 6px; background: #00000010; box-shadow: inset 0 0 0 1px #00000022; } #ui .gd-body.busy .gd-btn { pointer-events: none; } #ui .gd-msg { flex: none; margin-top: 6px; text-align: center; font-size: 12px; font-weight: 800; color: #c0503a; } #ui .gd-msg[hidden] { display: none; } #ui .gd-empty { height: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 18px; } #ui .gd-empty b { font-size: 14px; color: #8b7a62; } #ui .gd-empty small { font-size: 11px; color: #a59a88; line-height: 1.5; } #ui .gd-empty-acts { display: flex; gap: 8px; margin-top: 8px; } #ui .gd-row { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 8px 0 12px; border: 6px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 6px stretch; } #ui .gd-row.r48 { height: 42px; } #ui .gd-row.r44 { height: 38px; } #ui .gd-row.r40 { height: 34px; } #ui .gd-row.r38 { height: 32px; } #ui .gd-row.r34 { height: 28px; } #ui .gd-row.r72 { height: 64px; align-items: stretch; } #ui .gd-row.r54 { height: 52px; } #ui .gd-row.self { box-shadow: inset 4px 0 #c9961e; } #ui .gd-row.notice, #ui .gd-row.lit { box-shadow: inset 4px 0 #c9961e; } #ui .gd-row.medal1 { box-shadow: inset 4px 0 #c9961e; } #ui .gd-row.medal2 { box-shadow: inset 4px 0 #8a979e; } #ui .gd-row.medal3 { box-shadow: inset 4px 0 #b0703a; } #ui .gd-row[data-row-profile], #ui .gd-row[data-row-guild], #ui .gd-row[data-row-post] { cursor: pointer; } #ui .gd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 12px; } #ui .gd-row-main b { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gd-row-main small { font-size: 11px; color: #8b7a62; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gd-line1, #ui .gd-line2 { display: flex; align-items: center; gap: 6px; min-width: 0; } #ui .gd-row-main > .gd-chip, #ui .gd-line1 .gd-chip { flex: none; align-self: center; } #ui .gd-line1 b { flex: 1; } #ui .gd-line1 em { font-style: normal; font-size: 11px; color: #a59a88; } #ui .gd-line1 em.good { color: #3d9c4c; } #ui .gd-row-acts { flex: none; display: flex; gap: 6px; } #ui .gd-row-acts.top { align-self: flex-start; margin-top: 2px; } #ui .gd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #a3a49e; align-self: flex-start; margin-top: 7px; } #ui .gd-dot.on { background: #4fbf5e; } /* 글자색 도우미는 길드 창 안에서만(10-18 sandbox: '#ui .dim' 이 창 바탕 .dim 에, '#ui .gold' 가 .btn.gold 에 걸려 게임 모든 창 글자가 회색 · 금색이 됐다) */ #ui .gd .muted, #ui .gd-sub .muted { color: #8b8274; } #ui .gd .gold, #ui .gd-sub .gold { color: #a87b15; } #ui .gd .good, #ui .gd-sub .good { color: #3d9c4c; } #ui .gd-dim { color: #a59a88; font-size: 11px; } #ui .gd-warn { color: #c0503a; font-size: 11px; } #ui .gd .dim, #ui .gd-sub .dim { color: #a59a88; } /* 버튼: 창 층 .btn 은 테두리 그림이 위아래 10 · 좌우 24px 라 줄(34~42) 안에서 46px 로 커져 넘치고 글자가 꺾였다(sandbox 사진 10-18) → 줄 · 칸 · 띠의 버튼은 창 층 평면 버튼(.btn.plain · .set-btn.risk 와 같은 색)으로, 큰 [설립](gc-go)만 장식 버튼 */ #ui .btn.gd-btn { min-height: 26px; padding: 0 10px; border: 2px solid #c9ac77; border-bottom-width: 3px; border-image: none; border-radius: 8px; background: #fbf1da; color: var(--ink); text-shadow: none; filter: none; font-size: 12px; font-weight: 800; white-space: nowrap; gap: 3px; } #ui .btn.gd-btn.gold { border-color: #c9961e; background: #fff3cf; color: #8a5a10; } #ui .btn.gd-btn.danger { border-color: #b4664d; background: #f8e3d8; color: #8e3f25; } #ui .btn.gd-btn.off { filter: grayscale(.7); opacity: .6; } #ui .btn.gd-btn.gc-go { min-height: 40px; padding: 4px 18px; border: 10px solid transparent; border-image: url(../assets/ui/button-gold.webp) 22 72 fill / 10px 24px stretch; background: none; color: #fffce7; text-shadow: 0 1px 2px #876025; font-size: 14px; } #ui .gd-manage .btn.gd-btn.gd-wide, #ui .gd-manage .btn.gd-btn.gd-toggle { min-height: 24px; } #ui .gd-manage .gd-headline { margin: 2px 0 3px; } #ui .btn.gd-btn.gc-go.off { filter: grayscale(1) brightness(1.05); opacity: .6; } #ui .gd-btn.w30 { width: 30px; min-height: 22px; padding: 0; } #ui .gd-btn.w52 { width: 52px; } #ui .gd-btn.w54 { width: 54px; } #ui .gd-btn.w56 { width: 56px; } #ui .gd-btn.w64 { width: 64px; } #ui .gd-btn.w72 { width: 72px; } #ui .gd-btn.w78 { width: 78px; } #ui .gd-btn.w82 { width: 82px; } #ui .gd-btn.w86 { width: 86px; } #ui .gd-btn.w96 { width: 96px; } #ui .gd-btn.w98 { width: 98px; } #ui .gd-btn.w108 { width: 108px; } #ui .gd-btn.w110 { width: 110px; } #ui .gd-btn.w120 { width: 120px; } #ui .gd-btn.w128 { width: 128px; } #ui .gd-btn.w140 { width: 140px; } #ui .gd-btn.gd-wide { width: 100%; min-height: 28px; } #ui .gd-btn.ghost { opacity: .9; } #ui .gd-headline { position: relative; margin: 4px 0 6px; padding-left: 9px; font-size: 11px; font-weight: 800; color: #6f6146; } #ui .gd-headline::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 1px; background: #c9961e; } #ui .gd-subbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 8px; } #ui .gd-subtabs { display: flex; gap: 6px; } #ui .gd-subtab { width: 70px; height: 26px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #8b7a62; background: #00000010; box-shadow: inset 0 0 0 1px #0000001c; } #ui .gd-subtab.on { color: var(--ink, #3b2f22); background: #fff6e1; box-shadow: inset 0 0 0 1px #c9961e; } #ui .gd-points { font-size: 13px; font-weight: 800; } /* 관리 */ #ui .gd-manage { display: flex; gap: 12px; min-height: 100%; } #ui .gd-col-left { flex: none; width: 274px; display: flex; flex-direction: column; gap: 6px; } #ui .gd-col-right { flex: none; width: 132px; margin-left: auto; display: flex; flex-direction: column; gap: 4px; } #ui .gd-card { padding: 8px 12px; border: 6px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 6px stretch; } #ui .gd-card.me { padding-top: 4px; padding-bottom: 4px; } /* EFZ 관리 탭은 창 안에 다 들어간다(sandbox 비교판 10-18: 아래가 잘려 스크롤) */ #ui .gd-stat { display: flex; align-items: center; height: 18px; font-size: 11px; } #ui .gd-stat span { width: 112px; color: #8b7a62; } #ui .gd-stat b { font-weight: 800; } #ui .gd-lv-top { display: flex; justify-content: space-between; align-items: center; } #ui .gd-lv-top b { color: #a87b15; font-size: 13px; } #ui .gd-lv-top small, #ui .gd-lv-left { font-size: 11px; color: #8b7a62; } #ui .gd-meter { display: block; height: 10px; margin: 4px 0 2px; border-radius: 4px; background: #00000022; overflow: hidden; } #ui .gd-meter > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(#e6c062, #b98d2a); } #ui .gd-toggle { width: 100%; min-height: 28px; border-image-source: url(../assets/ui/button-gold.webp); filter: grayscale(.85) brightness(1.08); } #ui .gd-toggle.on { filter: none; } #ui .gd-right-label { text-align: right; font-size: 11px; color: #8b7a62; } #ui .gd-push { flex: 1; } /* 아이콘 편집 */ #ui .gcreate-body { display: flex; gap: 12px; height: 100%; } /* 게시판 */ #ui .gd-row.post .gd-row-main { justify-content: flex-start; padding: 4px 0; } #ui .gd-preview { margin-top: 3px; } #ui .gd-by { position: absolute; right: 8px; bottom: 2px; font-size: 10px !important; color: #a59a88 !important; } #ui .gd-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; font-size: 12px; color: #8b7a62; } #ui .gd-compose-cat { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8b7a62; } #ui .gd-compose-cat span { width: 70px; } #ui .gd-field { width: 100%; min-width: 0; flex: none; height: 30px; padding: 0 10px; border-radius: 5px; font-size: 12px; background: #fffaf0; box-shadow: inset 0 0 0 1px #c9ac77; } #ui .gd-area { height: 130px; padding: 8px 10px; resize: none; line-height: 1.45; } /* 글쓰기 창(10-19): 칸 크기는 글자와 무관하게 고정 — 본문은 칸 안에서 스크롤 */ #ui .popup.gwrite { width: 520px; height: 400px; } #ui .gwrite-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } #ui .gwrite-body .gd-field { flex: none; } #ui .gwrite-body .gd-area { flex: 1; min-height: 0; height: auto; overflow-y: auto; } #ui .gwrite-foot { flex: none; display: flex; align-items: center; gap: 10px; } #ui .gwrite-msg { flex: 1; min-width: 0; margin: 0; font-size: 11px; color: #b0503a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gwrite-count { flex: none; font-size: 11px; color: #a59a88; } /* 스킬(임시 창) */ #ui .gd-skill-name { flex: 1; min-width: 0; font-size: 12px; } #ui .gd-pips { flex: none; display: flex; gap: 2px; width: 84px; margin-right: 56px; } #ui .gd-pips i { flex: 1; height: 8px; background: #0000002a; } #ui .gd-pips i.on { background: #c9961e; } #ui .gd-skill-val { position: absolute; right: 70px; font-size: 12px; } #ui .gd-row.r34 .btn.gd-btn { min-height: 22px; } /* 상점 */ #ui .gd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } #ui .gd-cell { position: relative; display: flex; flex-direction: column; align-items: center; height: 104px; padding: 4px; border: 6px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 6px stretch; } #ui .gd-cell.sold { opacity: .45; } #ui .gd-cell-chips { display: flex; justify-content: space-between; width: 100%; height: 18px; } #ui .gd-cell-ico { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; } #ui .gd-cell-ico.sm { width: 30px; height: 30px; } #ui .gd-cell-name { flex: 1; width: 100%; text-align: center; font-size: 10px; line-height: 12px; overflow: hidden; } #ui .btn.gd-btn.gd-cell-buy { width: 100%; min-height: 24px; padding: 0; } #ui .btn.gd-btn.gd-cell-buy.off { filter: none; opacity: 1; border-color: #d9c4a3; background: #f1e6d2; color: #b0492f; } #ui .gd-cell-sold { font-size: 11px; color: #8b7a62; line-height: 24px; } #ui .gd-taxbar { display: flex; align-items: center; gap: 10px; height: 34px; margin-top: 6px; padding: 0 4px 0 12px; border-radius: 6px; background: #00000012; font-size: 11px; color: #6f6146; } #ui .gd-taxbar b { margin-left: auto; font-size: 12px; } #ui .gd-taxbar .btn.gd-btn { min-height: 26px; } /* 랭킹 · 찾기 */ #ui .gd-rank-no { flex: none; width: 24px; text-align: center; font-size: 14px; font-weight: 800; color: #8b7a62; } #ui .gd-row.medal1 .gd-rank-no { color: #c9961e; } #ui .gd-row.medal2 .gd-rank-no { color: #7f8c94; } #ui .gd-row.medal3 .gd-rank-no { color: #b0703a; } #ui .gd-rank-icon { flex: none; display: grid; place-items: center; width: 30px; } #ui .gd-rank-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; } #ui .gd-rank-pts small { color: #a59a88; font-size: 10px; } #ui .gd-search { display: flex; gap: 6px; margin: 4px 0 8px; } #ui .gd-search .gd-field { flex: 1; min-width: 0; } /* 입력칸 = 남은 폭 고정(글자 길이와 무관, 10-19) */ #ui .gd-find-right { flex: none; font-size: 11px; color: #8b7a62; } /* 딸린 창 */ #ui .popup.gd-sub { display: flex; flex-direction: column; } #ui .gd-panel { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; padding: 6px; border-radius: 6px; background: #00000010; box-shadow: inset 0 0 0 1px #00000022; } #ui .popup.gjr { width: 520px; height: 400px; } #ui .popup.ginfo { width: 520px; height: 430px; } #ui .popup.gpost { width: 520px; height: 400px; } #ui .popup.gcreate { width: 620px; height: 430px; } #ui .popup.greward { width: 480px; height: 400px; } #ui .ginfo-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } #ui .ginfo-sum { display: flex; gap: 10px; margin-top: 8px; height: 34px; } #ui .ginfo-sum .gd-btn { height: 34px; } #ui .ginfo-pts { flex: 1; display: flex; align-items: center; gap: 18px; padding: 0 12px; } #ui .ginfo-pts .gd-stat span { width: 68px; } #ui .ginfo-list { margin-top: 8px; } #ui .gpost-head { height: auto; min-height: 30px; } #ui .gpost-title { font-size: 15px !important; line-height: 18px; max-height: 36px; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #ui .gpost-by { margin-top: 6px; font-size: 11px; color: #a59a88; } #ui .gpost-text { white-space: pre-wrap; font-size: 12px; line-height: 15px; padding: 10px 12px; } #ui .gpost-foot { display: flex; justify-content: flex-end; margin-top: 8px; } #ui .gpost-foot:empty { display: none; } #ui .gcreate-body { flex: 1; min-height: 0; margin-top: 8px; } #ui .gc-left { flex: none; width: 196px; display: flex; flex-direction: column; } #ui .gc-right { flex: 1; min-width: 0; display: flex; flex-direction: column; } #ui .gc-preview { height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } #ui .gc-preview b { max-width: 100%; font-size: 14px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 이름이 길어도 한 줄(문장 자리가 흔들리지 않게) */ #ui .gc-label { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 4px; font-size: 11px; color: #8b7a62; } #ui .gc-label b { font-size: 12px; } #ui .gc-name { height: 34px; text-align: center; } #ui .gc-have { text-align: right; font-size: 11px; color: #a59a88; } #ui .gc-notice { flex: 1; display: flex; align-items: flex-end; justify-content: center; text-align: center; font-size: 11px; color: #8b7a62; padding-bottom: 6px; } #ui .gc-notice.warn { color: #c0503a; } #ui .gc-go { width: 100%; min-height: 40px; font-size: 14px; } #ui .greward-hint { margin-top: 8px; font-size: 11px; color: #a59a88; } #ui .gr-range { flex: none; width: 88px; font-size: 14px; font-weight: 800; } #ui .guild-invite.second { top: 150px; } /* 길드 대항전(community-1018) — EFZ scr_guild_view_war(탭: 오늘 도전 · [방 만들기 88][방목록 78] · 출전 파티 4칸 · 인원 · n vs n · [빠른 매칭 180×34]) · scr_guild_view_war_rooms(줄 58) · scr_guild_war_matching_hud_draw(파티 칸 위 숨쉬는 띠) · scr_guild_war_draw_hud(위 가운데 두 줄) · scr_guild_war_result_banner_draw(암전 .55 + 띠 148 이 0.35초에 열림 · 글자 2.6→1.8배 · 마지막 0.9초 사라짐) */ #ui .gw { display: flex; flex-direction: column; height: 100%; min-height: 0; } #ui .gw-top { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; } #ui .gw-daily { display: inline-flex; align-items: baseline; gap: 12px; padding-left: 4px; font-size: 12px; font-weight: 800; color: #8b7a62; } #ui .gw-daily b { font-size: 13px; color: var(--ink, #3b2f22); } #ui .gw-daily b.warn { color: #c0503a; } #ui .gw .gd-headline { margin: 6px 0 4px; } #ui .gw-slots { flex: 1; min-height: 96px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #ui .gw-slot { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding-bottom: 2px; border: 6px solid transparent; border-image: url(../assets/hud/slot.webp) 72 fill / 6px stretch; } #ui .gw-slot .gw-pv { position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 36px); } /* 캐릭터 칸(그림 자리 img 위에 같은 상자 canvas.live — 가방 미리보기와 같은 식) */ #ui .gw-slot.ghost::before { content: ""; position: absolute; left: 50%; bottom: 40px; width: 30px; height: 46px; transform: translateX(-50%); opacity: .22; background: radial-gradient(circle at 50% 9px, #6f7371 8px, transparent 9px), linear-gradient(#6f7371, #6f7371) 50% 100% / 26px 30px no-repeat; border-radius: 8px 8px 4px 4px; } #ui .gw-slot b { max-width: 100%; font-size: 12px; font-weight: 800; color: var(--ink, #3b2f22); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gw-slot b.blocked { color: #d0463a; } #ui .gw-slot small { font-size: 11px; font-weight: 800; } #ui .gw-slot small.good { color: #3d9c4c; } #ui .gw-slot small.warn { color: #c0503a; } #ui .gw-slot.empty { justify-content: center; } #ui .gw-slot.empty span { font-size: 11px; color: #a59a88; opacity: .7; } #ui .gw-bottom { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; } #ui .gw-msg { min-height: 14px; margin: 0; font-size: 11px; font-weight: 800; color: #c0503a; } #ui .gw-count { font-size: 11px; color: #8b7a62; } #ui .gw-vs { font-size: 16px; font-weight: 900; color: #a87b15; } #ui .gw-go { position: relative; width: 100%; display: flex; justify-content: center; margin-top: 3px; } #ui .btn.gd-btn.gw-quick { width: 180px; min-height: 34px; font-size: 13px; } #ui .gw-go .gw-cancel { position: absolute; right: 0; top: 4px; } #ui .gd-row.gw-room .gd-row-main { gap: 1px; } #ui .gw-mismatch { flex: none; padding-right: 6px; font-weight: 800; } #hud.gw-arena .respawn { display: none !important; } /* 길드 마크(문장 v2, 17h-guild-emblem) — 그림은 canvas(래스터 합성), 여기는 칸 배치만. 편집기 = 왼쪽 미리보기 112 + 44 · 24 + [무작위] / 오른쪽 탭 · 칸 · 색 그래프(채도 · 명도 판 + 색상 띠, 10-19 "팔레트 말고 그래프") */ #ui .gd-emb { display: block; flex: none; } #ui .gd-icon .gd-emb { margin: -2px; } #ui .gd-iconedit { display: flex; flex-direction: column; gap: 6px; height: 100%; } #ui .gd-icon-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #ui .gd-icon-foot p { margin: 0 auto 0 4px; font-size: 12px; font-weight: 800; } #ui .gd-icon-foot small { font-size: 11px; color: #8b7a62; } #ui .em-editor { flex: 1; min-height: 0; display: flex; gap: 10px; } #ui .em-left { flex: none; width: 124px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 6px; background: radial-gradient(circle at 50% 38%, #fffaf0, #f1e4c8 70%); box-shadow: inset 0 0 0 1px #0000001c; } #ui .em-big { filter: drop-shadow(0 2px 2px #0003); animation: em-pop .28s cubic-bezier(.2, 1.4, .4, 1) both; } #ui .em-mini { display: flex; align-items: flex-end; gap: 8px; } #ui .btn.gd-btn.em-rand { width: 100%; } #ui .em-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } #ui .em-tabs { flex: none; display: flex; gap: 4px; } #ui .em-tab { flex: 1; height: 26px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #8b7a62; background: #00000010; box-shadow: inset 0 0 0 1px #0000001c; } #ui .em-tab.on { color: var(--ink, #3b2f22); background: #fff6e1; box-shadow: inset 0 0 0 1px #c9961e; } #ui .em-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 5px; align-content: start; padding: 2px; } #ui .em-grid.symbol { grid-template-columns: repeat(9, 1fr); } /* 상징 36 = 9 x 4(동물 · 무기 · 자연 · 단순 도형) */ #ui .em-editor.compact .em-tabs .em-rand { flex: none; width: 64px; } #ui .em-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: #00000010; box-shadow: inset 0 0 0 1px #00000024; transition: transform .08s; } #ui .em-cell:active { transform: scale(.92); } #ui .em-cell.on { background: #fff6e1; box-shadow: inset 0 0 0 2px #c9961e; } #ui .em-cell.locked .gd-emb { filter: grayscale(1) brightness(.85); opacity: .55; } #ui .em-cell.locked i { position: absolute; left: 0; right: 0; bottom: 2px; font-style: normal; font-size: 10px; font-weight: 800; color: #8b4a3a; text-align: center; } #ui .em-hsv { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-rows: 50px 14px; gap: 6px 8px; padding: 0 2px 2px; } #ui .em-sv { position: relative; border-radius: 5px; background: linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, var(--hue)); box-shadow: inset 0 0 0 1px #0000004d; touch-action: none; cursor: crosshair; } #ui .em-hue { position: relative; grid-row: 2; border-radius: 7px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px #0000004d; touch-action: none; cursor: ew-resize; } #ui .em-sv i, #ui .em-hue i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0009, inset 0 0 0 1px #0006; pointer-events: none; } #ui .em-hue i { top: 50%; } #ui .em-cur { grid-row: 1 / 3; grid-column: 2; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px #0000004d, inset 0 -4px 0 #0000002a; } #ui .em-note { flex: none; margin: 0; padding: 4px 0; font-size: 11px; color: #8b7a62; text-align: center; } #ui .gc-right .em-editor { height: 100%; } @keyframes em-pop { from { transform: scale(.82); } } /* 길드 대항전 연출 v5(17i-guild-war-fx) — 참고작 도깨비의세계(사용자 10-19 선택: 2026-10 구글 인기 1위 · 매출 2위, 2D 도트 + 3D 배경) 문법: 짙은 반투명 띠(양 끝 흐림) · 위아래 얇은 금선 · 제목 양옆 장식선 · 명조 제목(GwTitle = Noto Serif KR Black 부분집합, canvas) · 얇은 금 고리 안 마크 · 크림 판 + ◆. 장식 문양은 중세 문장(백합 문장 · 아칸서스 덩굴 · 마름모 — 사용자 10-19 "구름은 너무 무협지, 중세느낌의 패턴문양으로"): 띠 안 옅은 다마스크 · 결과 띠 아랫선 메달. 그림 = Codex v5(pips · petals · search) · v6(orn-line · emb-ring · damask · medal) + 빛(ring · flare · sunburst). 움직임 = 레퍼런스 실측(Clash Royale · Fall Guys · Wild Rift) 시각. 무대: .gwfx = 화면 전체(폭 --hw) · .gwfx-c = 가운데 800×450 상자 — 폰 가로(--hw ≈ 1000)에서도 가운데. transform · opacity 만 움직인다. 이징: 팝 cubic-bezier(.34,1.56,.64,1) · 미끄러짐 (.16,1,.3,1) · 퇴장 (.36,0,.66,-.56). */ @font-face { font-family: "GwTitle"; src: url("fonts/GwTitle.woff2") format("woff2"); font-display: block; } #ui .gwfx { position: absolute; left: 0; top: 0; width: 100%; height: 450px; pointer-events: none; z-index: 40; --gold: #e9c47c; --cream: #f6ead2; } #ui .gwfx [hidden] { display: none !important; } #ui .gwfx-c { position: absolute; left: 50%; top: 0; width: 800px; height: 450px; margin-left: -400px; } #ui .gwfx canvas { display: block; } #ui .gwfx b, #ui .gwfx small, #ui .gwfx p { font-style: normal; } /* 띠: 짙은 반투명(양 끝 흐림) + 위아래 금선(가운데 진함) */ #ui .gwfx-sband, #ui .gwfx-gband, #ui .gwfx-rband, #ui .gwfx-sd { position: absolute; left: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(20, 15, 11, .9) 22%, rgba(20, 15, 11, .9) 78%, transparent); } #ui .gwfx-gl { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 6%, rgba(233, 196, 124, .25) 22%, var(--gold) 50%, rgba(233, 196, 124, .25) 78%, transparent 94%); } #ui .gwfx-gl.t { top: 0; } #ui .gwfx-gl.b { bottom: 0; } #ui .gwfx-sband::before, #ui .gwfx-gband::before, #ui .gwfx-rband::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; bottom: 12px; opacity: .13; /* 옅은 다마스크(가로로 이어짐) */ background: url(art/gw/damask.webp) center / auto 100% repeat-x; -webkit-mask: linear-gradient(90deg, transparent 12%, #000 34%, #000 66%, transparent 88%); mask: linear-gradient(90deg, transparent 12%, #000 34%, #000 66%, transparent 88%); } #ui .gwfx-result.lose .gwfx-rband::before, #ui .gwfx-result.cancel .gwfx-rband::before { filter: grayscale(1); opacity: .09; } /* 제목 줄: 장식선 · 글자(canvas) · 장식선 — 오른쪽은 안쪽 그림만 뒤집는다(상자째 뒤집으면 글자 쪽으로 넘어가 가려졌다). 펼침은 글자 쪽 끝에서 바깥으로 */ #ui .gwfx-title { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; } #ui .gwfx-orn { position: relative; width: 150px; height: 26px; flex: none; } #ui .gwfx-orn::before { content: ''; position: absolute; inset: 0; background: url(art/gw/orn-line.webp) center / contain no-repeat; } #ui .gwfx-orn.r::before { transform: scaleX(-1); } #ui .gwfx-orn.l { transform-origin: 100% 50%; } #ui .gwfx-orn.r { transform-origin: 0 50%; } #ui .gwfx-ch { margin: 0 calc(2px - var(--pad, 0px)); } /* 글자 canvas 마다 빛 여백(pad)이 있어 낱자 사이가 벌어졌다 — 여백만큼 겹친다 */ /* 마크 고리: 금 고리 안에 길드 마크(canvas.gd-emb) */ #ui .gwfx-emb { position: relative; display: grid; place-items: center; } /* ---- 매칭 알약(아래 가운데, 파티 칸 위) */ #ui .gwfx-band { position: absolute; left: 50%; top: 306px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 16px 0 6px; border-radius: 15px; background: rgba(20, 15, 11, .88); box-shadow: inset 0 0 0 1px rgba(233, 196, 124, .55), 0 3px 10px #0007; white-space: nowrap; animation: gwfx-up .32s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-ring { width: 24px; height: 24px; background: url(art/gw/search.webp) center / contain no-repeat; animation: gwfx-spin 1.6s linear infinite; } #ui .gwfx-band b { font-size: 12px; font-weight: 800; color: var(--cream); } #ui .gwfx-band small { font-size: 11px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } /* ---- 상대 찾음: 띠 + 두 길드 + VS + 3 · 2 · 1 */ #ui .gwfx-splash { position: absolute; inset: 0; } #ui .gwfx-flash { position: absolute; inset: 0; background: #fff6e0; opacity: 0; } #ui .gwfx-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(8, 6, 5, .45), rgba(8, 6, 5, .78) 75%); opacity: 0; } #ui .gwfx-sband { top: 118px; height: 176px; opacity: 0; } #ui .gwfx-team { position: absolute; top: 118px; width: 330px; height: 176px; display: flex; align-items: center; gap: 14px; opacity: 0; } #ui .gwfx-team.l { left: 34px; } #ui .gwfx-team.r { right: 34px; flex-direction: row-reverse; text-align: right; } #ui .gwfx-team .gwfx-emb { width: 70px; height: 70px; flex: none; } #ui .gwfx-team .gwfx-emb::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(92, 146, 255, .38), transparent 68%); } #ui .gwfx-team.r .gwfx-emb::before { background: radial-gradient(circle, rgba(255, 108, 88, .38), transparent 68%); } #ui .gwfx-tx { position: relative; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; } #ui .gwfx-tx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #6f9dff, rgba(111, 157, 255, 0)); } #ui .gwfx-team.r .gwfx-tx::after { background: linear-gradient(270deg, #ff8068, rgba(255, 128, 104, 0)); } #ui .gwfx-tx b { font-size: 19px; font-weight: 900; color: var(--cream); text-shadow: 0 1px 0 #000, 0 0 8px #000c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gwfx-tx small { font-size: 11px; font-weight: 700; color: #cbbfa6; text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ui .gwfx-shock { position: absolute; left: 245px; top: 51px; width: 310px; height: 310px; background: url(art/gw/ring.webp) center / contain no-repeat; opacity: 0; } /* 가운데 (400, 206) */ #ui .gwfx-vswrap { position: absolute; left: 300px; top: 156px; width: 200px; height: 100px; display: grid; place-items: center; opacity: 0; } #ui .gwfx-dwrap { position: absolute; left: 330px; top: 306px; width: 140px; height: 120px; display: grid; place-items: center; opacity: 0; } #ui .gwfx-dring { position: absolute; left: -10px; top: -20px; width: 160px; height: 160px; background: url(art/gw/ring.webp) center / contain no-repeat; opacity: 0; } #ui .gwfx-sparks { position: absolute; left: 400px; top: 206px; width: 0; height: 0; } #ui .gwfx-splash.play .gwfx-flash { animation: gwfx-flash .12s ease-out both; } #ui .gwfx-splash.play .gwfx-dim { animation: gwfx-in .2s .04s ease-out both; } #ui .gwfx-splash.play .gwfx-sband { animation: gwfx-bandin .26s .06s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-splash.play .gwfx-gl { animation: gwfx-line .42s .1s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-splash.play .gwfx-team.l { animation: gwfx-from-l .3s .12s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-splash.play .gwfx-team.r { animation: gwfx-from-r .3s .18s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-splash.play .gwfx-tx small { animation: gwfx-in .3s .6s ease-out both; } #ui .gwfx-splash.play .gwfx-vswrap { animation: gwfx-slam .32s .38s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-splash.play .gwfx-shock { animation: gwfx-shock .55s .4s ease-out both; } #ui .gwfx-splash.play .gwfx-p.sparks { animation: gwfx-spark .6s calc(.4s + var(--d) * .3) cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-dwrap.pop { animation: gwfx-digit 1s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-dwrap.pop .gwfx-dring { animation: gwfx-shock .5s ease-out both; } #ui .gwfx-splash.out { animation: gwfx-out .18s ease-in forwards; } /* ---- 전투 시작 */ #ui .gwfx-go { position: absolute; inset: 0; } #ui .gwfx-gband { top: 132px; height: 104px; } #ui .gwfx-flare { position: absolute; left: -60px; top: 134px; width: 920px; height: 100px; background: url(art/gw/flare.webp) center / 100% 100% no-repeat; opacity: 0; } #ui .gwfx-go .gwfx-shock { left: 255px; top: 39px; width: 290px; height: 290px; } #ui .gwfx-go .gwfx-title { top: 132px; height: 104px; } #ui .gwfx-go.play .gwfx-gband { animation: gwfx-bandin .22s cubic-bezier(.16, 1, .3, 1) both, gwfx-out .25s .85s ease-in forwards; } #ui .gwfx-go.play .gwfx-gl { animation: gwfx-line .36s .04s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-go.play .gwfx-flare { animation: gwfx-flare .7s .05s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-go.play .gwfx-shock { animation: gwfx-shock .5s .05s ease-out both; } #ui .gwfx-go.play .gwfx-gotext { animation: gwfx-go 1.05s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-go.play .gwfx-orn { animation: gwfx-orn .4s .12s cubic-bezier(.16, 1, .3, 1) both, gwfx-out .25s .85s ease-in forwards; } /* ---- 아레나 HUD(위 가운데 반투명 알약) */ #ui .gwfx-hud { position: absolute; left: 50%; top: 86px; width: 340px; height: 44px; margin-left: -170px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-radius: 22px; background: rgba(20, 15, 11, .86); box-shadow: inset 0 0 0 1px rgba(233, 196, 124, .5), 0 3px 10px #0007; } #ui .gwfx-hud::before, #ui .gwfx-hud::after { content: ''; position: absolute; bottom: 5px; width: 104px; height: 2px; border-radius: 1px; } #ui .gwfx-hud::before { left: 52px; background: linear-gradient(90deg, rgba(111, 157, 255, 0), #6f9dff); } #ui .gwfx-hud::after { right: 52px; background: linear-gradient(270deg, rgba(255, 128, 104, 0), #ff8068); } #ui .gwfx-hud.enter { animation: gwfx-drop .45s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-hud.gone { animation: gwfx-out .25s ease-in forwards; } /* 결과가 뜨면 막대는 빠진다 */ #ui .gwfx-side { display: flex; align-items: center; gap: 8px; } #ui .gwfx-side.r { flex-direction: row; } #ui .gwfx-hud .gwfx-emb { width: 30px; height: 30px; } #ui .gwfx-marks { width: 92px; display: flex; justify-content: center; gap: 3px; } #ui .gwfx-mark { width: 18px; height: 18px; background: url(art/gw/pips.webp) 0 0 / 300% 100% no-repeat; } #ui .gwfx-mark.red { background-position: 50% 0; } #ui .gwfx-mark.ko { background-position: 100% 0; } #ui .gwfx-mark.pop { animation: gwfx-ko .35s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-time { min-width: 52px; text-align: center; font-size: 16px; font-weight: 900; color: var(--cream); letter-spacing: .5px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000, 0 0 8px rgba(233, 196, 124, .45); } #ui .gwfx-time.sudden { color: #ff9a80; animation: gwfx-pulse .5s ease-in-out infinite; } #ui .gwfx-popwrap { position: absolute; left: -120px; right: -120px; top: 48px; display: flex; justify-content: center; opacity: 0; } #ui .gwfx-popwrap.play { animation: gwfx-call 1.4s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-sd { left: -280px; right: -280px; top: 58px; height: 58px; display: flex; justify-content: center; align-items: center; opacity: 0; background: linear-gradient(90deg, transparent, rgba(46, 10, 6, .9) 22%, rgba(46, 10, 6, .9) 78%, transparent); box-shadow: inset 0 1px 0 rgba(255, 128, 104, .55), inset 0 -1px 0 rgba(255, 128, 104, .55); } #ui .gwfx-sd.play { animation: gwfx-sd 1.6s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 90px 30px rgba(196, 52, 34, .9); animation: gwfx-vig 1s ease-in-out infinite; } /* ---- 결과: 띠 + 마크 고리 + 명조 제목(◇◆ 선) + 대진 + 크림 판(◆ 길드 포인트 ◆) + 금빛 티끌 · 매화 꽃잎 / 재 */ #ui .gwfx-result { position: absolute; inset: 0; } #ui .gwfx-rdim { position: absolute; inset: 0; background: rgba(8, 6, 5, .62); opacity: 0; } #ui .gwfx-result.lose .gwfx-rdim, #ui .gwfx-result.cancel .gwfx-rdim { background: rgba(6, 8, 12, .7); } #ui .gwfx-rband { top: 148px; height: 186px; opacity: 0; } #ui .gwfx-result.lose .gwfx-rband, #ui .gwfx-result.cancel .gwfx-rband { background: linear-gradient(90deg, transparent, rgba(12, 14, 20, .92) 22%, rgba(12, 14, 20, .92) 78%, transparent); } #ui .gwfx-result.lose .gwfx-gl, #ui .gwfx-result.cancel .gwfx-gl { background: linear-gradient(90deg, transparent 6%, rgba(176, 186, 206, .2) 22%, #b0bace 50%, rgba(176, 186, 206, .2) 78%, transparent 94%); } #ui .gwfx-sun { position: absolute; left: 160px; top: -20px; width: 480px; height: 480px; background: url(art/gw/sunburst.webp) center / contain no-repeat; opacity: 0; } /* 가운데 (400, 220) */ #ui .gwfx-remb { position: absolute; left: 358px; top: 106px; width: 84px; height: 84px; display: grid; place-items: center; opacity: 0; } /* 띠 윗선에 걸침 */ #ui .gwfx-result .gwfx-title { top: 196px; height: 70px; } #ui .gwfx-medal { position: absolute; left: 320px; top: 319px; width: 160px; height: 30px; background: url(art/gw/medal.webp) center / contain no-repeat; opacity: 0; } /* 띠 아랫선 가운데 */ #ui .gwfx-result.lose .gwfx-medal, #ui .gwfx-result.cancel .gwfx-medal { filter: grayscale(1) brightness(1.1); } #ui .gwfx-word { display: flex; align-items: center; gap: 2px; } #ui .gwfx-sp { width: 16px; } #ui .gwfx-result.lose .gwfx-orn, #ui .gwfx-result.cancel .gwfx-orn { filter: grayscale(1) brightness(1.15); } #ui .gwfx-rvs { position: absolute; left: 0; right: 0; top: 266px; margin: 0; text-align: center; white-space: pre; font-size: 13px; font-weight: 800; color: #d9cdb4; text-shadow: 0 1px 0 #000; opacity: 0; } #ui .gwfx-rpts { position: absolute; left: 50%; top: 292px; height: 28px; transform: translateX(-50%); margin: 0; padding: 0 14px; display: flex; align-items: center; white-space: nowrap; border-radius: 4px; font-size: 14px; font-weight: 900; color: #3a2614; background: linear-gradient(#f8eedb, #e6d3ae); box-shadow: inset 0 0 0 1px #6b4a26, inset 0 0 0 3px rgba(248, 238, 219, .9), inset 0 0 0 4px rgba(184, 135, 59, .7), 0 2px 8px #0008; } #ui .gwfx-rpts:empty { display: none; } #ui .gwfx-rpts.done { animation: gwfx-bump .25s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-parts { position: absolute; left: 400px; top: 200px; width: 0; height: 0; } #ui .gwfx-p { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; background: url(art/gw/petals.webp) calc(var(--k) * 100% / 7) 0 / 800% 100% no-repeat; opacity: 0; } #ui .gwfx-result.play .gwfx-rdim { animation: gwfx-in .3s ease-out both; } #ui .gwfx-result.play .gwfx-rband { animation: gwfx-bandin .3s .08s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-result.play .gwfx-gl { animation: gwfx-line .5s .12s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-result.win.play .gwfx-sun { animation: gwfx-sun .6s .25s ease-out both, gwfx-spin 30s linear infinite; } #ui .gwfx-result.play .gwfx-remb { animation: gwfx-land .45s .3s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-result.lose.play .gwfx-remb, #ui .gwfx-result.cancel.play .gwfx-remb { animation: gwfx-thud .5s .3s cubic-bezier(.36, 0, .66, -.3) both; filter: grayscale(.7) brightness(.8); } #ui .gwfx-result.play .gwfx-ch { animation: gwfx-letter .42s calc(.48s + var(--i) * .07s) cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-result.play .gwfx-orn { animation: gwfx-orn .5s .62s cubic-bezier(.16, 1, .3, 1) both; } #ui .gwfx-result.play .gwfx-medal { animation: gwfx-land .4s .55s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-result.play .gwfx-rvs { animation: gwfx-in .3s 1s ease-out both; } #ui .gwfx-result.play .gwfx-rpts { animation: gwfx-plate .35s 1.3s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gwfx-result.win.play .gwfx-p { animation: gwfx-petal 3.2s calc(.45s + var(--d) * 1.6) linear both; } #ui .gwfx-result.lose.play .gwfx-p, #ui .gwfx-result.cancel.play .gwfx-p { animation: gwfx-ash 3.4s calc(.5s + var(--d) * 1.6) linear both; } #ui .gwfx-result.out { animation: gwfx-out .9s ease-in forwards; } @keyframes gwfx-spin { to { transform: rotate(360deg); } } @keyframes gwfx-up { from { transform: translateX(-50%) translateY(14px) scale(.9); opacity: 0; } } @keyframes gwfx-in { from { opacity: 0; } to { opacity: 1; } } @keyframes gwfx-out { to { opacity: 0; } } @keyframes gwfx-flash { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: 0; } } @keyframes gwfx-bandin { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gwfx-line { from { transform: scaleX(0); } to { transform: none; } } @keyframes gwfx-from-l { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gwfx-from-r { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gwfx-slam { 0% { transform: scale(1.8); opacity: 0; } 55% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes gwfx-shock { 0% { transform: scale(.35); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes gwfx-digit { 0% { transform: scale(.4); opacity: 0; } 10% { transform: scale(1.15); opacity: 1; } 20% { transform: scale(1); } 75% { transform: scale(1) rotate(0); opacity: 1; } 90% { transform: scale(.6) rotate(20deg); opacity: 0; } 100% { opacity: 0; } } @keyframes gwfx-flare { 0% { transform: scaleX(.15); opacity: 0; } 25% { opacity: 1; } 100% { transform: scaleX(1.1); opacity: 0; } } @keyframes gwfx-go { 0% { transform: scale(1.7); opacity: 0; } 18% { transform: scale(.96); opacity: 1; } 30% { transform: scale(1); } 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } } @keyframes gwfx-orn { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gwfx-drop { from { transform: translateY(-30px); opacity: 0; } } @keyframes gwfx-ko { 0% { transform: scale(1.7); } 100% { transform: scale(1); } } @keyframes gwfx-pulse { 50% { transform: scale(1.08); } } @keyframes gwfx-call { 0% { transform: scale(1.3); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } } @keyframes gwfx-sd { 0% { transform: scaleY(.1); opacity: 0; } 14% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: scaleY(.6); opacity: 0; } } @keyframes gwfx-vig { 0%, 100% { opacity: .15; } 50% { opacity: .35; } } @keyframes gwfx-sun { from { opacity: 0; } to { opacity: .55; } } @keyframes gwfx-land { 0% { transform: translateY(-36px) scale(1.25); opacity: 0; } 60% { transform: translateY(0) scale(.96); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes gwfx-thud { 0% { transform: translateY(-60px); opacity: 0; } 70% { transform: translateY(0) scale(1.06, .9); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes gwfx-letter { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes gwfx-plate { 0% { transform: translateX(-50%) scale(.6); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } } @keyframes gwfx-bump { 50% { transform: translateX(-50%) scale(1.12); } 100% { transform: translateX(-50%); } } @keyframes gwfx-spark { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 170px), calc((var(--y) - .5) * 150px)) scale(var(--s)) rotate(var(--r)); opacity: 0; } } @keyframes gwfx-petal { 0% { transform: translate(calc(var(--x) * 420px), -240px) rotate(0) scale(var(--s)); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 420px + var(--y) * 90px - 45px), 260px) rotate(var(--r)) scale(var(--s)); opacity: 0; } } @keyframes gwfx-ash { 0% { transform: translate(calc(var(--x) * 400px), -220px) rotate(0) scale(var(--s)); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .85; } 100% { transform: translate(calc(var(--x) * 400px + var(--y) * 40px - 20px), 250px) rotate(var(--r)) scale(var(--s)); opacity: 0; } } /* 길드 창 다듬기(community-1018, 10-19 사용자 "길드마크가 다 깨져보임 · 지금 만든것처럼(대항전 연출 v6) 좀 퀄리티높게 UI 품질도좀 높여봐"). 나인패치 창 그림(panel · slot · button)은 그대로(10-17 "나인패치 디자인은 유지") — 대항전 연출과 같은 중세 금장식(ui/art/gw: emb-ring · medal)과 움직임만 더한다. 마크 선명도 = 17h guildEmblem(canvas 해상도 = 크기 × UI 배율 × dpr — 전에는 UI 배율이 빠져 PC 1080p 에서 2.4배로 늘어나 깨졌다). */ /* 머리 마크: 어두운 네모 없이 문장만(밖 고리 없음 — 17h 공용 렌더러) */ #ui .gd-icon { position: relative; background: none; border-radius: 0; } /* 머리 밑줄 가운데 메달(백합 문장 · 네잎 테) */ #ui .gd-head { position: relative; } #ui .gd-head::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 104px; height: 18px; margin-left: -52px; background: url(art/gw/medal.webp) center / contain no-repeat; pointer-events: none; filter: brightness(.8) saturate(1.3); } /* 랭킹 1 · 2 · 3위 = 순위 숫자 색(13-guild). 마크 밖 고리는 뺐다 — 테두리는 문장 자신의 테(10-19 "테두리가 길드마크랑 상관없이 삐져나와있네") */ /* 창 만들기 미리보기: 큰 마크에 금 고리 */ #ui .gc-preview .gd-emb { filter: drop-shadow(0 2px 3px #0003); } /* 움직임: 창이 처음 열릴 때(ui_fx .fx-intro 800ms) 줄이 차례로 · 마크가 살짝 튀며 · 탭을 바꾸면 내용이 살짝 떠오름 · 누름 */ #ui .dim.fx-intro .gd-row { animation: fx-cell .28s cubic-bezier(.2, .9, .3, 1.3) both; } #ui .dim.fx-intro .gd-row:nth-child(1) { animation-delay: .12s; } #ui .dim.fx-intro .gd-row:nth-child(2) { animation-delay: .15s; } #ui .dim.fx-intro .gd-row:nth-child(3) { animation-delay: .18s; } #ui .dim.fx-intro .gd-row:nth-child(4) { animation-delay: .21s; } #ui .dim.fx-intro .gd-row:nth-child(5) { animation-delay: .24s; } #ui .dim.fx-intro .gd-row:nth-child(6) { animation-delay: .27s; } #ui .dim.fx-intro .gd-row:nth-child(7) { animation-delay: .3s; } #ui .dim.fx-intro .gd-row:nth-child(n+8) { animation-delay: .33s; } #ui .dim.fx-intro .gd-emb.painted { animation: gd-emb-in .32s cubic-bezier(.34, 1.56, .64, 1) both; } #ui .gd-body.gd-swap > * { animation: gd-swap .22s cubic-bezier(.2, .8, .3, 1) both; } #ui .gd-row[data-row-guild] { transition: transform .08s ease-out, filter .12s; } #ui .gd-row[data-row-guild]:active { transform: scale(.985); } @media (hover: hover) { #ui .gd-row[data-row-guild]:hover { filter: brightness(1.04); } } @keyframes gd-emb-in { from { transform: scale(.6); opacity: 0; } } @keyframes gd-swap { from { transform: translateY(6px); opacity: 0; } } /* ===== 길드 창 전체화면(2026-10-20 사용자 "랭킹이랑 길드ui도 경매장 구현했던것처럼 전체화면으로 변경해줘 고품질 ui 에 맞게 퀄리티 높여줘") ===== 본 창(guild-dim .popup.full.gd)만 — 딸린 창(가입 신청함 · 정보 · 게시물 · 글쓰기 · 창설 · 보상 = .gd-sub)은 작은 나인패치 창 그대로라 모든 줄을 .popup.full.gd 아래로 묶는다. 판 · 머리 띠 · ‹ · 탭 알약 줄 · 단추 색 = 01-popup 전체화면 판(경매장 · 물품과 같은 값). 배치 = 도깨비의 세계 §11.6 문파 창(머리 = ‹ + 문장 + 흰 굵은 이름 + 칩 → 위 탭 알약 → 왼쪽 세로 탭: 고른 탭 = 흰 베이지 둥근 네모 + 어두운 글자, 나머지 = 어두운 회색 반투명) · §8 목록 줄(어두운 반투명 둥근 줄 + 얇은 밝은 테) · §9 단추(글자 폭 알약 — 칸 · 판 폭으로 늘이지 않는다). 글자색: 크림 판용 갈색(#8b7a62 · #a59a88 · #6f6146 · #8b8274)은 밝은 회색(--ink-soft), 금색 #a87b15 → #e8c979(01-popup 재화 금), 좋음 → 경매장 초록 #7fd88a, 경고 → 경매장 #ff9b85. 대항전 연출(13d · 17i)은 손대지 않는다. */ #ui .popup.full.gd { width: 100%; height: 100%; } /* 13-guild 의 660×430 고정 크기를 푼다 — 판 = 무대 전체 */ #ui .popup.full.gd > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-guild.png); mask-image: url(../assets/icons/menu-guild.png); } /* 비소속 = 메뉴 길드 흰 선 아이콘 */ #ui .popup.full.gd > .popup-head > .gd-icon:not([hidden]) + h2::before { display: none; } /* 소속 = 길드 문장이 그 자리 */ #ui .popup.full.gd > .gd-head::after { display: none; } /* 크림 판 밑줄 금 메달 — 어두운 머리 띠에는 없다 */ #ui .popup.full.gd > .gd-head h2 { flex: 1; font-size: 17px; } #ui .popup.full.gd .gd-icon { width: 34px; height: 34px; margin: 0 2px 0 0; } #ui .popup.full.gd .gd-chip { height: 20px; padding: 0 8px; border-radius: 10px; color: var(--ink-soft); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #ui .popup.full.gd .gd-chip.gold { color: #e8c979; box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); } #ui .popup.full.gd .gd-chip.accent { color: #d4d6d0; } /* 위 탭 = 공용 알약 줄(.tabs/.tab, 01-popup) — 3개라 글자 폭 */ #ui .popup.full.gd .gd-tabs { height: 32px; margin: 0 0 10px; } #ui .popup.full.gd .gd-tab { width: auto; min-width: 84px; font-size: 13px; font-weight: 800; } #ui .popup.full.gd .gd-tab.on::after { display: none; } /* 본문 = 왼쪽 세로 탭 + 내용 */ #ui .popup.full.gd .gd-main { gap: 12px; } #ui .popup.full.gd .gd-rail { width: 124px; gap: 4px; margin: 0; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .3); } #ui .popup.full.gd .gd-side { flex: none; height: 36px; padding: 0 12px; border-radius: 8px; text-align: left; font-size: 12.5px; color: #a3a6a0; background: rgba(255, 255, 255, .06); box-shadow: none; transition: background .15s, color .15s, transform .08s ease-out; } #ui .popup.full.gd .gd-side.on { color: #26221c; background: linear-gradient(#ece4d3, #c9bda6); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.full.gd .gd-side.on::before { display: none; } #ui .popup.full.gd :is(.gd-tab, .gd-side, .gd-subtab, .em-tab):not(.on):active { transform: scale(.95); } /* 누름 반응 */ #ui .popup.full.gd .gd-body { padding: 0 4px 0 0; border-radius: 0; background: none; box-shadow: none; } /* 거절 사유 = 아래 여백에 뜨는 알약(경매장 au-msg 와 같은 결 — 배치가 밀리지 않는다) */ #ui .popup.full.gd .gd-msg { position: absolute; left: 0; right: 0; bottom: 2px; z-index: 6; width: fit-content; max-width: 86%; margin: 0 auto; padding: 3px 14px; border-radius: 12px; color: #ff9b85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(60, 20, 16, .92); box-shadow: inset 0 0 0 1.5px #b4664d, 0 3px 8px #0006; animation: fx-fade .2s ease-out both; } #ui .popup.full.gd .gd-msg[hidden] { display: none; } /* 글자색 */ #ui .popup.full.gd .muted, #ui .popup.full.gd .dim, #ui .popup.full.gd .gd-dim { color: var(--ink-soft); } #ui .popup.full.gd .gold { color: #e8c979; } #ui .popup.full.gd .good { color: #7fd88a; } #ui .popup.full.gd .gd-warn { color: #ff9b85; } #ui .popup.full.gd .gd-empty b { color: #c9ccc6; } #ui .popup.full.gd .gd-empty small { color: #7d817c; } #ui .popup.full.gd .gd-empty-acts { margin-top: 12px; } /* 단추 = 글자 폭 알약(w30 ~ w140 · gd-wide · gd-toggle · gw-quick · gd-cell-buy 고정 폭을 모두 푼다 — 10-20 "버튼 가로 크기가 길어지지 않게") */ #ui .popup.full.gd .btn.gd-btn { width: auto; min-width: 0; min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; opacity: 1; font-size: 12.5px; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } #ui .popup.full.gd .btn.gd-btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui .popup.full.gd .btn.gd-btn.danger { background: linear-gradient(#a64646, #742c2c); color: #fff; } #ui .popup.full.gd .btn.gd-btn:is(.plain, .ghost) { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup.full.gd .btn.gd-btn.off { filter: grayscale(1); opacity: .45; } #ui .popup.full.gd .btn.gd-btn.w30 { min-width: 30px; padding: 0 10px; } #ui .popup.full.gd .gd-row .btn.gd-btn { min-height: 26px; padding: 0 12px; font-size: 12px; } /* 목록 줄 = 경매장 au-row 결(밝은 반투명 둥근 줄 + 얇은 밝은 테, 나인패치 slot 걷어냄). 높이 = EFZ 줄 값 + 2~8 */ #ui .popup.full.gd .gd-row { margin-bottom: 4px; padding: 0 12px 0 14px; border: 0; border-image: none; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: transform .08s ease-out, background .12s; } #ui .popup.full.gd .gd-row.r48 { height: 50px; } #ui .popup.full.gd .gd-row.r44 { height: 46px; } #ui .popup.full.gd .gd-row.r40 { height: 48px; } #ui .popup.full.gd .gd-row.r38 { height: 44px; } #ui .popup.full.gd .gd-row.r34 { height: 38px; } #ui .popup.full.gd .gd-row.r72 { height: 72px; } #ui .popup.full.gd .gd-row.r54 { height: 58px; } #ui .popup.full.gd .gd-row.self { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } /* 나 = 한 단 밝은 줄 + 얇은 밝은 테(랭킹 내 줄과 같은 값) */ #ui .popup.full.gd .gd-row:is(.notice, .lit, .medal1, .medal2, .medal3) { --mc: #e8c979; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 14%, transparent), transparent 40%), rgba(255, 255, 255, .06); } #ui .popup.full.gd .gd-row.medal2 { --mc: #c9d3d8; } #ui .popup.full.gd .gd-row.medal3 { --mc: #d39a6a; } #ui .popup.full.gd .gd-row:is(.notice, .lit, .medal1, .medal2, .medal3)::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--mc); box-shadow: 0 0 6px var(--mc); } #ui .popup.full.gd .gd-row:is([data-row-profile], [data-row-post], [data-row-guild]):active { transform: scale(.985); background-color: rgba(255, 255, 255, .1); } #ui .popup.full.gd .gd-row-main b { font-size: 13px; } #ui .popup.full.gd .gd-row-main small { color: var(--ink-soft); } #ui .popup.full.gd .gd-line1 em { color: var(--ink-soft); } #ui .popup.full.gd .gd-line1 em.good { color: #7fd88a; } #ui .popup.full.gd .gd-dot { margin-top: 9px; background: #5d615e; } #ui .popup.full.gd .gd-dot.on { background: #6ad67a; box-shadow: 0 0 6px rgba(106, 214, 122, .7); } #ui .popup.full.gd .gd-by { right: 12px; bottom: 6px; color: var(--ink-soft) !important; } #ui .popup.full.gd .gd-headline { color: #c9ccc6; } #ui .popup.full.gd .gd-headline::before { background: #e8c979; } /* 게시판 분류 = 작은 알약 줄(위 탭과 같은 결, 한 단 작게) */ #ui .popup.full.gd .gd-subtabs { gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.full.gd .gd-subtab { width: auto; min-width: 60px; height: 26px; padding: 0 14px; border-radius: 999px; color: var(--ink-soft); background: none; box-shadow: none; transition: background .15s, color .15s, transform .08s ease-out; } #ui .popup.full.gd .gd-subtab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.full.gd .gd-pager { gap: 14px; margin-top: 8px; color: var(--ink-soft); } #ui .popup.full.gd .gd-field { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ink); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .popup.full.gd .gd-field::placeholder { color: #7d817c; } #ui .popup.full.gd .gd-field:focus { outline: none; box-shadow: inset 0 0 0 1px #e6decd, 0 0 0 3px rgba(230, 222, 205, .15); } #ui .popup.full.gd .gd-search { align-items: center; gap: 8px; margin: 0 0 10px; } /* 관리: 넓어진 폭 = 왼쪽 카드 열이 늘고(최대 440) 오른쪽 조작은 어두운 칸 하나에 글자 폭 알약 */ #ui .popup.full.gd .gd-col-left { flex: 1 1 0; max-width: 440px; width: auto; gap: 8px; } #ui .popup.full.gd .gd-col-right { flex: 0 0 auto; min-width: 168px; margin-left: auto; align-items: flex-start; gap: 6px; padding: 8px 10px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); } #ui .popup.full.gd .gd-col-left > .btn.gd-btn { align-self: flex-start; } /* [가입 신청함] 도 카드 폭으로 늘이지 않는다 */ #ui .popup.full.gd .gd-col-right .gd-headline { margin-top: 0; } #ui .popup.full.gd .gd-right-label { margin-top: 4px; text-align: left; color: var(--ink-soft); } #ui .popup.full.gd .gd-manage .btn.gd-btn { min-height: 28px; } #ui .popup.full.gd .gd-card { padding: 8px 14px; border: 0; border-image: none; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.full.gd .gd-card.me { padding-top: 6px; padding-bottom: 6px; } #ui .popup.full.gd .gd-stat { height: 19px; } #ui .popup.full.gd .gd-stat span { color: var(--ink-soft); } #ui .popup.full.gd .gd-lv-top b { color: #e8c979; } #ui .popup.full.gd :is(.gd-lv-top small, .gd-lv-left) { color: var(--ink-soft); } #ui .popup.full.gd .gd-meter { height: 8px; margin: 6px 0 4px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.full.gd .gd-meter > i { background: linear-gradient(90deg, #b98d2a, #e8c979); box-shadow: 0 0 6px rgba(232, 201, 121, .5); } /* 가입 받기 ON/OFF = 켜면 청록 결정 알약 · 끄면 회색 알약(글자 폭) */ #ui .popup.full.gd .btn.gd-btn.gd-toggle { background: rgba(255, 255, 255, .12); color: var(--ink-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup.full.gd .btn.gd-btn.gd-toggle.on { background: linear-gradient(#83c3bf, #548f8c); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } /* 상점(지금은 미룬 탭 — 켜면 이 결): 칸 = 어두운 둥근 칸 + 아이콘 바탕 등급색 네모(물품 · 경매장 au-tile 과 같은 식) */ #ui .popup.full.gd .gd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } #ui .popup.full.gd .gd-cell { height: 118px; gap: 3px; padding: 6px; border: 0; border-image: none; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.full.gd .gd-cell-tile { --gc: #6b7073; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--gc) 80%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 55%, #1d2124), color-mix(in srgb, var(--gc) 18%, #121517)); } #ui .popup.full.gd .gd-cell-tile.gr-rare { --gc: #3f8fe0; } #ui .popup.full.gd .gd-cell-tile.gr-epic { --gc: #9a5cd0; } #ui .popup.full.gd .gd-cell-tile.gr-unique { --gc: #e0a020; } #ui .popup.full.gd .gd-cell-tile.gr-legendary { --gc: #e2583a; } #ui .popup.full.gd .gd-cell-name { color: #d4d6d0; } #ui .popup.full.gd .btn.gd-btn.gd-cell-buy { min-height: 24px; padding: 0 10px; } #ui .popup.full.gd .btn.gd-btn.gd-cell-buy.off { filter: none; opacity: 1; background: rgba(255, 255, 255, .1); color: #ff9b85; box-shadow: none; } #ui .popup.full.gd .gd-cell-sold { color: var(--ink-soft); } #ui .popup.full.gd .gd-taxbar { height: 38px; margin-top: 8px; padding: 0 6px 0 14px; border-radius: 10px; color: var(--ink-soft); background: rgba(0, 0, 0, .3); } /* 길드 랭킹 · 찾기 — 1~3위 = 레벨 랭킹(11-ranking)과 같은 메달색 숫자 + 얇은 빛 + 왼쪽 막대 */ #ui .popup.full.gd .gd-rank-no { width: 30px; font-size: 15px; color: #a3a6a0; font-variant-numeric: tabular-nums; } #ui .popup.full.gd .gd-row.medal1 .gd-rank-no { color: #e8c979; text-shadow: 0 0 8px rgba(232, 201, 121, .55); } #ui .popup.full.gd .gd-row.medal2 .gd-rank-no { color: #d5dde2; text-shadow: 0 0 8px rgba(201, 211, 216, .45); } #ui .popup.full.gd .gd-row.medal3 .gd-rank-no { color: #d9a477; text-shadow: 0 0 8px rgba(211, 154, 106, .45); } #ui .popup.full.gd .gd-row:is(.medal1, .medal2, .medal3) .gd-rank-no { font-size: 17px; font-weight: 900; } #ui .popup.full.gd .gd-rank-icon { width: 34px; } #ui .popup.full.gd .gd-rank-pts { gap: 1px; font-size: 12px; font-variant-numeric: tabular-nums; } #ui .popup.full.gd .gd-rank-pts small { color: var(--ink-soft); } #ui .popup.full.gd .gd-find-right { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* 마크 편집기(관리 > 마크 바꾸기): 크림 미리보기 판 → 어두운 판 + 위 은은한 빛, 칸 · 탭 = 어두운 칸 · 고른 칸 베이지 테 */ #ui .popup.full.gd .em-left { width: 132px; border-radius: 10px; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .popup.full.gd .em-big { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); } #ui .popup.full.gd .em-tabs { width: fit-content; max-width: 100%; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.full.gd .em-tab { flex: none; min-width: 64px; padding: 0 16px; height: 26px; border-radius: 999px; color: var(--ink-soft); background: none; box-shadow: none; transition: background .15s, color .15s, transform .08s ease-out; } #ui .popup.full.gd .em-tab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.full.gd .em-cell { border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .popup.full.gd .em-cell.on { background: rgba(230, 222, 205, .16); box-shadow: inset 0 0 0 2px #e6decd, 0 0 8px rgba(230, 222, 205, .25); } #ui .popup.full.gd .em-cell.locked i { color: #ff9b85; } #ui .popup.full.gd .em-note, #ui .popup.full.gd .gd-icon-foot small { color: var(--ink-soft); } #ui .popup.full.gd :is(.em-sv, .em-hue, .em-cur) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } /* 길드 대항전 탭(13b 배치 그대로 · 칸 = 어두운 둥근 칸, 큰 [빠른 매칭] 도 글자 폭 — 연출 13d 는 그대로) */ #ui .popup.full.gd .gw-daily { color: var(--ink-soft); } #ui .popup.full.gd .gw-daily b.warn { color: #ff9b85; } #ui .popup.full.gd .gw-top { gap: 8px; height: 30px; } #ui .popup.full.gd .gw-slots { gap: 8px; } #ui .popup.full.gd .gw-slot { border: 0; border-image: none; border-radius: 10px; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .popup.full.gd .gw-slot.empty { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.full.gd .gw-slot.empty span { color: var(--ink-soft); } #ui .popup.full.gd .gw-slot.ghost::before { background: radial-gradient(circle at 50% 9px, #b9bdb8 8px, transparent 9px), linear-gradient(#b9bdb8, #b9bdb8) 50% 100% / 26px 30px no-repeat; opacity: .14; } #ui .popup.full.gd .gw-slot b.blocked { color: #ff7a6a; } #ui .popup.full.gd .gw-slot small.good { color: #7fd88a; } #ui .popup.full.gd .gw-slot small.warn, #ui .popup.full.gd .gw-msg { color: #ff9b85; } #ui .popup.full.gd .gw-count { color: var(--ink-soft); } #ui .popup.full.gd .gw-vs { color: #e8c979; text-shadow: 0 0 10px rgba(232, 201, 121, .35); } #ui .popup.full.gd .btn.gd-btn.gw-quick { min-height: 34px; padding: 0 28px; font-size: 13.5px; } #ui .popup.full.gd .gw-go .gw-cancel { top: 3px; } /* 길드 보스 탭 · 출석/기부 띠(guildext-1105 — 17gb). 줄 · 알약 · 칩 = 전체화면 길드 창(13e) 값, 금 #e8c979 = 01-popup 재화 금, 단계 마디 빛 1047 ms · 빨간 점 628 ms = ui-juice 수치. 배치 = 흥행작 길드 보스 공통(메이플M 길드 보스 · 버섯커 키우기 길드 토벌): 누적 피해 → 단계 마디 줄(마디마다 보상 · [받기]) → 내 기여 · [도전] → 기여 순위. */ #ui .popup.full.gd .gb-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } #ui .popup.full.gd .gb-act { flex: 1 1 250px; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px 0 14px; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.full.gd .gb-act > b { margin-right: 2px; font-size: 13px; font-weight: 800; } #ui .popup.full.gd .gb-act > .btn.gd-btn, #ui .popup.full.gd .gb-act > .gb-done, #ui .popup.full.gd .gb-left { margin-left: auto; } #ui .popup.full.gd .gb-left + .btn.gd-btn { margin-left: 6px; } #ui .popup.full.gd .gb-act .btn.gd-btn { min-height: 26px; padding: 0 12px; font-size: 12px; } #ui .popup.full.gd .gb-left { font-size: 11px; color: var(--ink-soft); } #ui .popup.full.gd .gb-done { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-soft); } #ui .popup.full.gd .btn.gd-btn .gd-coin { height: 14px; margin-right: 4px; vertical-align: -2px; } /* 누적 피해 */ #ui .popup.full.gd .gb-head { align-items: flex-end; } #ui .popup.full.gd .gb-total { display: flex; flex-direction: column; gap: 1px; } #ui .popup.full.gd .gb-total small { font-size: 11px; color: var(--ink-soft); } #ui .popup.full.gd .gb-total b { font-size: 20px; font-weight: 900; letter-spacing: .3px; text-shadow: 0 0 10px rgba(232, 201, 121, .35); } /* 단계 마디 줄: 줄 = 첫 마디까지 반 칸 + 마디 사이 한 칸씩(--f = 그 구간 채움) */ #ui .popup.full.gd .gb-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 6px 0 4px; margin-bottom: 8px; border-radius: 9px; background: rgba(0, 0, 0, .22); } #ui .popup.full.gd .gb-rail { position: absolute; left: 0; right: calc(50% / var(--n)); top: 17px; height: 4px; display: flex; pointer-events: none; } #ui .popup.full.gd .gb-rail > i { flex: 1; background: linear-gradient(90deg, #e8c979 calc(var(--f) * 100%), rgba(255, 255, 255, .12) 0); transition: background .4s; } #ui .popup.full.gd .gb-rail > i:first-child { flex: .5; } #ui .popup.full.gd .gb-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } #ui .popup.full.gd .gb-gem { width: 12px; height: 12px; margin: 3px 0 5px; transform: rotate(45deg); border-radius: 2px; background: #2a2b2c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } #ui .popup.full.gd .gb-node.on .gb-gem { background: #e8c979; animation: gb-gem 1.047s ease-in-out infinite alternate; } #ui .popup.full.gd .gb-node.got .gb-gem { background: #8c7a4c; box-shadow: none; } #ui .popup.full.gd .gb-node > b { font-size: 12px; font-weight: 800; } #ui .popup.full.gd .gb-node:not(.on, .got) > b { color: var(--ink-soft); } #ui .popup.full.gd .gb-node > small { font-size: 11px; color: var(--ink-soft); } #ui .popup.full.gd .gb-reward { margin: 1px 0 3px; } #ui .popup.full.gd .gb-node .btn.gd-btn.gb-claim { position: relative; min-height: 24px; padding: 0 12px; font-size: 11px; } #ui .popup.full.gd .gb-node.on .btn.gd-btn.gb-claim:not(.off)::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d3d; animation: gb-dot .628s ease-in-out infinite alternate; } #ui .popup.full.gd .gb-node .gb-done { line-height: 24px; font-size: 11px; } #ui .popup.full.gd .gb-me { margin-top: 2px; } #ui .popup.full.gd .gb-me .gd-line1 em { font-style: normal; font-size: 14px; font-weight: 900; } #ui .popup.full.gd .gb-top .gd-rank-no { width: 22px; text-align: center; } #ui .popup.full.gd .gb-top > b.gold { flex: none; font-size: 13px; } /* 움직임: 탭을 열 때 마디가 차례로(덩어리 = fx-card-in) */ #ui .popup.full.gd .gd-body.gd-swap .gb-node, #ui .dim.fx-intro .gb-node { animation: fx-card-in .28s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 70ms); } @keyframes gb-gem { from { box-shadow: 0 0 4px rgba(232, 201, 121, .5); } to { box-shadow: 0 0 11px rgba(232, 201, 121, .95); } } @keyframes gb-dot { from { transform: scale(.85); } to { transform: scale(1.1); } } /* 경매장 창(auction-1019) — EFZ obj_auction_window 기능 + 길드 창 결(납작한 단추 · 등급색 네모 칸 · fx-cell 차례 등장). 10-19 사용자 "너무 고딕하고 레트로틱 … 한국 인기 도트 모바일 게임 참고" = 장식 없는 얇은 선 · 크림 바탕 · 등급색으로만 강조(도깨비의세계 · 메이플 키우기 결). 10-19 사용자 둘째 "유아틱 · 레트로 그림" + 거래소 레퍼런스(메이플옥션 · 로스트아크 · 바람의나라: 연 · 리니지W · 나이트 크로우): 컬러 그림 없음 — 머리 = 메뉴 경매장 흰 아이콘을 글자색으로, 빈 목록 = 무채색 상자 글리프. 탭 = 글자 + 금 밑줄, 레일 · 등급 = 테 없는 줄(색은 등급 점에만), 정렬 · 쪽 넘김 · 숫자판 = 1px 테 납작한 결(3D 턱 · 사탕 알약 걷어냄). 창 = 전체화면(2026-10-19 .popup.full, 01-popup: 무대 폭 --hw × 450) → 머리 띠 46(+ 아래 12) · 본문 370(구매 = 레일 132 + 목록 · 판매 = 236 + 나머지 + 204 · 내 경매 = 목록) — 넓어진 폭은 목록 · 가운데 칸이 받는다. 2026-10-20 사용자 "나인패치 쓰지 말고 반투명 판 … 버튼 가로 크기가 길어지지 않게 … 도깨비의 세계 참고": 판 = 01-popup 어두운 반투명 판(상세 · 확인 작은 창 au-subw 도 어두운 둥근 판), 탭 = 어두운 알약 줄 + 고른 탭만 베이지 알약 · 단추 = 짧은 둥근 알약(01-popup 전체화면 단추와 같은 색 — 큰 결정 단추도 칸 폭으로 늘이지 않는다) · 줄 = 밝은 반투명 둥근 줄(slot 그림 걷어냄) · 칸 = 등급색 그라데이션(물품 창 칸과 같은 색). */ #ui .popup.au-w { --ink: #f2f0e7; --ink-soft: #9a9d98; color: var(--ink); display: flex; flex-direction: column; } #ui .popup.au-subw { padding: 14px 16px 16px; } /* 판 · 모서리 문양 = 공용 작은 팝업 판(18-popup-dark)을 그대로 받는다 — 여기 판 값을 적지 않는다(10-24 공용 판 통일) */ #ui .au-subw .close { border: 0; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .popup.au-detail { width: 560px; height: 380px; } #ui .popup.au-confirm { width: 440px; } #ui .au-head { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); } #ui .au-mark { flex: none; width: 26px; height: 26px; margin-left: 2px; background: var(--ink); -webkit-mask: url(../assets/icons/menu-auction.png) center / contain no-repeat; mask: url(../assets/icons/menu-auction.png) center / contain no-repeat; } /* 메뉴 경매장 아이콘(흰 마스크)을 제목 글자색으로 */ #ui .au-title { flex: none; margin-right: 4px; font-size: 17px; font-weight: 800; white-space: nowrap; } #ui .au-subw .au-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 탭 = 어두운 알약 줄 + 고른 탭만 베이지 알약(10-20 — 01-popup 전체화면 탭과 같은 결. 10-19 "유아틱" 때의 금 밑줄 글자 탭 대신) */ #ui .au-tabs { flex: none; display: flex; gap: 2px; height: 30px; margin-left: 8px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .au-tab { position: relative; min-width: 76px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ink-soft); transition: background .15s, color .15s; } #ui .au-tab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .au-tdot { position: absolute; right: 4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e0533a; box-shadow: 0 0 0 2px #1b1e20; animation: fx-bump .9s ease-in-out infinite; } #ui .au-purse { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: auto; padding: 0 10px 0 5px; border-radius: 12px; font-size: 13px; font-weight: 800; color: #e8c979; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); } #ui .au-coin { width: 16px; height: 16px; flex: none; object-fit: contain; vertical-align: -3px; } #ui .au-main { position: relative; flex: 1; min-height: 0; margin-top: 0; } #ui .au-main > * { height: 100%; } #ui .au-main.busy .au-btn, #ui .au-detail-body.busy .au-btn { pointer-events: none; } /* 거절 사유 = 창 아래 테에 걸친 알약(배치가 밀리지 않는다 · 길드 gd-msg 와 같은 경고색) */ #ui .au-msg { position: absolute; left: 0; right: 0; bottom: -13px; z-index: 6; width: fit-content; max-width: 86%; margin: 0 auto; padding: 3px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #ff9b85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(60, 20, 16, .92); box-shadow: inset 0 0 0 1.5px #b4664d, 0 3px 8px #0006; animation: au-msg-in .2s ease-out both; } #ui .popup.full .au-msg { bottom: 2px; } /* 테 없는 전체화면 창(10-20) — 아래 여백 22 안에 띄운다(-13 이면 화면 밖) */ #ui .au-msg[hidden] { display: none; } #ui .au-empty { height: 100%; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 16px 16px; text-align: center; } /* 아래 16 = 눈으로 보는 가운데(8px 위) */ #ui .au-empty b { font-size: 14px; color: #c9ccc6; } #ui .au-empty small { font-size: 11px; line-height: 1.5; color: #7d817c; } /* 빈 목록 그림 = 무채색 상자(흰 아이콘 empty-box) 64px: 옅은 흰색 + 아래 1.5px 검은 그림자 = 어두운 판에 찍힌 결(10-19 사용자 "흰색 검은색, 색 없이" · 10-20 어두운 판) */ #ui .au-empty-art { position: relative; flex: none; width: 64px; height: 64px; margin-bottom: 5px; animation: fx-drop .36s cubic-bezier(.2, .9, .3, 1.2) both; } #ui .au-empty-art::before, #ui .au-empty-art::after { content: ""; position: absolute; inset: 0; -webkit-mask: url(../assets/icons/empty-box.png) center / contain no-repeat; mask: url(../assets/icons/empty-box.png) center / contain no-repeat; } #ui .au-empty-art::before { transform: translateY(1.5px); background: #000; opacity: .5; } #ui .au-empty-art::after { background: #fff; opacity: .2; } #ui .au-empty-acts { display: flex; gap: 8px; margin-top: 6px; } /* 단추 = 짧은 둥근 알약(10-20 — 01-popup 전체화면 단추와 같은 색: 기본 베이지 · gold 청록 · danger 적갈 · plain 회색 반투명). 작은 창(au-subw)은 .full 이 아니라 여기서 같은 색을 준다. 큰 결정 단추(구매 · 입찰 · 등록)도 조금 클 뿐 칸 폭으로 늘이지 않는다(10-20 사용자 "버튼 가로 크기가 길어지지 않게") */ #ui .btn.au-btn { min-height: 28px; padding: 0 14px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; font-size: 12px; font-weight: 800; white-space: nowrap; gap: 4px; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } #ui .btn.au-btn.plain { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .btn.au-btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui .btn.au-btn.danger { background: linear-gradient(#a64646, #742c2c); color: #fff; } #ui .btn.au-btn.off { filter: grayscale(1); opacity: .45; } #ui .btn.au-btn:is(.w128, .w160, .au-wide) { min-height: 32px; padding: 0 18px; font-size: 13px; } #ui .au-btn.w96 { min-width: 96px; } #ui .au-btn.w128 { min-width: 128px; } #ui .au-btn.w160 { min-width: 160px; } #ui .au-btn.au-wide { flex: none; align-self: center; min-width: 160px; margin-top: auto; } #ui .btn.au-btn.au-mini { min-height: 24px; padding: 0 10px; font-size: 11px; } #ui .au-btn-coin { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 7px 0 3px; height: 20px; border-radius: 10px; font-size: 12px; background: rgba(0, 0, 0, .22); } #ui .au-btn-coin .au-coin { width: 14px; height: 14px; } /* 물품 칸 = 가방 item-cell 결(등급색 --gc 그라데이션 + 밝은 등급 테 — 10-20 어두운 판, 색 = 물품 창 · 상점 등급색) + 티어 글자, 유일 · 전설은 빛이 한 번씩 스친다 */ #ui .au-tile { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 7px; --gc: #6b7073; border: 2px solid color-mix(in srgb, var(--gc) 80%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 55%, #1d2124), color-mix(in srgb, var(--gc) 18%, #121517)); } #ui .au-tile.gr-rare { --gc: #3f8fe0; } #ui .au-tile.gr-epic { --gc: #9a5cd0; } #ui .au-tile.gr-unique { --gc: #e0a020; } #ui .au-tile.gr-legendary { --gc: #e2583a; } #ui .au-tile img { width: 74%; height: 74%; margin-top: -10%; object-fit: contain; image-rendering: pixelated; } #ui .au-tier { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: 900; font-style: normal; line-height: 11px; color: #fff; text-shadow: 1.2px 0 #111, -1.2px 0 #111, 0 1.2px #111, 0 -1.2px #111, 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111; } #ui .au-tile.gr-unique::after, #ui .au-tile.gr-legendary::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; pointer-events: none; background: linear-gradient(90deg, #fff0, #fffc, #fff0); animation: au-shine 3.6s ease-in-out infinite; } #ui .au-tile.gr-legendary::after { animation-duration: 2.8s; } #ui .au-tile.big { width: 72px; height: 72px; border-width: 3px; border-radius: 10px; } #ui .au-tile.big .au-tier { right: 4px; bottom: 2px; font-size: 11px; line-height: 14px; } #ui .au-tile.ghost { border-style: dashed; border-color: rgba(255, 255, 255, .25); background: transparent; box-shadow: none; } #ui .au-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--ink); } #ui .au-name.gr-rare { color: #9fd0ff; } #ui .au-name.gr-epic { color: #dcb6ff; } #ui .au-name.gr-unique { color: #ffe08a; } #ui .au-name.gr-legendary { color: #ffb08a; } /* = 받음 창 got-name */ #ui .au-tag { flex: none; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; font-style: normal; line-height: 16px; color: #a3a6a0; background: rgba(255, 255, 255, .08); } #ui .au-tag.bid { color: #ffb86b; background: rgba(255, 184, 107, .14); } #ui .au-tag.mine { color: #8cc4ff; background: rgba(140, 196, 255, .14); } #ui .au-tag.top, #ui .au-tag.st-top { color: #7fd88a; background: rgba(127, 216, 138, .14); } #ui .au-tag.st-outbid { color: #ff8f7a; background: rgba(255, 143, 122, .14); } #ui .au-tag.st-holding { color: #a3a6a0; background: rgba(255, 255, 255, .08); } #ui .au-tag.k-sold, #ui .au-tag.k-bought, #ui .au-tag.k-won { color: #7fd88a; background: rgba(127, 216, 138, .14); } #ui .au-tag.k-outbid, #ui .au-tag.k-refunded { color: #ff8f7a; background: rgba(255, 143, 122, .14); } #ui .au-faint { font-style: normal; font-size: 11px; font-weight: 700; color: #7d817c; } /* 구매 탭: 레일(분류 · 세부 분류 · 등급) + 목록판 */ #ui .au-buy { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; } #ui .au-rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .3); } #ui .au-rail-h { margin: 2px 2px 0; font-size: 10px; font-weight: 800; color: #8a8e89; } #ui .au-rail-h + .au-cat, #ui .au-rail-h + .au-grades { margin-top: -1px; } /* 레일 줄 = 테 없는 납작한 줄, 고른 줄만 밝은 반투명 바탕 + 베이지 왼쪽 막대(10-20 어두운 판) */ #ui .au-cat { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 11px; border-radius: 5px; text-align: left; font-size: 12px; font-weight: 800; color: #a3a6a0; transition: background .12s, color .12s; } #ui .au-cat.on { color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } #ui .au-cat.on::before { content: ""; position: absolute; left: 1px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #e6decd; } #ui .au-ico { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url(../assets/icons/menu-auction.png) center / contain no-repeat; mask: url(../assets/icons/menu-auction.png) center / contain no-repeat; } #ui .au-ico.i-weapon { -webkit-mask-image: url(../assets/icons/slot-weapon.png); mask-image: url(../assets/icons/slot-weapon.png); } #ui .au-ico.i-armor { -webkit-mask-image: url(../assets/icons/slot-outfit.png); mask-image: url(../assets/icons/slot-outfit.png); } #ui .au-cat.on .au-ico { color: #e8c979; } #ui .au-subs { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 1px 0 3px 12px; } #ui .au-sub { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 800; color: #a3a6a0; background: rgba(255, 255, 255, .07); } #ui .au-sub.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); } #ui .au-grades { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } /* 등급 = 납작한 글자 + 작은 둥근 점(전체 = 빈 고리 — 여러 색 네모 걷어냄) */ #ui .au-grade { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #a3a6a0; transition: background .12s, color .12s; } #ui .au-grade.on { color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } #ui .au-grade i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8a8e89; } #ui .au-grade.gr-rare i { background: #3f8fe0; } #ui .au-grade.gr-epic i { background: #9a5cd0; } #ui .au-grade.gr-unique i { background: #e0a020; } #ui .au-grade.gr-legendary i { background: #e2583a; } #ui .au-grade.gr-all i { background: none; box-shadow: inset 0 0 0 1.5px #8a8e89; } #ui .au-board { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; } #ui .au-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; } #ui .au-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--ink); } #ui .au-path::before { content: ""; flex: none; width: 3px; height: 14px; border-radius: 2px; background: #e6decd; } #ui .au-sort { position: relative; flex: none; } /* 정렬 · 새로고침 = 회색 반투명 알약 도구 단추(10-20 — 01-popup .btn.plain 과 같은 색), 펼침 표시 = 가는 꺾쇠 */ #ui .au-sortbtn { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 14px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .au-sortbtn.on { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .55); } #ui .au-caret { width: 6px; height: 6px; border: solid #c9ccc6; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } #ui .au-sortbtn.on .au-caret { transform: translateY(1px) rotate(-135deg); } #ui .btn.au-btn.au-refresh { min-height: 28px; padding: 0 12px; color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .au-sortpop { position: absolute; right: 0; top: 32px; z-index: 5; display: flex; flex-direction: column; min-width: 132px; padding: 4px; border-radius: 10px; background: #26292b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 18px #0008; transform-origin: top right; animation: au-pop .14s ease-out both; } #ui .au-sortopt { position: relative; height: 28px; padding: 0 26px 0 10px; border-radius: 6px; text-align: left; white-space: nowrap; font-size: 12px; font-weight: 800; color: #a3a6a0; } #ui .au-sortopt.on { color: #e8c979; background: rgba(232, 201, 121, .12); } #ui .au-sortopt.on::after { content: ""; position: absolute; right: 10px; top: 8px; width: 4px; height: 8px; border: solid #e8c979; border-width: 0 2px 2px 0; transform: rotate(45deg); } #ui .au-refresh { position: relative; } #ui .au-refresh.spin::before { content: ""; width: 10px; height: 10px; margin-right: 2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #e8c979; animation: fx-spin .7s linear infinite; } #ui .au-cols { flex: none; display: grid; grid-template-columns: 1fr 84px 108px 60px; gap: 8px; height: 14px; padding: 0 16px 0 14px; font-size: 10px; font-weight: 800; line-height: 14px; color: #8a8e89; } #ui .au-cols span:nth-child(2) { text-align: center; } #ui .au-cols span:nth-child(3) { text-align: right; } #ui .au-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; transition: opacity .15s; } #ui .au-list.busy { opacity: .55; } #ui .au-row { position: relative; display: grid; grid-template-columns: 36px 1fr 84px 108px 60px; align-items: center; gap: 8px; height: 46px; margin-bottom: 4px; padding: 0 8px 0 6px; border: 6px solid transparent; border-radius: 8px; background: rgba(255, 255, 255, .06) border-box; outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px; /* 10-20 slot 그림 → 밝은 반투명 둥근 줄 */ cursor: pointer; transition: transform .08s ease-out, background-color .12s; } #ui .au-row:active { transform: scale(.985); } @media (hover: hover) { #ui .au-row:hover { background-color: rgba(255, 255, 255, .1); } } #ui .au-row.mine { box-shadow: inset 3px 0 #e8c979; } #ui .au-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } #ui .au-l1 { display: flex; align-items: center; gap: 4px; min-width: 0; } #ui .au-l2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: #a3a6a0; } #ui .au-left, #ui .au-price { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 1.15; } #ui .au-left { align-items: center; text-align: center; } #ui .au-left b { font-size: 12px; font-weight: 800; color: var(--ink); } #ui .au-left small { font-size: 10px; color: #8a8e89; } #ui .au-price { align-items: flex-end; text-align: right; } #ui .au-price small { font-size: 10px; color: #8a8e89; } #ui .au-price b { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #e8c979; } #ui .au-price.bump b { animation: au-bump .6s cubic-bezier(.2, .9, .3, 1.3); } #ui .au-sub2 { white-space: nowrap; font-size: 9.5px; color: #a3a6a0; } #ui .au-sub2 .au-coin { width: 11px; height: 11px; vertical-align: -2px; } #ui .au-go { display: flex; justify-content: flex-end; } /* 줄 끝 [구매] · [입찰] = 테만 있는 작은 알약 꼬리표(초록 · 주황 사탕 알약 걷어냄 · 10-20 어두운 판 = 옅은 색 바탕 + 색 테) */ #ui .au-pill { display: inline-grid; place-items: center; width: 50px; height: 24px; border-radius: 999px; font-size: 11px; font-weight: 800; font-style: normal; color: #e8c979; background: rgba(232, 201, 121, .12); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .45); } #ui .au-pill.bid { color: #ffb86b; background: rgba(255, 184, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 184, 107, .45); } #ui .au-pager { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; height: 28px; } #ui .au-pager b { min-width: 26px; text-align: center; font-size: 12px; font-weight: 800; line-height: 22px; color: var(--ink); } #ui .au-pager small { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #7d817c; } #ui .btn.au-btn.au-pg { width: 28px; min-height: 24px; padding: 0; color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .au-pg::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(135deg); margin-left: 3px; } #ui .au-pg.next::before { transform: rotate(-45deg); margin: 0 3px 0 0; } /* 상세 창: 왼쪽 카드(큰 칸 · 이름 · 등급 · 능력치) + 오른쪽 값 줄 · 입찰 상자 · 결제 뒤 골드 + 아래 단추 */ #ui .au-detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } #ui .au-dgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 208px 1fr; gap: 12px; } #ui .au-icard { min-height: 0; overflow-y: auto; align-self: start; max-height: 100%; } /* 메이플식 아이템 정보 카드(inv_fx.css .icard) — 길면 카드 안에서 스크롤 */ #ui .au-card { --gc: #6b7073; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 10px; text-align: center; background: radial-gradient(130px 90px at 50% 22%, color-mix(in srgb, var(--gc) 35%, transparent), transparent 72%), rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .au-card.gr-rare { --gc: #3f8fe0; } #ui .au-card.gr-epic { --gc: #9a5cd0; } #ui .au-card.gr-unique { --gc: #e0a020; } #ui .au-card.gr-legendary { --gc: #e2583a; } #ui .au-card .au-tile { margin-bottom: 4px; } #ui .dim.fx-intro .au-card .au-tile { animation: fx-cell .32s cubic-bezier(.2, .9, .3, 1.3) .1s both; } #ui .au-card .au-name { max-width: 100%; font-size: 14px; } #ui .au-card > small { font-size: 10.5px; color: #a3a6a0; } #ui .au-stats { width: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; } #ui .au-stats li { display: flex; justify-content: space-between; padding: 3px 8px; border-radius: 4px; font-size: 11px; color: #a3a6a0; background: rgba(255, 255, 255, .06); } #ui .au-stats li b { color: #7fd88a; font-weight: 800; } #ui .au-dinfo { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } #ui .au-kv { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; padding: 0 10px; border-radius: 5px; font-size: 12px; background: rgba(255, 255, 255, .06); } #ui .au-kv > span { flex: none; font-weight: 800; color: #a3a6a0; } #ui .au-kv > b { min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 800; color: var(--ink); white-space: nowrap; } #ui .au-kv.price { min-height: 26px; } #ui .au-kv.price > b { font-size: 15px; color: #e8c979; } #ui .au-kv.guide > b { font-size: 12px; } #ui .au-kv.guide small { font-size: 10px; color: #7d817c; } #ui .au-cmp { height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-style: normal; line-height: 16px; } #ui .au-cmp.up { color: #ff8f7a; background: rgba(255, 143, 122, .14); } #ui .au-cmp.down { color: #7fd88a; background: rgba(127, 216, 138, .14); } #ui .au-cmp.even { color: #a3a6a0; background: rgba(255, 255, 255, .08); } #ui .au-bidbox { flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 6px; margin-top: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(232, 201, 121, .08); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .4); } #ui .au-bidbox-h { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: #e8c979; } #ui .au-bidbox-h small { margin-left: 6px; font-size: 10px; color: #7d817c; } #ui .au-amount { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 30px; padding: 0 26px 0 10px; border-radius: 6px; font-size: 16px; font-weight: 800; color: #e8c979; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); } #ui .au-pen { position: absolute; right: 9px; top: 50%; width: 3px; height: 12px; margin-top: -7px; border-radius: 1px; background: #e8c979; transform: rotate(40deg); } #ui .au-pen::after { content: ""; position: absolute; left: 0; bottom: -4px; border: 1.5px solid transparent; border-top: 4px solid #e8c979; } #ui .au-steps { display: flex; gap: 4px; } #ui .btn.au-btn.au-step { min-width: 44px; min-height: 26px; padding: 0 6px; font-size: 11px; } #ui .au-wallet { flex: none; display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 5px; font-size: 12px; background: rgba(255, 255, 255, .06); } #ui .au-wallet > span { margin-right: auto; font-weight: 800; color: #a3a6a0; } #ui .au-wallet b { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--ink); } #ui .au-wallet b.after { color: #7fd88a; } #ui .au-wallet.short b.after { color: #ff8f7a; } #ui .au-wallet em { font-style: normal; font-size: 10px; font-weight: 800; color: #ff8f7a; } #ui .au-arrow { position: relative; width: 12px; height: 2px; background: #8a8e89; } #ui .au-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 5px; height: 5px; border: solid #8a8e89; border-width: 2px 2px 0 0; transform: rotate(45deg); } #ui .au-dacts { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #ui .au-note { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; color: #a3a6a0; } /* 판매 탭: ① 가방 236 · ② 방식과 가격 260 · ③ 숫자판 204 */ #ui .au-sell { display: grid; grid-template-columns: minmax(0, 1fr) 228px 184px; grid-template-rows: minmax(0, 1fr); gap: 12px; } #ui .au-scol { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .au-h3 { flex: none; display: flex; align-items: center; gap: 6px; height: 20px; font-size: 12px; font-weight: 800; color: var(--ink); } #ui .au-no { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-style: normal; color: #8a8e89; box-shadow: inset 0 0 0 1.5px currentColor; } #ui .au-limit { flex: none; margin-left: auto; height: 18px; padding: 0 7px; border-radius: 9px; font-size: 10.5px; font-weight: 800; font-style: normal; line-height: 18px; color: #c9ccc6; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px currentColor; } #ui .au-limit.full { color: #ff8f7a; } #ui .au-bag { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 39px); gap: 4px; align-content: start; justify-content: start; padding: 4px; } /* 칸 39 = 물품 창 칸(04-inventory #inv-dim .item-cell, 10-24 사용자 "아이템 슬롯 왤케 크냐 · 다른 거랑 크기 맞추셈") */ #ui .au-cell { position: relative; width: 39px; height: 39px; padding: 0; border-radius: 7px; transition: transform .08s ease-out; } #ui .au-cell:active { transform: scale(.94); } #ui .au-cell .au-tile { width: 39px; height: 39px; border-radius: 7px; } #ui .au-cell.on .au-tile { outline: 2px solid #f2f0e7; outline-offset: 2px; animation: fx-ring 1.2s ease-in-out infinite; } #ui .au-cell.on::after { content: ""; position: absolute; right: -3px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #4f9a5a; box-shadow: 0 0 0 2px #1b1e20; } #ui .au-cell.on::before { content: ""; position: absolute; right: 2px; top: 0; z-index: 1; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } #ui .au-cell.lock .au-tile { filter: grayscale(.85); opacity: .55; } #ui .au-lock { position: absolute; left: 2px; top: 2px; padding: 0 2px; border-radius: 3px; font-size: 7px; font-weight: 900; font-style: normal; line-height: 11px; color: #fff; background: #5f7d2c; } #ui .au-hint { flex: none; text-align: center; font-size: 10px; color: #7d817c; } #ui .au-pick { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } #ui .au-pick .au-tile { width: 40px; height: 40px; } #ui .au-pick .au-info small + small { color: #7fd88a; } #ui .au-pick.none { color: #7d817c; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .au-pick.none small { font-size: 11px; font-weight: 700; line-height: 1.4; } #ui .au-seg { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(0, 0, 0, .42); } #ui .au-segb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 28px; border-radius: 6px; color: #a3a6a0; line-height: 1.1; transition: background .12s; } #ui .au-segb b { font-size: 12px; font-weight: 800; } #ui .au-segb small { font-size: 9.5px; font-weight: 700; } #ui .au-segb.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .au-segb.on small { color: #7a5a1c; } #ui .au-hours { flex: none; display: flex; gap: 4px; height: 24px; } #ui .au-hour { flex: 1; min-width: 0; padding: 0; border-radius: 12px; font-size: 10px; white-space: nowrap; font-weight: 800; color: #a3a6a0; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .au-hour.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: none; } #ui .au-hour.fixed { display: grid; place-items: center; font-size: 10.5px; font-style: normal; color: #8a8e89; background: none; box-shadow: none; } /* 10-24 사용자 시안: 가운데 = 메이플식 아이템 정보 카드(inv_fx .icard, 상세 창 au-icard 와 같은 폭) + 아래 [경매 등록], 오른쪽 = 등록 타입 · 기간 · 판매가 · 수수료 · 작은 키패드 */ #ui .au-form > .au-sicard { flex: 0 1 auto; align-self: stretch; } /* 카드 = 가운데 칸 폭 그대로(시안) — au-icard 의 align-self: start 를 덮음 */ #ui .au-form > .au-pick.none { flex: 1; height: auto; max-height: 200px; flex-direction: column; justify-content: center; padding: 12px; text-align: center; } #ui .au-padcol .au-pricebox { height: 32px; } #ui .au-padcol .au-pricebox b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } /* 10-24 "글자 크기 더 줄이고" — 999,999,999 · 1,000억 이 칸 안에 한 줄 */ #ui .au-padcol .au-pricebox.out { box-shadow: inset 0 0 0 1px #e0605a; } /* 11-05 장비 값 폭 밖(서버가 AUCTION_PRICE_OUT_OF_BAND 로 거절할 값) */ #ui .au-padcol .au-pricebox em { font-size: 11px; } #ui .au-padcol .au-kv.fee { gap: 4px; padding: 0 8px; font-size: 11px; } #ui .au-padcol .au-kv.fee > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } /* 큰 값이면 라벨이 줄고 값(−금액)은 다 보인다 */ #ui .au-kv.fee > b { color: #ff8f7a; } /* 수수료 = 빠지는 돈(시안 붉은 −200) — au-limit.full 과 같은 붉은색 */ #ui .au-pricebox { flex: none; width: 100%; height: 38px; } #ui .au-pricebox small { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; color: #a3a6a0; } #ui .au-pricebox b { font-size: 17px; } #ui .au-pricebox em { font-style: normal; font-size: 12px; font-weight: 700; color: #7d817c; } #ui .au-pricebox.unset { box-shadow: inset 0 0 0 2px #e8c979; animation: au-breathe 1.6s ease-in-out infinite; } /* 'empty' 금지 — 창 층 전역 .empty(min-height 100px)가 걸려 판매가 칸이 세로로 커졌다(10-19) */ #ui .au-pad { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 28px; gap: 4px; margin-top: auto; padding-bottom: 3px; } /* 키 28 높이(전엔 남는 높이를 다 먹어 "키패드가 저렇게까지 클 필요 없음", 10-24) */ /* 숫자판 = 1px 테 납작한 키(3D 턱 걷어냄), 누르면 바탕만 밝아진다(10-20 어두운 판 = 밝은 반투명 키) */ #ui .au-key { position: relative; border-radius: 7px; font-size: 14px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .06s; } #ui .au-key:active { background: rgba(255, 255, 255, .18); } #ui .au-key.add { font-size: 12px; color: #e8c979; background: rgba(232, 201, 121, .1); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .35); } #ui .au-key.add:active { background: rgba(232, 201, 121, .22); } #ui .au-key.fn { font-size: 12px; color: #c9ccc6; background: rgba(255, 255, 255, .04); } #ui .au-key[data-v="avg"] { grid-column: span 2; color: #e8c979; } #ui .au-key.off { opacity: .45; pointer-events: none; } #ui .au-key.back::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 14px; margin: -7px 0 0 -10px; border-radius: 0 3px 3px 0; background: #c9ccc6; clip-path: polygon(32% 0, 100% 0, 100% 100%, 32% 100%, 0 50%); } #ui .au-key.back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -1px; background: linear-gradient(45deg, #0000 41%, #2b2e30 41% 59%, #0000 59%), linear-gradient(-45deg, #0000 41%, #2b2e30 41% 59%, #0000 59%); } /* 등록 확인 창 */ #ui .au-confirm-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } #ui .au-cgrid { display: grid; grid-template-columns: 72px 1fr; align-items: start; gap: 12px; } #ui .dim.fx-intro .au-cgrid > .au-tile { animation: fx-cell .3s cubic-bezier(.2, .9, .3, 1.3) .1s both; } #ui .au-cinfo { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #ui .au-cinfo > .au-name { font-size: 14px; } #ui .au-cinfo > small { margin-bottom: 2px; font-size: 10.5px; color: #a3a6a0; } #ui .au-cnote { padding: 6px 10px; border-radius: 8px; text-align: center; font-size: 11px; line-height: 1.5; color: #a3a6a0; background: rgba(255, 255, 255, .06); } #ui .au-cacts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #ui .au-skip { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #a3a6a0; } #ui .au-skip i { position: relative; width: 16px; height: 16px; border-radius: 4px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); } #ui .au-skip.on i { background: #4f9a5a; box-shadow: none; } #ui .au-skip.on i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* 내 경매 탭: 작은 탭 셋(개수) · 한도 · [판매 등록] → 줄 목록 → 도움말 */ #ui .au-mine { display: flex; flex-direction: column; gap: 6px; } #ui .au-mtabs { display: flex; gap: 2px; margin-right: auto; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .au-mtab { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #a3a6a0; } #ui .au-mtab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .au-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; text-align: center; font-size: 10px; font-style: normal; line-height: 16px; color: #fff; background: #6b7073; } #ui .au-mtab.on .au-count { background: #548f8c; } #ui .au-mbar .au-limit { margin-left: 0; } #ui .au-mcols { grid-template-columns: 1fr 84px 120px 76px; } #ui .au-mrow { grid-template-columns: 36px 1fr 84px 120px 76px; } #ui .au-foot { flex: none; text-align: center; font-size: 10px; color: #7d817c; } /* 움직임: 창이 처음 열릴 때 · 줄이 바뀐 그림만 줄이 차례로(길드 fx-cell) · 탭을 바꾸면 내용이 살짝 떠오름 */ #ui .dim.fx-intro .au-row, #ui .au-main.au-anim .au-row { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; } /* 줄 = 1 을 넘지 않는 등장(ui_fx.css fx-card-in) — au-list 가 스크롤 칸이라 fx-cell 1.06 튐이 양옆에서 잘렸다(10-24 사용자 "경매장 이거 짤리는데? 연출땜에") */ #ui .au-main.au-anim .au-row:nth-child(1) { animation-delay: .02s; } #ui .au-main.au-anim .au-row:nth-child(2) { animation-delay: .05s; } #ui .au-main.au-anim .au-row:nth-child(3) { animation-delay: .08s; } #ui .au-main.au-anim .au-row:nth-child(4) { animation-delay: .11s; } #ui .au-main.au-anim .au-row:nth-child(5) { animation-delay: .14s; } #ui .au-main.au-anim .au-row:nth-child(6) { animation-delay: .17s; } #ui .au-main.au-anim .au-row:nth-child(7) { animation-delay: .2s; } #ui .au-main.au-anim .au-row:nth-child(n+8) { animation-delay: .23s; } #ui .dim.fx-intro .au-row:nth-child(1) { animation-delay: .12s; } #ui .dim.fx-intro .au-row:nth-child(2) { animation-delay: .15s; } #ui .dim.fx-intro .au-row:nth-child(3) { animation-delay: .18s; } #ui .dim.fx-intro .au-row:nth-child(4) { animation-delay: .21s; } #ui .dim.fx-intro .au-row:nth-child(5) { animation-delay: .24s; } #ui .dim.fx-intro .au-row:nth-child(n+6) { animation-delay: .27s; } #ui .dim.fx-intro .au-mark { animation: fx-title .36s cubic-bezier(.34, 1.56, .64, 1) .08s both; } #ui .dim.fx-intro .au-cell { animation: fx-card-in .24s cubic-bezier(.2, .8, .3, 1) .12s both; } /* 칸 = 스크롤 칸(au-bag) 안이라 1 을 넘지 않는 등장(hq-ui 함정) */ #ui .au-main.au-swap > * { animation: au-swap .22s cubic-bezier(.2, .8, .3, 1) both; } @keyframes au-swap { from { transform: translateY(6px); opacity: 0; } } @keyframes au-pop { from { transform: scale(.92); opacity: 0; } } @keyframes au-msg-in { from { transform: translateY(6px); opacity: 0; } } @keyframes au-shine { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } } @keyframes au-bump { 0% { transform: scale(1.22); color: #e0533a; } 100% { transform: none; } } @keyframes au-breathe { 0%, 100% { box-shadow: inset 0 0 0 2px #e8c979; } 50% { box-shadow: inset 0 0 0 2px #e8c979, 0 0 0 3px #e8c97933; } } /* 지갑 재화 판매(11-01 D3 — 17k curView): 칸 아래 오른쪽 개수 · 가운데 카드 = 큰 칸 · 이름 · 가진 수 · 수량 [−][n][+][최대] · 묶음 값 폭. 즉시 구매만이라 방식 띠는 한 칸 */ #ui .au-cn { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-weight: 900; font-style: normal; line-height: 11px; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; } #ui .au-curcard { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } #ui .au-curcard .au-name { font-size: 13px; } #ui .au-curcard > small { font-size: 10px; color: #a3a6a0; } #ui .au-amt { display: flex; align-items: center; gap: 4px; height: 26px; } #ui .au-amt > small { font-size: 10px; color: #a3a6a0; margin-right: 2px; } #ui .au-amt .au-key { width: 26px; height: 26px; padding: 0; } #ui .au-amt .au-key.fn { width: auto; padding: 0 8px; font-size: 10px; } #ui .au-amt b { min-width: 44px; text-align: center; font-size: 13px; } #ui .au-band { font-size: 10px !important; color: #e8c979 !important; } #ui .au-seg:has(> :only-child) { grid-template-columns: 1fr; } /* 강화 · 잠금(enhance 17m). 물품 창 오른쪽 판(247.5 × 368, 04-inventory 절대 배치): 판 이름 6 · 탭 줄 29(26) · 정보/강화 판 61 ~ 358. 크기 = hq-ui GUI 450 기준(칸 52~58 · 본문 11~13 · 알약 28). 색 = 등급색(04-inventory --gc · dokkaebi-world.md §10) · 초록 #7ad26a(좋아짐 — 상점 할인 · 능력치 상승과 같은 강조) · 금 #e8c979(01-popup 지갑 골드 숫자) · 적갈 #c0573f(위험). */ @font-face { font-family: "EnhTitle"; src: url("fonts/EnhTitle.woff2") format("woff2"); font-display: block; } /* Noto Serif KR 900 부분 글꼴(ui/fonts/EnhTitle.json) */ /* 탭 둘 = 글자 폭 줄(dokkaebi §9 "탭 3개 이하는 짧은 줄") · 정보/강화 판은 같은 자리를 나눠 쓴다 */ #ui .detail-pane > .enh-tabs { top: 29px; height: 26px; left: 8px; right: auto; } #ui .detail-pane > .enh-tabs .tab { min-width: 56px; padding: 0 14px; } #ui .detail-pane > .detail { top: 61px; height: 260px; } #ui .detail-pane > .enh-pane { top: 61px; height: 297px; display: none; flex-direction: column; align-items: center; gap: 5px; overflow: hidden; } #ui .detail-pane.enh-on > .enh-pane { display: flex; animation: enh-pane-in .22s cubic-bezier(.2, .9, .3, 1.2); } #ui .detail-pane.enh-on > :is(.detail, .inv-actions) { display: none; } @keyframes enh-pane-in { from { opacity: 0; transform: translateY(6px); } } /* 정보 판 머리: 큰 칸 | 별 · [등급] 이름 (+N) · 분류 | 잠금 단추. 바인딩 이름 줄(detail-name)은 등급 · 강화를 모르는 글이라 숨기고 같은 자리에 enh-title */ #ui .detail-pane .detail-top { grid-template-columns: 58px 1fr 26px; gap: 8px; } #ui .detail-pane .detail-name { display: none; } #ui .detail-head { min-width: 0; display: flex; flex-direction: column; gap: 1px; } #ui .enh-stars { min-height: 10px; display: flex; gap: 1px; font-size: 9px; line-height: 10px; color: #f0c54a; text-shadow: 0 0 4px rgba(240, 197, 74, .55); letter-spacing: 0; } #ui .enh-stars i { font-style: normal; display: inline-block; } #ui .enh-stars i.new { animation: enh-star-new .7s cubic-bezier(.2, 1.6, .4, 1) .55s both; } @keyframes enh-star-new { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 70% { transform: scale(1.7); opacity: 1; text-shadow: 0 0 8px #fff2b0; } 100% { transform: scale(1); } } #ui .enh-title { font-size: 13.5px; font-weight: 800; line-height: 17px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #ui .enh-grade { font-weight: 900; } #ui .gt-normal { color: #b9bdbf; } /* 일반 칸색 #6b7073 은 어두운 판 위 글자로 안 읽혀 같은 회색 계열을 밝힘 */ #ui .gt-rare { color: #5aa6f0; } #ui .gt-epic { color: #b07ae0; } #ui .gt-unique { color: #eab53a; } #ui .gt-legendary { color: #ef6d4f; } /* 칸 등급색(§10)을 글자 굵기만큼 한 단 밝게 */ #ui .enh-plus { font-style: normal; font-weight: 900; color: #7ad26a; } #ui .item-cell .big-plus, #ui .item-cell .plus { position: absolute; right: 3px; top: 1px; font-size: 9.5px; font-weight: 900; line-height: 12px; color: #7ad26a; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; } #ui .item-cell.big .big-plus { font-size: 11px; line-height: 14px; } #ui .item-cell .plus { right: auto; top: auto; left: 3px; bottom: 1px; } /* 칸 +N = 왼쪽 아래 — 위 왼쪽 = 착용 배지 · 아래 오른쪽 = 수량 · 자물쇠와 겹치지 않게 */ #ui .item-cell .lock { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; background: #f2f0e7; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); -webkit-mask: var(--enh-lock) center / contain no-repeat; mask: var(--enh-lock) center / contain no-repeat; } #ui { --enh-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7.5a5 5 0 0 1 10 0V10' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='4' y='10' width='16' height='12' rx='2.5'/%3E%3C/svg%3E"); --enh-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7.5a5 5 0 0 1 9.6-2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='4' y='10' width='16' height='12' rx='2.5'/%3E%3C/svg%3E"); } /* 흰 선 자물쇠(메뉴 아이콘 결 — 글자색 마스크) */ /* 잠금 단추 = 둥근 어두운 칸 + 자물쇠(열림/잠김). 잠기면 금빛 */ #ui .enh-lock { position: relative; align-self: start; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .06s; } #ui .enh-lock[hidden] { display: none; } #ui .enh-lock i { position: absolute; inset: 5px; background: var(--ink-soft); -webkit-mask: var(--enh-unlock) center / contain no-repeat; mask: var(--enh-unlock) center / contain no-repeat; } #ui .enh-lock.on { background: rgba(232, 201, 121, .18); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .65); } #ui .enh-lock.on i { background: #e8c979; -webkit-mask-image: var(--enh-lock); mask-image: var(--enh-lock); } #ui .enh-lock:active { transform: scale(.92); } #ui .enh-lock.pop { animation: enh-press .32s cubic-bezier(.2, 1.6, .4, 1); } @keyframes enh-press { 0% { transform: scale(.92); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } /* 강화 판(§11.3): 대상 칸 · 단계 · 능력치 · 확률 · 재료 · 강화 알약 */ #ui .enh-none, #ui .enh-msg { margin: auto 0; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink-soft); text-align: center; } #ui .enh-msg { margin: 6px 0 auto; } #ui .enh-stage { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px; } #ui .enh-stage .enh-stars { justify-content: center; } #ui .enh-target { width: 58px; height: 58px; cursor: default; box-shadow: 0 0 0 1px #c9a24a, 0 0 10px rgba(232, 201, 121, .28); } /* 강화 대상 = 등급 칸 + 금 테(§10) */ #ui .enh-target .icon { left: 9.18px; top: 5.4px; width: 35.64px; height: 35.64px; } #ui .enh-name { max-width: 231px; font-size: 12.5px; font-weight: 800; line-height: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .enh-step { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 14px; font-weight: 900; color: var(--ink); } #ui .enh-step i { font-style: normal; color: var(--ink-soft); font-size: 12px; } #ui .enh-step .to { color: #7ad26a; } #ui .enh-stats { width: 100%; display: flex; flex-direction: column; gap: 2px; } #ui .enh-stats > div { display: grid; grid-template-columns: 1fr auto 14px auto 52px; align-items: center; gap: 3px; height: 19px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, .05); font-size: 12px; font-weight: 700; } #ui .enh-stats span { color: var(--ink-soft); } #ui .enh-stats i { font-style: normal; text-align: center; color: var(--ink-soft); } #ui .enh-stats .up { color: #7ad26a; } #ui .enh-stats em { font-style: normal; font-size: 11px; color: #7ad26a; text-align: right; } #ui .enh-rates { display: flex; gap: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); } #ui .enh-rates b { color: var(--ink); font-weight: 900; } #ui .enh-rates .dn b { color: #e07a5f; } /* 하락 = 적갈(위험) 계열 글자 */ #ui .enh-mat { width: 100%; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .22); } #ui .enh-mat .item-cell.sm { flex: none; width: 34px; height: 34px; border-radius: 6px; cursor: default; } #ui .enh-mat .item-cell.sm .icon { left: 4px; top: 3px; width: 22px; height: 22px; } #ui .enh-mat .item-cell.none { filter: grayscale(1) brightness(.6); opacity: .55; } #ui .enh-mat-t { min-width: 0; display: flex; flex-direction: column; font-size: 12px; font-weight: 800; } #ui .enh-mat-t small { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .enh-mat-t .ok { color: #7ad26a; } #ui .enh-mat-t .no { color: #e07a5f; } #ui .enh-go-row { margin-top: auto; padding-bottom: 2px; display: flex; justify-content: center; } /* 강화 = 금 알약, 안 왼쪽에 비용(dokkaebi §9 표 "강화(금색 알약, 안 왼쪽에 비용 22,500)") — 폭 = 글자만큼 */ #ui .popup.full .btn.enh-go { flex: none; gap: 8px; padding: 0 16px 0 10px; background: linear-gradient(#f1d68e, #c79a3e); color: #2b210c; } #ui .enh-cost { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 3px; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, .22); color: #fff4d6; font-size: 11.5px; } #ui .enh-cost.short { color: #ffb4a0; } #ui .enh-coin { width: 14px; height: 14px; image-rendering: pixelated; } #ui .popup.full .btn.enh-unlock { flex: none; gap: 6px; } #ui .enh-lock-ic { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--enh-unlock) center / contain no-repeat; mask: var(--enh-unlock) center / contain no-repeat; } #ui .popup.full .btn.enh-go:not(.off):active, #ui .popup.full .btn.enh-unlock:active { transform: scale(.92); transition-duration: .06s; } /* 대상 칸 결과 빛(연출과 같은 때): 성공 = 금빛 맥 · 실패 = 흔들림 · 하락 = 적갈 맥 */ #ui .enh-target.hit-success { animation: enh-hit-ok 1.05s ease-out .35s; } #ui .enh-target.hit-fail { animation: enh-hit-shake .42s ease-in-out .35s; } #ui .enh-target.hit-down { animation: enh-hit-down 1s ease-out .35s; } @keyframes enh-hit-ok { 0% { box-shadow: 0 0 0 1px #c9a24a, 0 0 0 rgba(255, 226, 140, 0); transform: scale(1); } 25% { box-shadow: 0 0 0 2px #ffe6a0, 0 0 26px 8px rgba(255, 220, 130, .75); transform: scale(1.12); } 100% { box-shadow: 0 0 0 1px #c9a24a, 0 0 10px rgba(232, 201, 121, .28); transform: scale(1); } } @keyframes enh-hit-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes enh-hit-down { 0% { filter: none; } 30% { filter: brightness(.6) sepia(1) hue-rotate(-30deg) saturate(2.4); transform: scale(.94); } 100% { filter: none; transform: scale(1); } } /* 결과 연출(창 위 한 겹, 1.75 s — 누르면 걷힘): 띠 열림(0 ~ .22) → 빛선 퍼짐(.12 ~ .5) → 글자 모임(.18 + 글자마다 .045) → 단계 줄(.55) → 떠오르며 흐림(1.3 ~ 1.75). 제목 결 = hq-ui · dokkaebi §12: 짙은 반투명 띠(양 끝 흐림) · 위아래 1px 빛선 · 진주빛 명조 + 부드러운 빛. 성공 = 금 티끌 · 빛 고리, 실패 = 회색 · 하락 = 적갈. */ #ui .enh-fx { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: auto; cursor: pointer; --tone: #f3e7c4; --glow: rgba(255, 214, 120, .55); --line: rgba(255, 233, 170, .85); animation: enh-fx-out .45s ease-in 1.3s forwards; } #ui .enh-fx.k-fail { --tone: #d9dcde; --glow: rgba(200, 205, 210, .3); --line: rgba(220, 224, 228, .55); } #ui .enh-fx.k-down { --tone: #f0c3b4; --glow: rgba(192, 87, 63, .55); --line: rgba(224, 122, 95, .75); } #ui .enh-fx > * { grid-area: 1 / 1; } #ui .enh-fx-band { width: 100%; height: 104px; background: linear-gradient(90deg, transparent, rgba(8, 9, 11, .78) 22%, rgba(8, 9, 11, .78) 78%, transparent); transform: scaleY(0); animation: enh-band .22s cubic-bezier(.2, .8, .3, 1) forwards; } #ui .enh-fx-line { width: 72%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent); transform: scaleX(0); animation: enh-line .38s ease-out .12s forwards; } #ui .enh-fx-line.a { margin-top: -103px; } #ui .enh-fx-line.b { margin-top: 103px; } #ui .enh-fx-ring { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--line); opacity: 0; } #ui .enh-fx.k-success .enh-fx-ring { animation: enh-ring .7s ease-out .3s; } #ui .enh-fx-title { margin-top: -14px; display: flex; font-family: "EnhTitle", "GFUIFont", sans-serif; font-size: 34px; font-weight: 900; line-height: 40px; letter-spacing: 2px; white-space: nowrap; color: var(--tone); filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); } #ui .enh-fx-title:not(.serif) { font-family: "GFUIFont", sans-serif; letter-spacing: 3px; } #ui .enh-fx-title span { display: inline-block; background: linear-gradient(180deg, #fffaf0 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 70%, #8a7a5a) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; animation: enh-letter .42s cubic-bezier(.2, .9, .3, 1) calc(.18s + var(--i) * .045s) forwards; } #ui .enh-fx-step { margin-top: 56px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 900; color: var(--ink, #f2f0e7); opacity: 0; animation: enh-step .3s ease-out .55s forwards; text-shadow: 0 1px 2px #000; } #ui .enh-fx-step i { font-style: normal; font-size: 12px; color: #9a9d98; } #ui .enh-fx.k-success .enh-fx-step .to { color: #7ad26a; } #ui .enh-fx.k-down .enh-fx-step .to, #ui .enh-fx.k-down .enh-fx-step i { color: #e07a5f; } #ui .enh-fx-sparks { width: 0; height: 0; margin-top: -14px; } #ui .enh-fx-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffe7a6; box-shadow: 0 0 6px 1px rgba(255, 210, 110, .9); opacity: 0; animation: enh-spark .9s cubic-bezier(.15, .8, .3, 1) calc(.3s + var(--d)) forwards; } @keyframes enh-band { to { transform: scaleY(1); } } @keyframes enh-line { to { transform: scaleX(1); } } @keyframes enh-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } } @keyframes enh-letter { 0% { opacity: 0; transform: translateY(8px) scale(1.5); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } } @keyframes enh-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes enh-spark { 0% { opacity: 1; transform: translate(0, 0) scale(var(--s)); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); } } @keyframes enh-fx-out { to { opacity: 0; transform: translateY(-14px); } } /* 스킬 창(skills-1019) — 6열 칸(공용 스킬 아이콘 40 · 이름 6자까지 한 줄). 지금 스킬 = 금테(제목 줄에 '사용 중 + 이름'), 맨손에 못 쓰는 스킬 = 흐리게 + 제목 줄 안내. 크기 = GUI 450 기준(화면에선 높이/450 배로 커진다): 아이콘 40 = 물품 창 장비 칸 40 · 칸 56(물품 칸 52 + 6자 이름). 10-19 사용자 "UI 를 왜 크게 … 모바일 신경" — 전엔 600×430 · 아이콘 64 · 한자 줄. 아이콘 = shared/skill_badges(이펙트랩 원본 — 다음 게임도 같은 아틀라스). 칸 수가 늘면 칸 영역만 끌어 스크롤. 2026-10-19 전체화면 창(.popup.full, 01-popup): 칸 크기는 그대로, 넓어진 폭만큼 열 수가 는다(auto-fill · 칸 64 · 간격 8/6). 2026-10-20 반투명 판(01-popup — 머리 띠 46 은 공용): 칸 = 어두운 반투명 둥근 칸 + 얇은 밝은 테(도깨비의 세계 도술 칸 결), 사용 중 = 금테 그대로. */ #ui .sk-title { flex: none; margin: 0; font-size: 17px; font-weight: 800; } #ui .sk-now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; color: #e8c979; } #ui .sk-now em { margin-right: 5px; padding: 1px 5px; border-radius: 6px; font-size: 10px; font-style: normal; color: #26221c; background: #e8c979; } #ui .sk-grid { flex: 1; min-height: 0; overflow-y: auto; margin-top: 0; padding: 2px; display: grid; grid-template-columns: repeat(auto-fill, 64px); justify-content: center; gap: 8px 6px; align-content: start; } #ui .sk-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 3px 0 2px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font: inherit; color: inherit; cursor: pointer; transition: transform .1s ease; } #ui .sk-cell:active { transform: scale(.94); } #ui .sk-ic { display: block; width: 40px; height: 40px; border-radius: 8px; background: #1b1d24 url(../shared/skill_badges/skill_badges.webp) no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .18), 0 1px 2px #0008; } #ui .sk-cell.on .sk-ic { box-shadow: 0 0 0 2px #ffd770, 0 0 0 3.5px #8a5a16, 0 0 8px 1px #ffcf5a99; } #ui .sk-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; font-weight: 800; letter-spacing: -.4px; color: #d6d0ba; } #ui .sk-cell.off .sk-ic { filter: grayscale(.85) brightness(.7); } #ui .sk-cell.off .sk-name { color: #6f726d; } /* 맨손에 못 쓰는 무공 — 흐려도 눌러 책은 본다 */ /* 무공 등급 별: 아이콘 위 한 줄 = 아이템 정보 카드 별(inv_fx.css .icard .ic-stars)과 같은 별 · 같은 색 */ #ui .sk-cell .ic-stars { display: flex; justify-content: center; gap: 1px; height: 7px; } #ui .sk-cell .ic-stars i { width: 7px; height: 7px; background: #4a4c4e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } #ui .sk-cell .ic-stars i.on { background: #ffcc00; } #ui .sk-none { grid-column: 1 / -1; margin: 40px 0; text-align: center; font-weight: 700; color: #9a9d98; } #ui .dim.fx-intro .sk-cell { animation: fx-cell .3s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * .02s + .08s); } /* 무공 책: 메이플 스킬 창 = 직업 머리 띠(큰 아이콘 + 직업 이름) + 두 줄 칸(아이콘 · 이름 · 레벨 상자). 여기선 반투명 판 결 그대로(01-popup): 머리 띠 = 어두운 반투명 둥근 띠 + 아이콘 40 + 이름 15 + 수 줄 + 글자 폭 알약 [사용](청록 결정) / '사용 중'(금 글자 — 위 sk-now 와 같은 값). 탭 [콤보][스킬][버프] = 공용 알약 줄(3개 = 글자 폭, hq-ui). 칸 = 두 줄 격자(넓으면 열이 는다 — 칸은 키우지 않는다), 줄 = 아이콘 40 + 번호(단 · 단축키) + 이름 · 정보. */ #ui .sk-book { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; } #ui .sk-band { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 10px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); animation: fx-fade .2s ease-out both; } #ui .sk-band .sk-ic { flex: none; box-shadow: 0 0 0 2px #ffd770, 0 0 0 3.5px #8a5a16, 0 0 8px 1px #ffcf5a66; } #ui .sk-bt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #ui .sk-bt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: #f0e6c8; } #ui .sk-bt small { font-size: 11px; font-weight: 700; color: #9a9d98; } #ui .popup.full .btn.sk-use { flex: none; margin-left: auto; } #ui .sk-using { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #26221c; background: #e8c979; } #ui .sk-tabs { margin: 0; } #ui .sk-grid.sk-pages { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); justify-content: stretch; gap: 6px; padding: 2px 4px; } #ui .sk-tier { margin-right: 5px; padding: 0 5px; border-radius: 5px; font-size: 10px; font-style: normal; font-weight: 800; color: #e8c979; box-shadow: inset 0 0 0 1px #e8c97988; vertical-align: 1px; } /* 전직 단계(1~5단계) — 금 글자 테 */ #ui .sk-row.buff .sk-ic { box-shadow: 0 0 0 1.5px #ffd77099, 0 0 8px 1px #ffcf5a55; } /* 버프 = HUD 버프 칸의 금빛 테(07-askill sk-buff.live) */ #ui .sk-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); animation: fx-cell .3s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * .04s); } #ui .sk-row .sk-ic { position: relative; flex: none; } #ui .sk-row .sk-ic b { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 11px; line-height: 16px; text-align: center; color: #26221c; background: #e8c979; box-shadow: 0 1px 2px #0008; } #ui .sk-mv { display: flex; flex-direction: column; min-width: 0; gap: 2px; } #ui .sk-mv b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 800; color: #f0e6c8; } #ui .sk-mv small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; color: #9a9d98; } /* 정보 한 줄 — 버프 줄이 두 줄로 꺾이지 않게 */ /* 대륙 탭(features/continent 17n): 큰 지도 창(worldmap 08 · 14 #map-dim)의 대륙 탭 판(.ct-body) — 지도 탭 판(.map-body)처럼 머리 띠 아래 판 전체. 지도 = 하늘섬 그림 한 장(assets/skyisle/sky_world.webp 1536×1024 = 3:2 — forest_map skyAtlas), 확대 · 축소 = 17n ctSetZoom 이 폭을 바꾼다, 끌기 = touch_scroll. 자리 = 섬 칸 + 섬 위 제목(아래 "섬 고르기"). 이동 카드 = 아래 오른쪽 먹빛 판 + 글자 폭 알약. */ #ui .ct-body { flex: 1; min-height: 0; margin: 0 -18px; position: relative; background: #a9c7e6; } /* 바탕 = 그림 가장자리 하늘 · 구름 빛(sky_world.webp) — 지도가 화면보다 짧아도 하늘이 이어진다 */ #ui .ct-scroll { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; scrollbar-width: none; } #ui .ct-scroll::-webkit-scrollbar { display: none; } #ui .ct-map { position: relative; flex: none; width: 100%; aspect-ratio: 3 / 2; margin: auto; } /* 처음 1 = 두 섬이 한 화면 · margin auto = 짧거나 좁으면 가운데, 넘치면 위 · 왼쪽부터 스크롤 */ #ui .ct-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; } /* 하늘섬 실시간 지도(17n ctSkyGL · features/continent sky_map_gl.js): 판 = 판 크기 그대로(확대 · 스크롤 없음 — 카메라가 두 섬을 맞춤) · 그림 한 장 숨김 · 캔버스 = 판 전체. 첫 프레임이 섬 자리를 잡기 전(.ready 전)엔 캔버스 · 자리 칸 · 내 자리를 숨겨 바탕 하늘색만(자리 칸이 그림 비율에서 섬 위로 튀지 않게), 잡으면 .35 s 에 걸쳐 나타난다 */ #ui .ct-gl { display: none; } #ui .ct-body.gl .ct-scroll { overflow: hidden; } #ui .ct-body.gl .ct-map { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; } #ui .ct-body.gl .ct-art { display: none; } #ui .ct-body.gl .ct-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } #ui .ct-body.gl:not(.ready) .ct-gl, #ui .ct-body.gl:not(.ready) .ct-spots, #ui .ct-body.gl:not(.ready) .ct-me { visibility: hidden; } #ui .ct-body.gl.ready .ct-gl, #ui .ct-body.gl.ready .ct-spots { animation: ct-gl-in .35s ease-out both; } @keyframes ct-gl-in { from { opacity: 0; } } /* 섬 고르기(17n ctBuild): 누르는 칸 = 섬 화면 사각형(17n putBox — 투명, 고른 빛은 섬 실루엣 테 sky_map_gl). 제목 = 섬 윗면 가운데 위(내 캐릭터가 서 있으면 그 머리 위) — 지역 진입 칭호(zones 06 zone-card) 말씨: 짙은 반투명 띠(양 끝 흐림 rgba(9,11,19,.58~.72)) · 위아래 1px 흰 빛선 · 명조 이름(ZoneTitle, 진주빛 흰 그라데이션 + 푸른 빛) · 자간 넓은 작은 설명 + 마름모 둘. 크기(GUI 450): 고른 이름 20(칭호 26 보다 작게 — 지도 위 두 섬이 한 화면) · 설명 10.5 · 안 고른 섬 이름 14(띠 없이 먹 그림자). 띠 = 글자 폭 + 좌우 46 */ #ui .ct-spots { position: absolute; inset: 0; pointer-events: none; } #ui .ct-spot { position: absolute; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } #ui .ct-title { position: absolute; width: 0; height: 0; pointer-events: none; } #ui .ct-tw { position: absolute; left: 0; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; isolation: isolate; } #ui .ct-title.here .ct-tw { bottom: 40px; } /* 내 캐릭터(17n ctHero 서기 시트 — 발에서 머리까지 ≈ 30 px) 머리 위 */ #ui .ct-tname { font-family: "ZoneTitle", GFUIFont, serif; font-size: 14px; font-weight: 900; letter-spacing: 2px; line-height: 18px; color: #f4f1ea; opacity: .9; text-shadow: 0 0 2px rgba(9, 11, 19, .9), 0 1px 3px rgba(9, 11, 19, .85), 0 0 10px rgba(9, 11, 19, .45); } #ui .ct-tdesc { display: none; } /* 섬 레벨대 알약(17n lvOf): 내 레벨 < 최저 = 붉은 판 + 테(지역 칭호 .danger · 경고 알약 ct-msg 색) */ #ui .ct-tlv { padding: 1px 8px; border-radius: 9px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; line-height: 14px; color: #e8f3dc; background: rgba(9, 11, 19, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .ct-title.low .ct-tlv { color: #ffe0da; background: rgba(150, 30, 24, .9); box-shadow: inset 0 0 0 1px #ff8f7f, 0 0 6px rgba(255, 90, 70, .45); } #ui .ct-title.sel .ct-tlv { animation: ct-t-desc .4s .22s ease-out both; } /* 고른 섬: 띠 + 위아래 빛선 + 진주빛 명조 20(칭호 zc-name 그라데이션 · .zc-row 빛) + 설명 10.5(칭호 zc-lv 마름모) */ #ui .ct-title.sel .ct-tw { padding: 7px 0 6px; } #ui .ct-title.sel .ct-tw::before { content: ""; position: absolute; inset: 0 -46px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(226, 230, 255, .3) 24%, #fff 50%, rgba(226, 230, 255, .3) 76%, transparent) top / 100% 1px no-repeat, linear-gradient(90deg, transparent, rgba(226, 230, 255, .3) 24%, #fff 50%, rgba(226, 230, 255, .3) 76%, transparent) bottom / 100% 1px no-repeat, linear-gradient(90deg, transparent, rgba(9, 11, 19, .58) 22%, rgba(9, 11, 19, .72) 50%, rgba(9, 11, 19, .58) 78%, transparent); animation: ct-t-band .5s cubic-bezier(.25, .8, .3, 1) both; } #ui .ct-title.sel .ct-tname { font-size: 20px; letter-spacing: 3px; line-height: 24px; opacity: 1; color: #fff; text-shadow: none; background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #e6e2fa 72%, #cfe8ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: blur(0) drop-shadow(0 0 6px rgba(150, 165, 255, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .75)); animation: ct-t-name .6s .08s cubic-bezier(.2, .7, .3, 1) both; } #ui .ct-title.sel .ct-tdesc { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; line-height: 13px; color: rgba(236, 239, 250, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); animation: ct-t-desc .4s .3s ease-out both; } #ui .ct-title.sel .ct-tdesc::before, #ui .ct-title.sel .ct-tdesc::after { content: ""; flex: none; width: 4px; height: 4px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .8; } /* 연출(고를 때 .sel 이 붙으면 시작): 띠는 가운데서 양옆으로 열림 · 이름은 흐림에서 또렷해지며 자간 모임 · 설명은 아래에서 떠오름(칭호 zc-band · zc-name · zc-sub 결, 짧게) */ @keyframes ct-t-band { from { opacity: 0; clip-path: inset(0 50% 0 50%); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes ct-t-name { from { opacity: 0; letter-spacing: 11px; filter: blur(5px) drop-shadow(0 0 6px rgba(150, 165, 255, 0)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0)); } 60% { filter: blur(0) drop-shadow(0 0 6px rgba(150, 165, 255, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .75)); } } @keyframes ct-t-desc { from { opacity: 0; transform: translateY(4px); } } /* 내 자리 핀(17n ctPlaceMe): 금빛 물방울 핀 18(세계 지도 내 이름 알약 #ffd36b · 먹 테 #24180e) + 흰 속점, 끝 = 내 자리(그림 %) · 1.4 s 마다 3 px 뜀 · 발밑 흰 고리가 퍼짐(세계 지도 내 자리 고리 1400ms). 누르지 않는다(자리 칸 누름을 가리지 않게) */ #ui .ct-me { position: absolute; width: 0; height: 0; pointer-events: none; } #ui .ct-me[hidden] { display: none; } #ui .ct-me::before { content: ""; position: absolute; left: -9px; top: -22px; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle, #fff 0 3.5px, #ffd36b 4.5px); box-shadow: 0 0 0 1.5px #24180e, 0 2px 4px rgba(0, 0, 0, .5); animation: ct-me-bob 1.4s ease-in-out infinite; } #ui .ct-me::after { content: ""; position: absolute; left: -7px; top: -3px; width: 14px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 2px solid #fff; animation: ct-me-ring 1.4s ease-out infinite; } @keyframes ct-me-bob { 50% { transform: translateY(-3px) rotate(-45deg); } } @keyframes ct-me-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.8); opacity: 0; } } /* 내 캐릭터(17n ctDrawHero): 캐릭터가 서면 핀 대신(발밑 고리는 그대로) */ #ui .ct-me.hero::before { display: none; } #ui .ct-hero { position: absolute; display: block; } #ui .ct-body.fx-in .ct-title:not(.sel) .ct-tname { animation: ct-t-desc .3s .27s ease-out both; } /* 지도를 열 때(17n showContinent 800ms fx-in) 안 고른 섬 이름은 고른 섬 제목 뒤 70ms 에 떠오름(hq-ui 보상 칸 간격) */ /* 아래 오른쪽: 알림 한 줄 + 이동 카드(이름 · 알약) */ #ui .ct-foot { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; } #ui .ct-foot > * { pointer-events: auto; } #ui .ct-card { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 14px; border-radius: 12px; background: rgba(12, 13, 15, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); } /* 판 = 전체화면 창 판 아래쪽 먹빛(01-popup rgba(12,13,15,.82)) — 밝은 지도 위에서도 읽히게 · 테 = 머리 띠 빛선 */ #ui .ct-where { display: flex; flex-direction: column; min-width: 56px; } #ui .ct-sub { font-size: 10.5px; font-weight: 700; line-height: 13px; color: var(--ink-soft); } #ui .ct-sub:empty { display: none; } #ui .ct-name { font-size: 14px; font-weight: 800; line-height: 18px; color: var(--ink); } #ui .ct-clv { font-size: 10.5px; font-weight: 700; line-height: 13px; color: var(--ink-soft); } /* 권장 레벨(17n) — 낮으면 붉게 · 카드 테도 붉게 */ #ui .ct-clv:empty { display: none; } #ui .ct-card.low .ct-clv { color: #ff9b85; } #ui .ct-card.low { box-shadow: inset 0 0 0 1px rgba(255, 143, 127, .7), 0 4px 12px rgba(0, 0, 0, .4); } #ui .ct-go { flex: none; min-width: 72px; } /* 글자 폭 알약 · 최소 폭 = 탭 72(hq-ui) */ #ui .ct-card.swap .ct-where { animation: ct-swap .22s cubic-bezier(.2, .9, .3, 1.2); } /* 고른 곳이 바뀜 = 강화 탭 판 바뀜(enhance 14b enh-pane-in)과 같은 결 */ @keyframes ct-swap { from { opacity: 0; transform: translateY(6px); } } #ui .ct-msg { padding: 3px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #ff9b85; white-space: nowrap; background: rgba(60, 20, 16, .92); box-shadow: inset 0 0 0 1.5px #b4664d, 0 3px 8px #0006; } /* 경고 알약 = 경매장 au-msg · 길드 gd-msg 색 */ #ui .ct-msg.in { animation: ct-msg-in .2s ease-out both; } #ui .ct-msg[hidden] { display: none; } @keyframes ct-msg-in { from { transform: translateY(6px); opacity: 0; } } /* 경매장 au-msg-in 과 같다 */ /* 탭 · 섬 넘기기(17n ctShowTab · ctStep): 탭 줄 = 01-popup 공용 어두운 알약 줄(3 개라 글자 폭 — 도깨비의 세계 §9) · 높이 30 · 글자 12.5(채팅 창 social-tabs 와 같은 값) · 왼쪽 = 머리 띠 ‹ 와 같은 18. ‹ › = 판 양옆 가운데 먹빛 반투명 원 36(아이콘 40 이하 — hq-ui) + 흰 선 꺾쇠(머리 띠 ‹ 와 같은 테두리 꺾쇠) · 끝 칸이면 엷게 · 누름 .92(hq-ui 누름). 점 = 아래 가운데(이동 카드와 겹치지 않게 카드 높이 가운데) 6 px 흰 점 · 고른 칸 = 16 px 알약(넘김 .22 s) · DOTS 넘으면 "3 / 15" 알약. 탭을 바꾸면 캔버스가 그 섬에 바로 서므로 판 바뀜(.tab-in) = 캔버스 · 제목 .28 s 엷게 → 또렷이(ui_fx 탭 판 바뀜 fx-fade 결) */ #ui .ct-tabs { position: absolute; left: 18px; top: 10px; height: 30px; z-index: 2; } #ui .ct-tabs .tab { padding: 0 16px; font-size: 12.5px; font-weight: 800; } #ui .ct-arrow { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(12, 13, 15, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; transition: transform .06s, opacity .15s; } #ui .ct-arrow.prev { left: 16px; } #ui .ct-arrow.next { right: 16px; } #ui .ct-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; border-radius: 1px; transform: rotate(45deg); } #ui .ct-arrow.next::before { margin-left: -7px; transform: rotate(-135deg); } #ui .ct-arrow:active { transform: scale(.92); } #ui .ct-arrow.off { opacity: .3; pointer-events: none; } #ui .ct-arrow[hidden], #ui .ct-dots[hidden], #ui .ct-empty[hidden], #ui .ct-card[hidden], #ui .ct-spot[hidden], #ui .ct-title[hidden] { display: none; } #ui .ct-dots { position: absolute; left: 50%; bottom: 27px; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(12, 13, 15, .38); pointer-events: none; } #ui .ct-dots > i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .5); transition: width .22s cubic-bezier(.2, .9, .3, 1), background .22s; } #ui .ct-dots > i.on { width: 16px; background: #fff; } #ui .ct-dots.num { padding: 2px 10px; font-size: 11px; font-weight: 800; line-height: 15px; color: #fff; } #ui .ct-empty { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; background: rgba(12, 13, 15, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); animation: ct-msg-in .2s ease-out both; } #ui .ct-body.tab-in .ct-gl, #ui .ct-body.tab-in .ct-spots { animation: ct-tab-in .28s ease-out both; } #ui .ct-body.gl .ct-title.here .ct-tw { bottom: 10px; } /* 실시간 지도 = 17n ctGLFrame 이 제목 자리를 캐릭터 머리 위로 잡는다 */ @keyframes ct-tab-in { from { opacity: .35; } } /* [배] 탭(17n ctShipPane · ctTiers · ctShipCard) — 펫 창(장면 가운데 크게 · 아래 초상 줄, 도깨비의 세계 §3) · 강화 창(지금 → 다음 · 오름 초록) · 오른쪽 아래 카드 = 이동 카드 자리. 단계색 = 하이랜드 등급색(1 일반 · 2 희귀 · 3 영웅 · 4 고유 · 5 전설 — 도깨비의 세계 §10 우리 값). 판 = 이동 카드와 같은 먹빛 판 · 테. 크기(GUI 450): 카드 폭 220 · 이름 15 · 단계 알약 18 · 단계 칸 52(hq-ui 칸 52~64 의 작은 값 — 장면 아래 줄이라 배를 덜 가린다) · 이름 10 */ #ui .ct-body { --shp-w: 220px; } #ui .ct-shp { position: absolute; right: 14px; bottom: 12px; z-index: 2; width: var(--shp-w); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; border-radius: 12px; background: rgba(12, 13, 15, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); --tc: #6b7073; } #ui .ct-shp[hidden], #ui .ct-tiers[hidden] { display: none; } #ui .ct-body.ship .ct-title { display: none; } /* 이름은 오른쪽 판에 — 배 위 제목 띠는 두지 않는다 */ #ui .ct-shp.t2, #ui .ct-tier.t2 { --tc: #3f8fe0; } #ui .ct-shp.t3, #ui .ct-tier.t3 { --tc: #9a5cd0; } #ui .ct-shp.t4, #ui .ct-tier.t4 { --tc: #e0a020; } #ui .ct-shp.t5, #ui .ct-tier.t5 { --tc: #e2583a; } #ui .ct-shp-in { display: flex; flex-direction: column; } #ui .ct-shp-in.swap { animation: fx-card-in .24s cubic-bezier(.2, .8, .3, 1) both; } #ui .ct-shp-head { display: flex; align-items: center; gap: 7px; min-width: 0; } #ui .ct-shp-tier { flex: none; padding: 0 8px; border-radius: 9px; font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 18px; color: #fff; background: var(--tc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } #ui .ct-shp-name { min-width: 0; font-size: 15px; font-weight: 800; line-height: 20px; color: #fff; white-space: nowrap; } #ui .ct-shp-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 11px; font-weight: 700; line-height: 15px; color: var(--ink-soft); white-space: nowrap; } #ui .ct-shp-stat b { display: flex; align-items: center; gap: 5px; font-weight: 800; } #ui .ct-shp-stat em { font-style: normal; font-size: 13px; color: var(--ink); } #ui .ct-shp-stat em.up { color: #7ad26a; } /* 좋아짐 초록 = 강화 창 */ #ui .ct-shp-stat s { color: var(--ink-soft); opacity: .7; } #ui .ct-shp-stat i { width: 5px; height: 5px; border: solid var(--ink-soft); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); } /* 지금 → 다음 꺾쇠(머리 띠 ‹ 와 같은 선) */ #ui .ct-shp-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); } #ui .ct-shp-cond { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #ff9b85; } /* 못 사는 까닭 = 경고 붉은 글(ct-msg 색) */ #ui .ct-shp-go { flex: none; min-width: 72px; } /* 글자 폭 알약 · 최소 폭 = 탭 72(hq-ui) */ #ui .ct-shp-go .ct-dia { width: 14px; height: 14px; margin: -2px 4px 0 0; vertical-align: middle; } #ui .ct-shp.got { animation: fx-flash .5s ease-out; } /* 단계 칸 줄: 남은 장면 가운데 아래 · 칸 = 등급색 세로 그라데이션 둥근 네모 + 얇은 밝은 안쪽 테(도깨비의 세계 §10) · 고른 칸 = 흰 빛 테 맥박 + 흰 굵은 이름(펫 창) · 타는 배 = 오른쪽 위 주황 체크 꼬리표(장착 E 색 #c8701e) · 살 수 있는 다음 배 = 빨간 점(628 ms) · 잠김 = 어두운 칸 + 흰 자물쇠(변신 잠금과 같은 그림). 탭을 열면 칸이 70 ms 간격으로 튀어 오르고, 막 산 칸은 튐 + 빛 고리 */ #ui .ct-tiers { position: absolute; left: min(50%, calc(100% - var(--shp-w) - 28px - 180px)); bottom: 12px; z-index: 2; display: flex; gap: 10px; transform: translateX(-50%); pointer-events: none; } /* ↑ 줄 폭 360(칸 64 × 5 + 틈 10 × 4)의 가운데 = 화면 가운데, 다만 오른쪽 끝이 카드 왼쪽 14px 을 넘지 않게(창 층 px 로 재므로 #ui 확대와 상관없다) */ #ui .ct-tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: transform .06s; animation: fx-cell .28s calc(var(--i) * 70ms) cubic-bezier(.2, .9, .3, 1.3) both; } #ui .ct-tier:active { transform: scale(.92); } #ui .ct-tc { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; font-style: normal; background: linear-gradient(color-mix(in srgb, var(--tc) 80%, #fff 20%), color-mix(in srgb, var(--tc) 70%, #000 30%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 3px 8px rgba(0, 0, 0, .45); } #ui .ct-tc img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); pointer-events: none; } /* 배 그림 = 칸을 꽉(그림이 이미 배 둘레로 잘려 있다) */ #ui .ct-tier small { max-width: 100%; font-size: 10px; font-weight: 700; line-height: 13px; color: rgba(255, 255, 255, .78); white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, .7); } #ui .ct-tier.on .ct-tc { outline: 1.5px solid #fff; outline-offset: 2px; animation: fx-ring 1.047s ease-in-out infinite; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 12px rgba(255, 255, 255, .45); } #ui .ct-tier.on small { color: #fff; font-weight: 900; } #ui .ct-tier.lock .ct-tc { background: linear-gradient(color-mix(in srgb, var(--tc) 30%, #1a1c1f 70%), color-mix(in srgb, var(--tc) 18%, #0c0d0f 82%)); } #ui .ct-tier.lock .ct-tc img { filter: grayscale(.85) brightness(.38); } #ui .ct-tier.lock .ct-tc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #fff; opacity: .92; -webkit-mask: url(../features/morph/lock.svg) center / contain no-repeat; mask: url(../features/morph/lock.svg) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); } #ui .ct-tier.lock small { color: rgba(255, 255, 255, .5); } #ui .ct-tier.use .ct-tc::after { content: ""; position: absolute; right: -3px; top: -3px; width: 15px; height: 15px; border-radius: 4px; background: #c8701e; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } #ui .ct-tier.use .ct-tc::before { content: ""; position: absolute; z-index: 1; right: 2px; top: 0; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } #ui .ct-tier.can .ct-tc::after { content: ""; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff4b3a; box-shadow: 0 0 0 1.5px rgba(12, 13, 15, .9); animation: fx-got-blink .628s ease-in-out infinite; } #ui .ct-tier.got .ct-tc { animation: fx-got-in .42s cubic-bezier(.2, .9, .3, 1.3) both; } #ui .ct-tier.got::after { content: ""; position: absolute; left: 50%; top: 26px; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 12px; box-shadow: 0 0 0 2px #fff, 0 0 14px var(--tc); pointer-events: none; animation: fx-got-ring .7s ease-out both; } /* 이벤트 창(G12 출석 · 신규 출석 · 룰렛 · 일일 사냥 · 패스, 2026-10-23) — 01-popup 전체화면 판(.popup.full: 어두운 반투명 판 · 머리 띠 46 · ‹ · 열린 동안 HUD 숨김). 머리 = ‹ + 메뉴 출석 흰 선 아이콘 + 제목 + 탭 알약(글자 폭, 받을 것이 있으면 붉은 점). 크기 = GUI-450(아이콘 40 · 칸 64 · 제목 17 · 알약 28). 10-23 다시 그림(사용자 "이벤트 UI 퀄리티가 너무 낮다 · 한국 트렌드 도트 모바일 참고 · 아이템 슬롯이 없어 유치") — 참고 = 메이플 키우기(월간 · 일일 미션), 바람의나라: 연(7일 출석 · 돌림판), 메이플스토리M(보스 미션 패스), 도깨비의 세계 §10 칸: 보상은 늘 등급색 아이템 칸 안 · 수량 = 칸 오른쪽 아래 · 특별한 날 = 같은 크기 바탕색만. 출석 = 7칸 한 줄(일차 모서리 꼬리표 · 칸 56 · 상태 글, 오늘 = 흰·금 빛 테 맥박, 받음 = 어둡게 + 체크), 룰렛 = 무채색 바퀴 + 칸 40, 일일 = 처치 막대 + 단계 줄 56(줄마다 진행 막대), 패스 = 열 72 [무료 칸 · 단계 메달(진행 선 위) · 프리미엄 칸], 가로로 끌어 넘긴다(touch_scroll). 연출(hq-ui 기본 탑재): 칸 70 ms 간격 떠오름 · 받을 칸 빛 맥박 · 전설 이상 등급 빛. */ #ui .popup.full.ev > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-event.png); mask-image: url(../assets/icons/menu-event.png); } #ui .ev-tabs { margin-left: 14px; align-self: center; } #ui .ev .tab { position: relative; min-width: 0; height: 28px; padding: 0 14px; font-size: 13px; font-weight: 800; } #ui .ev .tab > .dot { position: absolute; right: 4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e5534b; box-shadow: 0 0 4px rgba(229, 83, 75, .8); display: none; } #ui .ev .tab.ready > .dot { display: block; } #ui .ev .tab.ev-lock { opacity: .45; } /* 11-05: Lv10 전 [출석] · [룰렛] 탭(신규 출석 · 핫타임만 열림) — 누르면 해금 조건 알림 */ #ui .ev-body { flex: 1; min-height: 0; width: 100%; max-width: 980px; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } #ui .ev-body[data-tab="roulette"] { max-width: 820px; } #ui .ev-state { margin: auto; font-size: 14px; font-weight: 700; color: var(--ink-soft); } #ui .ev-sub { margin: 0; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .ev-foot { display: flex; gap: 8px; justify-content: center; } #ui .ev .btn { height: 34px; padding: 0 20px; font-size: 14px; font-weight: 800; white-space: nowrap; } /* 아이템 칸(10-23 사용자 "아이템 슬롯이 없어서 유치한 그림 · 한국 트렌드 도트 모바일 참고"): 보상은 늘 칸 안 — 참고작(메이플 키우기 · 바람의나라: 연 · 메이플스토리M · 도깨비의 세계 §10) 공통. 칸 = 등급색 세로 그라데이션 + 등급 테 2px + 안쪽 얇은 빛 테(가방 04-inventory .item-cell 과 같은 식), 그림 = 칸의 72%, 수량 = 칸 안 오른쪽 아래 흰 숫자 + 어두운 외곽(바람의나라: 연 · 메이플스토리M · 도깨비 §10). 크기 --s = 맥락마다(출석 56 · 패스 48 · 줄 42 · 룰렛 36). 색 --gc = RtGrades.color. */ #ui .ev-slot { --s: 52px; --gc: #9aa0a6; position: relative; flex: none; display: block; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .16); background: linear-gradient(170deg, color-mix(in srgb, var(--gc) 58%, #1d2124), color-mix(in srgb, var(--gc) 16%, #111416) 78%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 78%, #fff), inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 calc(var(--s) * .3) calc(var(--s) * .25) -8px rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .45); } #ui .ev-slot img { position: absolute; left: 14%; top: 12%; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); } #ui .ev-slot .ev-n { position: absolute; right: 4px; bottom: 1px; font-size: max(10px, calc(var(--s) * .22)); font-weight: 900; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 1.4px 0 #0d0f10, -1.4px 0 #0d0f10, 0 1.4px #0d0f10, 0 -1.4px #0d0f10, 1px 1px #0d0f10, -1px 1px #0d0f10, 1px -1px #0d0f10, -1px -1px #0d0f10; } /* 높은 등급(전설 · 신화) = 등급 빛 맥동 1047 ms(ui-juice README 등급 빛) */ #ui .ev-slot:is(.g-legend, .g-myth)::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gc) 70%, transparent); animation: ev-glow 1.047s ease-in-out infinite alternate; } @keyframes ev-glow { from { opacity: .35; } to { opacity: 1; } } #ui .ev-slots { display: flex; justify-content: center; align-items: center; gap: 4px; } /* 받음 = 칸 위 어두운 덮개 + 가운데 작은 체크(참고작: 받은 칸 = 어둡게 · 큰 도장 없음) */ #ui .ev-check { position: absolute; left: 50%; top: 50%; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #4fae68; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .5); animation: fx-pop .25s cubic-bezier(.2, .9, .3, 1.4) both; pointer-events: none; } /* 받은 칸도 누르면 아이템 정보(체크가 누름을 가로채지 않게) */ #ui .ev-check::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } /* 판 묶음(10-23 네 번째 — 사용자 "이미지가 레트로 · 고딕 · 왼쪽 카드 형태는 어떤 게임 참고"): 옆 카드 · 꾸밈 그림 없음. 참고 = 메이플 키우기 월간 출석(제목 줄 + 7×4 판) · 나 혼자만 레벨업: 어라이즈 출석(제목 + 칸 줄) · 원신 · 스타레일 · 명조 패스(어두운 반투명 판 + 금 강조만) */ #ui .ev-head-r { margin-left: auto; display: flex; align-items: center; gap: 12px; } #ui .ev-state-t { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } #ui .ev-state-t b { font-size: 14px; color: #fff; } /* 진행 막대(패스 머리) = 금 막대(채움 600 ms) */ #ui .ev-meter-bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .ev-meter-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, #c9a24f, #f6e7b8); box-shadow: 0 0 6px rgba(240, 213, 140, .5); animation: ev-fill .6s cubic-bezier(.2, .8, .3, 1) both; } @keyframes ev-fill { from { transform: scaleX(0); } } #ui .ev-board { margin: auto 0; display: flex; flex-direction: column; gap: 10px; } #ui .ev-main-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; } #ui .ev-main-head b { font-size: 14px; font-weight: 900; } /* 출석 = 28일 판 7×4(메이플 키우기 월간 출석 7×4, 10-23 사용자 "출석체크 UI 가 전반적으로 너무 큼" — 카드 104×132 → 칸 68×60 · 아이템 칸 40) */ #ui .ev-month { display: grid; grid-template-columns: repeat(7, 88px); grid-auto-rows: 60px; gap: 6px; } #ui .ev-day { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .035s); } #ui .ev-day-n { position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; padding: 3px 0 0 4px; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 0 100%); background: rgba(255, 255, 255, .16); font-size: 10px; font-weight: 900; line-height: 1; color: #e9e6dc; } #ui .ev-day-rw { --s: 40px; display: flex; justify-content: center; gap: 3px; } #ui .ev-day-rw.n2 { --s: 30px; } #ui .ev-day-rw.n3 { --s: 22px; } #ui .ev-day-rw .ev-slot { --s: inherit; } #ui .ev-day .ev-check { width: 18px; height: 18px; margin: -9px 0 0 -9px; } #ui .ev-day .ev-check::after { left: 6px; top: 3px; width: 4px; height: 8px; border-width: 0 2px 2px 0; } #ui .ev-day.got { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .ev-day.got .ev-day-rw { filter: brightness(.45) saturate(.5); } #ui .ev-day.today { background: linear-gradient(180deg, rgba(255, 238, 190, .2), rgba(255, 238, 190, .05)); box-shadow: inset 0 0 0 2px #f3e3b4; animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both, ev-today 1.047s ease-in-out infinite alternate; } #ui .ev-day.today .ev-day-n { background: linear-gradient(135deg, #f6e7b8, #c9a24f); color: #2b2210; } @keyframes ev-today { from { box-shadow: inset 0 0 0 2px #f3e3b4, 0 0 4px rgba(255, 230, 160, .25); } to { box-shadow: inset 0 0 0 2px #fff6d8, 0 0 14px rgba(255, 230, 160, .6); } } /* 신규 출석 = 1~6일 3×2(칸 92×88 · 아이템 칸 50) + 7일째 최종 카드 150(큰 칸 64 · 금 테 · 느린 빛살 12 s — 참고작 신규 7일 = 마지막 날 큰 카드) */ #ui .ev-nc { display: flex; align-items: stretch; gap: 10px; } #ui .ev-nc-grid { display: grid; grid-template-columns: repeat(3, 120px); grid-auto-rows: 88px; gap: 8px; } #ui .ev-nc .ev-day-rw { --s: 50px; } #ui .ev-nc .ev-day-rw.n2 { --s: 38px; } #ui .ev-final { position: relative; flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(255, 226, 150, .3), transparent 62%), linear-gradient(180deg, rgba(232, 201, 121, .26), rgba(120, 88, 36, .16)); box-shadow: inset 0 0 0 1.5px rgba(240, 213, 140, .75), 0 0 14px rgba(240, 213, 140, .22); animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .035s); } #ui .ev-final::before { content: ""; position: absolute; left: 50%; top: 44%; width: 240px; height: 240px; margin: -120px 0 0 -120px; pointer-events: none; background: repeating-conic-gradient(rgba(255, 236, 190, .15) 0 7deg, transparent 7deg 22.5deg); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%); mask-image: radial-gradient(circle, #000 18%, transparent 66%); animation: ev-spin 12s linear infinite; } @keyframes ev-spin { to { transform: rotate(360deg); } } #ui .ev-final > * { position: relative; } #ui .ev-final-l { font-size: 12px; font-weight: 900; letter-spacing: .3px; color: #f6e7b8; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); } #ui .ev-final-rw { --s: 64px; display: flex; justify-content: center; gap: 4px; } #ui .ev-final-rw.n2 { --s: 50px; } #ui .ev-final-rw.n3 { --s: 36px; } #ui .ev-final-rw .ev-slot { --s: inherit; } #ui .ev-final-t { padding: 3px 10px; border-radius: 10px; font-size: 12px; font-style: normal; font-weight: 900; color: #fff; background: rgba(0, 0, 0, .42); white-space: nowrap; } #ui .ev-final.today { animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both, ev-today 1.047s ease-in-out infinite alternate; } #ui .ev-final.got .ev-final-rw, #ui .ev-final.lock .ev-final-rw { filter: brightness(.5) saturate(.45); } #ui .ev-final.got::before { animation: none; opacity: .3; } /* 핫타임(평일 20~24시 💎100 · 주말 종일 💎300) = 보상 카드(신규 7일째 최종 카드 .ev-final 그대로 — 금 테 · 느린 빛살, 켜짐 = 오늘 칸 빛 맥박 · 받음 = 어둡게 + 체크 · 꺼짐 = 흐림) + 한 주 7칸 (출석 칸 .ev-day 와 같은 판 · 핫타임 요일 = 밝은 판 + 금 시각 · 오늘 = 빛 테). 크기 = 출석 판 칸(60) 결 · 카드 170. */ #ui .ev-hot { display: flex; align-items: stretch; gap: 12px; } #ui .ev-hot .ev-hot-card { width: 170px; min-height: 172px; } #ui .ev-hot .ev-hot-card .ev-check { top: 50%; } #ui .ev-week { display: grid; grid-template-columns: repeat(7, 52px); grid-auto-rows: 76px; gap: 6px; align-content: center; } #ui .ev-wd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--ink-soft); animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i, 0) * .035s); } #ui .ev-wd b { font-size: 13px; font-weight: 900; line-height: 1; } #ui .ev-wd small { font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } #ui .ev-wd.hot { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #e9e6dc; } #ui .ev-wd.hot small { color: #e8c979; } #ui .ev-wd-n { display: flex; align-items: center; gap: 1px; font-size: 10px; font-style: normal; font-weight: 900; color: #cfe6ff; font-variant-numeric: tabular-nums; } /* 그 요일 다이아 수(평일 100 · 주말 300) */ #ui .ev-wd-n img { width: 13px; height: 13px; object-fit: contain; } #ui .ev-wd.today { box-shadow: inset 0 0 0 2px #f3e3b4; } #ui .ev-wd.live { background: linear-gradient(180deg, rgba(255, 238, 190, .2), rgba(255, 238, 190, .05)); animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both, ev-today 1.047s ease-in-out infinite alternate; } #ui .ev-body.ev-still .ev-wd { animation: none; } #ui .ev-body.ev-still .ev-wd.live { animation: ev-today 1.047s ease-in-out infinite alternate; } .gfx-low #ui .ev-wd { animation: none; } /* HUD 이벤트 줄(17o evEntRender): 오른쪽 위 아이콘 줄(.top-r right 16.8 · top 14.4 · 높이 36) 바로 아래 오른쪽 맞춤 = EFZ HUD 줄1 이벤트 아이콘 자리. 칸 = 머리줄 도구(.tool 33)와 같은 폭 · 흰 실루엣 아이콘(메뉴 칸 .white-icon 과 같은 마스크) + 아래 이름(EFZ HUD 아이콘 라벨) · 받을 것 = 오른쪽 위 붉은 점(628 ms 맥박) */ #hud .ev-ent { position: absolute; right: 16.8px; top: 54px; display: flex; gap: 4.5px; pointer-events: none; } #hud .ev-ent-b { position: relative; width: 36px; padding: 0; border: 0; background: none; pointer-events: auto; touch-action: manipulation; display: flex; flex-direction: column; align-items: center; gap: 1px; font: inherit; color: #fff; cursor: pointer; transition: transform 60ms ease-out; } #hud .ev-ent-b:active { transform: scale(.92); } #hud .ev-ent-ic { width: 26px; height: 26px; background: #fff; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* 그림 주소는 칸 style(문서 기준 경로) — 사용자 속성 안 url() 은 이 CSS 파일 기준으로 풀린다 */ filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .8)); } #hud .ev-ent-b > b { font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; text-shadow: 0 0 2px #000, 0 1px 2px #000; } #hud .ev-ent-b.dot::after { content: ""; position: absolute; right: 3px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: #e5534b; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 4px rgba(229, 83, 75, .8); animation: ev-dot .628s ease-in-out infinite alternate; pointer-events: none; } #ui .m-attendance { position: relative; } #ui .m-attendance > .ev-mdot { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5534b; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); animation: ev-dot .628s ease-in-out infinite alternate; pointer-events: none; } /* ☰ [이벤트] 받을 것 점(변신 칸 mf-mdot 과 같은 자리 · 크기) */ #hud.ev-ent-on .boss-go { top: 102px; } /* 보스 도전 알약(boss.css top 66)은 이벤트 줄 아래로 */ @keyframes ev-dot { from { transform: scale(.85); } to { transform: scale(1.1); } } /* 룰렛 */ #ui .ev-rl { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 40px; } #ui .ev-wheel-box { position: relative; flex: none; width: 250px; height: 250px; } /* 바퀴 = 무채색 판 + 칸 가르는 얇은 빛 선(바람의나라: 연 돌림판 = 회색 칸 · 등급색 없음 — 색은 칸 안 아이템 칸이 낸다) */ #ui .ev-wheel { position: absolute; inset: 10px; border-radius: 50%; box-shadow: 0 0 0 4px #2a2c2f, 0 0 0 6px #c9ac77, 0 0 0 7px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .55); background: repeating-conic-gradient(rgba(255, 255, 255, .16) 0 .8deg, transparent .8deg calc(360deg / var(--n))), radial-gradient(circle, #34383d 0 30%, #26292d 70%, #1d2023); will-change: transform; } #ui .ev-seg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font-style: normal; transform: rotate(var(--a)) translateY(-76px); } #ui .ev-seg .ev-slot { --s: 40px; position: absolute; left: -20px; top: -20px; } #ui .ev-seg.hit .ev-slot { animation: ev-hit .45s ease-out 2 alternate; } @keyframes ev-hit { to { transform: scale(1.3); box-shadow: inset 0 0 0 2px #fff6d8, 0 0 14px 3px rgba(255, 238, 190, .85); } } #ui .ev-pin { position: absolute; left: 50%; top: -2px; z-index: 2; width: 22px; height: 26px; transform: translateX(-50%); background: linear-gradient(#f4e2b0, #c9a24f); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } #ui .ev-hub { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f4e2b0, #a8823c); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); } #ui .ev-rl-side { width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } #ui .ev-left { font-size: 22px; font-weight: 900; color: #b9f2c5; } #ui .ev-left.none { color: var(--ink-soft); } #ui .ev-next { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } #ui .ev-plus { margin: 0; font-size: 12px; color: #e8c979; } #ui .ev-cap { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); } #ui .ev-cap i { position: relative; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; } #ui .ev-cap i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, #5fa8ff, #8fc6ff); } #ui .ev-cap.full span { color: #8fc6ff; } #ui .ev-rl-side .ev-foot { margin-top: 6px; justify-content: flex-start; } /* 탭을 바꾸면 판이 살짝 들어온다 */ #ui .ev-body.ev-fresh > * { animation: fx-fade .2s ease-out both; } /* 같은 판을 새 값으로 다시 그릴 때(받기 · 서버 답) = 등장 연출(떠오름 · 판 들어옴 · 막대 채움 · 체크 팝) 없이 — 맥박 · 빛 같은 늘 도는 것만 남긴다 */ #ui .ev-body.ev-still > *, #ui .ev-body.ev-still :is(.ev-day, .ev-final, .ev-col, .ev-check), #ui .ev-body.ev-still .ev-meter-bar::before { animation: none; } #ui .ev-body.ev-still :is(.ev-day.today, .ev-final.today) { animation: ev-today 1.047s ease-in-out infinite alternate; } /* 보상 칸 누름 아이템 정보 판 = 공용 features/itemtip/item_tip.css(.it-tip — 판 196 · 칸 36) */ /* 낮음 그래픽(html.gfx-low — 62-gfx-quality, 11-05 amfps2-1105 · Note20 출석 창 최악 프레임 1.1 s): 28칸이 35 ms 간격으로 떠오르면 칸마다 따로 층이 돼 그림자 · 그라데이션 칸을 28번 따로 래스터한다 + 칸 그림마다 drop-shadow 필터 + 빛 맥박. SwiftShader 같은 판 A/B(창 연 뒤 5초): 래스터 작업 378 ms · 810건 → 163 ms · 71건. 칸 · 색 · 체크는 그대로 */ .gfx-low #ui .ev-day, .gfx-low #ui .ev-final, .gfx-low #ui .ev-body.ev-fresh > *, .gfx-low #ui .ev-body :is(.ev-day.today, .ev-final.today) { animation: none; } /* 오늘 칸 = 빛 테만(맥박 = 매 프레임 그림자 다시 그림) */ .gfx-low #ui .ev-slot img { filter: none; } .gfx-low #ui .ev-slot:is(.g-legend, .g-myth)::after, .gfx-low #ui .ev-final::before { animation: none; } /* 패스 창(features/pass 17o-pass) — 01-popup 전체화면 판 + 이벤트 창과 같은 칸 · 알약(.ev). 머리 = ‹ + 흰 선 패스 아이콘 + 제목 + 패스 탭(글자 폭 알약, 받을 것 = 붉은 점). 독립 창 틀 = 원신 기행 · 스타레일 무명의 공훈 단독 화면: 머리 띠 안 탭 줄, 판 = 단계 고리 · 진행 막대 · 두 줄 보상 트랙 · 아래 [모두 받기][프리미엄 열기]. */ #ui .popup.full.ps > .popup-head > h2::before { -webkit-mask-image: url(../assets/icons/menu-pass.png); mask-image: url(../assets/icons/menu-pass.png); } #ui .m-pass { position: relative; } /* 받을 보상 점(pass-dot) */ /* 단계 오름 = 고리 튐 420 ms + 금빛 퍼짐(ui-juice 보상 칸 팝 420 ms), 새로 닿은 열 = 밝은 빛 한 번 */ #ui .ev-lv.ps-up { animation: ps-up .42s cubic-bezier(.2, .9, .3, 1.3) both; } @keyframes ps-up { 0% { transform: scale(.8); } 55% { transform: scale(1.15); box-shadow: inset 0 0 0 1.5px #f6e7b8, 0 0 0 4px rgba(240, 213, 140, .7), 0 0 22px rgba(240, 213, 140, .8); } 100% { transform: scale(1); } } #ui .ev-col.ps-new .ev-cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 246, 216, .85), rgba(255, 246, 216, 0)); animation: ps-flash .6s ease-out both; animation-delay: calc(var(--j, 0) * .07s); } @keyframes ps-flash { from { opacity: 1; } to { opacity: 0; } } /* 받기 = 방금 받은 칸만, 70 ms 간격(ui-juice 보상 칸 순차): 아이템 칸 튐 420 ms(칸 안 여백 1.08 — 스크롤 판 잘림 함정) + 금빛 테 + 칸 위를 지나는 빛 훑기 500 ms → 수량 카운트업 420 ms → 그림 복제가 머리 띠 가방(.ps-bag)으로 포물선 560 ms → 가방 튐 → 공용 받음 창(받음 창과 같은 금빛 결 #f0d58c) */ #ui .ev-body.ev-still .ev-cell.ps-got { overflow: hidden; } #ui .ev-body.ev-still .ev-cell.ps-got .ev-slot { animation: ps-got .42s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--j, 0) * .07s); } #ui .ev-body.ev-still .ev-cell.ps-got .ev-check { animation: fx-pop .25s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--j, 0) * .07s + .9s); } #ui .ev-body.ev-still .ev-cell.ps-got::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 216, .92) 50%, transparent 70%); transform: translateX(-110%); animation: ps-sweep .5s ease-out both; animation-delay: calc(var(--j, 0) * .07s + .08s); } @keyframes ps-got { 0% { transform: scale(1); filter: brightness(1.8); } 45% { transform: scale(1.08); box-shadow: inset 0 0 0 2px #f6e7b8, 0 0 14px 2px rgba(240, 213, 140, .9); } 100% { transform: scale(1); filter: none; } } @keyframes ps-sweep { to { transform: translateX(110%); } } /* 날아가는 그림(body 바로 밑 고정 위치 — 창 판 · 스크롤 칸 밖) + 받는 곳 = 머리 띠 오른쪽 흰 선 가방(메뉴 물품 아이콘, 도착마다 튐) */ .ps-fly { position: fixed; z-index: 2147483000; pointer-events: none; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 228, 160, .95)); will-change: transform; } #ui .popup.full.ps > .popup-head > .ps-bag { flex: none; margin-left: auto; width: 24px; height: 24px; background: var(--ink); opacity: .9; -webkit-mask: url(../assets/icons/menu-inventory.png) center / contain no-repeat; mask: url(../assets/icons/menu-inventory.png) center / contain no-repeat; } #ui .ps-bag.ps-hit { animation: ps-bag .3s cubic-bezier(.2, .9, .3, 1.4); } @keyframes ps-bag { 0% { transform: scale(1); } 40% { transform: scale(1.25); filter: drop-shadow(0 0 6px #f0d58c); } 100% { transform: scale(1); } } /* 받은 칸 = 어둡게 + 가운데 어두운 원 흰 체크(스타레일 받은 칸 — 초록 도장 없음) */ #ui .ps .ev-cell.got .ev-slots, #ui .ps .ev-col.got .ev-cell .ev-slots { opacity: .42; filter: grayscale(.55); } #ui .ps .ev-check { background: rgba(18, 20, 24, .8); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .5); } /* 프리미엄 열림(구매 직후 한 번): 유료 칸 자물쇠가 튀며 날아감(60 ms 열 차례) → 금빛 훑기 → 가운데 "프리미엄 열림" 띠(결과 글자 문법: 짙은 반투명 띠 + 위아래 금 1px 빛선 + 진주빛 명조) */ #ui .ev-track-box { position: relative; } #ui .ps-unlock .ev-cell.prem { overflow: hidden; } #ui .ps-unlock .ev-cell.prem::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgba(255, 232, 160, .95) 50%, transparent 75%); transform: translateX(-110%); animation: ps-sweep .55s ease-out both; animation-delay: calc(.3s + var(--u, 0) * .06s); } #ui .ps-lock-off { right: 6px; top: 6px; pointer-events: none; animation: ps-lock-off .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--u, 0) * .06s); } @keyframes ps-lock-off { 0% { transform: none; opacity: 1; } 40% { transform: scale(1.4) rotate(-14deg); opacity: 1; } 100% { transform: translate(8px, -16px) scale(.4) rotate(28deg); opacity: 0; } } #ui .ps-unlock .ev-lanes b.prem .ev-lane-i { animation: ps-ring .8s ease-out .15s both; } @keyframes ps-ring { 0% { box-shadow: inset 0 0 0 1.5px #c9a24f, 0 0 0 0 rgba(240, 213, 140, .9); } 100% { box-shadow: inset 0 0 0 1.5px #c9a24f, 0 0 0 16px rgba(240, 213, 140, 0); } } #ui .ps-unlock-band { position: absolute; left: 0; right: 0; top: 50%; z-index: 6; height: 40px; margin-top: -20px; display: flex; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(12, 13, 16, .85) 22%, rgba(12, 13, 16, .85) 78%, transparent); animation: ps-band 2.1s ease-out both; } #ui .ps-unlock-band::before, #ui .ps-unlock-band::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #f0d58c, transparent); } #ui .ps-unlock-band::before { top: 0; } #ui .ps-unlock-band::after { bottom: 0; } #ui .ps-unlock-band b { font-family: "BossTitle", "QuestTitle", "GwTitle", var(--ui-font, GFUIFont), serif; font-size: 17px; font-weight: 900; letter-spacing: .1em; color: #fbf6ea; text-shadow: 0 0 10px rgba(240, 213, 140, .85), 0 1px 2px #000; animation: ps-band-t 2.1s ease-out both; } @keyframes ps-band { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); } 14% { opacity: 1; clip-path: inset(0); } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes ps-band-t { 0% { opacity: 0; letter-spacing: .5em; } 26% { opacity: 1; letter-spacing: .1em; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } } /* [모두 받기](받을 것 있음) = 베이지 알약 + 2.4초마다 빛 훑기, [프리미엄 열기 | 가격] = 금 알약(원신 · 스타레일 프리미엄 단추 금) + 오른쪽 위 값 배수 꼬리표(붉은 값 강조 — 흥행작 상품 "가치 ×N") */ #ui .popup.full .btn.ps-claim { position: relative; overflow: hidden; } #ui .popup.full .btn.ps-claim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: ps-shine 2.4s ease-in-out infinite; } @keyframes ps-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } #ui .popup.full .btn.ps-buy { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 16px; color: #2b2210; background: linear-gradient(#f8ebc2, #d9b664 58%, #bf9443); box-shadow: inset 0 1px rgba(255, 255, 255, .65), 0 0 0 1px rgba(110, 80, 20, .55), 0 2px 6px rgba(0, 0, 0, .4), 0 0 12px rgba(240, 213, 140, .35); } #ui .ps-buy b { font-weight: 900; } #ui .ps-buy small { padding-left: 8px; border-left: 1px solid rgba(43, 34, 16, .3); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; } #ui .ps-x { position: absolute; right: -6px; top: -11px; height: 16px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 16px; color: #fff; background: linear-gradient(#e0533f, #a92d22); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .5); animation: ps-x 1.047s ease-in-out infinite alternate; } @keyframes ps-x { from { transform: translateY(0); } to { transform: translateY(-2px); } } .gfx-low #ui .ps-x, .gfx-low #ui .btn.ps-claim::after { animation: none; } .gfx-low .ps-fly { filter: none; } #ui .ev-pass { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; } /* 패스(10-23 다섯 번째) = 사용자가 고른 원신 기행 · 붕괴: 스타레일 무명의 공훈("이 두 개가 가장 괜찮아 보이네"). 틀: [위 = 큰 단계 고리 + (시즌 남은 시간 | 값) + 얇은 금 막대 + 다음 단계] [가운데 = 짙은 테 한 판 안에 밝은 세로 열 띠] [아래 = 안내 | 모두 받기 · 프리미엄 열기(금)] */ #ui .ev-pass-head { display: flex; align-items: center; gap: 14px; padding: 0 4px; } /* 단계 고리 = 스타레일 왼쪽 위 레벨 고리(겹 테 52): 짙은 판 + 금 안 테 + 바깥 옅은 금 테 */ #ui .ev-lv { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 22px; font-weight: 900; color: #fbf6e8; font-variant-numeric: tabular-nums; background: radial-gradient(circle at 50% 40%, #3a3d42, #1d2023); box-shadow: inset 0 0 0 1.5px #c9a24f, inset 0 0 0 4px rgba(0, 0, 0, .35), 0 0 0 3px rgba(0, 0, 0, .4), 0 0 0 4px rgba(201, 162, 79, .55), 0 0 14px rgba(240, 213, 140, .2); } #ui .ev-pass-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } /* 막대 위 = 왼쪽 남은 시간(스타레일 "Ends in 16d") · 오른쪽 값(580/800), 막대 아래 오른쪽 = 다음 단계(스타레일 주간 한도 자리) */ #ui .ev-pass-prog-t { display: flex; align-items: baseline; gap: 10px; } #ui .ev-pass-prog-t b { margin-left: auto; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; } #ui .ev-clock { font-size: 12px; font-weight: 800; color: #e8e6df; font-variant-numeric: tabular-nums; white-space: nowrap; } #ui .ev-pass-prog > .ev-sub { align-self: flex-end; font-size: 11px; } /* 단 칩(gpass3 11-05 — 성장 패스 · 성장 패키지 I · II · III): 머리 줄 오른쪽 글자 폭 알약 28, 지금 단 = 금, 잠긴 단 = 흐림, 받을 것 = 붉은 점 */ #ui .ps-tiers { flex: none; display: flex; gap: 6px; } #ui .ps-tier { position: relative; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 900; white-space: nowrap; color: #e8e6df; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .12s; } #ui .ps-tier:active { transform: scale(.94); } #ui .ps-tier.on { color: #2b2210; background: linear-gradient(#f0d58c, #c9a24f); box-shadow: 0 0 10px rgba(240, 213, 140, .35); } #ui .ps-tier.lock { opacity: .5; } #ui .ps-tier.ready::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #e5483f; box-shadow: 0 0 0 1.5px #131417; } #ui .ev-pass-prog .ev-meter-bar { height: 3px; } #ui .ev-pass-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; } #ui .ev-pass-bar em { font-style: normal; font-weight: 800; color: #f0d58c; } #ui .ev-pass-act { flex: none; display: flex; align-items: center; gap: 8px; } #ui .ev-badge { height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 900; font-style: normal; line-height: 24px; white-space: nowrap; color: #2b2210; background: linear-gradient(#f0d58c, #c9a24f); } #ui .ev-badge.soft { color: #f0d58c; background: rgba(232, 201, 121, .16); box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .5); } /* 칸 줄 판 = 스타레일 짙은 테 한 판(둥근 10) — 왼쪽 짙은 줄 이름표 열 + 밝은 세로 열 띠(칸마다 상자 없음, 열 사이 얇은 선) */ #ui .ev-track-box { width: 100%; display: flex; border-radius: 10px; overflow: hidden; background: #131417; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(0, 0, 0, .45); } /* 줄 이름표 76 = 스타레일 무명의 선물 · 무명의 영광: 흰 선 아이콘 고리 34 + 이름, 프리미엄 = 금 고리 · 금 글, 잠기면 고리 오른쪽 아래 자물쇠 */ #ui .ev-lanes { flex: none; width: 76px; display: flex; flex-direction: column; padding-top: 26px; background: #0f1012; } #ui .ev-lanes b { position: relative; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; font-size: 11px; font-weight: 900; word-break: keep-all; color: #e8e6df; } #ui .ev-lanes b + b { border-top: 1px dashed rgba(255, 255, 255, .14); box-sizing: border-box; } #ui .ev-lane-i { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); } #ui .ev-lane-i::after { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: url(../assets/icons/empty-box.png) center / contain no-repeat; mask: url(../assets/icons/empty-box.png) center / contain no-repeat; } #ui .ev-lanes b.prem { color: #f0d58c; } #ui .ev-lanes b.prem .ev-lane-i { box-shadow: inset 0 0 0 1.5px #c9a24f, 0 0 10px rgba(240, 213, 140, .25); background: radial-gradient(circle at 50% 40%, rgba(240, 213, 140, .22), rgba(240, 213, 140, .04)); } #ui .ev-lanes b.prem .ev-lane-i::after { -webkit-mask-image: url(../assets/icons/menu-pass.png); mask-image: url(../assets/icons/menu-pass.png); } /* 자물쇠 = 스타레일 칸 오른쪽 위 짙은 작은 판 + 흰 자물쇠 */ #ui .ev-lanes b.lock .ev-lane-i::before, #ui .ev-cell.lock::before, #ui .ps-lock-off { content: ""; position: absolute; z-index: 2; width: 15px; height: 15px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); background: #2a2b2f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 5.2V3.8a2 2 0 0 1 4 0v1.4' fill='none' stroke='white' stroke-width='1.4'/%3E%3Crect x='2.5' y='5' width='7' height='5.5' rx='1.2' fill='white'/%3E%3C/svg%3E") center / 10px no-repeat; } #ui .ev-lanes b.lock .ev-lane-i::before { right: -5px; bottom: -3px; } #ui .ev-cell.lock::before { right: 6px; top: 6px; } #ui .ev-track-box.pkg .ev-lanes b { height: 96px; } #ui .ev-track { position: relative; flex: 1; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; } /* 열 = 최소 76 에서 남는 폭을 나눠 가진다(단계가 적어도 줄이 판 끝까지). 바탕 = 스타레일 밝은 회색 띠: 머리 #c4c2ba · 무료 #d9d8d2 · 프리미엄 #e8e7e2(무료와 프리미엄 사이 점선) */ #ui .ev-col { flex: 1 0 76px; min-width: 76px; display: flex; flex-direction: column; box-shadow: inset -1px 0 rgba(0, 0, 0, .16); animation: fx-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(min(var(--i, 0), 10) * .05s); } #ui .ev-at { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #5b5953; white-space: nowrap; background: #c4c2ba; } #ui .ev-col.reach .ev-at { color: #2c2a26; } #ui .ev-cell { position: relative; height: 78px; display: flex; align-items: center; justify-content: center; background: #d9d8d2; } #ui .ev-cell.prem { background: linear-gradient(180deg, #f1e7cc, #e5d4a8); } #ui .ev-cell + .ev-cell.prem { border-top: 1px dashed rgba(0, 0, 0, .2); box-sizing: border-box; } /* 지금 단계 열 = 스타레일 Lv.31 처럼 열 전체 따뜻한 크림 */ #ui .ev-col.cur .ev-at { color: #5a3d0c; background: #e6c98f; } #ui .ev-col.cur .ev-cell { background: #efdcb6; } #ui .ev-col.cur .ev-cell.prem { background: linear-gradient(180deg, #f8eccc, #efd9a6); } #ui .ev-cell .ev-slots { --s: 50px; } #ui .ev-cell .ev-slots.n2 { --s: 36px; gap: 3px; } #ui .ev-cell .ev-slots.n3 { --s: 24px; gap: 2px; } #ui .ev-cell .ev-slots .ev-slot { --s: inherit; } #ui .ev-cell .ev-slots.n2 .ev-n, #ui .ev-cell .ev-slots.n3 .ev-n { font-size: 10px; right: 1px; } /* 받을 칸 = 금 안 테 맥박(밝은 띠 위라 짙은 금), 받은 칸 = 옅게 + 체크, 잠긴 칸 = 그대로 보이고 자물쇠만(스타레일) */ #ui .ev-cell.can, #ui .ev-col.can .ev-cell { animation: ev-can-l 1.047s ease-in-out infinite alternate; } @keyframes ev-can-l { from { box-shadow: inset 0 0 0 2px #d9a24a; } to { box-shadow: inset 0 0 0 2px #b97a17, inset 0 0 12px rgba(217, 154, 43, .55); } } #ui .ev-cell.got .ev-slots, #ui .ev-col.got .ev-cell .ev-slots { opacity: .55; filter: saturate(.6); } #ui .ev-cell.lock .ev-slots { filter: brightness(.82) saturate(.75); } /* 최종 열 = 원신 Lv.10 · 스타레일 Lv.40: 오른쪽 끝에 붙어 있음(끌어도 늘 보인다) · 크림 금 바탕 · 왼쪽 금 선 + 그림자, 프리미엄 칸 아래 "최종 보상" 꼬리표 */ #ui .ev-col.last { position: sticky; right: 0; z-index: 3; box-shadow: inset 2px 0 #c9a24f, -6px 0 12px rgba(0, 0, 0, .35); } #ui .ev-col.last .ev-at { color: #3a2a08; background: linear-gradient(180deg, #f6e7b8, #d9b766); } #ui .ev-col.last .ev-cell { background: #f1e5c6; } #ui .ev-col.last .ev-cell.prem { background: #f7efda; align-items: flex-start; padding-top: 6px; } /* 최종 열 = 보상 3칸(대형 보상)이라 다른 열보다 넓게 116 · 칸 32(24 면 그림이 안 읽힘) */ #ui .ev-col.last { flex: 0 0 116px; min-width: 116px; } #ui .ev-col.last .ev-cell .ev-slots.n3 { --s: 32px; gap: 3px; } #ui .ev-col.last .ev-cell .ev-slots.n2 { --s: 40px; } /* 보상 4칸(gpass3 성장 패키지 II · III Lv100 · 160 · 200): 한 줄 24 — 최종 열 116 안에 들어감 */ #ui .ev-cell .ev-slots.n4, #ui .ev-col.last .ev-cell .ev-slots.n4 { --s: 24px; gap: 2px; } #ui .ev-cell .ev-slots.n4 .ev-n { font-size: 10px; right: 1px; } #ui .ev-col.last .ev-cell.prem .ev-slots { margin-top: 16px; } /* 칸 위 = 자물쇠(위 6 · 15) 아래 22 부터, 칸 아래 54 < 꼬리표 61 */ #ui .ev-last-t { position: absolute; z-index: 2; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 1px 7px; border-radius: 7px; font-size: 10px; font-style: normal; font-weight: 900; line-height: 13px; white-space: nowrap; color: #fbf6e8; background: #6b5320; } #ui .ev-track.pkg .ev-cell { height: 96px; } #ui .ev-track.pkg .ev-col { flex-basis: 120px; } /* 작은 팝업 판 = 어두운 둥근 판 + 네 모서리 문양. 판 결 = 경매장 물품 정보 au-subw(14-auction: #25292b → #1b1e20 · 둥근 12 · 1px 밝은 테), 대상 = 크림 나인패치 panel.webp 를 쓰던 창(설정 · 우편 · 문의 · 프로필 · 구매 · 확인 · 광고 · 길드 딸린 창 · 파티/길드 초대). 모서리 = Codex 벡터 문양(assets/ui/popup-corner-*.png, 흰 그림 → 마스크로 칠). 안쪽 조각(줄 · 칸 · 입력 · 단추 · 탭 · 글자색) = 01-popup 전체화면 창과 같은 값(밝은 반투명 둥근 줄 · 글자 폭 알약 · 어두운 알약 탭 줄 · 등급색 = 경매장 값). 창 크기 · 배치는 그대로. 마지막 조각이라 각 창 파일의 크림 값을 같은 무게 선택자로 덮는다(.popup.full · 받음 창 got · 이미 어두운 au-subw · scr · ts-buy 는 제외). */ /* 판(테 · 둥근 · 바탕 · 그림자 · 모서리 문양)은 경매장 상세 · 확인 창(au-subw)도 같이 받는다— au-subw 가 판 값을 따로 적으면 공통 판이 바뀔 때 어긋난다. 여백 · 안쪽 조각(단추 · 탭 · 칸)은 au-subw 제외 그대로 — 경매장 창 값(14-auction). */ #ui .popup:not(.full, .got, .scr, .ts-buy), #ui .party-invite { --ink: #f2f0e7; --ink-soft: #9a9d98; --corner: #4d4944; border: 0; border-image: none; border-radius: 12px; background: linear-gradient(#25292b, #1b1e20); color: var(--ink); filter: none; box-shadow: 0 0 0 1.5px rgba(8, 9, 10, .85), 0 14px 32px rgba(0, 0, 0, .6); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy), #ui .party-invite { padding: 20px 22px 22px; } /* 모서리 문양 = 르네상스 아칸서스 소용돌이 44 + 네 변 가는 띠(문양 그림 안 곧은 띠와 같은 자리 · 같은 진하기 1px 로 네 모서리를 잇는다). 참고 = .local/tmp/ref-corner/shots/notes.md(Raid · Epic Seven · Summoners War · Wild Rift · Watcher of Realms: 어두운 판 + 1~3px 선 + 작은 모서리 장식). 문양 층은 판 밖 inset -2.5(띠가 판 안쪽 약 1.5) · 판 모양(둥근 12)으로 자름 · 판 끝선 1.5 안쪽(inset 4 round 10.5)까지만(짧은 창은 판 높이 36%까지). 한 겹에 마스크 여덟 장 */ #ui .popup:not(.full, .got, .scr, .ts-buy)::after, #ui .party-invite::after { content: ""; position: absolute; inset: -2.5px; clip-path: inset(4px round 10.5px); z-index: 1; pointer-events: none; background: var(--corner); opacity: .7; -webkit-mask: url(../assets/ui/popup-corner-tl.png) left top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-tr.png) right top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-bl.png) left bottom / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-br.png) right bottom / auto min(44px, 36%) no-repeat, linear-gradient(#000 0 0) left 4px top 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px bottom 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px top 4px / 1px calc(100% - 8px) no-repeat, linear-gradient(#000 0 0) right 4px top 4px / 1px calc(100% - 8px) no-repeat; mask: url(../assets/ui/popup-corner-tl.png) left top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-tr.png) right top / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-bl.png) left bottom / auto min(44px, 36%) no-repeat, url(../assets/ui/popup-corner-br.png) right bottom / auto min(44px, 36%) no-repeat, linear-gradient(#000 0 0) left 4px top 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px bottom 4px / calc(100% - 8px) 1px no-repeat, linear-gradient(#000 0 0) left 4px top 4px / 1px calc(100% - 8px) no-repeat, linear-gradient(#000 0 0) right 4px top 4px / 1px calc(100% - 8px) no-repeat; } #ui .inquiry-dim.kb .popup { padding: 10px 12px 12px; } /* 키보드가 덮을 때(전: 나인패치 테 14) */ #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .popup-head { border-bottom: 1px solid rgba(255, 255, 255, .1); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .close, #ui .party-invite .close { border: 0; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .close:active { background: rgba(255, 255, 255, .18); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .win-wallet .w-gold { color: #e8c979; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .win-wallet .w-diamond { color: #8fc6ff; } /* 단추 = 01-popup 전체화면 알약(기본 베이지 · gold = 청록 결정 · danger = 적갈 · plain = 회색 반투명). 폭 고정(mail-row 72 · inq-foot 150 · min-width)은 각 창 값 그대로 */ #ui :is(.popup:not(.full, .got, .au-subw, .scr, .ts-buy), .party-invite) .btn { min-height: 28px; padding: 0 14px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } #ui :is(.popup:not(.full, .got, .au-subw, .scr, .ts-buy), .party-invite) .btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui :is(.popup:not(.full, .got, .au-subw, .scr, .ts-buy), .party-invite) .btn.danger { background: linear-gradient(#a64646, #742c2c); color: #fff; } #ui :is(.popup:not(.full, .got, .au-subw, .scr, .ts-buy), .party-invite) .btn.plain { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui :is(.popup:not(.full, .got, .au-subw, .scr, .ts-buy), .party-invite) .btn.off { filter: grayscale(1); opacity: .45; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .btn.inq-send.busy.off { filter: none; opacity: 1; } /* 탭 = 어두운 알약 줄 + 고른 탭만 베이지 알약(01-popup .popup.full .tabs — 3개 이하라 글자 폭) */ #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .tab { flex: none; min-width: 72px; height: 28px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font-size: 13px; box-shadow: none; transition: background .15s, color .15s; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .tab.on { background: linear-gradient(#e6decd, #c7bba3); color: #26221c; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* 설정 · 우편 · 문의(02-sheet-settings): 크림 칸 → 밝은 반투명 둥근 줄, 들어간 판 → 어두운 판, 입력 → 어두운 칸 */ #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .sheet-body, #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .inq-shots-row { border: 0; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) :is(.account-box, .toggle-row) { border: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .btn.set-btn { min-height: 0; height: 32px; padding: 0 6px 0 4px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: var(--ink); font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .btn.set-btn.risk { background: rgba(166, 70, 70, .22); color: #ff9b85; box-shadow: inset 0 0 0 1px rgba(180, 102, 77, .45); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .mail-row { min-height: 66px; padding: 7px 12px 7px 8px; border: 0; border-image: none; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .mail-icon { border: 0; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) :is(.mail-text .bad, .inq-count.bad, .buy-lines, .buy-note) { color: #ff9b85; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .toggle { border: 0; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .toggle.on { background: linear-gradient(#83c3bf, #548f8c); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .toggle .t-off { color: var(--ink-soft); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .lang-chip { border: 0; background: rgba(255, 255, 255, .07); color: var(--ink-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .lang-chip.on { background: linear-gradient(#83c3bf, #548f8c); color: #fff; box-shadow: none; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) :is(input, textarea, .inq-subject, .inq-text, .gd-field) { border: 0; background: rgba(0, 0, 0, .35); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) :is(input, textarea, .gd-field):focus { outline: none; box-shadow: inset 0 0 0 1px #e6decd, 0 0 0 3px rgba(230, 222, 205, .15); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) :is(input, textarea)::placeholder { color: #7d817c; opacity: 1; } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .inq-shot { border: 0; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .inq-add { border: 1px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); } #ui .popup:not(.full, .got, .au-subw, .scr, .ts-buy) .inq-del { border: 0; background: linear-gradient(#a64646, #742c2c); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* 구매 판(07-list-text): 장비 칸 = 등급색 그라데이션 네모(경매장 au-tile 값), 이름 = 경매장 au-name 등급색 */ #ui .popup.buy.gear .buy-cell { border: 2px solid color-mix(in srgb, var(--ac) 80%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 55%, #1d2124), color-mix(in srgb, var(--ac) 18%, #121517)); box-shadow: 0 0 10px color-mix(in srgb, var(--ac) 45%, transparent); } #ui .popup.buy.gear .buy-art.g-common { --ac: #6b7073; } #ui .popup.buy.gear .buy-art.g-rare { --ac: #3f8fe0; } #ui .popup.buy.gear .buy-art.g-epic { --ac: #9a5cd0; } #ui .popup.buy.gear .buy-art.g-unique { --ac: #e0a020; } #ui .popup.buy.gear .buy-art.g-legendary { --ac: #e2583a; } #ui .popup.buy.gear .buy-name.g-rare { color: #9fd0ff; } #ui .popup.buy.gear .buy-name.g-epic { color: #dcb6ff; } #ui .popup.buy.gear .buy-name.g-unique { color: #ffe08a; } #ui .popup.buy.gear .buy-name.g-legendary { color: #ffb08a; } #ui .popup.buy .buy-stat.odd { background: rgba(255, 255, 255, .06); } #ui .popup.buy .buy-stat b { color: #7fd88a; } #ui .popup.buy .buy-bonus { color: #f0b45a; } /* 프로필(10-social): 외형 판 · 물품 글 = 어두운 판, 장비 칸 = 어두운 둥근 칸 + 등급색 */ #ui .popup.profile :is(.pf-look, .pf-item) { border: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.profile .pf-look { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 70%); } #ui .popup.profile .pf-where { color: #7fd88a; } #ui .popup.profile .pf-cell { --gc: #6b7073; border: 2px solid rgba(255, 255, 255, .12); border-image: none; border-radius: 8px; background: rgba(0, 0, 0, .3); } #ui .popup.profile .pf-cell:is(.g-rare, .g-epic, .g-unique, .g-legendary) { border-color: color-mix(in srgb, var(--gc) 80%, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 55%, #1d2124), color-mix(in srgb, var(--gc) 18%, #121517)); } #ui .popup.profile .pf-cell.g-rare { --gc: #3f8fe0; } #ui .popup.profile .pf-cell.g-epic { --gc: #9a5cd0; } #ui .popup.profile .pf-cell.g-unique { --gc: #e0a020; } #ui .popup.profile .pf-cell.g-legendary { --gc: #e2583a; } #ui .popup.profile :is(.pf-slot, .pf-item .item-hint) { color: var(--ink-soft); } #ui .popup.profile .pf-item b.g-rare { color: #9fd0ff; } #ui .popup.profile .pf-item b.g-epic { color: #dcb6ff; } #ui .popup.profile .pf-item b.g-unique { color: #ffe08a; } #ui .popup.profile .pf-item b.g-legendary { color: #ffb08a; } /* 길드 딸린 창(13-guild .gd-sub): 본 창 13e-guild-polish 의 어두운 값과 같게 — 줄 · 카드 · 단추 · 작은 탭 · 글자색 */ #ui .popup.gd-sub .gd-panel { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.gd-sub :is(.gd-row, .gd-card, .gd-cell) { border: 0; border-image: none; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } #ui .popup.gd-sub .gd-row { margin-bottom: 4px; padding: 0 12px 0 14px; } #ui .popup.gd-sub .btn.gd-btn { width: auto; min-width: 0; min-height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none; opacity: 1; font-size: 12.5px; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); } #ui .popup.gd-sub .btn.gd-btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; } #ui .popup.gd-sub .btn.gd-btn.danger { background: linear-gradient(#a64646, #742c2c); color: #fff; } #ui .popup.gd-sub .btn.gd-btn:is(.plain, .ghost) { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #ui .popup.gd-sub .btn.gd-btn.off { filter: grayscale(1); opacity: .45; } #ui .popup.gd-sub .btn.gd-btn.gc-go { width: auto; align-self: center; min-height: 34px; padding: 0 28px; } /* 창설 = 큰 결정 단추도 글자 폭 */ #ui .popup.gd-sub .gd-subtabs { gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.gd-sub .gd-subtab { width: auto; min-width: 60px; padding: 0 14px; border-radius: 999px; color: var(--ink-soft); background: none; box-shadow: none; } #ui .popup.gd-sub .gd-subtab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.gd-sub :is(.muted, .dim, .gd-dim, .gd-find-right, .gpost-by, .gc-label, .gc-have, .gc-notice, .greward-hint, .gd-rank-pts small) { color: var(--ink-soft); } #ui .popup.gd-sub .gold { color: #e8c979; } #ui .popup.gd-sub .good { color: #7fd88a; } #ui .popup.gd-sub :is(.gd-warn, .gc-notice.warn) { color: #ff9b85; } /* 파티 · 길드 초대 알림(10-social .party-invite — 같은 판) */ #ui .party-invite p { color: var(--ink); } /* 길드 딸린 창 머리 · 문장 편집기(13e-guild-polish 본 창 값 그대로): 크림 판 밑줄 금 메달 · 크림 탭 · 크림 고른 칸 → 어두운 결 */ #ui .popup.gd-sub > .gd-head { border-bottom: 1px solid rgba(255, 255, 255, .1); } #ui .popup.gd-sub > .gd-head::after { display: none; } #ui .popup.gd-sub .gd-headline { color: #c9ccc6; } #ui .popup.gd-sub .gd-headline::before { background: #e8c979; } #ui .popup.gd-sub .em-left { border-radius: 10px; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .popup.gd-sub .em-tabs { width: fit-content; max-width: 100%; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } #ui .popup.gd-sub .em-tab { flex: none; min-width: 64px; padding: 0 16px; height: 26px; border-radius: 999px; color: var(--ink-soft); background: none; box-shadow: none; transition: background .15s, color .15s; } #ui .popup.gd-sub .em-tab.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } #ui .popup.gd-sub .em-cell { border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #ui .popup.gd-sub .em-cell.on { background: rgba(230, 222, 205, .16); box-shadow: inset 0 0 0 2px #e6decd, 0 0 8px rgba(230, 222, 205, .25); } #ui .popup.gd-sub .em-cell.locked i { color: #ff9b85; } #ui .popup.gd-sub :is(.em-note, .gd-icon-foot small) { color: var(--ink-soft); } #ui .popup.gd-sub :is(.em-sv, .em-hue, .em-cur) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } /* 설정 창 촘촘히: 폭 330 · 높이 = 내용(몸 높이는 가장 긴 탭 기준 고정 — 탭을 바꿔도 창이 안 뛴다). 제목 15 · 탭 24/11.5 · 줄 34/12 · 단추 28/11.5 · 아이콘 18~20 · 계정 글 10.5 · 언어 칩 22/10.5. 들어간 판(sheet-body)은 판 없이 줄만 */ #ui .popup.settings { width: 330px; height: auto; padding: 16px 18px 18px; } #ui .popup.settings .popup-head { padding: 0 0 6px; margin-bottom: 8px; } #ui .popup.settings .popup-head h2 { font-size: 15px; } #ui .popup.settings .tabs { margin-bottom: 8px; } #ui .popup.settings .stabs .tab { min-width: 58px; height: 24px; padding: 0 12px; font-size: 11.5px; line-height: 24px; white-space: nowrap; } #ui .popup.settings .sheet-body { flex: none; height: 172px; padding: 0; background: none; box-shadow: none; } #ui .popup.settings .user-panel { gap: 5px; padding: 0; } #ui .popup.settings .set-grid { gap: 5px; } #ui .popup.settings .btn.set-btn { height: 28px; padding: 0 6px 0 5px; gap: 5px; font-size: 11.5px; } #ui .popup.settings .btn.set-btn img { width: 18px; height: 18px; } #ui .popup.settings .btn.set-btn span { line-height: 12px; } #ui .popup.settings .account-box { padding: 5px 9px; font-size: 10.5px; line-height: 13px; gap: 1px; } #ui .popup.settings .toggle-row { min-height: 34px; padding: 0 9px; margin-bottom: 5px; border-radius: 8px; font-size: 12px; } #ui .popup.settings .vol-row { gap: 6px; } #ui .popup.settings .vol-ico { width: 20px; height: 20px; } #ui .popup.settings .vol-name { width: 34px; } #ui .popup.settings .vol-bar { height: 26px; margin: 0 8px; } #ui .popup.settings .vol-knob { right: -11px; width: 22px; height: 22px; margin-top: -11px; } #ui .popup.settings .vol-num { width: 22px; font-size: 11px; } #ui .popup.settings .toggle-row.lang-row { gap: 5px; padding: 6px 7px 7px; } #ui .popup.settings .lang-chip { height: 22px; border-radius: 6px; font-size: 10.5px; } #ui .popup.settings .version { margin-top: 6px; font-size: 10.5px; } #ui .popup.settings .toggle { width: 64px; height: 24px; font-size: 10.5px; } #ui .popup.settings .toggle::before, #ui .popup.settings .toggle::after { width: 18px; height: 18px; top: 3px; } #ui .popup.settings .toggle::before { left: 43px; } #ui .popup.settings .toggle::after { left: 3px; } #ui .popup.settings .toggle span { top: 5px; } #ui .popup.settings .toggle .t-on { left: 9px; } #ui .popup.settings .toggle .t-off { right: 8px; } /* 조작 탭(09-controls 크림 칸) = 위 줄과 같은 어두운 결 */ #ui .popup.settings .ctl-edit-all { min-height: 28px; margin-bottom: 5px; font-size: 11.5px; } #ui .popup.settings .ctl-panel .toggle-row { margin-bottom: 5px; } #ui .popup.settings .ctl-mode { gap: 5px; padding: 6px 7px 7px; } #ui .popup.settings .ctl-seg { gap: 5px; } #ui .popup.settings .ctl-seg button { height: 24px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--ink-soft); font-size: 11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #ui .popup.settings .ctl-seg button.on { background: linear-gradient(#83c3bf, #548f8c); color: #fff; box-shadow: none; }