@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green: #1f9e4a;
  --pink: #e62383;
  --yellow: #f6d419;
  --blue: #2b50c7;
  --ink: #0c0c0c;
  --paper: #ffffff;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", "Apple SD Gothic Neo", serif;
  --mono: "Space Mono", Menlo, "Apple SD Gothic Neo", monospace;
}

html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 헤더(한/영) ──────────────────────────────────────── */
.site-head {
  position: fixed;
  top: 0; right: 0;
  padding: 18px 22px;
  z-index: 60;
}
#lang-toggle {
  appearance: none;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
}
#lang-toggle:hover { background: var(--pink); }

/* ── 보드 ─────────────────────────────────────────────── */
#board {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ── 조각 ─────────────────────────────────────────────── */
.piece {
  position: absolute;
  top: 0; left: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.16));
}
.piece.dragging { cursor: grabbing; z-index: 50 !important; }
.piece.snapping { transition: transform 110ms ease-out; }

.piece .inner {
  width: 100%;
  height: 100%;
  padding: 34px 30px;
  overflow: hidden;
}

/* 색 */
.c-yellow { background: var(--yellow); color: var(--ink); }
.c-green  { background: var(--green);  color: #fff; }
.c-pink   { background: var(--pink);   color: #fff; }
.c-blue   { background: var(--blue);   color: #fff; }
.c-checker-blue {
  background: conic-gradient(var(--blue) 0 25%, var(--paper) 0 50%, var(--blue) 0 75%, var(--paper) 0 100%);
}
.c-checker-black {
  background: conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%, var(--ink) 0 75%, var(--paper) 0 100%);
}

/* ── 조각 안 타이포 ───────────────────────────────────── */
.serif { font-family: var(--serif); }

.p-title {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: 0.005em;
}
.p-title .year {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3em;
}
.p-sub {
  font-style: italic;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.p-sec {
  font-weight: 600;
  font-size: 15.5px;
  margin: 16px 0 6px;
}
.p-body {
  font-size: 11.5px;
  line-height: 1.62;
  margin-bottom: 6px;
}
.p-info { font-size: 11px; }
.p-quote {
  font-style: italic;
  font-size: 13px;
  line-height: 1.75;
  margin-top: 14px;
}
.p-body .url {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 힌트 ─────────────────────────────────────────────── */
.hint {
  position: fixed;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
  z-index: 55;
  pointer-events: none;
}

/* ── 언어 토글 ────────────────────────────────────────── */
.en { display: none; }
body.lang-en .en { display: inline; }
body.lang-en .ko { display: none; }