/* 문서 페이지(사용법·호환성·개인정보처리방침) 공용 스타일.
index.html 은 로컬 도구로 통째로 배포되는 파일이라 지금처럼 한 파일로 두고,
문서 페이지들만 이 파일을 함께 쓴다. 색은 index.html 의 :root 와 같은 값이다. */
:root{
--navy:#0B2B3C; --cream:#F2ECE1;
--bg:#061922; --panel:#0B2B3C; --panel2:#14425A; --line:#1D5470;
--tx:#F2ECE1; --tx2:#93AAB8; --acc2:#7FB2C8;
--sunk:#041219; --line2:#2A6A8A; --dim:#2E5A72;
--ok:#4ADE80; --warn:#F5B942; --bad:#F87171;
}
*{box-sizing:border-box}
/* 글꼴: Pretendard(직접 호스팅, 각 페이지 에서 늦게 붙인다). 도착 전에 잠깐 쓰는
대체 글꼴은 맑은 고딕을 Pretendard 폭에 맞춰 줄여 둔다 — 그대로 두면 글꼴이 바뀌는
순간 줄바꿈이 달라져 화면이 밀린다(CLS). 한글은 Pretendard 가 확연히 좁고 라틴
문자는 거의 같아서 언어마다 값이 다르다. 첫 화면(index.html)은 문구가 달라 값도 따로다.
값은 문서 16페이지의 첫 화면(1280×900) 블록 위치가 Pretendard 와 같아지도록 골랐다
(2026-09-26 실측):
한국어 85.5% — 8페이지 전부 0px 차이
영어 95% — /en/help 는 95% 이하에서만, /en/privacy 는 96.5% 이상에서만 맞는다.
둘을 동시에 맞추는 값은 없어서 방문이 많은 사용법 쪽을 골랐다
(/en/privacy 는 한 줄 차이가 남는다).
문구를 크게 고치면 다시 잰다. */
@font-face{font-family:"Pretendard Fallback"; src:local("Malgun Gothic"),local("MalgunGothic"); font-weight:100 599; size-adjust:85.5%}
@font-face{font-family:"Pretendard Fallback"; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"); font-weight:600 900; size-adjust:85.5%}
@font-face{font-family:"Pretendard Fallback EN"; src:local("Malgun Gothic"),local("MalgunGothic"); font-weight:100 599; size-adjust:95%}
@font-face{font-family:"Pretendard Fallback EN"; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"); font-weight:600 900; size-adjust:95%}
body{
margin:0; background:var(--bg); color:var(--tx);
font-family:"Pretendard Variable","Pretendard Fallback","Pretendard","Malgun Gothic","Segoe UI",system-ui,sans-serif;
font-size:16px; line-height:1.75; -webkit-text-size-adjust:100%;
}
html[lang="en"] body{
font-family:"Pretendard Variable","Pretendard Fallback EN","Pretendard","Malgun Gothic","Segoe UI",system-ui,sans-serif;
}
a{color:var(--acc2)}
a:hover{color:var(--cream)}
/* ---- 상단 바 ---- */
.top{
border-bottom:1px solid var(--line); background:var(--panel);
position:sticky; top:0; z-index:5;
}
.top .in{
max-width:820px; margin:0 auto; padding:14px 24px;
display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.logo{display:inline-flex; align-items:center; gap:9px; color:var(--cream); text-decoration:none}
.logo .mk{width:26px; height:18px; display:block; flex:0 0 auto}
.logo .wm{font-size:17px; font-weight:600; letter-spacing:-.5px}
.top nav{display:flex; gap:16px; font-size:14px; margin-left:auto; flex-wrap:wrap}
.top nav a{color:var(--tx2); text-decoration:none}
.top nav a:hover, .top nav a[aria-current]{color:var(--cream)}
/* 언어 전환. 나머지 항목과 성격이 달라 앞에 세로선을 하나 넣어 떼어 놓는다.
좁은 화면에서 nav 가 접히면 줄 맨 앞에 선만 덩그러니 남으므로 그때는 뗀다. */
.top nav a.lang{border-left:1px solid var(--line); padding-left:16px}
@media(max-width:620px){ .top nav a.lang{border-left:none; padding-left:0} }
/* ---- 본문 ---- */
main{max-width:820px; margin:0 auto; padding:38px 24px 90px}
h1{font-size:32px; line-height:1.25; letter-spacing:-1px; font-weight:800; margin:0 0 10px}
.lead{color:var(--tx2); font-size:17px; margin:0 0 38px}
h2{
font-size:21px; font-weight:700; letter-spacing:-.4px;
margin:44px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
h2:first-of-type{border-top:none; padding-top:0; margin-top:0}
h3{font-size:16.5px; font-weight:700; margin:26px 0 8px; color:var(--cream)}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin:5px 0}
b,strong{color:var(--cream); font-weight:600}
code{
background:var(--sunk); border:1px solid var(--line); border-radius:5px;
padding:1px 6px; font-family:ui-monospace,Consolas,monospace; font-size:.88em; color:var(--acc2);
}
kbd{
display:inline-block; min-width:22px; text-align:center;
background:var(--sunk); border:1px solid var(--line); border-bottom-width:2px;
border-radius:5px; padding:1px 6px; font-size:12.5px;
font-family:ui-monospace,Consolas,monospace; color:var(--tx2);
}
/* 표는 좁은 화면에서 페이지 전체를 밀지 않고 자기 안에서만 가로 스크롤한다 */
.tw{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:10px}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:460px}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--panel); color:var(--tx2); font-weight:700; font-size:13px; letter-spacing:.3px}
tr:last-child td{border-bottom:none}
.note{
border:1px solid var(--line); border-left:3px solid var(--acc2); border-radius:0 10px 10px 0;
background:rgba(127,178,200,.07); padding:14px 18px; margin:0 0 20px;
}
.note.warn{border-left-color:var(--warn); background:rgba(245,185,66,.07)}
.note p:last-child{margin-bottom:0}
.yes{color:var(--ok); font-weight:600}
.no{color:var(--bad); font-weight:600}
.back{
display:inline-block; margin-top:36px; padding:12px 22px; border-radius:10px;
background:var(--cream); color:var(--navy); font-weight:700; text-decoration:none;
}
.back:hover{background:#fff; color:var(--navy)}
footer{
border-top:1px solid var(--line); color:var(--tx2); font-size:13px;
}
footer .in{max-width:820px; margin:0 auto; padding:20px 24px 34px; display:flex; gap:14px; flex-wrap:wrap}
footer a{color:var(--tx2)}
footer .sp{margin-left:auto}
@media(max-width:620px){
body{font-size:15.5px}
h1{font-size:26px}
h2{font-size:19px}
main{padding:28px 18px 70px}
.top .in, footer .in{padding-left:18px; padding-right:18px}
footer .sp{margin-left:0}
}