<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DoubleOn Study Hub · 학습 자료</title>
<link rel="stylesheet" href="assets/style.css">
<style>
  .wrap{max-width:920px; margin:0 auto; padding:0 22px 90px}
  .topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
  .topbar .in{max-width:920px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:12px}
  .brand{font-weight:700; font-size:15px} .brand .s{color:var(--core)}
  .topbar .sp{flex:1}
  header.hero{padding:54px 0 26px}
  .kicker{color:var(--core); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
  h1.big{font-size:34px; line-height:1.18; letter-spacing:-.02em; margin:.3em 0 .2em}
  .sub{color:var(--muted); font-size:16px}
  .courses{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
  @media(max-width:680px){.courses{grid-template-columns:1fr}}
  .course{display:block; background:var(--bg2); border:1px solid var(--border); border-radius:16px;
    padding:24px; transition:border-color .2s, transform .2s}
  .course:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-2px)}
  .course .ico{font-size:30px}
  .course h2{margin:12px 0 6px; font-size:20px; color:var(--text)}
  .course .d{color:var(--muted); font-size:14px; line-height:1.6}
  .course .meta{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
  .course .chip{background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:4px 11px; font-size:12px; color:var(--muted)}
  .course .go{margin-top:16px; font-size:14px; font-weight:700; color:var(--accent)}
  .chapters{margin-top:34px}
  .chapters .lbl{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:12px}
  .chgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  @media(max-width:680px){.chgrid{grid-template-columns:1fr}}
  .ch{display:flex; align-items:center; gap:11px; background:var(--bg2); border:1px solid var(--border);
    border-radius:10px; padding:11px 14px; font-size:14px; color:var(--text); transition:border-color .15s}
  .ch:hover{border-color:var(--accent); text-decoration:none}
  .ch .n{font-variant-numeric:tabular-nums; font-weight:800; color:var(--core); font-size:13px; min-width:22px}
  .ch .t{color:var(--text)}
  footer{color:var(--faint); font-size:12.5px; text-align:center; margin-top:46px; padding-top:20px; border-top:1px solid var(--border)}
</style>
</head>
<body>
<div class="topbar"><div class="in">
  <span class="brand"><span class="s">DoubleOn</span> Study Hub</span>
  <span class="sp"></span>
  <button class="iconbtn" id="themeBtn">🌙 다크</button>
</div></div>

<div class="wrap">
  <header class="hero">
    <div class="kicker">학습 자료 모음</div>
    <h1 class="big">DoubleOn Study Hub</h1>
    <div class="sub">두 과정을 한곳에서. 다크/라이트 테마, 읽기 진행바, 목차 내비게이션을 지원합니다.</div>
  </header>

  <div class="courses">
    <a class="course" href="swift-concurrency/index.html">
      <div class="ico">🌀</div>
      <h2>Swift Concurrency</h2>
      <div class="d">async/await · actor · Sendable · 구조적 동시성. 22세션 집중 학습.</div>
      <div class="meta"><span class="chip">22 세션</span><span class="chip">22시간</span></div>
      <div class="go">과정 열기 →</div>
    </a>
    <a class="course" href="memory/index.html">
      <div class="ico">🧠</div>
      <h2>컴퓨터 메모리</h2>
      <div class="d">메모리 계층 · 가상 메모리 · 동적 할당 · GC · 캐시. 전공 수준 정독 교재.</div>
      <div class="meta"><span class="chip">10 챕터</span><span class="chip">20시간</span></div>
      <div class="go">교재 열기 →</div>
    </a>
  </div>

  <div class="chapters">
    <div class="lbl">컴퓨터 메모리 — 챕터</div>
    <div class="chgrid">
        <a class="ch" href="memory/01.html"><span class="n">01</span><span class="t">메모리 계층과 멘탈 모델</span></a>
        <a class="ch" href="memory/02.html"><span class="n">02</span><span class="t">주소, 비트/바이트, 포인터, 프로세스 레이아웃</span></a>
        <a class="ch" href="memory/03.html"><span class="n">03</span><span class="t">스택 vs 힙</span></a>
        <a class="ch" href="memory/04.html"><span class="n">04</span><span class="t">캐시와 캐시 친화적 코드</span></a>
        <a class="ch" href="memory/05.html"><span class="n">05</span><span class="t">가상 메모리 ① 페이징과 주소 변환</span></a>
        <a class="ch" href="memory/06.html"><span class="n">06</span><span class="t">가상 메모리 ② TLB · 페이지 폴트 · mmap</span></a>
        <a class="ch" href="memory/07.html"><span class="n">07</span><span class="t">동적 할당과 malloc 내부</span></a>
        <a class="ch" href="memory/08.html"><span class="n">08</span><span class="t">메모리 관리 전략: 수동 · 참조 카운팅 · 추적 GC</span></a>
        <a class="ch" href="memory/09.html"><span class="n">09</span><span class="t">메모리 버그와 안전성, 그리고 도구</span></a>
        <a class="ch" href="memory/10.html"><span class="n">10</span><span class="t">동시성과 메모리 + 종합</span></a>
    </div>
  </div>

  <footer>Study Hub · Cloudflare Pages</footer>
</div>

<script>
  const TKEY="scc20:theme", tb=document.getElementById("themeBtn");
  function setTheme(t){ document.documentElement.setAttribute("data-theme",t); tb.textContent=t==="light"?"☀️ 라이트":"🌙 다크"; localStorage.setItem(TKEY,t); }
  setTheme(localStorage.getItem(TKEY)||"dark");
  tb.onclick=()=>setTheme(document.documentElement.getAttribute("data-theme")==="light"?"dark":"light");
</script>
</body>
</html>
