:root{
  --bg:#050b18;--ink:#eaf5ff;--body:#c9dcee;--muted:#8fb3d1;--faint:#5f7f9c;
  --ice:#bfe8ff;--ice-2:#7fcbff;--cyan:#4fd6ff;--gold:#ffd88a;
  --card-a:rgba(255,255,255,.085);--card-b:rgba(255,255,255,.025);
  --stroke:rgba(150,210,255,.20);--stroke-hi:rgba(150,225,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;overflow-x:hidden;background:var(--bg);
}
a{color:var(--ice-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(127,203,255,.4)}
a:hover,a:focus-visible{color:var(--ice);text-decoration-color:var(--ice)}

.aurora{position:absolute;left:-10%;right:-10%;top:-12%;height:520px;pointer-events:none;filter:blur(46px);opacity:.9;
  background:
    radial-gradient(38% 55% at 28% 42%,rgba(79,214,255,.22),transparent 70%),
    radial-gradient(34% 50% at 72% 30%,rgba(122,140,255,.20),transparent 70%),
    radial-gradient(30% 40% at 52% 70%,rgba(150,235,255,.10),transparent 70%)}
.layer{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:28px 20px 56px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;letter-spacing:.04em;color:var(--muted);text-decoration:none}
.back img{width:22px;height:22px;display:block}
.back:hover,.back:focus-visible{color:var(--ice)}
.lang{display:flex;gap:6px}
.lang button{font:600 12.5px/1 inherit;font-family:inherit;color:var(--muted);background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);border-radius:999px;padding:7px 14px;cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--ink);border-color:var(--stroke-hi);background:rgba(120,220,255,.12)}
.lang button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.hero{display:flex;align-items:center;gap:20px;margin:40px 0 8px}
.hero img{width:80px;height:80px;border-radius:18px;flex:none;box-shadow:0 0 0 1px var(--stroke),0 12px 32px -14px rgba(79,214,255,.45)}
.hero h1{font-size:clamp(26px,6vw,34px);line-height:1.2;color:var(--ink);font-weight:800;letter-spacing:.01em}
.hero .sub{margin-top:6px;font-size:14px;color:var(--muted);letter-spacing:.04em}
.meta{margin:6px 0 26px;font:500 12px/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:var(--faint);letter-spacing:.06em}

.summary{padding:18px 20px;border-radius:16px;border:1px solid rgba(255,216,138,.30);
  background:linear-gradient(120deg,rgba(255,216,138,.10),rgba(79,214,255,.04) 62%,rgba(255,255,255,.02));
  color:var(--ink);font-size:16.5px;line-height:1.6}
.summary b{color:var(--gold)}

section.doc{margin-top:30px}
section.doc > h2.lang-title{display:none}
.item{margin-top:26px}
.item h3{display:flex;align-items:baseline;gap:12px;font-size:17px;color:var(--ice);font-weight:700;letter-spacing:.01em;margin-bottom:8px}
.item h3 .no{font:600 12px/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--cyan);letter-spacing:.16em}
.item p{margin-top:8px}
.item ul{margin:8px 0 0 1.2em}
.item li{margin-top:4px}
.item li::marker{color:var(--faint)}
.item code{font:500 .9em ui-monospace,"SF Mono",Menlo,monospace;color:var(--ice);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.item p,.item li,.summary{overflow-wrap:break-word}
/* 한국어는 어절 단위로 줄바꿈 — 좁은 화면에서 낱말이 중간에서 끊기지 않게 */
section.doc[lang="ko"]{word-break:keep-all}

table.data{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px}
table.data th,table.data td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--stroke)}
table.data th{width:34%;color:var(--ice);font-weight:600}
table.data tr:last-child td,table.data tr:last-child th{border-bottom:1px solid var(--stroke)}

.contact{margin-top:30px;padding:18px 20px;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(145deg,var(--card-a),var(--card-b))}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px}
.contact dt{color:var(--muted)}
.contact dd{color:var(--ink)}

.foot{margin-top:44px;text-align:center;font-size:11.5px;letter-spacing:.28em;color:var(--faint);padding-left:.28em}

/* 스크립트가 켜져 있으면 한 언어만 보인다. 꺼져 있으면 둘 다 보인다. */
html.js section.doc[hidden]{display:none}

@media (max-width:560px){
  .layer{padding:20px 16px 44px}
  .hero{gap:14px;margin-top:30px}
  .hero img{width:64px;height:64px;border-radius:15px}
  table.data th{width:38%}
  .contact dl{grid-template-columns:1fr;gap:0}
  .contact dd{margin-bottom:8px}
}