/* MindHub — 개발자 블로그.
   색은 전부 여기 위쪽 변수에서 나온다. 오로라 유리 한 벌이다 — 게임은 저마다 제 테마를 입는다. */

:root{
  --bg:#eef1fb; --panel:#ffffffb8; --panel2:#ffffff85; --line:#8a94c94d;
  --text:#2b3155; --dim:#4a517e; --dim2:#545b88;
  --gold:#8a6810; --link:#7a6212; --goldOn:#fff6dc;
  --code-bg:#e7ebf7; --mark:#f5e9c0;
  --sky:
    radial-gradient(640px 420px at 12% 4%, rgba(178,196,250,.55), transparent 70%),
    radial-gradient(720px 460px at 90% 8%, rgba(248,205,228,.45), transparent 70%),
    radial-gradient(660px 500px at 88% 96%, rgba(182,234,220,.5), transparent 70%),
    radial-gradient(620px 440px at 8% 96%, rgba(250,228,186,.45), transparent 70%),
    linear-gradient(#f3f6fe, #e9eefa);
  --skySize:auto;
  --cardEdge:#ffffffd9; --cardShadow:0 10px 30px rgba(90,100,160,.16);
  --w:760px; --radius:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--bg); background-image:var(--sky);
  background-size:var(--skySize); background-attachment:fixed; color:var(--text);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:16px; line-height:1.75;
  display:flex; flex-direction:column; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
img{max-width:100%; height:auto}

.wrap{width:100%; max-width:var(--w); margin:0 auto; padding:0 20px}
.wide{max-width:960px}

/* --- 머리 --- */
.top{border-bottom:1px solid var(--line); background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:sticky; top:0; z-index:10}
.top .wrap{display:flex; align-items:center; gap:18px; height:58px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:var(--text); letter-spacing:-.3px}
.logo:hover{text-decoration:none}
.logo img{width:26px; height:26px; display:block}
.logo b{color:var(--gold); font-weight:800}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px; min-width:0}
/* 칸 이름은 절대 접히지 않는다. 다섯 칸이 되면서 폰에서 "만 든 것" 으로 갈라졌다. */
.nav a{color:var(--dim); font-size:14px; font-weight:600; padding:7px 11px; border-radius:8px;
  white-space:nowrap; flex:0 0 auto}
.nav a:hover{color:var(--text); background:var(--panel); text-decoration:none}
.nav a[aria-current="page"]{color:var(--gold); background:var(--panel)}
.themebtn{margin-left:6px; border:1px solid var(--line); background:var(--panel); color:var(--dim);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; line-height:1; padding:0}
.themebtn:hover{color:var(--text)}

/* --- 본문 틀 --- */
main{flex:1 0 auto; padding:44px 0 64px}
.hero{margin-bottom:52px}
.hero h1{margin:0 0 12px; font-size:30px; line-height:1.35; letter-spacing:-.6px}
.hero p{margin:0; color:var(--dim); font-size:16px; max-width:56ch}

h2.sec{font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--dim2);
  text-transform:uppercase; margin:0 0 18px; display:flex; align-items:baseline; gap:10px}
h2.sec .more{margin-left:auto; font-size:13px; text-transform:none; letter-spacing:0; font-weight:600}
section + section{margin-top:52px}

/* --- 업데이트 이력 --- */
.updates{list-style:none;margin:0;padding:0}
.updates li{border-top:1px solid var(--line);padding:20px 0}
.updates li:last-child{border-bottom:1px solid var(--line)}
.updates .m{color:var(--dim2);font-size:12.5px;font-variant-numeric:tabular-nums}
.updates .t{font-weight:700;font-size:18px;line-height:1.45;margin-top:3px;letter-spacing:-.2px}
.updates .x{color:var(--dim);font-size:14px;margin-top:6px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.updates .body{margin-top:10px;font-size:15px;color:var(--dim)}
.updates .body p{margin:0 0 12px}
.updates .body ul{margin:0 0 12px;padding-left:1.25em}
.updates .body li{border:0;padding:3px 0;margin:0}
.updates .body li:last-child{border-bottom:0}
.updates .body code{background:var(--code-bg);border:1px solid var(--line);border-radius:5px;
  padding:1.5px 5px;font-size:.88em;color:var(--text);
  font-family:"D2Coding","Cascadia Mono",Consolas,"SF Mono",monospace}
.updates .body strong{color:var(--text)}
.updates .body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.updates.compact li{padding:15px 0}
.updates.compact .t{font-size:16px}

/* --- 만든 것 --- */
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{display:block; background:var(--panel); border:1px solid var(--cardEdge,var(--line)); box-shadow:var(--cardShadow,none);
  border-radius:var(--radius); overflow:hidden; color:var(--text);
  transition:transform .16s ease, border-color .16s ease}
.card.on:hover{transform:translateY(-3px); border-color:var(--gold); text-decoration:none}
.card.off{opacity:.55}
.card .shot{display:block; width:100%; aspect-ratio:8/5; object-fit:cover; background:var(--panel2);
  border-bottom:1px solid var(--line)}
.card .in{padding:14px 15px 16px}
.card .t{font-weight:700; font-size:16px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.card .d{color:var(--dim); font-size:13.5px; margin-top:5px; line-height:1.6}
.card .k{margin-top:11px; display:flex; gap:6px; flex-wrap:wrap}

/* 카드 밑에 붙는 딱지 — 이 놀이가 무엇을 챙기는지 한마디씩.
   여태 무늬가 없어 그냥 글줄로 흘러 붙어 있었다. 알약 꼴로 떼어 놓는다.
   갈래 차림표(.catnav)와 같은 꼴이되 한 치수 작고 조용하게 — 누르는 것이
   아니라 곁들이는 말이라서. */
.tagchip{display:inline-flex; align-items:center; padding:3px 9px;
  border-radius:999px; border:1px solid var(--line); background:var(--panel2);
  color:var(--dim2); font-size:11.5px; font-weight:600; line-height:1.55;
  letter-spacing:-.01em; white-space:nowrap}
.card.on:hover .tagchip{color:var(--dim)}
.badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;
  background:var(--line); color:var(--dim); white-space:nowrap}
.badge.live{background:var(--gold); color:var(--goldOn,#1c1409)}
.badge.wip{background:#c8402f; color:#fff}
.badge.learn{background:#7fc4e0; color:#0e2530}

/* --- 글 본문 --- */
.post header{margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.post h1{margin:0 0 12px; font-size:30px; line-height:1.35; letter-spacing:-.6px}
.post .m{color:var(--dim2); font-size:13.5px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.body{font-size:16.5px}
.body h2{font-size:22px; margin:44px 0 14px; letter-spacing:-.3px; line-height:1.4}
.body h3{font-size:18px; margin:32px 0 10px; line-height:1.5}
.body h2:first-child, .body h3:first-child{margin-top:0}
.body p{margin:0 0 20px}
.body ul, .body ol{margin:0 0 20px; padding-left:1.35em}
.body li{margin:6px 0}
.body li > ul, .body li > ol, .body ul ul, .body ol ol{margin:6px 0}
.body a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.body a:hover{text-decoration-color:var(--link)}
.body blockquote{margin:0 0 20px; padding:2px 0 2px 18px; border-left:3px solid var(--gold); color:var(--dim)}
.body blockquote p:last-child{margin-bottom:0}
.body hr{border:0; border-top:1px solid var(--line); margin:38px 0}
.body img{border-radius:10px; border:1px solid var(--line); display:block; margin:24px auto}
.body code{background:var(--code-bg); border:1px solid var(--line); border-radius:5px;
  padding:1.5px 5px; font-size:.88em; font-family:"D2Coding","Cascadia Mono",Consolas,"SF Mono",monospace}
.body pre{background:var(--code-bg); border:1px solid var(--line); border-radius:10px;
  padding:15px 17px; overflow-x:auto; margin:0 0 22px; position:relative; line-height:1.65}
.body pre code{background:none; border:0; padding:0; font-size:13.5px}
.body pre[data-lang]::before{content:attr(data-lang); position:absolute; top:0; right:11px;
  font-size:10.5px; color:var(--dim2); letter-spacing:.08em; text-transform:uppercase}
.tablewrap{overflow-x:auto; margin:0 0 22px}
.body table{border-collapse:collapse; width:100%; font-size:14.5px}
.body th, .body td{border:1px solid var(--line); padding:9px 12px; text-align:left}
.body th{background:var(--panel2); font-weight:700}
.body mark{background:var(--mark); color:inherit; padding:1px 3px; border-radius:3px}

.postnav{display:flex; gap:14px; margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14px; flex-wrap:wrap}
.postnav .sp{margin-left:auto}

/* --- 꼬리 --- */
footer{border-top:1px solid var(--line); padding:24px 0 40px; color:var(--dim2); font-size:13px}
footer .row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
footer a{color:var(--dim)}
footer .build{margin-top:10px; font-size:11.5px; opacity:.75}

.empty{border:1px dashed var(--line); border-radius:var(--radius); padding:28px;
  color:var(--dim); text-align:center; font-size:14.5px}

@media (max-width:560px){
  body{font-size:15.5px}
  main{padding:32px 0 48px}
  .hero h1, .post h1{font-size:25px}
  .body h2{font-size:20px; margin-top:36px}
  .cards{grid-template-columns:1fr}

  /* 폰에서는 머리띠를 옆으로 밀어서 본다. 칸이 다섯이라 다 안 들어간다. */
  .top .wrap{gap:10px; padding:0 14px}
  .logo{font-size:16px; flex:0 0 auto}
  .nav{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:auto; padding-left:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:7px 7px; font-size:13.5px}
  .themebtn{flex:0 0 auto; margin-left:2px}
}

/* --- 만든 것 갈래 ---
   열 개가 넘어가면 그냥 늘어놓아서는 "무슨 게임이 있나" 가 한눈에 안 들어온다.
   갈래가 목차 노릇을 한다. */

/* --- 말 고르기 ---
   자동으로 맞혔든 아니든 **바꿀 수 있는 자리가 늘 보여야 한다.**
   자바스크립트를 안 쓴다 — details 하나와 진짜 링크로만 짠다.
   그래야 스크립트가 꺼져 있어도 돌고, 검색 로봇도 이 길을 따라간다. */
.langpick{position:relative}
.langpick > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel); color:var(--dim); font-size:13px; font-weight:700;
  line-height:1; white-space:nowrap;
}
.langpick > summary::-webkit-details-marker{display:none}
.langpick > summary::after{content:"▾"; font-size:10px; color:var(--dim2)}
.langpick > summary:hover{color:var(--text); border-color:var(--gold)}
.langpick[open] > summary{color:var(--text); border-color:var(--gold)}
.langmenu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  min-width:130px; padding:5px; border-radius:11px;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  display:flex; flex-direction:column; gap:2px;
}
.langmenu a{
  display:block; padding:8px 11px; border-radius:7px;
  color:var(--dim); font-size:13.5px; font-weight:600; text-decoration:none;
}
.langmenu a:hover{background:var(--panel2); color:var(--text); text-decoration:none}
.langmenu a[aria-current]{color:var(--gold)}
.langmenu a[aria-current]::before{content:"· "}
/* 바닥글 쪽은 알약 없이 글줄로만 */
.langfoot{margin-top:4px}
.langfoot a{color:var(--dim2)}

/* 갈래 차림표 — 누르면 그 자리로 내려간다. 자바스크립트를 안 쓴다.
   폰에서는 옆으로 밀어서 본다 (줄바꿈하면 위가 두툼해진다). */
.catnav{display:flex;gap:7px;margin:0 0 22px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.catnav::-webkit-scrollbar{display:none}
.catnav a{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap}
.catnav a:hover{color:var(--text);border-color:var(--gold);text-decoration:none}
.catnav a b{font-size:11.5px;font-weight:700;color:var(--dim2);
  font-variant-numeric:tabular-nums}
.catnav a:hover b{color:var(--gold)}

/* 머리 막대가 붙어 있으니(sticky) 그만큼 띄워 두어야 제목이 안 가린다 */
html{scroll-behavior:smooth}
.cat{margin:0 0 34px;scroll-margin-top:76px}
.cat:last-child{margin-bottom:0}
.catname{display:flex;align-items:baseline;gap:9px;margin:0 0 13px;
  font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.catname span{font-size:12.5px;font-weight:500;color:var(--dim2)}
.catname b{margin-left:auto;font-size:12px;font-weight:700;color:var(--dim2);
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font-variant-numeric:tabular-nums}

/* 눌러서 내려온 갈래를 잠깐 짚어 준다 — 어디로 왔는지 알 수 있게 */
.cat:target .catname{color:var(--gold)}
.cat:target .catname b{border-color:var(--gold);color:var(--gold)}

@media (max-width:560px){
  .catname span{display:none}       /* 좁으면 이름만 */
  .catnav{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}        /* 움직임을 줄여 달라고 한 사람에게는 바로 */
}

/* ==========================================================================
   매뉴얼 — 처음 하는 사람이 읽을 규칙

   글은 games/<갈래>/engine.js 의 RULES 에서 온다. 여기서는 모양만 잡는다.
   ========================================================================== */
.manual{max-width:62ch}
.manual dl{margin:0 0 26px}
.manual dt{font-weight:700; font-size:16px; color:var(--text); margin:22px 0 0;
  padding-top:18px; border-top:1px solid var(--line)}
.manual dt:first-child{margin-top:0; padding-top:0; border-top:0}
.manual dd{margin:8px 0 0; color:var(--dim); font-size:15.5px; line-height:1.75}
.manual dd b{color:var(--text); font-weight:700}

.manual .tips{padding:18px 20px; border-radius:var(--radius); background:var(--panel);
  border:1px solid var(--line); margin:0 0 26px}
.manual .tips b{display:block; color:var(--gold); font-size:12px; font-weight:700;
  letter-spacing:.06em; margin-bottom:9px}
.manual .tips ul{margin:0; padding-left:18px; color:var(--dim); font-size:14.5px; line-height:1.75}
.manual .tips li{margin:5px 0}

.manual .mrow{display:flex; gap:9px; flex-wrap:wrap}
.manual .mgo{flex:1 1 200px; text-align:center; background:var(--gold); color:#1c1409;
  font-weight:800; font-size:15px; border-radius:var(--radius); padding:14px}
.manual .mgo:hover{text-decoration:none; filter:brightness(1.06)}
.manual .mback{flex:0 1 auto; text-align:center; border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 18px; color:var(--dim); font-weight:600; font-size:14px}
.manual .mback:hover{color:var(--text); border-color:var(--gold); text-decoration:none}

/* 매뉴얼 목록 · 홈의 "처음이라면" */
.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.mcard{display:flex; flex-direction:column; gap:5px; padding:15px 16px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
.mcard:hover{border-color:var(--gold); text-decoration:none}
.mcard .n{font-weight:700; font-size:15px; color:var(--text)}
.mcard:hover .n{color:var(--gold)}
.mcard .d{font-size:13px; color:var(--dim); line-height:1.6}
h2.sec .note{margin-left:9px; font-size:12px; font-weight:600; color:var(--dim2);
  letter-spacing:0; text-transform:none}
p.lead{margin:-6px 0 20px; color:var(--dim); font-size:15px; line-height:1.7; max-width:60ch}
p.lead b{color:var(--text)}

/* --- 매뉴얼 속 화면 사진 ---
   site/shots/ 에 찍어 둔 **진짜 화면**이다 (npm run shots). 그림으로 흉내 내지 않는다.
   폰 크기로 찍어서 세로가 길다 — 폭을 묶어 두지 않으면 한 장이 화면을 다 먹는다. */
.manual figure.shot{margin:18px 0 22px; text-align:center}
.manual figure.shot img{max-width:100%; width:auto; max-height:62vh; height:auto;
  border-radius:14px; border:1px solid var(--line); background:var(--panel);
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.manual figure.shot figcaption{margin-top:10px; color:var(--dim2); font-size:13px;
  line-height:1.65; max-width:46ch; margin-left:auto; margin-right:auto}
.manual figure.shot.lead{margin:0 0 30px}
.manual figure.shot.lead img{max-height:70vh}
.manual dd figure.shot{margin:14px 0 6px}
.manual dd figure.shot img{max-height:46vh}

/* 목록 칸의 그림 — 만든 것 카드와 같은 가로 썸네일을 쓴다.
   세로 화면 사진을 잘라 쓰면 판은 안 보이고 머리띠만 나온다. */
.mcard{padding:0; overflow:hidden}
.mcard .mshot{width:100%; aspect-ratio:8/5; height:auto; object-fit:cover;
  display:block; border-bottom:1px solid var(--line); background:var(--panel2)}
.mcard .n{padding:13px 15px 0}
.mcard .d{padding:0 15px 14px}

/* --- 자세한 설명 ---
   games/<갈래>/manual.js 의 글이다. 게임 안 짧은 글과 다르다.
   처음부터 배우려고 읽는 글이라 길다 — 목차를 두고 마디를 크게 띄운다. */
.mtoc{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 34px; padding:16px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
.mtoc a{font-size:13px; font-weight:600; color:var(--dim); padding:7px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg)}
.mtoc a:hover{color:var(--gold); border-color:var(--gold); text-decoration:none}

.msec{margin:0 0 40px; scroll-margin-top:76px}
.msec h2{margin:0 0 14px; font-size:21px; letter-spacing:-.3px; line-height:1.4;
  padding-bottom:11px; border-bottom:1px solid var(--line)}
.msec p{margin:0 0 13px; font-size:16px; line-height:1.8; color:var(--dim)}
.msec p b{color:var(--text); font-weight:700}
.msec .mlist{margin:0 0 14px; padding-left:19px; color:var(--dim);
  font-size:15.5px; line-height:1.8}
.msec .mlist li{margin:7px 0}
.msec .mlist b{color:var(--text); font-weight:700}
.msec .mnote{margin:14px 0 0; padding:14px 16px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line);
  font-size:14.5px; line-height:1.75; color:var(--dim)}
.msec .mnote b{color:var(--gold)}

.msec.faq .qa{padding:15px 0; border-bottom:1px solid var(--line)}
.msec.faq .qa:last-child{border-bottom:0}
.msec.faq .qa b{display:block; color:var(--text); font-size:15.5px; margin-bottom:6px}
.msec.faq .qa p{margin:0; font-size:15px}