:root{--fg:#111;--bg:#fff;--mut:#888;--line:#ddd;--sel:#cfe3ff;--panel:#fff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--fg);background:var(--bg);margin:0;line-height:1.6;font-size:15px}
header.top,footer.bot{display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em}
footer.bot{border-bottom:none;border-top:1px solid var(--line);color:var(--mut);margin-top:40px}
.mark{font-weight:500}.seq{color:var(--mut)}
main{max-width:520px;margin:0 auto;padding:20px 16px 8px}
.lead{color:var(--mut);font-size:13px;margin:0 0 18px;text-align:center}

/* 퍼즐 페이지: 상하 분할 앱 셸. 위=격자(스크롤), 아래=힌트 패널. 서로 안 겹친다.
   (index/404 는 .puzzle 미적용 -> 일반 흐름.) */
body.puzzle{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.puzzle header.top{flex:0 0 auto}
.stage{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;padding:18px 16px 8px}
.stage .lead{flex:0 0 auto}
.stage>footer.bot{margin-top:auto}

/* 격자: 카드와 동일 모양. 칸 글자 크기는 칸 폭에 비례. */
.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);
  width:min(100vw - 32px,440px);margin:0 auto;border:2px solid var(--fg);
  font-size:calc(min(100vw - 32px,440px) / var(--n) * 0.46)}
.cell{position:relative;aspect-ratio:1;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;
  -webkit-user-select:none;user-select:none}
.cell.block{background:var(--fg);border-color:var(--fg)}
.cell.clue{cursor:pointer}
.cell .num{position:absolute;top:1px;left:2px;font-size:.42em;line-height:1;
  font-weight:400;color:var(--mut)}
.cell.sel{background:var(--sel)}
.cell.sel.fill{background:var(--sel)}

/* 힌트 패널: 분할의 아래 칸. 격자와 겹치지 않는 일반 흐름 요소. */
#hints{flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);
  max-height:48dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 18px 22px;box-shadow:0 -6px 24px rgba(0,0,0,.12);
  transform:translateY(8px);opacity:0;transition:transform .18s ease,opacity .18s ease}
#hints[hidden]{display:none}
#hints.in{transform:none;opacity:1}
.hints-head{display:flex;align-items:center;gap:10px;
  position:sticky;top:0;background:var(--panel);padding:12px 0 10px;
  border-bottom:1px solid var(--line)}
.hints-head h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mut);margin:0;font-weight:500;flex:1 1 auto}
#hints-close{flex:0 0 auto;background:none;border:none;color:var(--mut);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px}
.dirtoggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.dirtoggle[hidden]{display:none}
.dirtoggle button{background:none;border:none;font:inherit;font-size:11px;
  letter-spacing:.06em;padding:5px 9px;color:var(--mut);cursor:pointer;white-space:nowrap}
.dirtoggle button+button{border-left:1px solid var(--line)}
.dirtoggle button.on{background:var(--sel);color:var(--fg)}
#hints-body{padding-top:14px}

/* 예문: 본문만 비례폰트. 출처는 모노 작은 글씨. */
.ex{padding:0 0 16px;margin:0 0 16px;border-bottom:1px dotted var(--line)}
.ex:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ex .sent{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,
  Helvetica,Arial,sans-serif;font-size:16px;line-height:1.7;margin:0 0 8px}
.ex .src{font-size:12px;color:var(--mut);text-decoration:none}
.ex .src::before{content:"↳ "}
.ex .src:hover{text-decoration:underline}
.blank{display:inline-block;min-width:2.6em;border-bottom:2px solid currentColor;
  vertical-align:baseline;margin:0 .15em}
.note{color:var(--mut);font-size:13px;margin:4px 0}

nav.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:16px}
nav.index a{border:1px solid var(--line);padding:10px 0;text-align:center;text-decoration:none;
  color:var(--fg);font-size:13px}
nav.index a:hover{background:#f4f4f4}
a{color:#1a5fb4}
@media(prefers-color-scheme:dark){
  :root{--fg:#eee;--bg:#111;--mut:#999;--line:#333;--sel:#274868;--panel:#1a1a1a}
  nav.index a:hover{background:#1a1a1a}a{color:#7bb}
}