/* =========================================================== 게임허브 — 공통 스타일 (index / game / advertise / admin 공용) =========================================================== */ :root{ --bg:#f5f6f8; --surface:#fff; --surface-2:#eef0f4; --surface-3:#e4e8ef; --text:#16181d; --text-dim:#5c6270; --line:#dfe3ea; --brand:#2f6df6; --brand-ink:#fff; --accent:#ff6a3d; --ok:#17a673; --warn:#c98a00; --bad:#d64545; --ad-bd:#c9d0dc; --ad-bg:#f0f3f8; --ad-tx:#7b8496; --r:10px; --r-lg:14px; --gap:14px; --maxw:1240px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.05); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#101318; --surface:#171b22; --surface-2:#1f242d; --surface-3:#262d38; --text:#e8eaef; --text-dim:#9aa3b2; --line:#2a303a; --brand:#4a84ff; --accent:#ff7d55; --ok:#2ecc95; --warn:#e5b13a; --bad:#ef6b6b; --ad-bd:#333b47; --ad-bg:#1b2027; --ad-tx:#7f8899; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3); }} :root[data-theme="dark"]{ --bg:#101318; --surface:#171b22; --surface-2:#1f242d; --surface-3:#262d38; --text:#e8eaef; --text-dim:#9aa3b2; --line:#2a303a; --brand:#4a84ff; --accent:#ff7d55; --ok:#2ecc95; --warn:#e5b13a; --bad:#ef6b6b; --ad-bd:#333b47; --ad-bg:#1b2027; --ad-tx:#7f8899; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); /* 레퍼런스와 같은 순서 — 한글 글자 모양을 맞추려면 맑은 고딕이 먼저여야 한다 */ /* 레퍼런스 실측 스택과 글자 그대로 동일하게 맞춘다 (전에는 2·3번째 순서가 뒤바뀌고 뒤쪽이 -apple-system 계열로 달랐다) */ font:14px/1.55 "Malgun Gothic","Apple SD 산돌고딕 Neo","Apple SD Gothic Neo",돋움,Dotum, AppleGothic,Helvetica,sans-serif} img{max-width:100%;display:block} [hidden]{display:none!important} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px} .muted{color:var(--text-dim)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- 헤더 ---------- */ .hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface); border-bottom:1px solid var(--line)} .hd-in{display:flex;align-items:center;gap:12px;height:56px} .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.02em;flex:0 0 auto} .logo i{width:26px;height:26px;border-radius:7px;background:var(--brand);color:var(--brand-ink); display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800} .search{flex:1 1 auto;position:relative;min-width:0} .search input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--line);border-radius:99px; background:var(--surface-2);color:var(--text);font-size:13px} .search svg{position:absolute;left:11px;top:9px;opacity:.5} .hd-act{display:flex;gap:6px;flex:0 0 auto} @media (max-width:700px){ .hd-act .opt{display:none} } /* ---------- 버튼/폼 ---------- */ .btn{display:inline-grid;place-items:center;height:36px;padding:0 13px;border:1px solid var(--line); border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600; cursor:pointer;white-space:nowrap;text-align:center} .btn:hover{background:var(--surface-2)} .btn-pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .btn-pri:hover{filter:brightness(1.06);background:var(--brand)} .btn-danger{background:var(--bad);border-color:var(--bad);color:#fff} .btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:7px} .btn-block{width:100%} .btn[disabled],.btn.off{opacity:.5;cursor:not-allowed} label{display:block;font-size:12px;font-weight:700;color:var(--text-dim);margin-bottom:4px} input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px; background:var(--surface-2);color:var(--text);font:inherit;font-size:13px} textarea{min-height:90px;resize:vertical} .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .form .full{grid-column:1/-1} @media (max-width:680px){ .form{grid-template-columns:1fr} } .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* ---------- 카드 ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)} .card+.card{margin-top:var(--gap)} .card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px; border-bottom:1px solid var(--line);flex-wrap:wrap} .card-hd h2{font-size:15px;font-weight:700} .card-hd .sub{font-size:12px;color:var(--text-dim);font-weight:500} .card-bd{padding:16px} /* ---------- 배지/태그 ---------- */ .badge{font-size:11px;font-weight:800;border-radius:5px;padding:2px 6px;letter-spacing:.02em;white-space:nowrap} .b-ok{background:rgba(23,166,115,.15);color:var(--ok)} .b-chk{background:rgba(201,138,0,.17);color:var(--warn)} .b-bad{background:rgba(214,69,69,.15);color:var(--bad)} .b-brand{background:rgba(47,109,246,.14);color:var(--brand)} .tags{display:flex;flex-wrap:wrap;gap:5px} .tag{font-size:11px;font-weight:600;color:var(--text-dim);background:var(--surface); border:1px solid var(--line);border-radius:99px;padding:2px 8px} /* ---------- 광고 슬롯 ---------- */ .ad-slot{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; border:1px dashed var(--ad-bd);background:var(--ad-bg);color:var(--ad-tx);border-radius:var(--r); font-size:12px;text-align:center} .ad-slot.filled{border-style:solid;border-color:var(--line);background:var(--surface);padding:0} .ad-slot b{display:block;font-size:11px;font-weight:700;opacity:.85} .ad-slot a{display:block;width:100%;height:100%} .ad-slot img{width:100%;height:100%;object-fit:cover} .ad-label{position:absolute;top:4px;right:6px;z-index:2;font-size:10px;font-weight:800; background:rgba(0,0,0,.55);color:#fff;border-radius:4px;padding:1px 5px;letter-spacing:.04em} .ad-leaderboard{min-height:90px} .ad-infeed{min-height:110px;margin:var(--gap) 0} .ad-rect{min-height:250px} .ad-halfpage{min-height:600px} .ad-footer{min-height:90px;margin:var(--gap) 0 0} .ad-sticky-mo{display:none} @media (max-width:820px){ .ad-halfpage{min-height:250px} .ad-sticky-mo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;min-height:56px; border-radius:0;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)} body.has-anchor{padding-bottom:64px} } /* ---------- 레이아웃 ---------- */ main{padding:var(--gap) 0 24px} .cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start} @media (max-width:980px){ .cols{grid-template-columns:1fr} .aside{order:2} } .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)} @media (max-width:980px){ .grid-4{grid-template-columns:repeat(3,1fr)} } @media (max-width:760px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} } /* ---------- 칩 내비 (jusogo형 카테고리 바) ---------- */ .chipbar{background:var(--surface);border-bottom:1px solid var(--line)} .chipbar-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 16px} .chipbar-in::-webkit-scrollbar{display:none} .chip{padding:7px 13px;border:0;border-radius:99px;font:inherit;font-size:13px;font-weight:600; color:var(--text-dim);background:transparent;white-space:nowrap;cursor:pointer} .chip[aria-pressed="true"],.chip.on{background:var(--brand);color:var(--brand-ink)} /* ---------- 리스트/테이블 ---------- */ .list{list-style:none;margin:0;padding:0} .list li{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:13px} .list li:last-child{border-bottom:0} .list em{font-style:normal;font-weight:800;width:20px;color:var(--brand)} .list .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbl-wrap{overflow-x:auto} /* min-width 는 가로 스크롤 컨테이너(.tbl-wrap) 안의 '데이터 표'에만 적용한다. 전역으로 걸면 폼 레이아웃용 표까지 600px 로 벌어져 좁은 화면에서 입력칸이 잘린다. */ table{width:100%;border-collapse:collapse;font-size:13px} .tbl-wrap>table{min-width:600px} th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} th{font-size:12px;color:var(--text-dim);font-weight:700;background:var(--surface-2);white-space:nowrap} td code,code{font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px} /* ---------- 썸네일 플레이스홀더 ---------- */ .ph{display:grid;place-items:center;color:var(--text-dim);font-size:12px; background:linear-gradient(135deg,var(--surface-2) 25%,transparent 25%) -8px 0/16px 16px, linear-gradient(225deg,var(--surface-2) 25%,transparent 25%) -8px 0/16px 16px,var(--surface)} .fav{width:38px;height:38px;border-radius:9px;background:var(--brand);color:#fff;flex:0 0 auto; display:grid;place-items:center;font-weight:800;font-size:14px} /* ---------- 푸터 ---------- */ footer{border-top:1px solid var(--line);background:var(--surface);margin-top:24px} .ft-in{padding:20px 16px 28px;max-width:var(--maxw);margin:0 auto} .ft-nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:600;margin-bottom:12px} .ft-nav a{color:var(--text-dim)} .notice{font-size:12px;color:var(--text-dim);line-height:1.75;border:1px solid var(--line); border-radius:var(--r);padding:12px 14px;background:var(--surface-2)} .notice+.notice{margin-top:10px} .notice strong{color:var(--text)} .copy{font-size:12px;color:var(--text-dim);margin-top:12px} /* ---------- 토스트/모달 ---------- */ .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:90;background:#16181d; color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:99px;box-shadow:var(--shadow)} .modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px} .modal-in{width:100%;max-width:620px;max-height:86vh;overflow:auto;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)} /* =========================================================== 광고 노출 효과 — .fx-glow / .fx-blink / .fx-shine / .fx-sparkle / .fx-neon / .fx-rainbow store.js effectClass() 화이트리스트를 통과한 값만 붙는다. ⚠ 테두리 두께가 0인 요소(.prow 등)에도 보이도록 box-shadow 링으로 구현한다. =========================================================== */ [class*="fx-"]{position:relative} /* 반짝 테두리 — 안쪽 링 + 바깥 발광이 맥동 */ .fx-glow{animation:fxGlow 1.5s ease-in-out infinite} @keyframes fxGlow{ 0%,100%{box-shadow:inset 0 0 0 2px rgba(255,106,61,.95), 0 0 0 0 rgba(255,106,61,.5)} 50% {box-shadow:inset 0 0 0 2px rgba(255,106,61,.45), 0 0 16px 3px rgba(255,106,61,.75)} } /* 점멸 — 링과 배경이 번갈아 */ .fx-blink{animation:fxBlink 0.9s steps(1,end) infinite} @keyframes fxBlink{ 0%,49% {box-shadow:inset 0 0 0 2px rgba(47,109,246,.95), 0 0 14px 2px rgba(47,109,246,.55); background-color:color-mix(in srgb,var(--brand) 12%,transparent)} 50%,100%{box-shadow:inset 0 0 0 2px rgba(47,109,246,.18); background-color:transparent} } /* 광택 스윕 — 빛줄기가 훑고 지나감 */ .fx-shine{overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,106,61,.8)} .fx-shine::after{ content:"";position:absolute;top:-80%;height:260%;width:34%;left:-40%;z-index:3;pointer-events:none; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 35%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.3) 65%,transparent); animation:fxShine 2.3s ease-in-out infinite; } @keyframes fxShine{0%{left:-40%}55%,100%{left:120%}} /* 별 반짝반짝 — 금색 링 + 별 2개 */ .fx-sparkle{animation:fxGold 1.7s ease-in-out infinite} @keyframes fxGold{ 0%,100%{box-shadow:inset 0 0 0 2px rgba(255,176,32,.95), 0 0 0 0 rgba(255,176,32,.45)} 50% {box-shadow:inset 0 0 0 2px rgba(255,176,32,.5), 0 0 18px 3px rgba(255,176,32,.8)} } .fx-sparkle::before,.fx-sparkle::after{ content:"\2726";position:absolute;z-index:4;pointer-events:none;line-height:1; color:#ffd66b;text-shadow:0 0 7px rgba(255,214,107,.95),0 0 14px rgba(255,176,32,.6); animation:fxTwinkle 1.4s ease-in-out infinite; } .fx-sparkle::before{top:3px;left:5px;font-size:13px} .fx-sparkle::after{bottom:3px;right:7px;font-size:10px;animation-delay:.7s} @keyframes fxTwinkle{ 0%,100%{opacity:0;transform:scale(.35) rotate(0deg)} 45% {opacity:1;transform:scale(1.25) rotate(90deg)} 70% {opacity:.35;transform:scale(.8) rotate(140deg)} } /* 네온 흐름 — @property 없이도 동작하는 그라디언트 이동 방식 */ .fx-neon{overflow:hidden;box-shadow:inset 0 0 0 2px rgba(47,109,246,.35)} .fx-neon::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit; padding:2px; background:linear-gradient(90deg,#ff4d4d,#ffa726,#4ddb7c,#4dc3ff,#b04dff,#ff4d4d); background-size:300% 100%; animation:fxFlow 2.2s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } /* 마스크 미지원 브라우저 폴백: 상·하단 네온 바 */ @supports not (mask-composite: exclude){ .fx-neon::before{padding:0;background-size:300% 100%; inset:auto 0 0 0;height:3px;-webkit-mask:none;mask:none} .fx-neon{box-shadow:inset 0 0 0 2px rgba(77,195,255,.7)} } .fx-neon>*{position:relative;z-index:1} @keyframes fxFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}} /* 무지개 글자 */ .fx-rainbow{box-shadow:inset 0 0 0 2px rgba(176,77,255,.65)} .fx-rainbow .ptitle,.fx-rainbow .adtx{ background:linear-gradient(90deg,#ff4d4d,#ffa726,#ffe14d,#4ddb7c,#4dc3ff,#b04dff,#ff4d4d); background-size:280% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:fxFlowTx 3s linear infinite;font-weight:800; } @keyframes fxFlowTx{0%{background-position:0% 50%}100%{background-position:280% 50%}} /* 목록 행에 붙는 축소판 */ .row-fx{position:relative;border-radius:8px;z-index:1} .row-fx.fx-sparkle::before{top:1px;left:3px;font-size:11px} .row-fx.fx-sparkle::after{bottom:1px;right:62px;font-size:9px} .row-fx.fx-shine::after{top:-120%;height:340%} /* 접근성: 모션 감소 설정이면 애니메이션을 끄고 정적 강조만 남긴다 */ @media (prefers-reduced-motion:reduce){ [class*="fx-"],[class*="fx-"]::before,[class*="fx-"]::after{animation:none!important} .fx-glow{box-shadow:inset 0 0 0 2px rgba(255,106,61,.8)} .fx-blink{box-shadow:inset 0 0 0 2px rgba(47,109,246,.8);background-color:transparent} .fx-shine::after{display:none} .fx-sparkle{box-shadow:inset 0 0 0 2px rgba(255,176,32,.8)} .fx-sparkle::before,.fx-sparkle::after{opacity:1;transform:none} .fx-rainbow .ptitle,.fx-rainbow .adtx{background:none;color:inherit;-webkit-text-fill-color:currentColor} } /* ---------- 별점 ---------- */ .stars{color:#f5a524;font-size:13px;letter-spacing:1px;white-space:nowrap} .rate{display:inline-flex;align-items:center;gap:5px;font-size:12px} .rate b{font-weight:800} .rate .cnt{color:var(--text-dim);font-weight:600} /* ---------- 프레임 시안 배지 ---------- */ .mark{position:fixed;right:10px;bottom:10px;z-index:70;background:var(--accent);color:#fff;font-size:11px; font-weight:700;padding:6px 10px;border-radius:99px;box-shadow:var(--shadow)} @media (max-width:820px){ .mark{bottom:64px} } /* ---------- 회원 레벨 배지 ---------- */ .lvb{display:inline-grid;place-items:center;height:16px;padding:0 6px;border-radius:4px; background:#6b7280;color:#fff;font-size:10px;font-weight:800;letter-spacing:.01em;white-space:nowrap} .nickrow{display:inline-flex;align-items:center;gap:5px;min-width:0} .nickrow .nk{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lvbar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden} .lvbar>i{display:block;height:100%;background:var(--brand);border-radius:99px} /* =========================================================== 반짝이는 아이콘 배지 세트 (.ic-*) — 목록·광고·메뉴 어디든 사용 =========================================================== */ .ic{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 6px;border-radius:4px; font-size:10px;font-weight:900;color:#fff;white-space:nowrap;line-height:1;letter-spacing:.02em; text-shadow:0 1px 1px rgba(0,0,0,.22);flex:0 0 auto} .ic-new{background:linear-gradient(135deg,#ff3b3b,#ff8a3d);animation:icPop 1.15s ease-in-out infinite} .ic-hot{background:linear-gradient(135deg,#ff2d55,#ff9500);animation:icShake 1.7s ease-in-out infinite} .ic-best{background:linear-gradient(135deg,#7c3aed,#c026d3);animation:icHalo 1.9s ease-in-out infinite} .ic-event{background:linear-gradient(135deg,#0ea5e9,#22d3ee);animation:icPop 1.5s ease-in-out infinite} .ic-coupon{background:linear-gradient(135deg,#059669,#34d399)} .ic-up{background:linear-gradient(135deg,#f59e0b,#fbbf24);animation:icUp 1.3s ease-in-out infinite} .ic-live{background:#d61f3a} .ic-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff; animation:icDot .75s steps(1,end) infinite} .ic-rank{background:linear-gradient(135deg,#b45309,#f59e0b)} @keyframes icPop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} @keyframes icShake{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(7deg)}} @keyframes icHalo{0%,100%{box-shadow:0 0 0 0 rgba(192,38,211,.6)}50%{box-shadow:0 0 10px 2px rgba(192,38,211,.85)}} @keyframes icUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @keyframes icDot{0%,49%{opacity:1}50%,100%{opacity:.15}} /* 별 아이콘 — 단독으로 반짝임 */ .spark{display:inline-block;color:#ffd66b;text-shadow:0 0 6px rgba(255,214,107,.9); animation:fxTwinkle 1.4s ease-in-out infinite} .spark.d2{animation-delay:.45s} .spark.d3{animation-delay:.9s} /* =========================================================== 광고 배너를 화려하게 — 채워진 슬롯은 그라디언트 카드로 =========================================================== */ .ad-slot.filled{background:linear-gradient(135deg,#1e293b,#312e81 55%,#4c1d95);border-color:transparent; color:#fff;padding:0} .ad-slot.filled .adtx{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:100%;height:100%;padding:10px 14px;text-align:center; font-size:14px;font-weight:900;letter-spacing:-.01em;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5)} .ad-slot.filled .adtx .sub{font-size:11px;font-weight:700;opacity:.85;letter-spacing:.02em} .ad-slot.filled .adtx .stars2{font-size:12px;letter-spacing:2px} .ad-leaderboard.filled .adtx{flex-direction:row;gap:10px;font-size:15px} .ad-sticky-mo.filled .adtx{flex-direction:row;gap:8px;font-size:13px} .ad-label{background:rgba(0,0,0,.6);backdrop-filter:blur(2px)} /* ---------- 3단 그리드 공통 보정 ---------- grid item 의 기본 min-width:auto 가 내부 가로 스크롤러(칩 레일 등)의 min-content 를 그대로 받아 모바일에서 페이지 전체가 가로로 밀리는 문제를 막는다. */ .g3>*{min-width:0} .cols>*{min-width:0} /* 광고 문구 가독성 보강 — 어두운 그라디언트 위 흰 글씨 고정 */ .ad-slot.filled .adtx, .ad-slot.filled .adtx .sub{color:#fff} .ad-slot.filled .adtx .stars2 .spark{color:#ffd66b;font-style:normal} /* =========================================================== 광고 강화 — 채워진 광고는 "가만히 있지 않는다" 배경 흐름 + 상시 광택 스윕 + 글자 발광 + 라벨 맥동 + 큰 별 (fx-* 링/별 효과 위에 겹쳐 작동한다) =========================================================== */ .ad-slot.filled{ background:linear-gradient(120deg,#131c3a,#2b1e6e 22%,#6d28d9 45%,#b0349c 58%,#2b1e6e 78%,#131c3a); background-size:300% 100%; animation:adFlow 5.5s linear infinite; } @keyframes adFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}} /* 상시 광택 스윕 — 모든 채워진 광고에 적용(fx-shine 과 별개 레이어) */ .ad-slot.filled .adtx{position:relative;overflow:hidden;animation:adTxGlow 1.9s ease-in-out infinite} .ad-slot.filled .adtx::after{ content:"";position:absolute;top:-70%;left:-45%;width:34%;height:240%;z-index:0;pointer-events:none; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 35%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.28) 65%,transparent); animation:adSweep 3s ease-in-out infinite; } @keyframes adSweep{0%{left:-45%}58%,100%{left:128%}} @keyframes adTxGlow{ 0%,100%{text-shadow:0 1px 3px rgba(0,0,0,.55)} 50% {text-shadow:0 0 12px rgba(255,255,255,.9),0 0 26px rgba(255,214,107,.5),0 1px 3px rgba(0,0,0,.55)} } .ad-slot.filled .adtx>*{position:relative;z-index:1} /* 별을 더 크고 또렷하게 */ .ad-slot.filled .adtx .stars2{font-size:16px;letter-spacing:4px} .ad-slot.filled .adtx .stars2 .spark{ font-size:16px;color:#ffe08a; text-shadow:0 0 8px rgba(255,224,138,1),0 0 18px rgba(255,176,32,.85); animation-duration:1.1s; } /* "광고" 라벨도 맥동 */ .ad-slot.filled .ad-label{animation:icPop 1.3s ease-in-out infinite; background:linear-gradient(135deg,#ff3b3b,#ff8a3d);box-shadow:0 0 10px rgba(255,90,60,.7)} /* 리더보드는 가로로 길어 스윕을 2줄기로 */ .ad-leaderboard.filled .adtx::after{width:22%;animation-duration:2.4s} /* 접근성 */ @media (prefers-reduced-motion:reduce){ .ad-slot.filled, .ad-slot.filled .adtx, .ad-slot.filled .adtx::after, .ad-slot.filled .ad-label, .ad-slot.filled .adtx .stars2 .spark{animation:none!important} .ad-slot.filled .adtx::after{display:none} .ad-slot.filled{background-position:0 50%} } /* =========================================================== 타이포·밀도 상향 (전 페이지 공통) — 글씨가 작고 밋밋하다는 지적 반영 =========================================================== */ body{font-size:15px;line-height:1.6} /* 레퍼런스는 자간 normal — 우리만 -0.065px 가 1,401곳에 깔려 있었다 */ /* 버튼·입력 */ .btn{height:38px;padding:0 15px;font-size:14px;font-weight:700;border-radius:9px} .btn-sm{height:31px;padding:0 12px;font-size:13px;border-radius:8px} input,select,textarea{padding:10px 12px;font-size:14px;border-radius:9px} label{font-size:13px;margin-bottom:5px} /* 배지·태그 */ .badge{font-size:12px;padding:3px 7px;border-radius:6px} .tag{font-size:12px;padding:3px 10px} .ic{height:19px;padding:0 7px;font-size:11px;border-radius:5px} .lvb{height:18px;padding:0 7px;font-size:11px;border-radius:5px} /* 카드·섹션 헤더 */ .card-hd{padding:14px 18px} .card-hd h2{font-size:17px;font-weight:800;letter-spacing:-.02em} .card-hd .sub{font-size:13px} .card-bd{padding:18px} /* 표 */ table{font-size:14px} th{font-size:13px;padding:11px 14px} td{padding:11px 14px} code{font-size:13px} /* 리스트 */ .list li{padding:11px 16px;font-size:14px} .list em{font-size:14px;width:22px} /* 칩 */ .chip{padding:8px 15px;font-size:14px;font-weight:700} /* 안내문·푸터 */ .notice{font-size:13px;line-height:1.8;padding:14px 16px} .ft-nav{font-size:14px;gap:8px 22px} .copy{font-size:13px} /* 별점 */ .stars{font-size:14px;letter-spacing:1.5px} .rate{font-size:13px} /* 광고 문구 더 크게 */ .ad-slot.filled .adtx{font-size:17px;font-weight:900;letter-spacing:-.02em} .ad-slot.filled .adtx .sub{font-size:12px} .ad-leaderboard.filled .adtx{font-size:19px} .ad-sticky-mo.filled .adtx{font-size:14px} /* 입체감 — 카드에 또렷한 경계와 그림자 */ .card{border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.07),0 6px 18px rgba(16,24,40,.07)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card{ box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.4)} } /* =========================================================== 글씨 배율 --fs (관리자 > 디자인에서 변경, store.js applyTheme() 가 주입) 기본 1. 아래 값들은 전부 배율을 곱해 계산된다. =========================================================== */ :root{--fs:1} body{font-size:calc(15px * var(--fs))} .btn{height:calc(38px * var(--fs));font-size:calc(14px * var(--fs))} .btn-sm{height:calc(31px * var(--fs));font-size:calc(13px * var(--fs))} input,select,textarea{font-size:calc(14px * var(--fs))} label{font-size:calc(13px * var(--fs))} .badge{font-size:calc(12px * var(--fs))} .tag{font-size:calc(12px * var(--fs))} .ic{height:calc(19px * var(--fs));font-size:calc(11px * var(--fs))} .lvb{height:calc(18px * var(--fs));font-size:calc(11px * var(--fs))} .card-hd h2{font-size:calc(17px * var(--fs))} .card-hd .sub{font-size:calc(13px * var(--fs))} table{font-size:calc(14px * var(--fs))} th{font-size:calc(13px * var(--fs))} .list li{font-size:calc(14px * var(--fs))} .chip{font-size:calc(14px * var(--fs))} .notice{font-size:calc(13px * var(--fs))} .ft-nav{font-size:calc(14px * var(--fs))} .copy{font-size:calc(13px * var(--fs))} .stars{font-size:calc(14px * var(--fs))} .rate{font-size:calc(13px * var(--fs))} .ad-slot.filled .adtx{font-size:calc(17px * var(--fs))} .ad-slot.filled .adtx .sub{font-size:calc(12px * var(--fs))} .ad-leaderboard.filled .adtx{font-size:calc(19px * var(--fs))} .ad-sticky-mo.filled .adtx{font-size:calc(14px * var(--fs))} /* ---------- 좁은 사이드 광고: 글자 크기를 폭에 맞춰 줄여 어색한 줄바꿈 방지 ---------- */ .ad-rect.filled .adtx, .ad-halfpage.filled .adtx{font-size:calc(15px * var(--fs));line-height:1.35;word-break:keep-all} .ad-rect.filled .adtx .sub, .ad-halfpage.filled .adtx .sub{font-size:calc(12px * var(--fs));line-height:1.4} @media (max-width:1400px){ .ad-rect.filled .adtx,.ad-halfpage.filled .adtx{font-size:calc(14px * var(--fs))} } /* ---------- 최상단 바 1줄 고정 ---------- 로고를 가운데 두면 우측 버튼 8개가 밀려 2줄이 된다. 761px 이상에서는 로고를 왼쪽으로 보내 한 줄로 유지한다. */ @media (min-width:761px){ .tbar-in{grid-template-columns:auto minmax(0,1fr)!important} .tbar .lg{justify-self:start!important;grid-column:1} .tbar .rt{grid-column:2;flex-wrap:nowrap!important;gap:5px;overflow:hidden} .tbar .rt>*{flex:0 0 auto} } @media (min-width:761px) and (max-width:1200px){ .tbar .rt .tbtn.opt{display:none} } /* =========================================================== 디자인 옵션 (관리자 > 디자인) — applyTheme() 가 주입 --radius 모서리 · --dens 밀도 · [data-rowstyle] 행 모양 · [data-headstyle] 헤더 =========================================================== */ :root{--radius:10px;--dens:1} .card,.lcard,.sbox,.modal-in{border-radius:var(--radius)} .btn{border-radius:calc(var(--radius) * .7)} .btn-sm{border-radius:calc(var(--radius) * .6)} input,select,textarea{border-radius:calc(var(--radius) * .7)} .badge,.ic,.lvb,.tag{border-radius:calc(var(--radius) * .45)} .ad-slot{border-radius:var(--radius)} /* 밀도 — 여백을 일괄 축소/확대 */ .card-hd{padding:calc(14px * var(--dens)) calc(18px * var(--dens))} .card-bd{padding:calc(18px * var(--dens))} .list li{padding:calc(11px * var(--dens)) calc(16px * var(--dens))} th,td{padding:calc(11px * var(--dens)) calc(14px * var(--dens))} .notice{padding:calc(14px * var(--dens)) calc(16px * var(--dens))} /* ---------- 행 스타일 ---------- */ /* 레퍼런스형: 검은 로고박스 + 네온 글씨 (기본) */ :root[data-rowstyle="neon"] .plogo{background:#111!important} /* 카드형: 밝은 박스 + 그림자, 로고박스도 밝게 */ :root[data-rowstyle="card"] .prow{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); margin:4px 6px;box-shadow:0 1px 3px rgba(16,24,40,.08)} :root[data-rowstyle="card"] .plogo{ background:var(--surface-2)!important;border:1px solid var(--line)} :root[data-rowstyle="card"] .prow:last-child{border-bottom:1px solid var(--line)} /* 단순 목록: 테두리·배경 제거, 텍스트 위주 */ :root[data-rowstyle="plain"] .prow{border-bottom:1px dashed var(--line);background:none} :root[data-rowstyle="plain"] .plogo{background:none!important;border:0; color:var(--text)!important;justify-content:flex-start;font-weight:800} :root[data-rowstyle="plain"] .ptier{opacity:.75} /* ---------- 헤더 스타일 ---------- */ :root[data-headstyle="solid"] .gnb{background:var(--gnb,#1f3d8f)!important;box-shadow:none} :root[data-headstyle="line"] .gnb{ background:var(--surface)!important;color:var(--text)!important; border-bottom:2px solid var(--brand);box-shadow:none} :root[data-headstyle="line"] .gnb .mi{color:var(--text)!important;opacity:.7} :root[data-headstyle="line"] .gnb .mi.on{opacity:1;color:var(--brand)!important;background:transparent} :root[data-headstyle="line"] .gnb .mi.on::after{background:var(--brand)} :root[data-headstyle="line"] .gsearch input, :root[data-headstyle="line"] .allbtn{ background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important} :root[data-headstyle="line"] .gsearch input::placeholder{color:var(--text-dim)} /* =========================================================== 레퍼런스 실측 사이즈 프리셋 :root[data-size="ref"] 2026-10-02 Playwright 실측값 (obam43.com/info.php, 1440px 뷰포트) 컨테이너 1310px · GNB 높이 50px / 15px / w600 / lh24 / pad 14px 0 12px 로고 44px w700 · 최상단 보조링크 12px w400 h30 · 본문 13px lh22 · 보조 12px 관리자 > 디자인 > 사이즈에서 전환. --fs(글씨 배율)는 그대로 곱해진다. =========================================================== */ :root[data-size="ref"] body{font-size:calc(13px * var(--fs));line-height:22px} /* 최상단 바 */ :root[data-size="ref"] .tbar-in{min-height:50px} :root[data-size="ref"] .tbar .lg{font-size:calc(34px * var(--fs));font-weight:700;letter-spacing:-.03em} :root[data-size="ref"] .tbar .lg i{font-size:calc(15px * var(--fs));padding:5px 10px;border-radius:6px} :root[data-size="ref"] .tbtn, :root[data-size="ref"] a.tbtn{height:calc(30px * var(--fs));font-size:calc(12px * var(--fs));font-weight:400} :root[data-size="ref"] .cta, :root[data-size="ref"] .chatcta{height:calc(30px * var(--fs));font-size:calc(12px * var(--fs))} /* GNB — 실측 그대로 */ :root[data-size="ref"] .gnb-in{min-height:50px} /* 레퍼런스 실측: 글자 15px · 좌우 여백 0 · 항목 사이 40px · 자간 기본 */ :root[data-size="ref"] .mi{min-height:50px;font-size:calc(15px * var(--fs));font-weight:600; line-height:24px;padding:14px 0 12px;letter-spacing:normal} :root[data-size="ref"] .gnb-menu{gap:40px} /* 레퍼런스 기준폭(1440)보다 좁으면 간격을 줄여 메뉴가 가로로 밀리지 않게 한다 */ @media (max-width:1400px){ :root[data-size="ref"] .gnb-menu{gap:24px} } @media (max-width:1180px){ :root[data-size="ref"] .gnb-menu{gap:14px} } /* 메뉴 옆 건수 배지는 레퍼런스에 없는 우리 것이다. 레퍼런스 메뉴 간격(40px)을 지키려면 12개 메뉴가 들어갈 자리가 필요해, 배지 폭만 줄여 자리를 낸다. */ :root[data-size="ref"] .nb{height:calc(16px * var(--fs));font-size:calc(10px * var(--fs)); min-width:calc(15px * var(--fs));padding:0 3px} :root[data-size="ref"] .gsearch input, :root[data-size="ref"] .allbtn{height:calc(30px * var(--fs));font-size:calc(12px * var(--fs))} /* 본문 밀도 — 보조 12px / 본문 13px / 강조 14px / 제목 16~20px */ :root[data-size="ref"] .citem,:root[data-size="ref"] .bitem{font-size:calc(14px * var(--fs));padding:9px 12px} :root[data-size="ref"] .cn{font-size:calc(11px * var(--fs))} :root[data-size="ref"] .sbox-h{font-size:calc(14px * var(--fs));padding:10px 12px} :root[data-size="ref"] .bc{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .sec h1{font-size:calc(16px * var(--fs))} :root[data-size="ref"] .sec .sd{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .card-hd h2{font-size:calc(16px * var(--fs))} :root[data-size="ref"] .card-hd .sub{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .fchip{font-size:calc(12px * var(--fs));padding:6px 12px} :root[data-size="ref"] table{font-size:calc(13px * var(--fs))} :root[data-size="ref"] th{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .list li{font-size:calc(13px * var(--fs))} :root[data-size="ref"] .notice{font-size:calc(12px * var(--fs));line-height:1.75} :root[data-size="ref"] .ft-nav{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .copy{font-size:calc(11px * var(--fs))} /* 목록 행 — 레퍼런스 리스트 밀도 */ :root[data-size="ref"] .prow{height:calc(40px * var(--fs));font-size:calc(13px * var(--fs))} :root[data-size="ref"] .plogo{font-size:calc(13px * var(--fs))} :root[data-size="ref"] .ptitle{font-size:calc(13px * var(--fs))} :root[data-size="ref"] .pcmt{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .pcc{font-size:calc(12px * var(--fs))} /* 광고 문구는 과하게 커지지 않게 */ :root[data-size="ref"] .ad-slot.filled .adtx{font-size:calc(15px * var(--fs))} :root[data-size="ref"] .ad-leaderboard.filled .adtx{font-size:calc(17px * var(--fs))} /* ----------------------------------------------------------- 레퍼런스 실측 2차 — 3단 틀 / 카테고리 / 광고 칸 사이즈 2026-10-02 실측: 좌 200px(항목 50px·12px w400, 제목 14px w700 h30) 본문 1042px(행 43~44px·12px, 섹션제목 20px w700 h43) 우 200px(배너 200×64 반복, 블록 211·261px) 컨테이너는 200+1042+200+gap ≈ 1460px. 단, 뷰포트보다 넓어지지 않게 100% 로 제한. ----------------------------------------------------------- */ :root[data-size="ref"] .wrap{max-width:1310px} /* 3단 그리드 — 좌 200 / 본문 가변 / 우 200 */ :root[data-size="ref"] .g3{grid-template-columns:200px minmax(0,1fr) 200px;gap:10px} @media (max-width:820px){ :root[data-size="ref"] .g3{grid-template-columns:1fr} } :root[data-size="ref"] .cols{grid-template-columns:minmax(0,1fr) 200px;gap:10px} @media (max-width:980px){ :root[data-size="ref"] .cols{grid-template-columns:1fr} } /* 좌측 카테고리 */ :root[data-size="ref"] .sbox-h{min-height:30px;padding:0 12px; font-size:calc(14px * var(--fs));font-weight:700;display:flex;align-items:center} :root[data-size="ref"] .citem,:root[data-size="ref"] .bitem{min-height:calc(41px * var(--fs)); padding:0 12px;font-size:calc(14px * var(--fs));font-weight:400;display:flex;align-items:center} :root[data-size="ref"] .cn{font-size:calc(11px * var(--fs));padding:1px 6px} /* 본문 섹션 헤더 — 20px w700 / 높이 43 */ :root[data-size="ref"] .sec{min-height:calc(43px * var(--fs));padding:0 14px;align-items:center} /* 레퍼런스 실측 — 본문 섹션 제목 24px/700, 카드 머리 18px/700. 우리는 20px 한 단계만 써서 레퍼런스의 18·24px 단계가 0곳이었다. */ :root[data-size="ref"] .sec h1{font-size:calc(24px * var(--fs));font-weight:700} :root[data-size="ref"] .sec .sd{font-size:calc(12px * var(--fs))} /* 목록 행 — 43~44px / 12px */ :root[data-size="ref"] .prow{height:calc(44px * var(--fs));font-size:calc(12px * var(--fs)); border-bottom:1px solid #ccc} :root[data-size="ref"] .plogo{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .ptitle{font-size:calc(12px * var(--fs))} :root[data-size="ref"] .pcmt, :root[data-size="ref"] .pcc{font-size:calc(11px * var(--fs))} /* 우측 광고 칸 — 폭 200px, 배너 비율 유지해 축소 */ :root[data-size="ref"] .col-ads{width:200px} :root[data-size="ref"] .col-ads .ad-slot{width:200px;margin-left:auto;margin-right:auto} :root[data-size="ref"] .ad-rect{min-height:167px} /* 300×250 → 200×167 */ :root[data-size="ref"] .ad-halfpage{min-height:400px} /* 300×600 → 200×400 */ :root[data-size="ref"] .ad-leaderboard{min-height:64px} /* 실측 200×64 계열 */ :root[data-size="ref"] .ad-infeed{min-height:64px} :root[data-size="ref"] .ad-slot.filled .adtx{font-size:calc(13px * var(--fs));padding:6px 10px;gap:3px} :root[data-size="ref"] .ad-slot.filled .adtx .sub{font-size:calc(10px * var(--fs))} :root[data-size="ref"] .ad-leaderboard.filled .adtx{font-size:calc(15px * var(--fs))} :root[data-size="ref"] .ad-slot.filled .adtx .stars2{font-size:calc(11px * var(--fs));letter-spacing:2px} @media (max-width:820px){ :root[data-size="ref"] .col-ads{width:auto} :root[data-size="ref"] .col-ads .ad-slot{width:auto} } /* 카드/표 밀도도 레퍼런스 쪽으로 */ :root[data-size="ref"] .card-hd{min-height:calc(40px * var(--fs));padding:0 14px;align-items:center} :root[data-size="ref"] .card-bd{padding:12px 14px} :root[data-size="ref"] .list li{min-height:calc(40px * var(--fs));padding:0 14px; font-size:calc(12px * var(--fs));align-items:center} :root[data-size="ref"] th, :root[data-size="ref"] td{padding:8px 10px} /* ref 프리셋 미세 보정 — 실제 화면 확인 후 수정 (2026-10-02) ① 로고 34px 는 상단 바를 독차지해 26px 로 ② 200px 사이드 광고 문구 줄바꿈 방지 */ :root[data-size="ref"] .tbar .lg{font-size:calc(26px * var(--fs))} :root[data-size="ref"] .tbar .lg i{font-size:calc(13px * var(--fs));padding:4px 8px} :root[data-size="ref"] .col-ads .ad-slot.filled .adtx{font-size:calc(12px * var(--fs)); line-height:1.3;word-break:keep-all;padding:8px 8px} :root[data-size="ref"] .col-ads .ad-slot.filled .adtx .sub{font-size:calc(10px * var(--fs))} /* 게임물 등급분류 배지 */ .rtb{display:inline-grid;place-items:center;min-width:calc(26px * var(--fs));height:calc(18px * var(--fs)); padding:0 5px;border-radius:4px;background:#9ca3af;color:#fff; font-size:calc(11px * var(--fs));font-weight:900;letter-spacing:.02em;flex:0 0 auto} .rating-note{font-size:calc(12px * var(--fs));color:var(--text-dim);line-height:1.7} /* GNB 는 어떤 배율에서도 2줄로 감기지 않는다 (감기면 아래 콘텐츠를 덮는다). 넘치면 가로 스크롤로 흘리고, 숨은 메뉴는 [전체보기] 로 접근한다. */ .gnb-in{flex-wrap:nowrap!important} .gnb-menu{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none} .gnb-menu::-webkit-scrollbar{display:none} @media (max-width:760px){ .gnb-in{flex-wrap:wrap!important} .gnb-menu{width:100%} } /* GNB nowrap 보정 — flex item 의 기본 min-width:auto 가 내부 스크롤러를 밀어내 좁은 폭에서 페이지 전체가 가로로 넘치던 문제. 줄바꿈 대신 내부 스크롤로 흘린다. */ .gnb-in>*{min-width:0} .gnb-menu{min-width:0;flex:1 1 auto} .gright{flex:0 1 auto;min-width:0} .gsearch{min-width:0} /* 레퍼런스 메뉴 간격(40px)을 지키면 메뉴가 12px 모자라 마지막 항목이 잘렸다. 레퍼런스에는 없는 우리 검색창을 줄여 자리를 낸다. */ .gsearch input{min-width:0;width:100%;max-width:132px} /* 페이지