<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>TheNoun 디자인 시스템</title>
<meta name="description" content="사람과 에이전트가 함께 쓰는 TheNoun의 디자인 시스템.">
<link rel="icon" href="assets/mascot.png">
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="site.css">
<script src="theme.js"></script>
<style>
  :root, .sw-root{
    --sw-bg:#F8F8F8; --sw-ink:#0A0A0A; --sw-ink-soft:#6E6E6E; --sw-accent:#0A0A0A;
    --sw-font-display:'Geist','Pretendard',-apple-system,sans-serif;
    --sw-font-body:'Pretendard',-apple-system,sans-serif;
  }
  .nav{ position:fixed !important; top:0; left:0; right:0; z-index:100;
    background:color-mix(in oklch, var(--background) 84%, transparent); backdrop-filter:blur(12px); }
  body{ padding-top:56px; }
  /* 엔진 자체 상단바 숨김 — 사이트 표준 내비 사용 */
  .sw-topbar{ display:none !important; }
  /* 타이틀 한 줄 */
  .sw-copy{ width:auto !important; max-width:min(74vw,880px) !important; word-break:keep-all;
    left:50% !important; right:auto !important; transform:translate(-50%,-50%) !important; text-align:center; }
  .sw-copy__body{ margin-left:auto; margin-right:auto; }
  .sw-copy__tags{ justify-content:center; }
  .sw-copy__cta{ justify-content:center; }
  .sw-start{ margin-left:auto; margin-right:auto; text-align:left; }
  .sw-copy__title{ font-size:clamp(1.6rem,3vw,2.9rem) !important; white-space:nowrap; }
  .sw-copy__body{ word-break:keep-all; }
  @media(max-width:860px){ .sw-copy__title{ white-space:normal; } }
  /* 영상 가독성: 전용 다크 스크림 레이어 (씬 위 · 카피 아래) */
  .film-scrim{ position:fixed; inset:0; z-index:15; pointer-events:none;
    background:rgba(0,0,0,.42); }
  /* @layer 엔진 스타일이 무레이어 site.css에 눌리므로 카피 블록 명시 복원 */
  .sw-copy__num{ font-family:ui-monospace,Menlo,monospace; font-size:.74rem; letter-spacing:.12em; color:var(--sw-ink-soft); }
  .sw-copy__eyebrow{ display:block; margin-top:18px; font-family:var(--sw-font-display); font-weight:700;
    font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); }
  .sw-copy__title{ font-family:var(--sw-font-display); font-weight:800; color:#fff;
    line-height:1.08; margin:14px 0 0; letter-spacing:-0.02em;
    text-shadow:0 3px 26px rgba(0,0,0,.45); }
  .sw-copy__body{ margin-top:16px; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.6;
    color:rgba(255,255,255,.92); text-shadow:0 2px 14px rgba(0,0,0,.4); max-width:44ch; }
  .sw-copy__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; }
  .sw-copy__tags li{ font-size:.8rem; font-weight:600; color:#fff;
    padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }
  .sw-copy__cta{ display:flex; gap:10px; margin-top:26px; }
  .sw-copy__cta a{ text-decoration:none; font-weight:700; font-size:.92rem; padding:12px 22px; border-radius:10px; }
  .sw-copy__cta a:first-child{ background:#fff; color:var(--sw-ink); }
  .sw-copy__cta a:last-child{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(4px); }
  /* ── 원본 개요 본문 스타일 (쇼케이스·원칙) ── */
  .hero-orb{ width:120px; height:120px; margin:0 auto 1.6rem; }
  .hero .tn-title{ font-size:2.6rem; }
  .hero .tn-sub{ max-width:560px; margin:0.8rem auto 0; }
  .hero-cta{ display:flex; gap:0.7rem; justify-content:center; margin-top:1.8rem; }
  .show{ margin-top:3.5rem; }
  .show-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
  @media(max-width:820px){ .show-grid{ grid-template-columns:1fr; } .hero .tn-title{ font-size:1.9rem; } }
  .cell{ padding:1.3rem; display:flex; flex-direction:column; gap:0.9rem; }
  .cell h3{ font-size:0.76rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted-foreground); }
  .cell .row{ display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; }
  .mini-bar{ height:4px; background:var(--muted); border-radius:99px; overflow:hidden; }
  .mini-bar i{ display:block; height:100%; width:64%; background:var(--foreground); border-radius:99px; }
  .mini-file{ display:flex; align-items:center; gap:0.6rem; font-size:0.8rem; }
  .mini-ic{ width:28px; height:28px; border-radius:6px; background:var(--muted); display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:700; color:var(--muted-foreground); }
  .mini-steps{ display:flex; align-items:center; gap:0.5rem; font-size:0.72rem; color:var(--muted-foreground); }
  .mini-steps .d{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:700; background:var(--card); }
  .mini-steps .done .d{ background:var(--foreground); border-color:var(--foreground); color:var(--on-foreground); }
  .mini-steps .line{ width:20px; height:1.5px; background:var(--border); }
  .prin{ margin-top:3.5rem; }
  .prin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
  @media(max-width:820px){ .prin-grid{ grid-template-columns:1fr 1fr; } }
  .prin-card{ padding:1.2rem; }
  .prin-card b{ font-size:0.9rem; display:block; margin-bottom:0.4rem; letter-spacing:-0.01em; }
  .prin-card p{ font-size:0.8rem; color:var(--muted-foreground); line-height:1.6; }

  /* 필름 속 시작하기 미니 패널 */
  .sw-start{ margin-top:22px; background:color-mix(in srgb,#fff 82%,transparent); backdrop-filter:blur(8px);
    border:1px solid color-mix(in srgb,var(--sw-ink) 14%, transparent); border-radius:14px; padding:16px 18px; max-width:520px; }
  .sw-start pre{ background:var(--sw-ink); color:#fff; border-radius:8px; padding:10px 14px;
    font:12px/1.5 ui-monospace,monospace; margin:0 0 10px; overflow-x:auto; }
  .sw-start ol{ margin:0; padding-left:1.1rem; font-size:.84rem; line-height:1.7; color:var(--sw-ink); }
  .sw-start ol b{ font-weight:700; }
  /* 필름 뒤 본문이 마지막 프레임 위로 슬라이드 */
  .after-film{ position:relative; z-index:30; background:var(--background);
    box-shadow:0 -30px 60px rgba(0,0,0,.12); border-radius:24px 24px 0 0; }
  #world.done ~ * .sw-route{ display:none; }
</style>
</head>
<body>

<nav class="nav"><div class="nav-in">
  <a class="brand" href="index.html"><img src="assets/mascot.png" alt=""><b>The<span class="wm">Noun</span>. <span style="font-weight:500;color:var(--muted-foreground)">Design</span></b></a>
  <a class="lnk on" href="index.html">개요</a>
  <a class="lnk" href="getting-started.html">AI 연동</a>
  <a class="lnk" href="foundations.html">Foundations</a>
  <a class="lnk" href="components.html">Components</a>
  <a class="lnk" href="patterns.html">Patterns</a>
  <a class="lnk" href="changelog.html">Changelog</a>
  <button class="theme-btn" onclick="tnToggleTheme()" aria-label="테마 전환" title="테마 전환">◐</button>
</div></nav>

<div id="world"></div>

<div class="after-film">
<main class="page" style="padding-top:3.5rem">

  <div class="show">
    <div class="tn-eyebrow" style="margin-bottom:1rem">Live Showcase — 스크린샷이 아니라 실물입니다</div>
    <div class="show-grid">
      <div class="tn-card cell">
        <h3>Buttons</h3>
        <div class="row">
          <button class="tn-btn tn-btn-primary">전송</button>
          <button class="tn-btn tn-btn-ghost">취소</button>
          <button class="tn-btn tn-btn-primary" disabled style="opacity:.45">비활성</button>
        </div>
        <h3>Chips</h3>
        <div class="row">
          <span class="tn-chip">Enterprise File Transfer</span>
          <span class="tn-chip" style="background:var(--foreground);color:var(--on-foreground);border-color:var(--foreground)">Active</span>
        </div>
      </div>
      <div class="tn-card cell">
        <h3>Form Field</h3>
        <div>
          <label style="font-size:0.74rem;font-weight:600;display:flex;align-items:center;gap:0.35rem;margin-bottom:0.3rem">회사명
            <span style="font-size:0.56rem;font-weight:700;color:var(--muted-foreground);border:1px solid var(--border);border-radius:999px;padding:0 5px">필수</span></label>
          <input class="tn-input" placeholder="예: TheNoun.AI">
        </div>
        <h3>Progress</h3>
        <div>
          <div class="mini-file"><div class="mini-ic">PDF</div><div style="flex:1">
            <div style="font-weight:550">계약서.pdf</div>
            <div class="mini-bar" style="margin-top:5px"><i></i></div>
          </div><span style="font-size:0.72rem;font-weight:600;color:var(--muted-foreground)">64%</span></div>
        </div>
      </div>
      <div class="tn-card cell">
        <h3>Steps</h3>
        <div class="mini-steps">
          <span class="done" style="display:flex;align-items:center;gap:0.35rem"><span class="d">✓</span>정보</span><span class="line" style="background:var(--foreground)"></span>
          <span class="done" style="display:flex;align-items:center;gap:0.35rem;color:var(--foreground)"><span class="d">2</span>파일</span><span class="line"></span>
          <span style="display:flex;align-items:center;gap:0.35rem"><span class="d">3</span>완료</span>
        </div>
        <h3>Status</h3>
        <div class="row">
          <span style="display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--ok)">
            <span style="width:8px;height:8px;border-radius:50%;background:var(--ok)"></span>전송 완료</span>
          <span style="display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--err)">
            <span style="width:8px;height:8px;border-radius:50%;background:var(--err)"></span>실패</span>
        </div>
      </div>
    </div>
  </div>

  <div class="prin">
    <div class="tn-eyebrow" style="margin-bottom:1rem">원칙</div>
    <div class="prin-grid">
      <div class="tn-card prin-card"><b>Minimal Black &amp; White</b><p>기본은 흑백. 파랑은 hover·포커스·강조에만 등장한다.</p></div>
      <div class="tn-card prin-card"><b>Enterprise 담백함</b><p>장식과 과잉 문구를 걷어내고, 필요한 정보만 격식 있게.</p></div>
      <div class="tn-card prin-card"><b>단일 파일 지향</b><p>화면 하나는 HTML 하나. 빌드 없이 열리고 그대로 배포된다.</p></div>
      <div class="tn-card prin-card"><b>Agent-Ready</b><p>토큰과 컴포넌트를 사람과 AI 에이전트가 같은 방식으로 소비한다.</p></div>
    </div>
  </div>

</main>
<footer class="foot2"><div class="foot2-in">
  <div class="f2-brand">
    <img src="assets/mascot.png" alt="">
    <div class="f2-line">Built for people and agents.</div>
    <div class="f2-copy">© 2026 TheNoun. All rights reserved.</div>
  </div>
  <nav class="f2-cols">
    <div><p>Menu</p><ul><li><a href="index.html">개요</a></li><li><a href="getting-started.html">AI 연동</a></li><li><a href="foundations.html">Foundations</a></li><li><a href="components.html">Components</a></li><li><a href="patterns.html">Patterns</a></li><li><a href="changelog.html">Changelog</a></li></ul></div>
    <div><p>Resources</p><ul>
      <li><a href="tokens.css">tokens.css</a></li>
      <li><a href="AGENTS.md">AGENTS.md</a></li>
      <li><a href="https://upload.thenoun.ai" target="_blank" rel="noopener">Secure Transfer</a></li>
    </ul></div>
  </nav>
</div></footer>
</div>

<script src="world/scrub-engine.js"></script>
<script>
mountScrollWorld(document.getElementById('world'), {
  brand: null, nav: false, hint: '스크롤로 감상하기', crossfade: 0.04,
  diveScroll: 1.5,
  sections: [
    { id:'intro', label:'개요', still:'world/clips/ad_1.jpg', clip:'world/clips/ad_1.mp4',
      accent:'#0A0A0A', eyebrow:'TheNoun Design System',
      title:'디자인 걱정은 하지 마세요.',
      body:'원하는 것만 말씀하세요. 화면은 저희가 그립니다.',
      tags:['Design by TheNoun'], scroll:1.6, linger:0.35 },
    { id:'components', label:'컴포넌트', still:'world/clips/ad_2.jpg', clip:'world/clips/ad_2.mp4',
      accent:'#0A0A0A', eyebrow:'Components',
      title:'100+ Premade Components.',
      body:'버튼부터 결제 카드, 차트, 미니앱까지 — 이미 만들어져 있습니다.',
      tags:['100+ Components'], scroll:1.6, linger:0.35 },
    { id:'foundations', label:'기준', still:'world/clips/ad_3.jpg', clip:'world/clips/ad_3.mp4',
      accent:'#0A0A0A', eyebrow:'Foundations · Patterns',
      title:'모든 화면이 하나의 기준으로.',
      body:'어떤 요청이든 같은 톤, 같은 품질로 완성됩니다.',
      tags:['일관된 품질'], scroll:1.7, linger:0.4 },
    { id:'start', label:'시작', still:'world/clips/ad_4.jpg', clip:'world/clips/ad_4.mp4',
      accent:'#0A0A0A', eyebrow:'Connect AI',
      title:'요구사항만 주세요.',
      body:'디자인 설명은 저희가 AI에게 합니다. 브랜드는 하나의 기준으로 움직입니다.',
      tags:[], scroll:2.0, linger:0.5,
      cta:{ primary:{ label:'AI 연동하기', href:'getting-started.html' },
            secondary:{ label:'컴포넌트 보기', href:'components.html' } } },
  ],
  connectors: [null, null, null],
});
// 새로고침 시 항상 맨 위에서 시작
history.scrollRestoration = 'manual';
window.scrollTo(0, 0);
addEventListener('load', function(){ window.scrollTo(0, 0); });
// 다크 스크림 레이어 삽입 (카피 z20 아래)
(function(){
  var sc=document.createElement('div'); sc.className='film-scrim';
  document.getElementById('world').appendChild(sc);
})();
// 데드 스크롤 제거: 밴드 총합 + 0.25vh 로 월드 높이 절삭
(function(){
  var world=document.getElementById('world');
  function fit(){
    var vh=innerHeight, bands=(1.6+1.6+1.7+2.0)*vh, h=Math.round(bands+vh*0.25);
    if (Math.abs(world.offsetHeight-h)>8) world.style.height=h+'px';
  }
  fit(); addEventListener('resize', fit);
})();
// 필름 마지막 비트 오버레이에 시작하기 패널 주입
(function(){
  var arts=document.querySelectorAll('.sw-copy');
  var last=arts[arts.length-1];
  if(last){
    var d=document.createElement('div'); d.className='sw-start';
    d.innerHTML='<ol><li><b>원하는 화면을 말로 설명</b>하세요</li>'
      +'<li><b>AI가 이 시스템으로</b> 화면을 그립니다</li>'
      +'<li><b>확인하고 바로 사용</b>하세요</li></ol>';
    var cta=last.querySelector('.sw-copy__cta');
    if(cta) last.insertBefore(d, cta); else last.appendChild(d);
  }
})();
// 필름 구간이 끝나면 엔진의 고정 UI(레일·힌트) 숨김/복원
(function(){
  var world=document.getElementById('world');
  function tick(){
    var end = world.offsetTop + world.offsetHeight - innerHeight - 4;
    var past = scrollY >= end;
    document.querySelectorAll('.sw-route,.sw-hint,.sw-scrollbar').forEach(function(el){
      el.style.opacity = past ? '0' : ''; el.style.pointerEvents = past ? 'none' : '';
    });
  }
  addEventListener('scroll', tick, {passive:true}); tick();
})();
</script>
</body>
</html>
