<%# 묶음(items)이 있는 메뉴는 shared/_nav 가 메가 메뉴로 그린다(ds/sections.js 가 연다) %>
<li class="nav__item" data-mega>
  <button class="nav__link nav__trigger" type="button" aria-expanded="false" aria-controls="mega-0">
    제품<%= icon("chevron-down", size: "sm", class: "nav__chev") %>
  </button>
  <div class="mega" id="mega-0">
    <div class="mega__grid">
      <ul class="mega__items">
        <li>
          <%= link_to "/product/sign", class: "mega__link", "aria-current": nav_aria("/product/sign") do %>
            <span class="mega__icon"><%= icon("shield") %></span>
            <span class="mega__text">
              <span class="mega__title">전자서명·검토</span>
              <span class="mega__desc">작성자와 검토자 서명을 한 번에</span>
            </span>
          <% end %>
        </li>
      </ul>
      <%# 오른쪽 소식 칸: 묶음에 aside: { eyebrow:, title:, href:, tone: "sky" } %>
      <a class="mega__aside panel--sky" href="/product/notes">…</a>
    </div>
  </div>
</li>

<%# shared/_drawer: 햄버거(data-drawer-open="site-drawer")가 연다. 1024px 넘게 넓어지면 저절로 닫힌다 %>
<div class="drawer drawer--site" id="site-drawer" data-drawer>
  <div class="drawer__scrim"></div>
  <nav class="drawer__panel" aria-label="모바일 메뉴">
    <div class="drawer__head">
      <%= link_to site_home_path, class: "nav__brand", "aria-label": "#{brand(:name)} 홈", data: { drawer_close: "" } do %>
        <%= render "shared/brand", size: 24 %>
      <% end %>
      <button class="btn btn--ghost btn--md btn--square" type="button" data-drawer-close aria-label="메뉴 닫기"><%= icon("close") %></button>
    </div>
    <%# 묶음은 아코디언. 지금 화면이 든 묶음은 펼친 채로 연다 %>
    <div class="drawer__body" data-accordion data-accordion-single>…</div>
    <div class="drawer__foot">
      <%= link_to "무료로 시작하기", "/signup", class: "btn btn--primary btn--lg btn--block", data: { drawer_close: "" } %>
      <%= link_to "로그인", "/login", class: "btn btn--secondary btn--md btn--block", data: { drawer_close: "" } %>
    </div>
  </nav>
</div>

<%# 1) 유리 바탕: 따로 할 일이 없다. ds.js 가 8px 넘게 내리면 [data-nav] 에 data-stuck 을 붙인다 %>
<header class="nav nav--site nav--balanced" data-nav>…</header>

<%# 2) 숨는 헤더: 아래로 읽는 동안 숨고 조금만 올려도 나온다(ds/extras.js) %>
<header class="nav" data-nav data-autohide>…</header>

<%# 3) 첫 화면이 내비 밑까지 차오름: 화면에서 켜고, 첫 섹션에 under-nav %>
<% content_for :nav_float, true %>
<section class="hero under-nav">…</section>

<%# 지금 화면이면 "page", 아니면 nil 이라 속성이 빠진다(NavigationHelper#nav_aria) %>
<%= link_to it[:label], it[:href], class: "nav__link",
      "aria-current": nav_aria(it[:href], exact: it[:exact]) %>

<%# 앱 홈(/app)처럼 다른 경로의 앞머리인 항목은 목록에 exact: true %>
{ key: "home", label: "홈", icon: "home", href: "/app", exact: true }

<%# 묶음 안에 지금 화면이 있나(메가 메뉴 버튼·서랍 아코디언을 펼칠 때) %>
nav_group_current?(item)

<div data-tabs>
  <div class="tabs__list" role="tablist" aria-label="실험 노트">
    <button class="tabs__tab" type="button" role="tab" aria-selected="true">본문</button>
    <button class="tabs__tab" type="button" role="tab">첨부 파일<span class="tabs__count">3</span></button>
    <button class="tabs__tab" type="button" role="tab" disabled>권한</button>
    <span class="tabs__ink" aria-hidden="true"></span>
  </div>
  <%# 패널은 탭 순서대로. aria-controls·aria-labelledby 는 ds.js 가 잇는다 %>
  <div class="tabs__panel" role="tabpanel">…</div>
  <div class="tabs__panel" role="tabpanel" hidden>…</div>
  <div class="tabs__panel" role="tabpanel" hidden>…</div>
</div>

<%# 항목이 링크(a)면 화면 이동이다. 지금 화면에 aria-current="page"(누름 상태·화살표 이동은 버튼 분절에만) %>
<nav class="segment segment--block" aria-label="노트 상태">
  <% [ [ "all", "전체" ], [ "review", "검토 대기" ], [ "signed", "서명 완료" ] ].each do |key, label| %>
    <%= link_to label, notes_path(view: key), class: "segment__item",
          "aria-current": (key == @view ? "page" : nil) %>
  <% end %>
</nav>

<%# 목록 칸만 바꾸려면 turbo-frame 으로 감싼다(응답에 같은 id 의 frame 이 있어야 한다) %>
<turbo-frame id="notes-list">…</turbo-frame>

<%# 여러 칸을 함께 펼친다. 처음부터 펼칠 칸은 aria-expanded="true" %>
<div data-accordion>
  <div class="accordion__item" id="note-result">
    <button class="accordion__trigger" type="button" aria-expanded="true">
      <span>결과 요약</span><%= icon("chevron-down", class: "accordion__chev") %>
    </button>
    <div class="accordion__panel"><div class="accordion__body">…</div></div>
  </div>
</div>

<%# 다른 자리의 링크로 펼치기: 접혀 있으면 펼치고 그 자리로 옮겨 트리거에 초점 %>
<a class="link" href="#note-result" data-expand="note-result">결과 요약 펼치기</a>

<%# 하나만 펼친다: 새 칸을 펼치면 앞 칸이 접힌다 %>
<div data-accordion data-accordion-single>
  <div class="accordion__item">
    <button class="accordion__trigger" type="button" aria-expanded="true">
      <span>서명한 노트를 고칠 수 있나요?</span><%= icon("chevron-down", class: "accordion__chev") %>
    </button>
    <div class="accordion__panel"><div class="accordion__body">…</div></div>
  </div>
  <div class="accordion__item">…</div>
</div>

<nav class="crumbs" aria-label="경로">
  <ol>
    <li><%= link_to "홈", root_path %></li>
    <li><%= link_to "항체 안정성 과제", project_path(project) %></li>
    <li><%= link_to "실험 노트", project_notes_path(project) %></li>
    <li><span aria-current="page"><%= note.title %></span></li>
  </ol>
</nav>

<%# ui_steps(현재, 전체, label:) · 화면 읽기는 '4단계 중 2단계' %>
<%= ui_steps(2, 4, label: "노트 작성 단계") %>

<%# 스크립트로 바꿀 때는 막대(.steps__bar)의 폭과 aria 값을 함께 %>
<%# 끝을 모르는 진행은 .steps__bar[data-indeterminate] %>

<nav class="pager" aria-label="노트 목록 페이지">
  <%= link_to notes_path(page: 4), class: "pager__btn", "aria-label": "이전 페이지" do %>
    <%= icon("chevron-left", size: "sm") %><span class="pager__label">이전</span>
  <% end %>
  <%= link_to "1", notes_path(page: 1), class: "pager__num" %>
  <span class="pager__gap" aria-hidden="true">…</span>
  <%= link_to "5", notes_path(page: 5), class: "pager__num", "aria-current": "page" %>
  <span class="pager__status" aria-hidden="true"><b>5</b>&nbsp;/ 12</span>
  <%= link_to notes_path(page: 6), class: "pager__btn", "aria-label": "다음 페이지" do %>
    <span class="pager__label">다음</span><%= icon("chevron-right", size: "sm") %>
  <% end %>
</nav>

<%# 첫 쪽의 '이전'은 링크가 아니라 span + aria-disabled="true" %>
<span class="pager__btn" aria-disabled="true" aria-label="이전 페이지 없음">…</span>

<div class="pager pager--more">
  <%= ui_button "노트 더 보기", size: "lg" %>
  <span class="pager__hint" aria-live="polite">48개 중 20개</span>
</div>

<%# 불러오는 동안: 버튼에 data-busy(스피너, 다시 눌리지 않음). 다 불렀으면 disabled + '모두 봤어요' %>

<%# 내비 바로 밑에 붙는 목차 띠. data-subnav 를 달면 ds.js 가 보고 있는 구역에 aria-current="true" %>
<nav class="subnav" data-subnav aria-label="소개 목차">
  <div class="container container--wide">
    <div class="subnav__list">
      <a class="subnav__item" href="#features" aria-current="false">기능</a>
      <a class="subnav__item" href="#pricing" aria-current="false">요금</a>
    </div>
  </div>
</nav>

<%# 레이아웃 body 맨 앞(marketing·app·admin 레이아웃에 이미 있다) %>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
…
<main id="main"><%= yield %></main>

<%# 화면 전환 방향: data-nav-back(뒤로) · data-nav-tab(탭) · data-nav-none(없음) · 그 밖(앞으로) %>
<%= link_to project_notes_path(project), class: "btn btn--ghost btn--sm", data: { nav_back: "" } do %>
  <%= icon("chevron-left", size: "sm") %><span class="btn__label">과제 목록</span>
<% end %>

<%# 앱바 뒤로 버튼은 app_bar 헬퍼가 그린다. 앞 화면이 앱 안이면 한 칸 돌아가고, 아니면 back 경로로 간다 %>
<%= app_bar "세포 배양 3차", back: back_path(project_notes_path(project)) %>

<%# ds/dashboard.js: data-hotkey 를 단 칸은 그 키로 초점을 받는다(버튼이면 눌린다) %>
<label class="searchbar">
  <%= icon("search") %>
  <input class="searchbar__input" type="search" placeholder="예: 세포 배양"
         aria-label="연구노트 찾기" aria-keyshortcuts="/" autocomplete="off" data-hotkey="mod+k /">
  <kbd class="kbd" data-hotkey-label="⌘K" aria-hidden="true">⌘K</kbd>
</label>