1 files changed, 60 insertions, 0 deletions
diff --git a/layouts/recordings/single.html b/layouts/recordings/single.html
new file mode 100644
index 0000000..e784306
--- /dev/null
+++ b/layouts/recordings/single.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7}
+    header,footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 20px}
+    a{text-decoration:none} a:hover{text-decoration:underline}
+    .muted{color:#666;font-size:.9rem}
+    .nav{display:flex;gap:8px;flex-wrap:wrap}
+    .btn{border:1px solid #ccc;border-radius:8px;padding:6px 10px}
+    h1{margin:0 0 6px}
+    .content :is(h1,h2,h3){margin-top:1.2em}
+    .content img, .content video{max-width:100%;height:auto}
+  </style>
+</head>
+<body>
+  <header>
+    <div class="nav">
+      {{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }}
+      <a class="btn" href="{{ $back }}">← Back</a>
+    </div>
+    <div class="muted">{{ .Date.Format "2006-01-02" }}</div>
+  </header>
+
+  {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+
+  <main class="content">
+    {{ .Content }}
+  </main>
+
+  <footer>
+    <div class="nav">
+      {{ with .PrevInSection }}
+        <a class="btn" href="{{ .RelPermalink }}">← Before</a>
+      {{ end }}
+      {{ with .NextInSection }}
+        <a class="btn" href="{{ .RelPermalink }}">Next →</a>
+      {{ end }}
+    </div>
+    <div></div>
+  </footer>
+
+  <script>
+    // 선택: 키보드 좌우 화살표로 이전/다음 이동
+    document.addEventListener("keydown", e => {
+      if (e.target.closest("input,textarea")) return;
+      if (e.key === "ArrowLeft") {
+        const a=document.querySelector('a.btn:has(+ a.btn), a.btn[href*="Before"]');
+        if (a) location.href=a.href;
+      } else if (e.key === "ArrowRight") {
+        const links=[...document.querySelectorAll('a.btn')].filter(x=>/Next/.test(x.textContent));
+        if (links[0]) location.href=links[0].href;
+      }
+    });
+  </script>
+</body>
+</html>