/* 패드 터치 잠금 (pad-input-lock) — 아래 두 규칙은 한 쌍 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; touch-action: auto; }

/* ─────────────────────────────────────────────
   자람랩 — 초1 깍두기 공책
   종이 · 칸선(연두) · 연필 글씨 · 묶음 색(포켓몬 빨강 / 한글 초록 / 세계 파랑)
   ───────────────────────────────────────────── */
:root {
  --paper: #fbfef8;
  --grid: #cfe9d4;
  --grid-strong: #9fd3ad;
  --pencil: #1f2a44;
  --pencil-soft: #5b6680;
  --margin-line: #f2a3a3;
  --cell: 34px;
  --font-square: "Black Han Sans", "Jua", sans-serif;
  --font-name: "Jua", "Apple SD Gothic Neo", sans-serif;
  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body {
  color: var(--pencil);
  font-family: var(--font-body);
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: break-word;
  background: var(--paper);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 공책 한 장: 깍두기 칸 + 왼쪽 빨간 여백선. 스크롤은 이 안에서만 */
.notebook {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding:
    max(28px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(72px, calc(env(safe-area-inset-left) + 72px));
  background:
    linear-gradient(90deg, transparent 52px, var(--margin-line) 52px, var(--margin-line) 54px, transparent 54px),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    var(--paper);
  background-attachment: local;
}

/* ── 공책 칸에 한 글자씩 (이 페이지의 얼굴) ── */
.square-word { display: inline-flex; gap: 0; margin: 0; }
.square-word > span {
  position: relative;
  display: grid; place-items: center;
  width: 1.32em; height: 1.32em;
  margin-left: -3px;
  border: 3px solid var(--ink, var(--pencil));
  background:
    linear-gradient(var(--grid-strong), var(--grid-strong)) center / 100% 1px no-repeat,
    linear-gradient(var(--grid-strong), var(--grid-strong)) center / 1px 100% no-repeat,
    #fff;
  color: var(--ink, var(--pencil));
  line-height: 1;
}
.square-word > span:first-child { margin-left: 0; }
h1.square-word { font: 88px/1 var(--font-square); }
h1.square-word > span { border-width: 4px; margin-left: -4px; }
h1.square-word > span:nth-child(1) { transform: rotate(-3deg); }
h1.square-word > span:nth-child(2) { transform: rotate(2deg) translateY(4px); }
h1.square-word > span:nth-child(3) { transform: rotate(-1deg); }
h1.square-word > span:first-child { margin-left: 0; }

/* 표지 */
.cover {
  position: relative;
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 28px;
  margin-bottom: 30px;
}
.cover-text p { margin: 0; }
.owner { color: var(--pencil-soft); font: 20px/1.3 var(--font-name); }
.ask { margin-top: 6px !important; font: 38px/1.15 var(--font-name); }
.update-button {
  position: absolute; top: 0; right: 0;
  min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 16px;
  color: var(--pencil); background: #ffcf33;
  box-shadow: 0 4px 0 #d9a21c;
  font: 18px/1 var(--font-name);
}

/* ── 묶음 ── */
.shelf { margin: 0 0 34px; }
.shelf h2 {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px;
}
.shelf h2 .square-word { font: 34px/1 var(--font-square); }
.shelf h2 .square-word > span { background-color: #fff; }
.count {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, #fff);
  font: 16px/1 var(--font-name);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 30px 22px;
  margin: 0; padding: 0;
  list-style: none;
}
.cards li { min-width: 0; }

/* 게임 카드: 공책에 테이프로 붙인 사진 */
.card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 44px;
  padding: 10px 10px 14px;
  border-radius: 6px;
  color: var(--pencil);
  background: #fff;
  box-shadow: 0 2px 0 rgba(31,42,68,.08), 0 10px 22px rgba(31,42,68,.14);
  text-decoration: none;
  transform: rotate(var(--tilt));
  transition: transform .18s ease, box-shadow .18s ease;
  animation: stick .45s var(--delay) cubic-bezier(.2,1.3,.4,1) both;
}
.tape {
  position: absolute; z-index: 2;
  top: -12px; left: 50%;
  width: 46%; height: 24px;
  background: color-mix(in srgb, var(--tape) 82%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transform: translateX(-50%) rotate(calc(var(--tilt) * -1.6));
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 10%, #fff);
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-name { margin-top: 12px; font: 23px/1.2 var(--font-name); }
.game-line { margin-top: 5px; color: var(--pencil-soft); font-size: 15px; line-height: 1.45; }

/* 누르면 시작한다는 표시 — 사진을 가리지 않게 오른쪽 아래 모서리에, 크기는 카드의 % */
.card .play {
  display: grid; place-items: center;
  position: absolute; right: -8px; top: 10px;
  width: 18%; min-width: 40px; max-width: 52px; aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff; background: var(--ink);
  box-shadow: 0 4px 10px rgba(31,42,68,.25);
  font-size: 18px;
  transform: translateY(-30%);
}

a.card:active, a.card.is-going { transform: rotate(0deg) scale(.96); box-shadow: 0 2px 6px rgba(31,42,68,.18); }
a.card:focus-visible { outline: 4px solid #ffcf33; outline-offset: 4px; }

/* 곧 열려요 */
.card.is-soon {
  background: rgba(255,255,255,.7);
  box-shadow: none;
  outline: 3px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  outline-offset: -3px;
}
.card.is-soon .photo { display: grid; place-items: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 8%, #fff) 0 12px, #fff 12px 24px); }
.cover-empty { font-size: 54px; opacity: .7; }
.card.is-soon .game-name, .card.is-soon .game-line { opacity: .65; }
.soon-badge {
  position: absolute; top: 18px; right: -10px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff; background: var(--pencil);
  font: 15px/1 var(--font-name);
  transform: rotate(6deg);
}

.version { margin: 10px 0 0; color: rgba(31,42,68,.35); font-size: 11px; text-align: right; }

@keyframes stick {
  from { opacity: 0; transform: rotate(calc(var(--tilt) * 4)) scale(.86) translateY(14px); }
  to { opacity: 1; transform: rotate(var(--tilt)); }
}

@media (hover: hover) and (pointer: fine) {
  a.card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 2px 0 rgba(31,42,68,.08), 0 16px 30px rgba(31,42,68,.18); }
}

/* 폰·좁은 화면 */
@media (max-width: 640px) {
  :root { --cell: 28px; }
  .notebook { padding-left: max(46px, calc(env(safe-area-inset-left) + 46px)); padding-right: 16px; }
  .notebook { background:
    linear-gradient(90deg, transparent 30px, var(--margin-line) 30px, var(--margin-line) 32px, transparent 32px),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    var(--paper); background-attachment: local; }
  h1.square-word { font-size: 60px; }
  .ask { font-size: 28px; }
  .shelf h2 .square-word { font-size: 26px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .game-name { font-size: 18px; }
  .game-line { font-size: 13px; }
  .update-button { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}