/* 가이드·개발노트 공용 스타일.
/starforge/index.html 의 디자인 언어를 그대로 따른다 — 같은 사이트로 보여야 한다.
⚠ 색만으로 구분하는 표현은 쓰지 않는다(형님 색약). 수치·라벨을 항상 글자로 같이 적는다. */
:root {
--bg:#070b12; --panel:#0c121d; --panel2:#121a28;
--border:#1b3540; --border-hi:#2a5d6b;
--text:#e9f1f5; --dim:#6b7a88; --accent:#2fe0cf;
--metal:#9fb0bd; --crystal:#56b6ff; --deut:#34d399;
--warn:#fbbf24; --bad:#ff6b7a; --crew:#a78bfa;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
background:var(--bg); color:var(--text); line-height:1.75; overflow-x:hidden;
}
.stars {
position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent),
radial-gradient(1.5px 1.5px at 68% 12%, rgba(255,255,255,.4), transparent),
radial-gradient(2px 2px at 32% 62%, rgba(47,224,207,.35), transparent),
radial-gradient(1.5px 1.5px at 84% 48%, rgba(255,255,255,.45), transparent),
radial-gradient(1.5px 1.5px at 48% 84%, rgba(255,255,255,.35), transparent),
radial-gradient(2px 2px at 92% 78%, rgba(86,182,255,.3), transparent);
background-repeat:no-repeat;
}
.wrap { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 20px; }
.wrap.wide { max-width:1080px; }
/* 상단 바 */
nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(12px);
background:rgba(7,11,18,.82); border-bottom:1px solid var(--border); }
nav .inner { max-width:1080px; margin:0 auto; padding:14px 20px;
display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand .mark { width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
background:linear-gradient(140deg,var(--accent),#1a8f86); color:#04122b;
font-family:'Orbitron',sans-serif; font-weight:900; font-size:13px; }
.brand span.t { font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:1.5px; font-size:15px; }
nav .links { display:flex; gap:20px; align-items:center; }
nav .links a { color:var(--dim); text-decoration:none; font-size:14px; font-weight:600; transition:color .2s; }
nav .links a:hover, nav .links a[aria-current="page"] { color:var(--accent); }
@media (max-width:820px){ nav .links { display:none; } }
.btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none;
background:var(--accent); color:#04122b; font-weight:800; font-size:14.5px;
padding:11px 22px; border-radius:10px; border:none; cursor:pointer;
transition:transform .15s, box-shadow .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(47,224,207,.28); }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--border-hi); }
.btn.ghost:hover { background:rgba(47,224,207,.08); box-shadow:none; }
/* 빵부스러기 */
.crumbs { font-size:13px; color:var(--dim); padding:26px 0 0; }
.crumbs a { color:var(--dim); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
/* 문서 머리 */
.doc-head { padding:20px 0 34px; border-bottom:1px solid var(--border); margin-bottom:38px; }
.doc-head .kicker { font-family:'Orbitron',sans-serif; font-size:11.5px; letter-spacing:3px;
color:var(--accent); font-weight:700; margin-bottom:14px; }
.doc-head h1 { font-size:clamp(28px,5.5vw,42px); font-weight:900; line-height:1.2; letter-spacing:-.5px; }
.doc-head .lead { color:var(--dim); font-size:16px; margin-top:14px; }
.updated { font-size:12.5px; color:var(--dim); margin-top:16px; }
/* 본문 */
main { padding-bottom:70px; }
h2 { font-size:clamp(21px,3.4vw,27px); font-weight:800; margin:52px 0 6px; letter-spacing:-.3px; }
h2:first-of-type { margin-top:0; }
h2 + .bar { width:40px; height:3px; border-radius:2px; background:var(--accent); margin:0 0 22px; }
h3 { font-size:17.5px; font-weight:800; margin:32px 0 10px; }
p { font-size:15.5px; margin:14px 0; }
p.dim { color:var(--dim); font-size:14.5px; }
ul, ol { margin:14px 0 14px 22px; }
li { font-size:15.5px; margin:7px 0; }
strong { color:var(--text); font-weight:800; }
a.inline { color:var(--accent); }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
background:var(--panel2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; }
/* 표 — 가로 스크롤을 표 안에서만 처리한다 */
.tablewrap { overflow-x:auto; margin:20px 0; border:1px solid var(--border); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:460px; }
th, td { text-align:left; padding:11px 15px; font-size:14px; border-bottom:1px solid var(--border); }
th { background:var(--panel2); font-weight:800; font-size:13px; color:var(--text); white-space:nowrap; }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 강조 상자 */
.note { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
border-radius:0 12px 12px 0; padding:16px 20px; margin:22px 0; }
.note.warn { border-left-color:var(--warn); }
.note .t { font-weight:800; font-size:14px; margin-bottom:6px; }
.note p { margin:6px 0 0; font-size:14.5px; color:var(--dim); }
/* 카드 */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:22px 0; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px 20px;
transition:border-color .2s, transform .2s; text-decoration:none; color:var(--text); display:block; }
a.card:hover { border-color:var(--border-hi); transform:translateY(-2px); }
.card .ico { font-size:24px; }
.card h3 { font-size:16.5px; font-weight:800; margin:10px 0 7px; }
.card p { font-size:13.5px; color:var(--dim); line-height:1.7; margin:0; }
/* 개발노트 항목 */
.entry { border-bottom:1px solid var(--border); padding:26px 0; }
.entry:last-child { border-bottom:none; }
.entry .date { font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:1.5px; color:var(--accent); font-weight:700; }
.entry h3 { margin:8px 0 6px; font-size:19px; }
.tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px;
border:1px solid var(--border-hi); color:var(--dim); border-radius:999px; padding:2px 10px; margin-left:8px; }
/* 다음 읽을거리 */
.next { display:flex; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:28px; border-top:1px solid var(--border); }
/* 푸터 */
footer { border-top:1px solid var(--border); padding:38px 0 54px; }
footer .flinks { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
footer .flinks a { color:var(--dim); text-decoration:none; font-size:13.5px; }
footer .flinks a:hover { color:var(--accent); }
footer .biz { text-align:center; font-size:12px; color:var(--dim); line-height:1.9; }
/* 게임물 등급 표시 — 법정 표시라 눈에 띄되 본문을 방해하지 않게 */
.rating { display:flex; gap:12px; align-items:center; justify-content:center;
max-width:520px; margin:0 auto 18px; padding:12px 16px;
background:var(--panel); border:1px solid var(--border); border-radius:12px;
font-size:12px; color:var(--dim); line-height:1.7; text-align:left; }
.rating img { border-radius:8px; flex:0 0 auto; }
.rating strong { color:var(--text); font-size:13.5px; }
.rating.pending { display:block; text-align:center; background:transparent;
border:1px dashed var(--border-hi); }