2 files changed, 174 insertions, 72 deletions
diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html
index 1b1b82b..27209dd 100644
--- a/layouts/recordings/recordings-plain.html
+++ b/layouts/recordings/recordings-plain.html
@@ -1,77 +1,119 @@
 <!doctype html>
-<meta charset="utf-8" />
-<title>{{ .Title }}</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;
-  }
-  h1 {
-    margin-bottom: 12px;
-  }
-  ul {
-    line-height: 1.9;
-  }
-  a {
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-  video {
-    width: 100%;
-    height: auto;
-    margin: 12px 0;
-  }
-  .meta {
-    color: #666;
-    margin-top: 4px;
-  }
-</style>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>{{ .Title }}</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;
+      }
+      h1 {
+        margin-bottom: 12px;
+      }
+      ul {
+        line-height: 1.9;
+        padding-left: 1.1rem;
+      }
+      a {
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .meta {
+        color: #666;
+        margin-top: 4px;
+      }
+      video {
+        width: 100%;
+        height: auto;
+        margin: 12px 0;
+      }
+      .badge {
+        font-size: 0.8rem;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        padding: 2px 6px;
+        margin-left: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>{{ .Title }}</h1>
 
-<h1>Recordings</h1>
+    <!-- 섹션 소개 글 -->
+    <div class="content">{{ .Content }}</div>
 
-<div id="player" style="display: none">
-  <video id="video" controls preload="metadata"></video>
-  <div id="meta" class="meta"></div>
-</div>
+    <!-- 인라인 플레이어 -->
+    <div id="player" style="display: none">
+      <video id="video" controls preload="metadata"></video>
+      <div id="meta" class="meta"></div>
+    </div>
 
-<ul id="list">
-  {{ range .Resources.Match "*.{mp4,mov}" }}
-  <li>
-    <a href="{{ .RelPermalink }}" data-name="{{ .Name }}" class="vid">
-      {{ .Name }}
-    </a>
-  </li>
-  {{ else }}
-  <li>No recordings found.</li>
-  {{ end }}
-</ul>
+    <ul id="list">
+      <!-- 1) 섹션 폴더 바로 아래 mp4/mov (섹션 리소스) -->
+      {{ $secVids := .Resources.Match "*.{mp4,mov}" }} {{ range $v := $secVids
+      }}
+      <li>
+        <a href="{{ $v.RelPermalink }}" data-name="{{ $v.Name }}" class="vid"
+          >{{ $v.Name }}</a
+        >
+        <span class="badge">video</span>
+      </li>
+      {{ end }}
 
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const list = document.getElementById("list");
-    const wrap = document.getElementById("player");
-    const video = document.getElementById("video");
-    const meta = document.getElementById("meta");
-    list.addEventListener("click", (e) => {
-      const a = e.target.closest("a.vid");
-      if (!a) return;
-      e.preventDefault();
-      video.src = a.getAttribute("href");
-      video.play().catch(() => {});
-      wrap.style.display = "";
-      const name = a.dataset.name || video.src.split("/").pop();
-      meta.textContent = name;
-    });
-  });
-</script>
+      <!-- 2) 자식 페이지들 (노트/동영상 페이지) -->
+      {{ range $p := .Pages.ByDate.Reverse }} {{ $vid := $p.Resources.GetMatch
+      "*.{mp4,mov}" }}
+      <li>
+        {{ if $vid }}
+        <a
+          href="{{ $vid.RelPermalink }}"
+          data-name="{{ or $p.Title $vid.Name }}"
+          class="vid"
+        >
+          {{ with $p.Title }}{{ . }}{{ else }}{{ $vid.Name }}{{ end }}
+        </a>
+        <span class="badge">video</span>
+        <div class="meta">{{ $p.Date.Format "2006-01-02" }}</div>
+        {{ else }}
+        <a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a>
+        <span class="badge">note</span>
+        <div class="meta">{{ $p.Date.Format "2006-01-02" }}</div>
+        {{ end }}
+      </li>
+      {{ end }} {{ if and (eq (len $secVids) 0) (eq (len .Pages) 0) }}
+      <li>No items yet.</li>
+      {{ end }}
+    </ul>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const list = document.getElementById("list");
+        const wrap = document.getElementById("player");
+        const video = document.getElementById("video");
+        const meta = document.getElementById("meta");
+        list.addEventListener("click", (e) => {
+          const a = e.target.closest("a.vid");
+          if (!a) return; // note는 링크로 이동
+          e.preventDefault(); // video는 인라인 재생
+          video.src = a.getAttribute("href");
+          video.play().catch(() => {});
+          wrap.style.display = "";
+          meta.textContent = a.dataset.name || a.textContent.trim();
+          wrap.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        });
+      });
+    </script>
+  </body>
+</html>
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>