/* ============================================================ ENDOLPHIN — GAME 공통 (game-ui.css) ------------------------------------------------------------ /게임/ 아래 모든 페이지가 같이 씁니다. .gu-body 본문 바탕·여백 (site-header 의 --page-pad 와 맞춤) .gu-wrap 가운데 정렬 상자 .gu-crumb 빵부스러기 (GAME › 스타크래프트 › 갈래) .sc-bar 엔치원2 서포터즈 띠 상자 (_nav/starnav.js 가 만듭니다) .gu-sec 섹션 제목 묶음 ★ .gu-tabs (3칸 갈래 탭)은 2026-09-11 에 없앴습니다. 최상단 GAME 드롭다운에 같은 항목이 전부 있습니다 (주인님 지시). .gu-empty 아직 내용이 없을 때의 조용한 안내 색은 전부 shared/theme.css 토큰이라 다크 모드가 그대로 따라옵니다. ============================================================ */ *{ box-sizing:border-box; } .gu-body{ margin:0; font-family:'Pretendard','Malgun Gothic',sans-serif; color:var(--ink); background:var(--bg); min-height:100vh; padding:0 20px 70px; line-height:1.6; overflow-x:clip; --page-pad-t:0px; --page-pad-l:20px; --page-pad-r:20px; } .gu-body a{ color:inherit; text-decoration:none; } .gu-body img{ max-width:100%; display:block; } .gu-wrap{ max-width:1080px; margin:0 auto; } /* ── 엔치원2 첫 화면만 PC 에서 넓게 (2026-09-11) ───────────── 공용 폭은 1080px 입니다. 1920 화면에서 56% 밖에 못 써서 좌우가 크게 비었습니다. 엔치원2 첫 화면에서만 넓힙니다. ⚠️ 위 공용 값(1080)은 그대로 둡니다 — 다른 GAME 페이지는 안 바뀝니다. ⚠️ 표시는 입니다. 엔치원2 첫 화면 한 곳에만 붙어 있습니다. ★ 하위 페이지(선생님·학생·명예의전당·QA 등)는 일부러 뺐습니다. 사람이 몇 명 안 되는 화면을 넓히면 카드가 왼쪽에만 붙고 오른쪽이 텅 비어 오히려 허전해집니다(실제로 1920 에서 확인). 인원이 늘거나 그 화면 배치를 따로 손볼 때 한 쪽씩 이 표시를 붙이면 됩니다. ⚠️ 1199px 이하(태블릿·폰)는 손대지 않습니다 — 기존 그대로입니다. 그래서 좁은 화면 규칙과 부딪히지 않습니다(기존은 전부 max-width 규칙). ⚠️ 교육일지는 자기 규칙(1560px)이 따로 있습니다. 여기와 무관합니다. 폭이 이어지도록 두 구간을 겹치지 않게 잡았습니다 (1599px 에서 1440 → 1600px 에서 1440 으로 매끄럽게 이어집니다): 1200~1599 clamp(1080, 화면-160, 1440) 1440 화면 → 1280 (좌우 80px) 1600~ min(1560, 화면-200) 1920 화면 → 1560 (가로의 81%) ⚠️ 1200 구간에 clamp 를 쓴 이유: 화면-160 만 쓰면 1200px 화면에서 1040px 이 되어 지금(1080)보다 오히려 좁아집니다. 바닥을 1080 으로 막아 어떤 폭에서도 지금보다 좁아지지 않게 했습니다. */ @media (min-width:1200px){ body[data-nch2-wide] .gu-wrap{ max-width:clamp(1080px, calc(100vw - 160px), 1440px); } } @media (min-width:1600px){ body[data-nch2-wide] .gu-wrap{ max-width:min(1560px, calc(100vw - 200px)); } } /* ── 빵부스러기 ── */ .gu-crumb{ display:flex; align-items:center; gap:8px; padding:18px 0 0; font-size:13px; color:var(--ink-3); } .gu-crumb a{ font-weight:700; color:var(--lav-ink); } .gu-crumb a:hover{ text-decoration:underline; } .gu-crumb b{ color:var(--ink-2); font-weight:700; } /* ── 갈래 탭(.gu-tabs)은 2026-09-11 에 없앴습니다 ── 화면 위 3칸 메뉴(엔치원2 · 스타티어 · 대학현황판)를 걷어내면서 HTML 마크업까지 지웠습니다. 최상단 GAME 드롭다운에 같은 항목이 전부 있어서 두 벌을 둘 이유가 없었습니다 (주인님 지시). ★ 되살리지 마세요. 그 자리에는 엔치원2 서포터즈 띠가 들어갑니다. */ /* ── 섹션 제목 ── */ .gu-sec{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:34px 0 14px; scroll-margin-top:calc(var(--nav-h,68px) + 14px); } .gu-sec h2{ font-family:'Jua',sans-serif; font-weight:400; font-size:23px; color:var(--ink); margin:0; } .gu-sec p{ font-size:13px; color:var(--ink-3); margin:0; } /* ── 조용한 안내 (아직 없음) ── */ .gu-empty{ padding:28px 18px; text-align:center; border-radius:var(--r); border:1.5px dashed var(--line-2); color:var(--ink-3); font-size:14px; background:var(--surface-2); line-height:1.7; } .gu-empty b{ color:var(--ink-2); } /* ── 알약 필터 ── */ .gu-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; } .gu-chip{ font-family:inherit; font-size:13.5px; font-weight:700; padding:8px 15px; border-radius:999px; background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); cursor:pointer; transition:.15s; } .gu-chip:hover{ border-color:var(--lav); color:var(--ink); } .gu-chip.on{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#6b5bd6,#8f7ce8); } @media (max-width:640px){ .gu-body{ padding:0 14px 56px; --page-pad-l:14px; --page-pad-r:14px; } .gu-crumb{ padding-top:12px; font-size:12.5px; } .gu-sec{ margin:26px 0 12px; } .gu-sec h2{ font-size:20px; } } /* ════════════════════════════════════════════════════════════ 스타크래프트 · 엔치원2 공통 내비게이션 (2026-09-08) ------------------------------------------------------------ 1차 (스타크래프트 네 갈래) + 2차 (엔치원2 여섯 갈래) 를 '하나의 메뉴 패널' 로 보여줍니다. ⚠️ 여기가 유일한 정의 자리입니다. 스타크래프트 허브 · 스타 · 스타티어 · 대학현황판 · 엔치원 홈 · 선생님 · 학생 · 일정 · 교육일지 · 장부 · Q&A 열한 페이지가 이 파일을 이미 읽고 있습니다. 페이지마다 복붙하지 마세요 — 여기만 고치면 전부 바뀝니다. ⚠️ hover 로 칸 크기·위치가 바뀌면 안 됩니다. width·height·padding·margin·transform·flex 를 hover 에 넣지 마세요. 바꿔도 되는 것: 배경색 · 테두리색 · 글자색 · box-shadow(glow). (그래야 마우스를 올려도 글자가 흔들리지 않습니다) 마크업은 게임/스타크래프트/_nav/starnav.js 가 만듭니다. ════════════════════════════════════════════════════════════ */ /* ── 바깥 패널 — 1차와 2차가 이 안에 같이 들어갑니다 ── */ /* ⚠️ 이 상자 안에는 이제 서포터즈 띠 하나만 들어갑니다 (2026-09-11). 예전에는 3칸 갈래 메뉴가 위에 같이 있었습니다. 위쪽 12px 은 breadcrumb 과의 사이입니다 — 옛 .gu-tabs 와 같은 간격입니다. */ .sc-bar{ position:relative; margin:12px 0 18px; padding:9px 13px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,250,244,.72)); border:1.5px solid rgba(255,200,222,.62); box-shadow:0 8px 24px rgba(240,150,195,.16), 0 1px 3px rgba(120,100,150,.08), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-radius .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease, border-color .32s ease; } /* [x] .sc-bar-star (왼쪽 위 장식 별)는 2026-09-11 에 뺐습니다 — 띠 한 줄만 남으니 상자 밖으로 삐져나와 부스러기처럼 보였습니다. [!] 스타크래프트 허브의 .sc-bar-tag 는 다른 것입니다 (그 페이지 전용 문구). */ /* ── 이번 달 엔치원 서포터즈 띠 (2026-09-11) ─────────────── 배경·테두리를 갖지 않습니다. 감싸는 .sc-bar 가 배경을 담당합니다. ⚠️ 위에 아무것도 없습니다 — 3칸 갈래 메뉴를 없앤 뒤로 이 띠가 상자 안의 유일한 줄입니다. 그래서 윗선(border-top)도 윗여백도 두지 않습니다. 두면 빈 칸이 하나 있는 것처럼 보입니다. ⚠️ min-height 로 자리를 미리 잡아 둡니다. 서포터즈를 불러오기 전과 후에 높이가 달라지면 화면이 한 번 튑니다. ── */ .nc-band{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; min-height:30px; } .nc-band-t{ flex:none; white-space:nowrap; font-size:12.5px; font-weight:800; letter-spacing:-.2px; color:#b4356e; } /* 하트 — 5초에 한 번 아주 옅게 부풉니다. 깜빡임이 아닙니다. 대부분(0~72%)은 멈춰 있고 한 번만 숨을 쉽니다. */ .nc-band-hr{ font-style:normal; display:inline-block; will-change:transform; animation:ncBandBeat 5s ease-in-out 1.4s infinite; } @keyframes ncBandBeat{ 0%, 72%, 100%{ transform:scale(1); opacity:1; } 80% { transform:scale(1.13); opacity:.92; } 88% { transform:scale(1); opacity:1; } } /* 서포터즈 칩이 들어가는 칸 */ .nc-band-list{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; min-height:28px; } /* 한 분 — 순위 동그라미 + 닉네임. ★ 후원 수치는 여기 오지 않습니다 */ .nc-band-one{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 11px 5px 6px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:-.2px; color:#8e2f60; background:rgba(255,255,255,.62); border:1.5px solid rgba(255,205,229,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nc-band-rk{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(135deg,#ff8fbe,#f56aa4); } /* ══ 1위 (VIP) ══════════════════════════════════════════ ★ 우선순위 1번은 '움직임' 이 아니라 '정지 상태의 무게' 입니다. 글자를 굵게, 동그라미를 금색으로, 테를 옅은 금빛으로 둡니다. 모션을 끈 분에게도 이 강조는 그대로 남습니다. ⚠️ :first-child 가 아니라 .is-first 로 겨냥합니다 — starnav.js 가 '순위 1' 인 칩에만 이 이름표를 답니다. */ .nc-band-one.is-first{ position:relative; overflow:hidden; /* 빛이 칩 밖으로 못 나갑니다 */ font-weight:900; color:#7d2450; /* ⚠️ 바탕을 순백으로 두지 마세요. 아래 흰 빛이 지나가도 안 보입니다 (처음에 #fffdf7 로 뒀다가 빛이 하나도 안 보여서 낮췄습니다). */ background:linear-gradient(180deg,#fff4dc,#ffeef7); border-color:#eec886; box-shadow:0 2px 8px rgba(206,150,40,.16), inset 0 1px 0 rgba(255,255,255,.92); /* 처음 들어올 때 오른쪽에서 살짝. 한 번만 실행되고 끝입니다. ⚠️ fill-mode(both/backwards)를 붙이지 마세요. 애니메이션이 어떤 이유로든 안 돌면 시작 상태(opacity:0)에 그대로 멈춰 칩이 아예 안 보입니다(미리보기 창에서 실제로 겪었습니다). fill 이 없으면 안 돌 때 '평소 모습'이 그대로 보입니다 — 안전한 쪽. */ animation:ncBandIn .55s cubic-bezier(.22,1,.36,1); } .nc-band-one.is-first .nc-band-rk{ width:21px; height:21px; font-size:11.5px; background:linear-gradient(135deg,#ffd77a,#e8a72e); box-shadow:0 1px 3px rgba(176,118,16,.34); } /* 은은한 빛 — 1위 칩 안에서만 지나갑니다. ⚠️ 8초 중 1.2초만 움직이고 나머지는 멈춰 있습니다. 빠르게 반복하면 카지노처럼 보입니다. 늘리지 마세요. */ .nc-band-one.is-first::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:45%; pointer-events:none; will-change:transform; /* ⚠️ 너무 진하면 지나가는 동안 닉네임이 지워집니다(.95 로 뒀다가 낮춤). '글자 위를 스치는' 정도여야 합니다. */ background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 46%, rgba(255,242,206,.42) 64%, rgba(255,255,255,0) 100%); transform:translateX(-170%); animation:ncBandShine 8s ease-in-out 1.8s infinite; } /* ⚠️ 투명도(opacity)는 건드리지 않습니다. 움직임만 줍니다. 애니메이션이 안 도는 환경(시계가 멈춘 미리보기·구형 브라우저)에서 opacity:0 으로 시작하면 칩이 영영 안 보입니다. 자리만 살짝 옮기면 안 돌아도 '제자리보다 16px 오른쪽' 일 뿐이라 아무도 못 알아챕니다. */ @keyframes ncBandIn{ from{ transform:translateX(16px); } to { transform:none; } } @keyframes ncBandShine{ 0% { transform:translateX(-170%); } 15% { transform:translateX(265%); } 100%{ transform:translateX(265%); } } /* 아무도 없을 때 · 불러오지 못했을 때 */ .nc-band-none{ font-size:12.5px; font-weight:700; color:#b3688f; opacity:.9; } .nc-band-more{ flex:none; margin-left:auto; white-space:nowrap; text-decoration:none; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:-.2px; color:#b3688f; background:rgba(255,255,255,.58); border:1.5px solid rgba(255,205,229,.62); transition:background .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease; } .nc-band-more:hover{ color:#8e2f60; background:#fff; border-color:#f9a9cb; box-shadow:0 4px 12px rgba(255,111,168,.22), 0 0 0 3px rgba(255,111,168,.10); } .nc-band-more:focus-visible{ outline:3px solid var(--pink); outline-offset:2px; } html[data-theme="dark"] .sc-bar{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border-color:rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); } html[data-theme="dark"] .nc-band{ border-top-color:rgba(255,255,255,.12); } html[data-theme="dark"] .nc-band-t{ color:#ffc0da; } html[data-theme="dark"] .nc-band-one, html[data-theme="dark"] .nc-band-more{ color:#ffc0da; border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.05); } html[data-theme="dark"] .nc-band-more:hover{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); } html[data-theme="dark"] .nc-band-none{ color:#e5c7d8; } /* 1위 — 어두울 때는 금빛을 낮추고 글자를 밝게 */ html[data-theme="dark"] .nc-band-one.is-first{ color:#ffe9a8; border-color:rgba(240,200,120,.55); background:linear-gradient(180deg, rgba(240,200,120,.16), rgba(255,255,255,.05)); box-shadow:0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10); } html[data-theme="dark"] .nc-band-one.is-first::after{ background:linear-gradient(100deg, rgba(255,240,200,0) 0%, rgba(255,240,200,.30) 50%, rgba(255,240,200,0) 100%); } /* ── 폰 — 1차는 2열, 2차는 3열 (6개면 3×2, 5개면 3+2) ── */ @media (max-width:760px){ .sc-bar{ padding:10px 12px; border-radius:20px; margin:10px 0 14px; } /* 띠 — 제목이 한 줄을 차지하고 그 아래에 서포터즈가 놓입니다 */ .nc-band{ gap:7px 8px; } .nc-band-t{ flex:1 1 100%; } .nc-band-more{ margin-left:0; } .nc-band-one{ font-size:12px; padding:5px 10px 5px 5px; } } /* 아주 좁은 화면 — 닉네임이 길면 줄여서 보여줍니다 */ @media (max-width:360px){ .nc-band-one{ max-width:46vw; } } /* ══ 전광판 (기본 꺼짐) ═══════════════════════════════════ 서포터즈 줄이 오른쪽에서 왼쪽으로 아주 천천히 한 번 흐른 뒤 멈춥니다. ★ 지금은 켜져 있지 않습니다. 켜려면 starnav.js 에서 띠를 만들 때 band.setAttribute("data-marquee", "") 한 줄을 더하면 됩니다. ⚠️ 서포터즈가 3명 이상일 때만 켜세요. 한두 명이면 흐를 거리가 거의 없어 덜컥 움직이는 것처럼 보입니다. ⚠️ PC 에서만 동작합니다. 폰에서는 줄이 아래로 접히기 때문에 가로로 흘리면 이름이 잘립니다. */ @media (min-width:900px){ .nc-band[data-marquee] .nc-band-list{ flex-wrap:nowrap; overflow:hidden; } .nc-band[data-marquee] .nc-band-one{ animation:ncBandRoll 12s cubic-bezier(.16,.8,.3,1) .3s both; } @keyframes ncBandRoll{ from{ transform:translateX(46%); opacity:.35; } to { transform:none; opacity:1; } } } /* 움직임을 줄이도록 설정한 분에게는 여닫는 애니메이션을 끕니다 */ /* ── 움직임을 줄이도록 설정한 분에게는 전부 끕니다 ── ⚠️ 1위 강조(굵은 글자·금색 동그라미·금빛 테)는 움직임이 아니라 정지 상태의 디자인이라 그대로 남습니다. 강조가 사라지지 않습니다. */ @media (prefers-reduced-motion:reduce){ .sc-bar, .nc-band-more{ transition:none; } .nc-band-hr{ animation:none; } .nc-band-one.is-first{ animation:none; } .nc-band-one.is-first::after{ animation:none; opacity:0; } .nc-band[data-marquee] .nc-band-one{ animation:none; } }