/* 법적 고지 문서 4장 공통 껍데기 — eula · refund · privacy · install
   E2-landing.html 과 같은 토큰·같은 톤. 폰트는 brand.css 의 data URI 내장 폰트를
   그대로 쓴다. 외부 요청 0건 원칙은 이 페이지들에도 그대로 적용된다. */
:root{
  --ink:#0A0B0B; --band:#111212; --band2:#161818; --lift:#1D2021;
  --fg:#F4F3EF; --fg2:#A6A8A4; --fg3:#757876;
  --line:#242726; --line2:#333735;
  --cy:#2ec8d6; --cy-dim:#1B767E; --cy-deep:#12454A;
  --warn:#E4B363;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,4.5vw,72px);
  --maxw:840px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);
  font:400 16px/1.72 'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  overflow-x:clip;text-wrap:pretty;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--cy);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ───── 상단바 ───── */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;min-height:60px;
  padding:8px var(--gut);background:rgba(10,11,11,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .lock{height:22px;width:auto}
.top .back{margin-left:auto;color:var(--fg2);font-size:13.5px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.top .back:hover{color:var(--fg)}
/* 44px 터치 타깃 — 글자 크기는 두고 패딩으로 키운다 */
.langsw{display:flex;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.langsw button{background:none;border:0;color:var(--fg3);font:600 11px/1 var(--mono);
  min-height:44px;min-width:44px;padding:0 12px;cursor:pointer;letter-spacing:.04em}
.langsw button[aria-pressed=true]{background:var(--lift);color:var(--fg)}

/* ───── 문서 본문 ───── */
main{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px)}
.kick{display:inline-block;font:600 11.5px/1 var(--mono);letter-spacing:.13em;
  color:var(--cy);text-transform:uppercase;margin-bottom:18px}
h1{font-size:clamp(26px,3.4vw,38px);line-height:1.26;font-weight:600;letter-spacing:-.015em}
.eff{margin-top:18px;padding:12px 16px;border:1px solid var(--line2);border-left:2px solid var(--cy);
  border-radius:2px;background:var(--band);font-size:13.5px;color:var(--fg2);line-height:1.6}
.eff b{color:var(--fg);font-weight:600}
.lede{margin-top:22px;font-size:16.5px;color:var(--fg2)}

h2{margin-top:clamp(36px,4.6vw,54px);padding-top:20px;border-top:1px solid var(--line);
  font-size:clamp(19px,2.2vw,23px);line-height:1.36;font-weight:600;letter-spacing:-.01em}
h3{margin-top:30px;font-size:16.5px;font-weight:600;line-height:1.45}
main p{margin-top:14px;color:var(--fg2);font-size:15.5px}
main p b,main li b,main dd b{color:var(--fg);font-weight:600}
main .art{margin-top:16px;display:grid;gap:11px}
main .art li{position:relative;padding-left:26px;color:var(--fg2);font-size:15.5px;line-height:1.7}
main .art li>.n{position:absolute;left:0;top:0;font:600 13px/1.72 var(--mono);color:var(--fg3)}
main .bul{margin-top:14px;display:grid;gap:9px}
main .bul li{position:relative;padding-left:20px;color:var(--fg2);font-size:15.5px;line-height:1.66}
main .bul li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;
  background:var(--cy-dim);border-radius:1px}
main .sub{margin-top:10px;display:grid;gap:7px;padding-left:4px}
main .sub li{position:relative;padding-left:24px;color:var(--fg3);font-size:14.5px;line-height:1.62}
main .sub li>.n{position:absolute;left:0;top:0;font:600 12px/1.62 var(--mono);color:var(--fg3)}

/* 표 — 560px 아래에서는 카드로 접힌다 */
.tbl{margin-top:20px;border:1px solid var(--line);border-radius:3px;background:var(--band)}
.tbl table{width:100%;border-collapse:collapse;text-align:left}
.tbl th,.tbl td{padding:12px 15px;border-bottom:1px solid var(--line);font-size:14px;
  vertical-align:top;line-height:1.6}
.tbl thead th{border-bottom:1px solid var(--line2);font:600 12px/1.35 var(--mono);
  color:var(--fg2);letter-spacing:.02em}
.tbl tbody th{font-weight:500;color:var(--fg);white-space:nowrap}
.tbl tbody td{color:var(--fg2)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
@media(max-width:560px){
  /* .tbl tbody th 는 위에서 nowrap 이라 선택자를 그대로 맞춰 준다 — .tbl th 로는
     특정도가 낮아 지지 않고, 긴 행 이름이 줄바꿈 없이 페이지를 밀어낸다 */
  .tbl table,.tbl tbody,.tbl tr,.tbl th,.tbl td,
  .tbl tbody th{display:block;white-space:normal}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{border-bottom:1px solid var(--line2);padding:4px 0}
  .tbl tr:last-child{border-bottom:0}
  .tbl th,.tbl td{border-bottom:0;padding:6px 15px}
  .tbl tbody th{color:var(--fg);font-weight:600;padding-top:14px}
  .tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font:600 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--fg3);text-transform:uppercase}
}

/* 강조 상자 */
.box{margin-top:20px;border:1px solid var(--line2);border-left:2px solid var(--warn);
  background:var(--band);border-radius:2px;padding:18px 20px;font-size:15px;color:var(--fg2);
  line-height:1.68}
/* 첫 b 만 상자의 제목이다. 본문 안에서 강조로 쓴 b 까지 블록으로 떨어뜨리면
   문장이 두 동강 난다 — 직계 첫 자식으로만 좁힌다 */
.box>b:first-child{color:var(--warn);font-weight:600;display:block;margin-bottom:6px}
.box b{color:var(--fg);font-weight:600}
.box.cy{border-left-color:var(--cy)}
.box.cy>b:first-child{color:var(--cy)}
.box p{margin-top:10px;font-size:15px}

/* 코드·경로 */
code{font:500 13.5px/1.5 var(--mono);background:var(--lift);border:1px solid var(--line2);
  border-radius:2px;padding:1px 6px;color:var(--fg)}

/* OS 탭 (install.html) */
.tabs{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.tabs button{background:var(--band);border:1px solid var(--line2);border-radius:2px;color:var(--fg2);
  font:600 13.5px/1 'Pretendard',system-ui,sans-serif;min-height:44px;padding:0 20px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--lift);color:var(--fg);border-color:var(--cy)}
.pane[hidden]{display:none}

/* 목차 */
.toc{margin-top:26px;border:1px solid var(--line);border-radius:3px;background:var(--band);padding:18px 20px}
.toc .t{font:600 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--fg3);text-transform:uppercase}
.toc ol{margin-top:12px;display:grid;gap:2px}
.toc a{display:block;font-size:14px;color:var(--fg2);padding:7px 0;line-height:1.5}
.toc a:hover{color:var(--cy)}

footer{border-top:1px solid var(--line);padding:40px 0 56px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer nav a{color:var(--fg2);font-size:13.5px;display:inline-flex;align-items:center;min-height:44px}
footer .disc{margin-top:14px;font-size:12.5px;color:var(--fg3);line-height:1.68}