NightPanel

원본: projects/skill-lens/design/components/NightPanel/README.md

상태: In Progress, 접근성 ✓, 다크 보류, 코드 ✗

밤색 패널: 검정, 흰, 회색 셋만. 색은 로고에만. 한 화면에 하나, '여기 먼저 보라'는 자리. 왼쪽은 변환 장면의 뒤 카드(126 → 43), 오른쪽은 방식 선택 패널

견본만 새 창으로

밝은 화면 안의 검정 면 하나입니다. "여기를 먼저 보라"는 자리에만 씁니다.

쓰는 곳

입구의 이야기 패널, 변환 장면의 뒤 카드, 목적 방식 선택 패널.

구성(화면이 넘겨줄 것)

패널 안 글과 큰 숫자.

규칙

접근성

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Layout" height=520 width=1100 subtitle="밤색 패널: 검정, 흰, 회색 셋만. 색은 로고에만. 한 화면에 하나, '여기 먼저 보라'는 자리. 왼쪽은 변환 장면의 뒤 카드(126 → 43), 오른쪽은 방식 선택 패널" -->
<style>body{margin:0;padding:var(--space-5);background:var(--canvas)}.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.p{padding:var(--space-6);min-height:440px;display:flex;flex-direction:column}.big{font:900 96px/88px var(--font-sans);letter-spacing:-6px;margin:auto 0 var(--space-2)}.p .sl-chip{margin-right:6px}.modes{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}.mode{border:0;text-align:left;padding:var(--space-4);border-radius:var(--radius-lg);background:rgba(255,255,255,.06);color:var(--on-night-muted);font:500 15px/22px var(--font-sans)}.mode b{display:block;color:var(--on-night);font:700 17px/24px var(--font-sans)}.mode[aria-pressed="true"]{background:var(--on-night);color:var(--ink-muted)}.mode[aria-pressed="true"] b{color:var(--ink)}</style>
<div class="sl row">
<div class="sl-panel--night p"><div class="sl-night__eyebrow">2차, AI 업무 전환</div><h3 style="font:800 24px/30px var(--font-sans);letter-spacing:-0.8px;margin:var(--space-2) 0 0">이번에 진단할 스킬</h3><div class="big">43</div><p style="margin:0 0 var(--space-4)">전체 126개 중. 더하거나 뺀 뒤 확정해요.</p><div><span class="sl-chip" style="background:var(--on-night);color:var(--ink)">AI 활용</span><span class="sl-chip" style="background:rgba(255,255,255,.1);color:var(--on-night)">검증</span><span class="sl-chip" style="background:rgba(255,255,255,.1);color:var(--on-night)">보안</span></div></div>
<div class="sl-panel--night p"><h3 style="font:800 28px/34px var(--font-sans);letter-spacing:-1px;margin:0">이번 진단을<br>왜 시작하나요?</h3><div class="modes"><button class="mode" aria-pressed="true"><b>준비된 목적</b>목적을 고르면 진단 스킬 초안까지 같이 준비해요</button><button class="mode" aria-pressed="false"><b>직접 작성</b>목적은 글로 남기고, 스킬은 직접 골라요</button></div><p class="sl-night__muted" style="margin:auto 0 0;font:400 13px/20px var(--font-sans)">어느 쪽이든 목적은 하나만 저장되고 결과 머리에 계속 보여요.</p></div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.