/* ═════════════════════════════════════════════════════════════════════
   게임라운지 — 사이트 전체 CSS. 이 파일 하나가 겉모습의 전부다.

   ★ 이 디자인은 임시다. 나중에 레퍼런스를 받아 통째로 갈아엎는다.
     그래서 「예쁘게」가 아니라 「갈아 끼우기 쉽게」에 맞춰 놨다.

   갈아엎을 때 지켜야 할 것
     1) 내용은 여기 없다. 글·도구 정보·목록은 siteconf.py 와 content/pages/*.md
        에 있다. 디자인을 바꿔도 그 파일들은 손대지 않는다.
     2) 아래 [토큰] 한 덩어리만 갈아도 분위기가 통째로 바뀐다. 색·간격·글꼴·
        모서리를 토큰 밖에 다시 적지 마라.
     3) 클래스 이름은 역할이다(.tools, .card, .hero). 색이나 크기를 이름에
        박지 않는다 — 파랑을 초록으로 바꿔도 이름이 안 거짓말하게.
     4) 템플릿은 이 클래스만 부른다. 인라인 style 속성은 쓰지 않는다.

   토큰 출처: 시안(layout.html) → 주문서 시뮬레이터 style.css. 세 사이트가
   같은 색을 쓰라고 가져온 값이다.
   ═════════════════════════════════════════════════════════════════════ */

/* ── [토큰] ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* 글자 */
  --ink:#111318;          /* 본문 기본 */
  --sub:#565e6b;          /* 설명글 */
  --faint:#858d9a;        /* 곁들이는 글 */

  /* 강조 */
  --key:#2563eb; --key-hover:#1d4ed8; --key-soft:#eaf1fe; --key-line:#c7dbfd;

  /* 바탕 */
  --bg:#eef1f6; --surface:#ffffff; --soft:#f4f5f7;

  /* 선 */
  --line:rgba(17,19,24,.10); --line-strong:rgba(17,19,24,.18);

  /* 간격 */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;

  /* 모서리 */
  --r-sm:6px; --r-md:10px; --r-full:999px;

  /* 글꼴 — 웹폰트를 안 쓴다. 시안에는 구글 폰트가 걸려 있었지만 외부 요청을
     물고 뜨면 첫 그림이 그만큼 늦고, 폰트 서버가 죽으면 우리가 같이 흔들린다. */
  --font-display:"Maplestory",system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --font-body:system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;

  --shadow:0 1px 2px rgba(17,19,24,.05);
}

/* 어두운 화면. 값만 다시 정하고 규칙은 아래 하나만 쓴다.
   기본(system) · 사용자가 고른 dark 두 경우를 같은 값으로 맞춰 둔다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:#e9edf5; --sub:#a2acbd; --faint:#77839a;
    --key:#6d9bff; --key-hover:#8db0ff; --key-soft:#17243f; --key-line:#27406c;
    --bg:#0b0f14; --surface:#151b24; --soft:#1b2430;
    --line:rgba(233,237,245,.11); --line-strong:rgba(233,237,245,.22);
    --shadow:0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#e9edf5; --sub:#a2acbd; --faint:#77839a;
  --key:#6d9bff; --key-hover:#8db0ff; --key-soft:#17243f; --key-line:#27406c;
  --bg:#0b0f14; --surface:#151b24; --soft:#1b2430;
  --line:rgba(233,237,245,.11); --line-strong:rgba(233,237,245,.22);
  --shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ── [바탕] ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 본문 바로가기 — 평소엔 화면 밖, 탭으로 오면 튀어나온다 */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--s1) var(--s3); background: var(--key); color: #fff; }
.skip:focus { left: 0; }

/* ── [뼈대] ─────────────────────────────────────────────────────────── */
.shell {
  max-width: 1000px; margin: 0 auto;
  padding: var(--s3) var(--s3) var(--s6);
  display: flex; flex-direction: column; gap: var(--s2);
}
@media (max-width: 520px) { .shell { padding: var(--s2) var(--s2) var(--s5); } }

/* 본문 안의 덩어리는 여기서 한꺼번에 띄운다. 템플릿에 margin 을 흩지 않으려는
   것이다 — 인라인 style 속성은 쓰지 않는다. */
main { display: flex; flex-direction: column; gap: var(--s2); }

/* 어디에나 쓰는 흰 칸. 제목줄 + 몸통. */
.card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow); }
.card__hd {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
}
.card__hd small { margin-left: auto; font-family: var(--font-body);
  font-size: 11.5px; color: var(--faint); font-weight: 400; }
.card__bd { padding: var(--s3); }

/* ── [상단 띠] ──────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s1) var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.topbar__logo { display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.topbar__logo em { font-style: normal; color: var(--key); }
.topbar__nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar__nav a { padding: 5px 11px; border-radius: var(--r-sm); color: var(--sub); font-size: 13px; }
.topbar__nav a:hover { background: var(--soft); color: var(--ink); }
.topbar__nav a.is-on { background: var(--key-soft); color: var(--key); font-weight: 600; }
.topbar__end { margin-left: auto; display: flex; gap: 4px; align-items: center; }
@media (max-width: 520px) { .topbar { gap: var(--s1); } .topbar__end { margin-left: 0; } }

/* 화면 모드 단추 */
.theme { display: flex; gap: 2px; }
.theme button {
  width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--faint);
}
.theme button svg { width: 15px; height: 15px; }
.theme button:hover { color: var(--ink); background: var(--soft); }
.theme button[aria-pressed="true"] { color: var(--key); border-color: var(--key-line); background: var(--key-soft); }

/* ── [대문] ─────────────────────────────────────────────────────────── */
.hero {
  padding: var(--s5) var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.hero__t { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.hero__s { font-size: 14px; color: var(--sub); margin-top: 6px; max-width: 46em; }
@media (max-width: 520px) { .hero { padding: var(--s4) var(--s2); } .hero__t { font-size: 19px; } }

/* ── [도구 카드] ────────────────────────────────────────────────────── */
.tools { display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); align-items: start; }
.tool { display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.tool:hover { border-color: var(--key-line); }
.tool__link { display: block; }
/* ★ height:auto 가 없으면 안 된다. 마크업의 height="369" 는 브라우저가 CSS
   height 로 바꿔 주는데(자리 미리 잡아 주는 값), 그게 남아 있으면 aspect-ratio
   가 무시되고 사진이 원래 높이 그대로 늘어난다. 실제로 카드 셋의 높이가
   제각각으로 떴다. */
.tool__pic { display: block; width: 100%; height: auto; aspect-ratio: 1031 / 595;
  object-fit: cover; background: var(--soft); }
/* 스크린샷이 아직 없는 도구의 자리표. siteconf 의 pic 을 채우면 저절로 안 쓰인다. */
.tool__pic--mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--s2);
  background: var(--soft); border-bottom: 1px solid var(--line); color: var(--ink);
}
.tool__pic--mark img { width: 40px; height: 40px; }
.tool__pic--mark b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.tool__pic--mark span { font-size: 12px; color: var(--sub); max-width: 30ch; line-height: 1.45; }
/* flex:1 — 몸통이 카드 남는 높이를 다 먹어야 아래 margin-top:auto 가 먹는다 */
.tool__body { flex: 1 1 auto; padding: var(--s2); display: flex; flex-direction: column; gap: 6px; }
.tool__n { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.tool__d { font-size: 12.5px; color: var(--sub); }
/* margin-top:auto — 설명 줄 수가 달라도 단추는 카드 아래에 나란히 선다 */
.tool__go {
  align-self: flex-start; margin-top: auto; padding: 6px var(--s3);
  border-radius: var(--r-full); background: var(--key); color: #fff;
  font-size: 12.5px; font-weight: 600;
}
.tool__go:hover { background: var(--key-hover); }
/* 새 창으로 나가는 링크 뒤에 붙는 표시 */
.ext { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 4px; }

/* ── [슬라이더] ─────────────────────────────────────────────────────
   넘김은 CSS scroll-snap 이 한다(모바일 스와이프는 브라우저 기본 동작이라 공짜).
   JS 는 화살표·점을 붙이고 넘길 게 없으면 지우는 일만 한다. 자동 넘김은 없다. */
.slider { position: relative; }
.slider__view { position: relative; }
.tools--rail {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.tools--rail::-webkit-scrollbar { display: none; }
.tools--rail > .tool { scroll-snap-align: start; min-width: 0;
  flex: 0 0 max(240px, calc((100% - var(--s2) * 2) / 3)); }
.tools--rail:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; border-radius: var(--r-sm); }

.slider__arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  font-size: 18px; line-height: 1; box-shadow: var(--shadow);
}
.slider__arw:hover { background: var(--key-soft); border-color: var(--key-line); color: var(--key); }
.slider__arw--prev { left: 6px; }
.slider__arw--next { right: 6px; }
.slider__arw[disabled] { opacity: .3; cursor: default; }
.slider__arw[disabled]:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }

.slider__dots { display: flex; justify-content: center; gap: 6px; padding-top: var(--s1); }
.slider__dot { width: 6px; height: 6px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-full); background: var(--line-strong); }
.slider__dot.is-on { width: 16px; background: var(--key); }

/* 카드가 다 보이면 컨트롤을 지운다 — 넘길 게 없는데 화살표가 있으면 헷갈린다.
   JS 가 꺼져 있으면 화살표·점은 아예 안 생긴다(app.js 가 만들어 붙인다). */
.slider.is-full .slider__arw,
.slider.is-full .slider__dots { display: none; }

/* ── [링크 목록] ────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; }
.list a { display: flex; align-items: baseline; gap: var(--s1);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm); font-size: 13px; }
.list a:hover { background: var(--soft); }
.list a:hover .list__t { color: var(--key); }
.list__k { flex: none; min-width: 66px; text-align: center; font-size: 11px;
  padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--soft); color: var(--faint); border: 1px solid var(--line); }
.list__t { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .list a { flex-wrap: wrap; gap: 4px var(--s1); }
  .list__t { flex: 1 0 100%; order: 2; }
}

/* 곁들이는 안내 한 덩어리 */
.note { font-size: 12.5px; color: var(--sub); padding: var(--s2); margin-bottom: var(--s1);
  background: var(--soft); border-left: 3px solid var(--key-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ── [도구 소개 — /tools/] ──────────────────────────────────────────── */
.spec { display: flex; flex-direction: column; gap: var(--s4); }
.spec__i { display: grid; grid-template-columns: 200px minmax(0,1fr);
  gap: var(--s3); align-items: start; }
.spec__i + .spec__i { border-top: 1px solid var(--line); padding-top: var(--s4); }
.spec__shot { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.spec__n { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.spec__u { font-size: 12px; color: var(--faint); margin-bottom: var(--s1); word-break: break-all; }
.spec__p { color: var(--sub); margin-bottom: var(--s1); }
.spec__x { font-size: 12.5px; color: var(--faint); margin-bottom: var(--s2); }
@media (max-width: 640px) { .spec__i { grid-template-columns: minmax(0,1fr); } }

/* ── [글 본문] ──────────────────────────────────────────────────────
   mdlite 가 뽑아 주는 태그를 여기서 받는다. 마크다운을 고칠 때 클래스를
   새로 만들지 말고 이 아래 규칙 안에서 해결한다. */
.art h1 { font-family: var(--font-display); font-size: 24px; font-weight: 600;
  line-height: 1.3; margin-bottom: var(--s3); }
.art h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: var(--s5) 0 var(--s1); }
.art h3 { font-size: 14.5px; font-weight: 600; margin: var(--s4) 0 var(--s1); }
.art p, .art ul, .art ol { color: var(--sub); max-width: 42em; margin-bottom: var(--s2); }
.art ul, .art ol { padding-left: 1.2em; }
.art li { margin-bottom: 4px; }
.art strong { color: var(--ink); font-weight: 600; }
.art a { color: var(--key); text-decoration: underline; text-underline-offset: 2px; }
.art .note { max-width: 42em; }
.art table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: var(--s2); }
.art th, .art td { padding: 7px var(--s1); text-align: left; border-bottom: 1px solid var(--line); }
.art th { font-size: 11.5px; color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.art td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tblwrap { overflow-x: auto; }

/* ── [꼬리말] ───────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); margin-top: var(--s3);
  padding: var(--s3) var(--s2) 0; display: flex; flex-wrap: wrap;
  gap: var(--s1) var(--s3); align-items: baseline;
  font-size: 12.5px; color: var(--faint); }
.foot__nav { display: flex; gap: var(--s3); flex-wrap: wrap; }
.foot a:hover { color: var(--ink); }
.foot__c { flex-basis: 100%; font-size: 11.5px; }

/* ── [404] ──────────────────────────────────────────────────────────── */
.oops { text-align: center; padding: var(--s6) var(--s3); }
.oops__n { font-family: var(--font-display); font-size: 52px; color: var(--faint); line-height: 1; }
.oops__t { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: var(--s2) 0 4px; }
.oops__s { color: var(--sub); margin-bottom: var(--s3); }