/* ═══ 아르케 공통 — 밤의 측량 장부 위에 스며드는 보석빛 ═══════════════
   모든 페이지가 이 파일을 먼저 읽는다. 페이지 고유 스타일은 각 파일에 둔다.
   디자인 정본은 SITE.md 다. 단일 다크 테마로 확정되어 있다. */

@font-face{
  font-family:"Pretendard";
  src:url("../../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"MaruBuri";
  src:url("../../fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"MaruBuri";
  src:url("../../fonts/MaruBuri-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../../fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../../fonts/IBMPlexMono-Medium-latin.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212;
}

:root{
  color-scheme:dark;

  /* 바탕 — 깊이 순서 */
  --night:#0B0E13;
  --pit:#0E1117;
  --pit-2:#12161C;
  --stone:#1A2029;
  --stone-lit:#212833;
  --seam:#2B3441;
  --seam-hi:#3A4655;

  /* 글자 */
  --chalk:#EAE3D6;
  --chalk-2:#C4BCAC;
  --dust:#9A9384;          /* 바탕 #0E1117 대비 6.3:1 */

  /* 세 가문 — 공식 심볼의 세 보석. 속성 설정으로 읽지 않는다 */
  --kyris:#89E7C0;
  --minas:#B9DEEF;
  --exia:#F1E3B9;

  /* 등불·금속 — 필요한 곳에만 */
  --lamp:#E8913C;
  --ore:#C9A227;

  /* 선 — 보석빛이 스민 장부 선 */
  --rule:rgba(185,222,239,.13);
  --rule-soft:rgba(185,222,239,.07);

  --f-disp:"MaruBuri","Nanum Myeongjo","AppleMyungjo",serif;
  --f-body:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;

  --radius:2px;
  --wrap:1240px;
  --gutter:clamp(20px,4vw,56px);
  --nav-h:68px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{ box-sizing:border-box; }
em,i,cite{ font-style:normal; }           /* 한글에 가짜 이탤릭을 만들지 않는다 */
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  scrollbar-color:var(--seam-hi) var(--night);
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  min-height:100dvh;
  color:var(--chalk);
  background-color:var(--pit);
  background-image:
    linear-gradient(90deg,transparent 0 47px,rgba(137,231,192,.06) 47px 48px,transparent 48px),
    repeating-linear-gradient(180deg,transparent 0 35px,rgba(185,222,239,.03) 35px 36px);
  font-family:var(--f-body);
  font-size:17px;
  font-weight:400;
  line-height:1.8;
  letter-spacing:-.005em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(241,227,185,.85); color:var(--night); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--night); }
::-webkit-scrollbar-thumb{ background:var(--seam); border:3px solid var(--night); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--seam-hi); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
button{ font:inherit; color:inherit; }
input,textarea{ caret-color:var(--exia); }
:focus-visible{ outline:2px solid var(--exia); outline-offset:3px; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
.num{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* ═══ 상단 내비 ═════════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background:rgba(11,14,19,.9);
  border-bottom:1px solid var(--rule);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
}
.nav .wrap{ height:100%; display:flex; align-items:center; gap:32px; }
.brand{
  flex:none;
  display:flex; align-items:center; gap:11px; margin-right:auto;
  text-decoration:none; white-space:nowrap;
}
.brand img{ width:30px; height:30px; object-fit:contain; }
.brand span{ font-family:var(--f-disp); font-size:20px; font-weight:700; letter-spacing:.01em; }
.brand small{ color:var(--dust); font:500 10px/1 var(--f-data); letter-spacing:.24em; }
.nav nav{ min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.nav nav::-webkit-scrollbar{ display:none; }
.nav nav a{
  position:relative;
  padding:8px 11px;
  color:var(--chalk-2);
  font-size:14.5px;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s var(--ease-out);
}
.nav nav a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:2px; height:1px;
  background:var(--exia);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease-out);
}
.nav nav a[aria-current="page"],
.nav nav a.is-current{ color:var(--chalk); }
.nav nav a[aria-current="page"]::after,
.nav nav a.is-current::after{ transform:scaleX(1); }
.nav nav a.nav-cta{
  margin-left:10px;
  border:1px solid rgba(241,227,185,.42);
  border-radius:var(--radius);
  color:var(--exia);
}
.nav nav a.nav-cta::after{ display:none; }
@media (hover:hover){
  .nav nav a:hover{ color:var(--chalk); }
  .nav nav a:hover::after{ transform:scaleX(1); }
  .nav nav a.nav-cta:hover{ background:rgba(241,227,185,.08); }
}
@media (max-width:760px){
  :root{ --nav-h:60px; }
  .brand small{ display:none; }
  .nav .wrap{ gap:12px; padding-inline:16px; }
  .brand{ margin-right:0; }
  .brand span{ font-size:18px; }
  .nav nav{ flex:1; margin-right:-16px; padding-inline:8px 16px; mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 82%,transparent); }
  .nav nav a{ padding:8px 8px; font-size:14px; }
  .nav nav a.nav-cta{ margin-left:4px; }
}

/* ═══ 버튼 ══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:48px;
  padding:0 24px;
  border:1px solid rgba(241,227,185,.55);
  border-radius:var(--radius);
  background:transparent;
  color:var(--exia);
  font-family:var(--f-body); font-size:15px; font-weight:600;
  text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .16s var(--ease-out);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .22s var(--ease-out); }
.btn.solid{ background:var(--exia); color:var(--night); border-color:var(--exia); }
.btn.quiet{ border-color:var(--seam-hi); color:var(--chalk-2); }
.btn:active{ transform:scale(.97); }
@media (hover:hover){
  .btn:hover{ background:rgba(241,227,185,.08); border-color:var(--exia); }
  .btn.solid:hover{ background:#FFF4D6; border-color:#FFF4D6; }
  .btn.quiet:hover{ background:var(--stone); color:var(--chalk); border-color:var(--seam-hi); }
  .btn:hover svg{ transform:translateX(3px); }
}

/* ═══ 서버 주소 복사 ══════════════════════════════════════════════════ */
.server-copy{
  display:inline-grid; grid-template-columns:auto auto; align-items:center; column-gap:22px;
  padding:13px 16px 13px 18px;
  border:1px solid rgba(185,222,239,.26);
  border-radius:var(--radius);
  background:rgba(18,22,28,.82);
  color:var(--chalk);
  text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),transform .16s var(--ease-out);
}
.server-copy small{ grid-column:1; color:var(--dust); font-size:12px; line-height:1.3; }
.server-copy b{ grid-column:1; color:var(--minas); font:500 18px/1.35 var(--f-data); letter-spacing:.01em; }
.server-copy span{
  grid-column:2; grid-row:1 / span 2;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px;
  border-left:1px solid var(--rule);
  color:var(--chalk-2); font-size:13px;
}
.server-copy span svg{ width:15px; height:15px; }
.server-copy[data-copied="true"]{ border-color:rgba(137,231,192,.5); }
.server-copy[data-copied="true"] span{ color:var(--kyris); }
.server-copy:active{ transform:scale(.98); }
@media (hover:hover){
  .server-copy:hover{ border-color:var(--minas); background:rgba(185,222,239,.06); }
}

/* ═══ 바닥 ══════════════════════════════════════════════════════════ */
.site-foot{ border-top:1px solid var(--rule); background:var(--night); }
.site-foot .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px;
  padding-block:30px;
  color:var(--dust); font-size:13.5px;
}
.site-foot b{ color:var(--chalk-2); font-family:var(--f-disp); font-size:15px; font-weight:700; }
.site-foot a{ color:var(--chalk-2); text-decoration:none; }
@media (hover:hover){ .site-foot a:hover{ color:var(--exia); } }

/* ═══ 등장 — 한 번, 이미 보이는 상태에서 조용히 ════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .js [data-reveal].is-in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}