연구대장의 모든 화면은
이 기준으로 만들어요

<%= render "shared/brand", size: 40, wordmark: false, label: brand(:name) %>

<%# 글자 로고만: .brand 가 크기(--brand-h, 심볼 높이 기준)를 정하고 .brand__word 가 그 0.72배 높이로 그려져요. %>
<span class="brand" style="--brand-h:32px" role="img" aria-label="<%= brand(:name) %>">
  <span class="brand__word"></span>
</span>

<%# 로고가 주인공인 첫 화면에서만. 내비·푸터의 작은 로고는 shared/_brand 를 써요.
    부를 때마다 그라데이션 id 에 접두사를 바꿔 붙여 한 화면에 여러 번 써도 겹치지 않아요. %>
<%= brand_mark_svg(animated: true, class: "sg-hero__mark") %>

<%# 뜻이 있는 그림이면 읽어 줄 이름을 줘요(기본은 장식, aria-hidden). %>
<%= brand_mark_svg(label: brand(:name)) %>

<%# config/initializers/ds_brand.rb %>
icon_svg: "brand/icon.svg",                    # 최신 브라우저 탭(sizes="any")
icon_png: "brand/favicon-32.png",              # 탭·북마크
apple_touch_icon: "brand/apple-touch-icon.png", # 180×180, 불투명
manifest: "/manifest.json",                    # 설치 이름·icon-192·icon-512·maskable
og_image: "brand/og.png",                      # 1200×630 공유 카드

<%# 레이아웃 머리말에서 한 줄로 전부 붙어요 %>
<%= render "shared/brand_head" %>

<p class="t-caption w-600 ink-accent">신약 후보 물질 탐색 과제</p>
<h1 class="t-heading-lg ink">이번 주 실험 노트 12건</h1>
<p class="t-body-md ink-muted">검토를 기다리는 노트가 3건 있어요. 금요일까지 서명해 주세요.</p>

<p class="t-heading-sm ink">세포 배양 3일차 관찰</p>
<p class="t-body-sm ink-body">배지를 교체하고 세포 밀도를 측정했어요.</p>
<p class="t-caption ink-subtle">박도윤 책임연구원 · <%= ago(note.updated_at) %></p>

<%# 줄을 맞춰 읽는 숫자: 글자 폭 고정 %>
<span class="t-heading-sm ink tnum"><%= number_with_delimiter(1250) %> mL</span>

<%# 표: 숫자 칸은 .num(오른쪽 정렬 + 폭 고정 + 줄바꿈 없음) %>
<table class="table">
  <thead><tr><th>시약</th><th class="num">사용</th></tr></thead>
  <tbody><tr><td>에탄올 99.5%</td><td class="num">1,250 mL</td></tr></tbody>
</table>

<%# 글자 링크: 올렸을 때 밑줄 %>
<a class="link" href="/product/sign">전자서명·검토 안내</a>

<%# 다음 화면으로 가는 링크: 화살표 + 44px 높이 %>
<a class="link-arrow" href="/product/security">감사 기록 자세히 보기<%= icon("arrow-right", size: "sm") %></a>

<%# 새 창: 아이콘을 붙이고 이름에 '새 창' 을 적어요 %>
<a class="link" href="https://github.com/orioncactus/pretendard" target="_blank" rel="noopener"
   aria-label="Pretendard 저장소(새 창)">Pretendard 저장소<%= icon("external", size: "sm") %></a>

/* 바뀌는 속성만 적고, 시간은 --d-1 ~ --d-7 에서 고른다(transition: all 금지) */
.attach-row{transition:background-color var(--d-1) var(--ease-inout)}
.version-tab__ink{transition:transform var(--d-4) var(--ease-out)}
.review-drawer{transition:transform var(--d-5) var(--ease-sheet)}

/* 들어올 때는 ease-out 으로 길게, 나갈 때는 ease-in 으로 한 단계 짧게 */
.note-pop{opacity:0;transform:translateY(calc(var(--s-8) * -1)) scale(.96);
  transition:opacity var(--d-2) var(--ease-in),transform var(--d-2) var(--ease-in)}
.note-pop[data-open]{opacity:1;transform:none;
  transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out)}

/* 새 애니메이션은 모션 축소에서 끝 상태로 끝나게 */
.sign-badge{animation:rise var(--d-3) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  .sign-badge{animation:none}   /* 보이는 상태 그대로. 투명하게 남기지 않는다 */
}

/* 스크립트에서 확인할 때 */
/* const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches */

<%# 반전 무대(.surface-invert) 위 %>
<%# 주버튼은 그대로, 보조는 키트가 반투명 흰 면으로 바꾼다 %>
<section class="section surface-invert">
  <%= ui_button "무료로 시작하기", variant: "primary", size: "lg", href: "/signup" %>
  <%= ui_button "도입 문의하기", size: "lg", href: "/customers" %>
</section>

<%# 반전 버튼(invert): 글자색 면이라 바탕 위에서 파랑 주버튼과 따로 보여야 할 때 %>
<%# 예: 첫 화면 내비의 시작 버튼 %>
<%= ui_button "무료로 시작하기", variant: "invert", size: "sm", pill: true, href: "/signup" %>

<%# 반전 무대(.surface-invert) 위 %>
<%# 주버튼은 그대로, 보조는 키트가 반투명 흰 면으로 바꾼다 %>
<section class="section surface-invert">
  <%= ui_button "무료로 시작하기", variant: "primary", size: "lg", href: "/signup" %>
  <%= ui_button "도입 문의하기", size: "lg", href: "/customers" %>
</section>

<%# 반전 버튼(invert): 글자색 면이라 바탕 위에서 파랑 주버튼과 따로 보여야 할 때 %>
<%# 예: 첫 화면 내비의 시작 버튼 %>
<%= ui_button "무료로 시작하기", variant: "invert", size: "sm", pill: true, href: "/signup" %>

<%# 앞 아이콘(기본) · 뒤 아이콘(icon_after: true). 아이콘은 장식이라 aria-hidden 이 저절로 붙는다 %>
<%= ui_button "노트 쓰기", variant: "primary", icon_name: "plus" %>
<%= ui_button "PDF 내려받기", icon_name: "download" %>
<%= ui_button "다음 단계", variant: "soft", icon_name: "arrow-right", icon_after: true %>
<%= ui_button "전체 보기", variant: "outline", icon_name: "chevron-right", icon_after: true %>

<%# square: true 면 첫 인자가 aria-label 이 된다 %>
<%# 툴팁(data-tip)으로 눈에도 이름을 보여 준다 %>
<%= ui_button "고치기", square: true, icon_name: "edit", size: "sm",
      data: { tip: "고치기" } %>
<%= ui_button "링크 공유", square: true, icon_name: "share",
      data: { tip: "링크 공유" } %>
<%= ui_button "PDF 내려받기", square: true, icon_name: "download", size: "lg",
      data: { tip: "PDF 내려받기" } %>
<%= ui_button "더 보기", square: true, icon_name: "more", variant: "ghost",
      data: { tip: "더 보기" } %>

<%= ui_button "과제 만들기", variant: "primary", pill: true, icon_name: "plus" %>
<%= ui_button "연구원 초대하기", pill: true %>
<%= ui_button "알림 받기", variant: "soft", size: "sm", pill: true, icon_name: "bell" %>

<%# block: true 면 가로 전체. 좁은 화면 폼 끝·시트 아래·로그인 %>
<%= ui_button "노트 저장하기", variant: "primary", size: "lg", block: true %>
<%= ui_button "임시 저장", size: "lg", block: true %>

<%# 처음부터 처리 중으로 그릴 때 %>
<%= ui_button "보내기", variant: "primary", busy: true, "aria-busy": "true" %>

<%# 스크립트로 켜고 끌 때 %>
<%# 글자는 투명해지고 자리는 그대로라 버튼 폭이 줄지 않는다 %>
btn.setAttribute("data-busy", "")
btn.setAttribute("aria-busy", "true")
// 끝나면
btn.removeAttribute("data-busy")
btn.removeAttribute("aria-busy")

<%# Turbo 로 보내는 폼은 할 일이 없다 %>
<%# 보내는 동안 form[aria-busy] 의 제출 버튼이 같은 모양이 된다 %>

<%# 누르면 98%로 줄고 옅은 덮개가 깔린다 %>
<%# --deep 95%(작은 타일) · --flat 덮개만(가로로 긴 행) %>
<button class="card card--line pressable pressable--deep" type="button">
  <span class="feature__icon" aria-hidden="true"><%= icon "edit" %></span>
  <span class="t-body-sm w-600 ink">노트 쓰기</span>
</button>

<%= row_item title: "실험 노트 RN-0142", sub: "김지수 연구원 · 5분 전",
      href: "/app/notes", chev: true, class: "pressable pressable--flat" %>

<%# 버튼(.btn)은 따로 붙이지 않아도 눌리면 97%로 준다 %>

<%# 이 시스템의 대표 버튼(링크). 올리면 화살표가 오른쪽으로 3px 밀린다 %>
<%= ui_pill "요금 보기", "/pricing" %>
<%= ui_pill "무료로 시작하기", "/signup", accent: true %>
<%= ui_pill "노트 둘러보기", "/product/notes", size: "lg" %>
<%= ui_pill "사례 보기", "/customers", size: "sm" %>

<a class="link-arrow t-body-sm" href="/product/sign">
  전자서명 알아보기 <%= icon "arrow-right", size: "sm" %>
</a>
<p>기준은 <%= link_to "자주 묻는 질문", "/faq", class: "link" %>에 모아 두었어요.</p>

<%# 화면에 들어올 때 빛이 한 번 지나간다. 한 화면에 하나, 주 동작에만 %>
<%= ui_button "무료로 시작하기", variant: "primary", size: "lg", class: "shine" %>
<%# 다시: dsShine(el) · 늦게: data-shine-delay="600" · 모션 축소면 빛 없이 그대로 %>

<%# 단축키는 버튼 글자 뒤에. 주버튼·반전 버튼 안에서는 키 테두리가 글자색을 따른다 %>
<button class="btn btn--primary btn--sm" type="button">
  <span class="btn__label">저장하기 <kbd class="kbd">⌘S</kbd></span>
</button>
<button class="btn btn--secondary btn--sm" type="button">
  <span class="btn__label">노트 찾기 <kbd class="kbd">⌘K</kbd></span>
</button>

<%= f.text_field :filter, size: "sm" %>   <%# .input--sm 36px %>
<%= f.text_field :title %>                <%# 기본 44px %>
<%= f.text_field :title, size: "lg" %>    <%# .input--lg 52px, 한 질문 화면 %>

<input class="input input--sm">  <input class="input">  <input class="input input--lg">

<!-- 앞 아이콘 + 지우기(extras.js 가 뒤 칸에 버튼을 넣어요) -->
<div class="input-group">
  <span class="input-group__icon" aria-hidden="true"><%= icon("pin", size: "sm") %></span>
  <input class="input" id="place" data-clearable>
</div>

<!-- 뒤 단위 -->
<div class="input-group">
  <input class="input" id="fee" inputmode="numeric" value="120,000">
  <span class="input-group__end"><span class="input-group__addon">원</span></span>
</div>

<!-- 비밀번호 보기(aria-pressed 와 이름이 함께 바뀌어요) -->
<div class="input-group">
  <input class="input" id="pw" type="password" data-password-toggle autocomplete="new-password">
</div>

<!-- 목록 위 검색 바: 지우기 버튼은 app.js 가 만들어요. data-clearable 을 붙이지 않아요 -->
<div class="searchbar" role="search">
  <%= icon("search", size: "sm") %>
  <input class="searchbar__input" type="search" placeholder="노트 제목·시료 번호로 찾기" aria-label="연구노트 찾기">
</div>

<!-- 폼 안 찾기 칸 -->
<%= f.search_field :researcher, label: "연구원 찾기", help: "이름이나 소속 연구실로 찾아요" %>

<%= f.text_area :process, rows: 3 %>                               <%# 적는 만큼 늘어나요(field-sizing) %>
<%= f.text_area :conditions, rows: 5, class: "mono", spellcheck: false %>  <%# 코드·JSON: 높이 고정 + 손잡이 %>

<%# 글자 수: maxlength 를 한도로 '43 / 80'. 도움말이 있으면 같은 줄에 붙어요 %>
<%= f.text_area :memo, maxlength: 80, data: { maxlength_count: "" }, help: "검토자에게만 보여요" %>

<%# 한도를 넘겨 적을 수 있게 두고 넘치면 오류색 + aria-invalid %>
<%= f.text_field :short_name, data: { maxlength_count: 20 } %>

<%# 지우기·비밀번호 보기도 같은 도우미예요(.input-group 안) %>
<input class="input" type="search" data-clearable>
<input class="input" type="password" data-password-toggle>

<div class="range-field">
  <div class="range-field__head">
    <label class="field__label" for="temp">배양 온도</label>
    <output class="range-field__value" for="temp"></output>
  </div>
  <input class="range" id="temp" type="range" min="4" max="42" step="0.5" value="37" data-range-format="{v}°C">
  <div class="range-field__scale" aria-hidden="true"><span>4°C</span><span>42°C</span></div>
</div>

<input class="range" type="range" min="0" max="3" data-range-labels="느리게,보통,빠르게,최대">
<input class="range" type="range" aria-invalid="true" aria-describedby="rep-error">  <%# 오류 %>
<input class="range" type="range" disabled>                                      <%# 비활성 %>

<%# 나라·연도처럼 긴 목록만. 줄 끝에 lint 예외와 이유를 적어요 %>
<%= f.select :country, countries, {}, {} %> <%# ds-lint-ignore:native-select 나라 목록은 OS 휠이 빨라요 %>

<select class="select" id="country">…</select>

<div class="segment" role="group" aria-label="농도 단위">
  <button class="segment__item" type="button" aria-pressed="true">mM</button>
  <button class="segment__item" type="button" aria-pressed="false">M</button>
  <button class="segment__item" type="button" disabled>ppm</button>
</div>

<div class="segment segment--block" role="group" aria-label="검토 상태">…</div>  <%# 가로 전체 %>
<div class="segment segment--sm" role="group" aria-label="기간">…</div>          <%# 작게 %>
<%# 고르면 ds:segment 이벤트(detail.value) %>

<%= f.check_box :agree, label: "기록 원칙을 확인했어요" %>
<%= f.radio_group :visibility, [["과제 팀", "team"], ["나만 보기", "private"]] %>

<label class="choice">
  <input type="checkbox" checked>
  <span class="choice__text">페이지마다 날짜와 서명 찍기
    <span class="choice__sub">PDF 로 보관할 때 원본임을 보여 줘요</span></span>
</label>
<label class="choice"><input type="checkbox" aria-invalid="true" aria-describedby="pledge-error">…</label>
<p class="field__error" id="pledge-error">내보내기 전에 보안 서약을 확인해 주세요</p>

<%= f.switch :notify, label: "검토 요청이 오면 알림", help: "연구소 규정이라 끌 수 없어요" %>

<label class="switch">
  <input type="checkbox" role="switch" checked>
  <span class="switch__track"></span><span class="switch__knob"></span>
  <span class="t-body-sm ink-body">검토 요청이 오면 알림</span>
</label>

<div class="choices" role="group" aria-label="반복 횟수">
  <button class="choices__item" type="button" aria-pressed="true">3회</button>
  <button class="choices__item" type="button" aria-pressed="false" disabled>10회</button>
</div>

<%# 여러 개: 고른 칩 앞에 체크, 칩 안의 수는 흐리게(extras) %>
<div class="choices" data-multi role="group" aria-label="첨부할 자료">
  <button class="choices__item" type="button" aria-pressed="true">원본 데이터 <span class="choices__count">12</span></button>
</div>
<div class="choices choices--grid" data-multi>…</div>   <%# 두 칸 격자 · --wrap · --stack %>
<%# 고르면 ds:choice 이벤트 %>

<span class="stepper-num" data-min="1" data-max="24" role="group" aria-labelledby="samples-label">
  <input type="hidden" name="note[samples]" value="6">
  <button class="stepper-num__btn" type="button" aria-label="시료 한 개 줄이기"><%= icon("minus", size: "sm") %></button>
  <span class="stepper-num__val">6</span>
  <button class="stepper-num__btn" type="button" aria-label="시료 한 개 늘리기"><%= icon("plus", size: "sm") %></button>
</span>
<%# 바뀌면 stepper:change 이벤트(detail.value), 숨은 입력도 함께 바뀌어요 %>

<div class="otp">
  <input class="otp__input" aria-labelledby="otp-label" aria-describedby="otp-error">
  <span class="otp__cell"></span><span class="otp__cell"></span><span class="otp__cell"></span>
  <span class="otp__cell"></span><span class="otp__cell"></span><span class="otp__cell"></span>
</div>
<p class="field__error" id="otp-error" hidden></p>
<%# app.js 가 inputmode=numeric·autocomplete=one-time-code 를 붙여요. 다 채우면 otp:done(detail.value).
    틀리면 입력에 aria-invalid="true"(칸이 빨개지고 흔들림), 다시 적으면 저절로 풀려요 %>

<div class="amount">
  <label class="amount__label" for="spend">이번에 집행할 연구비</label>
  <span class="amount__field">
    <input class="amount__input" id="spend" aria-describedby="spend-hint">
    <span class="amount__unit">원</span>
  </span>
  <span class="amount__hint" id="spend-hint" aria-live="polite">남은 연구비 3,480,000원</span>
  <span class="amount__quick">
    <button class="btn btn--secondary btn--sm" type="button" data-amount-add="10000">+1만</button>
    <button class="btn btn--ghost btn--sm" type="button" data-amount-add="0">지우기</button>
  </span>
</div>
<%# 쉼표는 app.js 가 찍고 amount:change(detail.value) 를 쏴요. 한도를 넘으면 입력에 aria-invalid="true" %>

<div class="drop" data-drop="#files" tabindex="0" role="button" aria-label="측정 데이터 파일 올리기">
  <span class="drop__icon"><%= icon("folder", size: "lg") %></span>
  <span class="t-body-sm w-600 ink-body">파일을 끌어다 놓으세요</span>
  <span class="t-caption ink-muted">또는 눌러서 고르기 · PDF·사진·CSV</span>
  <input type="file" multiple hidden accept=".pdf,.jpg,.png,.csv">
</div>
<div id="files"></div>
<%# 고른 파일은 app.js 가 .filechip(이름 + 빼기 버튼)으로 #files 에 붙이고 drop:files 를 쏴요 %>

<%# 라벨 → 입력 → 오류 → 도움말. 빌더가 이 순서로 그려요 %>
<div class="field">
  <label class="field__label" for="sample">시료 번호</label>
  <input class="input" id="sample" aria-invalid="true" aria-describedby="sample-error sample-help">
  <p class="field__error" id="sample-error">숫자 4자리를 적어 주세요. 예: S-0024</p>
  <p class="field__help" id="sample-help">시료 병 라벨에 적힌 번호예요</p>
</div>

<%# 두 칸 나란히는 넓은 화면에서만(화면 전용 CSS) %>
.pair{display:grid;gap:var(--s-16)}
@media (min-width:768px){.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

// 칸을 떠날 때: 비어 있지 않은데 형식이 틀리면 알린다
input.addEventListener("focusout", () => {
  if (input.value.trim() && !input.checkValidity()) showError(input, "이메일 주소에 @ 가 빠졌어요")
})
// 오류 칸을 고칠 때: 맞는 순간 지운다(오류가 없던 칸은 적는 중에 검사하지 않는다)
input.addEventListener("input", () => {
  if (input.getAttribute("aria-invalid") === "true" && input.checkValidity()) clearError(input)
})
// 보낼 때: 전부 보고 첫 오류 칸에 초점
const first = [...form.elements].find((el) => el.willValidate && !el.checkValidity())
first?.focus()

# 모델 검증 문구: 칸 아래에 붙으므로 칸 이름을 되풀이하지 않고 원인과 할 일만
validates :title, presence: { message: "노트 제목을 적어 주세요" }
validates :reviewer_email, format: { with: URI::MailTo::EMAIL_REGEXP,
  message: "이메일 주소 모양이 아니에요. @ 뒤까지 적어 주세요" }, allow_blank: true
errors.add(:experiment_on, "앞날은 고를 수 없어요. 실험한 날짜를 골라 주세요")