Violet-Bora-Lee · April 14, 2026 11:15
diff --git a/hermes-zellij-guide.html b/hermes-zellij-guide.html
 <!doctype html>
 <html lang="ko">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Hermes + Zellij 사용법 요약 </title>
 <style>
 :root { --bg:#07111f; --panel:#0d1830; --border:#223152; --text:#eaf0ff; --muted:#b8c4e3; --accent:#7fb2ff; --code-bg:#08101f; }
 * { box-sizing: border-box; }
 html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif; }
 body { line-height:1.75; }
 a { color:var(--accent); text-decoration:none; }
 a:hover { text-decoration:underline; }
 .page { max-width: 1400px; margin: 0 auto; padding: 28px 18px 56px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
 .hero { grid-column: 1 / -1; background: linear-gradient(180deg, #101d39, #0c1730); border: 1px solid var(--border); border-radius: 20px; padding: 24px 26px; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
 .hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
 .hero p { margin: 0; color: var(--muted); }
 .toc { position: sticky; top: 18px; }
 .toc-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px; max-height: calc(100vh - 36px); overflow: auto; }
 .toc-card h2 { margin:0 0 12px; font-size:18px; }
 .toc-link { display:block; padding:6px 8px; border-radius:10px; color:var(--text); }
 .toc-link:hover { background: rgba(127,178,255,.10); }
 .toc-link.level-1 { font-weight:700; margin-top:4px; }
 .toc-link.level-2 { padding-left:16px; color:var(--muted); }
 .toc-link.level-3 { padding-left:28px; color:#9fb2d8; font-size:14px; }
 .toc-link.active { background:rgba(127,178,255,.18); color:#ffffff; font-weight:700; border:1px solid rgba(127,178,255,.18); }
 .article { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px; min-width: 0; overflow-wrap:anywhere; word-break:normal; }
 .article h1, .article h2, .article h3, .article h4 { line-height:1.25; scroll-margin-top:20px; }
 .article h1 { margin: 34px 0 14px; font-size: 30px; }
 .article h2 { margin: 30px 0 12px; font-size: 24px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 18px; }
 .article h3 { margin: 22px 0 10px; font-size: 19px; color: #f2f5ff; }
 .article p { margin: 10px 0; color: #e3e9fb; }
 .article ul { margin: 8px 0 14px 24px; padding: 0; }
 .article li { margin: 6px 0; }
 .article code { background: rgba(127,178,255,.12); padding: 0 5px; border-radius: 6px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .95em; }
 .article pre { background: var(--code-bg); border: 1px solid #1c2a44; border-radius: 14px; padding: 16px 18px; overflow: auto; margin: 14px 0; }
 .article pre code { background: transparent; padding: 0; white-space: pre; color: #dce7ff; line-height: 1.6; font-size: 14px; }
 .table-wrap { overflow-x:auto; margin:14px 0; border:1px solid var(--border); border-radius:14px; }
 table { width:100%; border-collapse:collapse; background:#0b152a; }
 th, td { border-bottom:1px solid rgba(255,255,255,.07); padding:10px 12px; text-align:left; vertical-align:top; }
 th { background: rgba(127,178,255,.08); color:#f4f7ff; }
 tr:last-child td { border-bottom:none; }
 .summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
 .summary-card { background:#0b152a; border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px; }
 .summary-card strong { display:block; margin-bottom:6px; font-size:16px; }
 .summary-card p { margin:0; color:#dbe5fb; }
 .cmd-compare { width:100%; margin-top:14px; border-collapse:collapse; overflow:hidden; border-radius:12px; }
 .cmd-compare th, .cmd-compare td { border-bottom:1px solid rgba(255,255,255,.07); padding:10px 12px; vertical-align:top; text-align:left; }
 .cmd-compare th { background: rgba(127,178,255,.08); }
 .top-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 0 0 16px; }
 .pill-btn { display:inline-block; padding:8px 12px; border:1px solid rgba(127,178,255,.22); border-radius:999px; background:rgba(127,178,255,.08); color:var(--text); }
 .pill-btn.primary { background:rgba(127,178,255,.16); font-weight:700; }
 .pager { display:flex; justify-content:space-between; gap:12px; margin: 18px 0 0; }
 .pager a { flex:1; display:block; padding:12px 14px; border:1px solid rgba(127,178,255,.22); border-radius:14px; background:rgba(127,178,255,.06); color:var(--text); }
 .pager a.next { text-align:right; }
 .pager .label { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
 .page-links { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 0; }
 .page-links a { display:inline-block; padding:6px 10px; border:1px solid rgba(127,178,255,.22); border-radius:999px; background:rgba(127,178,255,.08); }
 .footer-note { color:var(--muted); font-size:13px; margin-top:14px; }
 @media (max-width: 1024px) { .page { grid-template-columns:1fr; } .toc { position: static; } .toc-card { max-height:none; } }
 @media (max-width: 640px) { .page { padding:14px 12px 42px; } .hero, .article, .toc-card { border-radius:16px; } .article { padding:18px; } .hero h1 { font-size:24px; } .article h1 { font-size:24px; } .article h2 { font-size:20px; } .summary-grid { grid-template-columns:1fr; } .pager { flex-direction:column; } }
 </style>
 </head>
 <body>
  <div class="page">
    <header class="hero">
      <h1>Hermes + Zellij 사용법 요약 </h1>
      <p>왼쪽 목차 / 오른쪽 본문 구성으로 다시 정리한 Hermes + Zellij 문서입니다.</p>
    </header>
    <nav class="toc"><div class="toc-card"><h2>목차</h2><a class="toc-link level-1 active" href="hermes-zellij-guide-site/index.html">Hermes + Zellij 사용법 요약 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/basics.html">Zellij 기본 개념 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/commands.html">명령어 정리 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/workflow.html">실제 사용 흐름 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/reference.html">설정/문제해결/요약 </a></div></nav>
    <article class="article">
      <div class="top-actions"><a class="pill-btn primary" href="hermes-zellij-guide-site/index.html">요약으로 돌아가기</a></div><h2 id="0-가장-먼저-진짜-핵심-요약">0. 가장 먼저: 진짜 핵심 요약</h2><p>Hermes는 지금 네 Mac 홈 디렉토리에 설치된 공용 프로그램 1개입니다. Zellij는 그 위에서 작업공간을 정리해 주는 도구입니다.</p><div class="summary-grid"><div class="summary-card"><strong>hr</strong><p>매일 쓰는 기본 명령. 기존 hermes 세션에 붙거나, 없으면 새로 만들어서 들어감.</p></div><div class="summary-card"><strong>hermes-run</strong><p>기본 레이아웃을 새로 여는 명령. 새 작업방 모양이 필요할 때만.</p></div><div class="summary-card"><strong>hermes-run-fg</strong><p>gateway를 foreground로 띄우는 디버그용 명령.</p></div><div class="summary-card"><strong>hlogs</strong><p>gateway 로그를 바로 보는 명령.</p></div></div><table class="cmd-compare"><thead><tr><th>명령</th><th>핵심 의미</th><th>언제 쓰나</th></tr></thead><tbody><tr><td><code>hr</code></td><td>붙기 / 만들기 / 복귀</td><td>매일 작업 시작할 때, 다시 들어갈 때 쓰는 기본 명령</td></tr><tr><td><code>hermes-run</code></td><td>기본 레이아웃 실행</td><td>의도적으로 새 레이아웃을 열고 싶을 때만</td></tr></tbody></table><p><strong>정리:</strong> <code>hr</code> = 일상용, <code>hermes-run</code> = 새 레이아웃용.</p><p>왼쪽 목차에서 다른 페이지로 이동해서 자세히 볼 수 있게 분리해뒀다.</p>
      
      <div class="page-links"><a href="hermes-zellij-guide-site/index.html">Hermes + Zellij 사용법 요약 </a><a href="hermes-zellij-guide-site/basics.html">Zellij 기본 개념 </a><a href="hermes-zellij-guide-site/commands.html">명령어 정리 </a><a href="hermes-zellij-guide-site/workflow.html">실제 사용 흐름 </a><a href="hermes-zellij-guide-site/reference.html">설정/문제해결/요약 </a></div>
      <div class="footer-note">원하면 이 사이트를 더 쪼개서 각 섹션을 개별 페이지로도 만들 수 있다.</div>
    </article>
  </div>
 </body>
 </html>
	<!doctype html>
	<html lang="ko">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Hermes + Zellij 사용법 요약 </title>
	<style>
	:root { --bg:#07111f; --panel:#0d1830; --border:#223152; --text:#eaf0ff; --muted:#b8c4e3; --accent:#7fb2ff; --code-bg:#08101f; }
	* { box-sizing: border-box; }
	html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif; }
	body { line-height:1.75; }
	a { color:var(--accent); text-decoration:none; }
	a:hover { text-decoration:underline; }
	.page { max-width: 1400px; margin: 0 auto; padding: 28px 18px 56px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
	.hero { grid-column: 1 / -1; background: linear-gradient(180deg, #101d39, #0c1730); border: 1px solid var(--border); border-radius: 20px; padding: 24px 26px; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
	.hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
	.hero p { margin: 0; color: var(--muted); }
	.toc { position: sticky; top: 18px; }
	.toc-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px; max-height: calc(100vh - 36px); overflow: auto; }
	.toc-card h2 { margin:0 0 12px; font-size:18px; }
	.toc-link { display:block; padding:6px 8px; border-radius:10px; color:var(--text); }
	.toc-link:hover { background: rgba(127,178,255,.10); }
	.toc-link.level-1 { font-weight:700; margin-top:4px; }
	.toc-link.level-2 { padding-left:16px; color:var(--muted); }
	.toc-link.level-3 { padding-left:28px; color:#9fb2d8; font-size:14px; }
	.toc-link.active { background:rgba(127,178,255,.18); color:#ffffff; font-weight:700; border:1px solid rgba(127,178,255,.18); }
	.article { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 26px; min-width: 0; overflow-wrap:anywhere; word-break:normal; }
	.article h1, .article h2, .article h3, .article h4 { line-height:1.25; scroll-margin-top:20px; }
	.article h1 { margin: 34px 0 14px; font-size: 30px; }
	.article h2 { margin: 30px 0 12px; font-size: 24px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 18px; }
	.article h3 { margin: 22px 0 10px; font-size: 19px; color: #f2f5ff; }
	.article p { margin: 10px 0; color: #e3e9fb; }
	.article ul { margin: 8px 0 14px 24px; padding: 0; }
	.article li { margin: 6px 0; }
	.article code { background: rgba(127,178,255,.12); padding: 0 5px; border-radius: 6px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .95em; }
	.article pre { background: var(--code-bg); border: 1px solid #1c2a44; border-radius: 14px; padding: 16px 18px; overflow: auto; margin: 14px 0; }
	.article pre code { background: transparent; padding: 0; white-space: pre; color: #dce7ff; line-height: 1.6; font-size: 14px; }
	.table-wrap { overflow-x:auto; margin:14px 0; border:1px solid var(--border); border-radius:14px; }
	table { width:100%; border-collapse:collapse; background:#0b152a; }
	th, td { border-bottom:1px solid rgba(255,255,255,.07); padding:10px 12px; text-align:left; vertical-align:top; }
	th { background: rgba(127,178,255,.08); color:#f4f7ff; }
	tr:last-child td { border-bottom:none; }
	.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
	.summary-card { background:#0b152a; border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px; }
	.summary-card strong { display:block; margin-bottom:6px; font-size:16px; }
	.summary-card p { margin:0; color:#dbe5fb; }
	.cmd-compare { width:100%; margin-top:14px; border-collapse:collapse; overflow:hidden; border-radius:12px; }
	.cmd-compare th, .cmd-compare td { border-bottom:1px solid rgba(255,255,255,.07); padding:10px 12px; vertical-align:top; text-align:left; }
	.cmd-compare th { background: rgba(127,178,255,.08); }
	.top-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 0 0 16px; }
	.pill-btn { display:inline-block; padding:8px 12px; border:1px solid rgba(127,178,255,.22); border-radius:999px; background:rgba(127,178,255,.08); color:var(--text); }
	.pill-btn.primary { background:rgba(127,178,255,.16); font-weight:700; }
	.pager { display:flex; justify-content:space-between; gap:12px; margin: 18px 0 0; }
	.pager a { flex:1; display:block; padding:12px 14px; border:1px solid rgba(127,178,255,.22); border-radius:14px; background:rgba(127,178,255,.06); color:var(--text); }
	.pager a.next { text-align:right; }
	.pager .label { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
	.page-links { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 0; }
	.page-links a { display:inline-block; padding:6px 10px; border:1px solid rgba(127,178,255,.22); border-radius:999px; background:rgba(127,178,255,.08); }
	.footer-note { color:var(--muted); font-size:13px; margin-top:14px; }
	@media (max-width: 1024px) { .page { grid-template-columns:1fr; } .toc { position: static; } .toc-card { max-height:none; } }
	@media (max-width: 640px) { .page { padding:14px 12px 42px; } .hero, .article, .toc-card { border-radius:16px; } .article { padding:18px; } .hero h1 { font-size:24px; } .article h1 { font-size:24px; } .article h2 { font-size:20px; } .summary-grid { grid-template-columns:1fr; } .pager { flex-direction:column; } }
	</style>
	</head>
	<body>
	<div class="page">
	<header class="hero">
	<h1>Hermes + Zellij 사용법 요약 </h1>
	<p>왼쪽 목차 / 오른쪽 본문 구성으로 다시 정리한 Hermes + Zellij 문서입니다.</p>
	</header>
	<nav class="toc"><div class="toc-card"><h2>목차</h2><a class="toc-link level-1 active" href="hermes-zellij-guide-site/index.html">Hermes + Zellij 사용법 요약 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/basics.html">Zellij 기본 개념 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/commands.html">명령어 정리 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/workflow.html">실제 사용 흐름 </a><a class="toc-link level-1" href="hermes-zellij-guide-site/reference.html">설정/문제해결/요약 </a></div></nav>
	<article class="article">
	<div class="top-actions"><a class="pill-btn primary" href="hermes-zellij-guide-site/index.html">요약으로 돌아가기</a></div><h2 id="0-가장-먼저-진짜-핵심-요약">0. 가장 먼저: 진짜 핵심 요약</h2><p>Hermes는 지금 네 Mac 홈 디렉토리에 설치된 공용 프로그램 1개입니다. Zellij는 그 위에서 작업공간을 정리해 주는 도구입니다.</p><div class="summary-grid"><div class="summary-card"><strong>hr</strong><p>매일 쓰는 기본 명령. 기존 hermes 세션에 붙거나, 없으면 새로 만들어서 들어감.</p></div><div class="summary-card"><strong>hermes-run</strong><p>기본 레이아웃을 새로 여는 명령. 새 작업방 모양이 필요할 때만.</p></div><div class="summary-card"><strong>hermes-run-fg</strong><p>gateway를 foreground로 띄우는 디버그용 명령.</p></div><div class="summary-card"><strong>hlogs</strong><p>gateway 로그를 바로 보는 명령.</p></div></div><table class="cmd-compare"><thead><tr><th>명령</th><th>핵심 의미</th><th>언제 쓰나</th></tr></thead><tbody><tr><td><code>hr</code></td><td>붙기 / 만들기 / 복귀</td><td>매일 작업 시작할 때, 다시 들어갈 때 쓰는 기본 명령</td></tr><tr><td><code>hermes-run</code></td><td>기본 레이아웃 실행</td><td>의도적으로 새 레이아웃을 열고 싶을 때만</td></tr></tbody></table><p><strong>정리:</strong> <code>hr</code> = 일상용, <code>hermes-run</code> = 새 레이아웃용.</p><p>왼쪽 목차에서 다른 페이지로 이동해서 자세히 볼 수 있게 분리해뒀다.</p>

	<div class="page-links"><a href="hermes-zellij-guide-site/index.html">Hermes + Zellij 사용법 요약 </a><a href="hermes-zellij-guide-site/basics.html">Zellij 기본 개념 </a><a href="hermes-zellij-guide-site/commands.html">명령어 정리 </a><a href="hermes-zellij-guide-site/workflow.html">실제 사용 흐름 </a><a href="hermes-zellij-guide-site/reference.html">설정/문제해결/요약 </a></div>
	<div class="footer-note">원하면 이 사이트를 더 쪼개서 각 섹션을 개별 페이지로도 만들 수 있다.</div>
	</article>
	</div>
	</body>
	</html>
No results found