/* ========================================================= Game UI — Sticker Theme (CLEAN FINAL) 사용법: ========================================================= */ /* ---------- 베이스 ---------- */ * { box-sizing: border-box; } /* ---------- 팔레트 & 공통 변수 ---------- */ :root{ --content-max: 1100px; --content-pad: 16px; /* pudding cursor (emoji svg) */ --pudding-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='16' y='24' font-size='28' text-anchor='middle'%3E%F0%9F%8D%AE%3C/text%3E%3C/svg%3E"); } body.theme-sticker{ /* colors */ --st-ink: #4b2e1a; --st-line: #6b4023; --st-bg: #f7dca1; --st-paper: #fff0c9; --st-aqua: #cfe9e6; --st-orange: #f6a565; --st-rose: #f07c68; --st-shadow: rgba(0,0,0,.08); /* grid background */ --grid-size: 56px; --grid-thin: rgba(107,64,35,.10); --grid-bold: rgba(107,64,35,.16); /* leaderboard */ --row-h: 36px; --visible-rows: 10; --fade-rows: 2; /* gallery type scale */ --gallery-title-size: 26px; --gallery-caption-size: 12px; margin:0; font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--st-ink); background: repeating-linear-gradient( 0deg, transparent 0 calc(var(--grid-size) - 1px), var(--grid-thin) calc(var(--grid-size) - 1px) var(--grid-size) ), repeating-linear-gradient( 90deg, transparent 0 calc(var(--grid-size) - 1px), var(--grid-thin) calc(var(--grid-size) - 1px) var(--grid-size) ), repeating-linear-gradient( 0deg, transparent 0 calc(var(--grid-size)*4 - 2px), var(--grid-bold) calc(var(--grid-size)*4 - 2px) calc(var(--grid-size)*4) ), repeating-linear-gradient( 90deg, transparent 0 calc(var(--grid-size)*4 - 2px), var(--grid-bold) calc(var(--grid-size)*4 - 2px) calc(var(--grid-size)*4) ), var(--st-bg); } @media (max-width:900px){ body.theme-sticker{ --grid-size:42px; } } /* ---------- 헤더 ---------- */ body.theme-sticker .site-header{ position:sticky; top:0; z-index:1000; background:var(--st-paper); border:2px solid var(--st-line); border-radius:14px; box-shadow:0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow); margin:10px 0 6px; /* 좌우 0으로 컨텐츠 그리드에 정렬 */ } body.theme-sticker .site-header .container{ max-width: var(--content-max); margin: 0 auto; padding:12px var(--content-pad); display:flex; align-items:center; gap:16px; } body.theme-sticker .logo, body.theme-sticker .nav a{ color:var(--st-ink); text-decoration:none; font-weight:800; } body.theme-sticker .nav{ margin-left:auto; display:flex; gap:18px; } body.theme-sticker .nav a:hover{ background:rgba(0,0,0,.06); border-radius:8px; padding:4px 6px; } /* ---------- 레이아웃 ---------- */ body.theme-sticker .wrap{ max-width:var(--content-max); margin:0 auto 40px; padding:0 var(--content-pad); } body.theme-sticker .row{ display:flex; gap:10px; } body.theme-sticker .row>section:first-child{ flex:1 } body.theme-sticker .row>section:last-child{ flex:2 } @media (max-width:900px){ body.theme-sticker .row{ flex-direction:column; }} /* ---------- 카드/패널 ---------- */ body.theme-sticker .panel, body.theme-sticker .controls, body.theme-sticker .modal-card, body.theme-sticker .gal-card{ background:var(--st-paper); border:2px solid var(--st-line); border-radius:14px; box-shadow:0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow); } body.theme-sticker .panel{ padding:12px; min-height:380px; position:relative; overflow:hidden; } body.theme-sticker .mount{ width:100%; height:340px; } body.theme-sticker .hint{ font-size:12px; color:#7b5a3f; } /* 타이틀 바 */ body.theme-sticker .panel-title{ display:flex; align-items:center; gap:8px; background:var(--st-aqua); color:var(--st-ink); padding:6px 10px; margin:-4px -4px 10px; border:2px solid var(--st-line); border-radius:10px; font-weight:800; box-shadow:inset 0 -2px 0 rgba(0,0,0,.05); } body.theme-sticker .panel-title::before{ content:""; width:42px; height:10px; border-radius:999px; background: radial-gradient(circle at 8px 50%, #ff6b6b 6px, transparent 7px), radial-gradient(circle at 21px 50%, #ffd166 6px, transparent 7px), radial-gradient(circle at 34px 50%, #06d6a0 6px, transparent 7px); } /* 컨트롤 바 */ body.theme-sticker .controls{ padding:12px; display:flex; gap:10px; } /* ---------- 버튼 공통 ---------- */ body.theme-sticker .btn, body.theme-sticker .upload-btn{ appearance:none; border:2px solid var(--st-line); border-radius:14px; padding:10px 14px; background:#ffe7c4; color:var(--st-ink); font-weight:700; cursor:pointer; box-shadow:0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow); transition:transform .03s ease, background .15s ease, color .15s ease; } body.theme-sticker .btn:hover, body.theme-sticker .upload-btn:hover{ background:var(--st-orange); color:#fff; } body.theme-sticker .btn:active, body.theme-sticker .upload-btn:active{ transform:translateY(1px); } body.theme-sticker .btn[disabled]{ opacity:.6; cursor:not-allowed; } body.theme-sticker .btn.outline{ background:var(--st-aqua); color:var(--st-ink); } /* 인트로 상단 5버튼 */ body.theme-sticker .intro-buttons .btn{ background:#ffe7c4; color:var(--st-ink); border:2px solid var(--st-line); } body.theme-sticker .intro-buttons .btn.outline{ background:var(--st-aqua); } body.theme-sticker .intro-buttons .btn:hover:not([disabled]){ background:#f5c987 !important; color:var(--st-ink) !important; } body.theme-sticker .intro-buttons .btn.outline:hover:not([disabled]){ background:#b7d6d2 !important; color:var(--st-ink) !important; } /* ---------- 모달 ---------- */ body.theme-sticker .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2) } body.theme-sticker .modal.hidden{ display:none } body.theme-sticker .modal-card{ width:min(92vw,420px); padding:20px; } body.theme-sticker .modal .upload-btn.selected{ background:var(--st-orange); color:#fff; border-color:var(--st-line); } body.theme-sticker .modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; } /* 업로드 모달(#uploadModal) — 인라인 스타일 덮기 */ body.theme-sticker #uploadModal{ background: rgba(0,0,0,.2) !important; z-index: 9999 !important; } body.theme-sticker #uploadModal > div{ background: var(--st-paper) !important; color: var(--st-ink) !important; border: 2px solid var(--st-line) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow) !important; width: min(92vw, 360px) !important; padding: 16px 18px !important; } body.theme-sticker #uploadModal h3{ margin:0 0 12px !important; font-size:18px !important; font-weight:800 !important; color:var(--st-ink) !important; } body.theme-sticker #uploadModal label{ display:block !important; font-size:14px !important; margin:0 0 6px !important; color:var(--st-ink) !important; } body.theme-sticker #uploadModal input[type="text"], body.theme-sticker #uploadModal input[type="password"]{ width:100% !important; padding:8px 10px !important; margin:0 0 12px !important; background:#fffdf3 !important; color:var(--st-ink) !important; border:2px solid var(--st-line) !important; border-radius:12px !important; } body.theme-sticker #uploadModal input::placeholder{ color: rgba(75,46,26,.55) !important; } body.theme-sticker #uploadModal button{ appearance:none !important; border:2px solid var(--st-line) !important; border-radius:14px !important; padding:8px 12px !important; background:#ffe7c4 !important; color:var(--st-ink) !important; font-weight:800 !important; box-shadow:0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow) !important; transition: background .15s ease, transform .03s ease !important; } body.theme-sticker #uploadModal button:hover{ background:var(--st-orange) !important; color:#fff !important; } body.theme-sticker #uploadModal button:active{ transform: translateY(1px) !important; } /* ---------- 녹화 점(전역 최상단) ---------- */ #recDot.rec-dot{ position: fixed !important; top: 14px !important; right: 16px !important; width:12px; height:12px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 3px rgba(240,124,104,.25); z-index:2147483647 !important; pointer-events:none; } @keyframes recblink{ 0%,50%{opacity:1} 100%{opacity:0} } #recDot.rec-dot{ animation: recblink 1s infinite; } #recDot.rec-dot.hidden{ display:none; } /* ---------- 갤러리 ---------- */ body.theme-sticker #gallery{ max-width:var(--content-max); margin:16px auto; padding:0 var(--content-pad); background:none; border:none; box-shadow:none; } body.theme-sticker .gallery-head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px; color:var(--st-ink); } body.theme-sticker .gallery-head .tab, body.theme-sticker .gal-head .tab{ padding:6px 10px; border-radius:10px; border:2px solid var(--st-line); background:#fff9e9; cursor:pointer; color:var(--st-ink); font-weight:700; } body.theme-sticker .gallery-head .tab.active, body.theme-sticker .gal-head .tab.active{ background:var(--st-orange); color:#fff; } body.theme-sticker .gal-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } @media (max-width:900px){ body.theme-sticker .gal-grid{ grid-template-columns:repeat(2,1fr); } } body.theme-sticker .gal-card{ overflow:hidden; border-radius:16px; transition:transform .12s ease; } body.theme-sticker .gal-card:hover{ transform:translateY(-2px); } body.theme-sticker .gal-card img{ width:100%; height:100%; object-fit:cover; display:block; } body.theme-sticker .gal-card .title{ font-size: var(--gallery-caption-size); line-height:1.2; color:var(--st-ink) !important; } body.theme-sticker .gal-title{ font-size: var(--gallery-title-size) !important; font-weight:800; line-height:1.2; color:var(--st-ink) !important; margin-right:12px; } /* ---------- 마퀴 ---------- */ body.theme-sticker .marquee{ overflow:hidden; white-space:nowrap; box-sizing:border-box; background:var(--st-paper); border-top:2px solid var(--st-line); border-bottom:2px solid var(--st-line); margin-bottom:100px; } body.theme-sticker .marquee-inner{ display:inline-block; padding-left:100%; animation:marquee 120s linear infinite; } @keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} } body.theme-sticker .marquee-inner span{ display:inline-block; font-weight:800; font-size:14px; padding:0 1rem; color:var(--st-ink); } /* ---------- 리더보드 ---------- */ body.theme-sticker .rank-row .panel{ min-height:auto; } body.theme-sticker .rank-left{ display:flex; flex-direction:column; gap:6px; padding:12px; position:relative; } body.theme-sticker .rank-left .rank-title{ font-size:24px; font-weight:800; color:var(--st-ink) !important; } body.theme-sticker .rank-left .rank-note{ font-size:12px; color:#7b5a3f; } body.theme-sticker .lb-awards{ display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px dashed rgba(107,64,35,.28); background:transparent; color:var(--st-ink) !important; } body.theme-sticker .lb-head{ display:grid; grid-template-columns:80px 1fr 120px; padding:6px 10px; position:sticky; top:0; z-index:1; background:transparent; border-bottom:1px dashed rgba(107,64,35,.28); font-weight:700; color:var(--st-ink); } body.theme-sticker .lb-head .right{ text-align:right; } body.theme-sticker .lb-body{ position:relative; max-height: calc(var(--row-h) * var(--visible-rows)); overflow: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } body.theme-sticker .lb-body::-webkit-scrollbar{ width:0; height:0; } body.theme-sticker .lb-body::after{ content:""; position:sticky; bottom:0; display:block; height: calc(var(--row-h) * var(--fade-rows)); background: linear-gradient(to bottom, rgba(247,220,161,0), rgba(247,220,161,1) 75%); pointer-events:none; } body.theme-sticker .lb-row{ display:grid; grid-template-columns:80px 1fr 120px; height:var(--row-h); align-items:center; padding:0 10px; border-bottom:1px dashed rgba(107,64,35,.28); } body.theme-sticker .lb-row:hover{ background:rgba(255,231,196,.35); } body.theme-sticker .lb-rank, .lb-score{ font-variant-numeric: tabular-nums; color:var(--st-ink); } body.theme-sticker .lb-score{ text-align:right; } body.theme-sticker .lb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:900px){ body.theme-sticker .lb-head, body.theme-sticker .lb-row{ grid-template-columns:64px 1fr 92px; } } /* ---------- 인트로 텍스트 ---------- */ body.theme-sticker .intro{ max-width:var(--content-max); margin:32px auto 16px; padding:0 var(--content-pad); display:flex; flex-direction:column; gap:12px; } body.theme-sticker .intro-left h2{ font-size:48px; font-weight:800; margin:0 0 24px; letter-spacing:-.5px; word-spacing:-2px; color:var(--st-ink) !important; } body.theme-sticker .intro-left p{ font-size:14px; color:#7b5a3f; } /* ---------- 입력류 ---------- */ body.theme-sticker input[type="text"], body.theme-sticker input[type="number"], body.theme-sticker select{ background:#fffdf3; color:var(--st-ink); padding:8px 10px; border:2px solid var(--st-line); border-radius:12px; } /* ---------- 폰트 통일 ---------- */ body.theme-sticker #scoreboard, body.theme-sticker #scoreboard *, body.theme-sticker #gallery, body.theme-sticker #gallery *{ font-family:"Noto Sans KR", sans-serif !important; } /* ---------- 도트 종이 배경(재사용) ---------- */ body.theme-sticker .dot-paper{ background: radial-gradient(circle at 2px 2px, rgba(107,64,35,.12) 1.5px, transparent 1.5px) 0 0/12px 12px, radial-gradient(circle at 2px 2px, rgba(107,64,35,.06) 1.5px, transparent 1.5px) 6px 6px/12px 12px, var(--st-paper); } body.theme-sticker #scoreboard .rank-left .panel, body.theme-sticker #scoreboard .panel:first-of-type{ background: radial-gradient(circle at 2px 2px, rgba(107,64,35,.12) 1.5px, transparent 1.5px) 0 0/12px 12px, radial-gradient(circle at 2px 2px, rgba(107,64,35,.06) 1.5px, transparent 1.5px) 6px 6px/12px 12px, var(--st-paper); } /* ---------- Awards preview: electric border + crown ---------- */ .lb-electric-wrap{ position:relative; display:inline-block; border-radius:16px; } .lb-electric-wrap>img{ display:block; border-radius:inherit; } .lb-electric-wrap svg{ position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); overflow:visible; pointer-events:none; } .lb-electric-wrap .elec-stroke{ fill:none; stroke:#FFD54A; stroke-width:2; filter: drop-shadow(0 0 4px #ffd54a) drop-shadow(0 0 10px rgba(255,213,74,.75)); } .lb-electric-wrap .crown{ position:absolute; right:-8%; top:-14%; transform: rotate(-12deg); font-size: clamp(18px, 8vw, 40px); text-shadow: 0 1px 0 #7a5a00, 0 0 8px rgba(255,230,0,.95), 0 0 16px rgba(255,230,0,.65); pointer-events:none; } /* ---------- Score upload modal (sticker style) ---------- */ body.theme-sticker #scoreModal{ position: fixed !important; inset: 0 !important; display: grid !important; place-items: center !important; background: rgba(0,0,0,.2) !important; z-index: 9999 !important; } body.theme-sticker #scoreModal.hidden{ display:none !important; } body.theme-sticker #scoreModal .card{ background: var(--st-paper) !important; color: var(--st-ink) !important; border: 2px solid var(--st-line) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow) !important; width: min(92vw, 360px) !important; padding: 16px 18px !important; font-family: "Noto Sans KR", system-ui !important; } body.theme-sticker #scoreModal .head{ display:flex; gap:12px; align-items:center; margin-bottom:8px; } body.theme-sticker #scoreModal .thumb{ width:64px; height:64px; border-radius:10px; object-fit:cover; background:#fff9e9; border:2px solid var(--st-line); } body.theme-sticker #scoreModal h3{ margin:0 0 4px !important; font-size:18px !important; font-weight:800 !important; } body.theme-sticker #scoreModal .sub{ font-size:12px; color:#7b5a3f; } body.theme-sticker #scoreModal input[type="text"]{ width:100% !important; padding:8px 10px !important; margin:10px 0 0 !important; background:#fffdf3 !important; color:var(--st-ink) !important; border:2px solid var(--st-line) !important; border-radius:12px !important; } body.theme-sticker #scoreModal .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; } body.theme-sticker #scoreModal .actions .upload-btn{ appearance:none !important; border:2px solid var(--st-line) !important; border-radius:14px !important; padding:8px 12px !important; background:#ffe7c4 !important; color:var(--st-ink) !important; font-weight:800 !important; box-shadow:0 4px 0 var(--st-line), 0 10px 12px var(--st-shadow) !important; transition: background .15s ease, transform .03s ease !important; } body.theme-sticker #scoreModal .actions .upload-btn:hover{ background:var(--st-orange) !important; color:#fff !important; } body.theme-sticker #scoreModal .actions .upload-btn:active{ transform: translateY(1px) !important; } /* ---------- Recorder modal fine-tune ---------- */ body.theme-sticker #recModal .opt-group{ margin: 0 0 14px; } body.theme-sticker #recModal .opt-group + .opt-group{ margin-top: 20px; } body.theme-sticker #recModal .label{ font-weight:600; margin-bottom: 8px; } body.theme-sticker #recModal .row-buttons{ display:flex; gap:10px; margin-top: 8px; } body.theme-sticker #recModal .opt-desc{ font-size: 14px; line-height: 1.45; color:#7b5a3f; margin: 6px 0 10px; } /* ---------- Global Pudding Cursor (모든 커서 통일) ---------- */ /* blob-cursor가 켜져도 우리 커서가 우선되도록 !important 적용 */ html, body, body *{ cursor: var(--pudding-cursor) 8 8, auto !important; } a, button, .btn, [role="button"], label, input[type="button"], input[type="submit"]{ cursor: var(--pudding-cursor) 8 8, pointer !important; } input[type="text"], input[type="search"], input[type="password"], textarea{ cursor: text !important; } /* blob-cursor DOM 숨김 */ #blobCursor, #blob-cursor, .blob-cursor, .cursor-blob, .cursor-dot, .bc-dot, [data-blob-cursor]{ display:none !important; pointer-events:none !important; } /* has-blob-cursor 클래스가 있어도 강제 오버라이드 */ html.has-blob-cursor, html.has-blob-cursor body, html.has-blob-cursor *{ cursor: var(--pudding-cursor) 8 8, auto !important; } /* src가 .png 를 포함한 이미지가 들어있는 카드만 투명 */ body.theme-sticker .gal-card:has(img[src*=".png"]) { background: transparent !important; }