tools-theme

도구(yt-play-thumb, qr-maker, a4-photo-sheet)의 겉모습을 블로그와 맞추는 원본 테마. 설계: 블로그 저장소 docs/superpowers/specs/2026-09-14-tools-theme-design.md

도구에 넣는 법

도구 저장소에서 npm run theme 을 돌린다. 이 폴더의 tools-theme.css, tools-theme.js, fonts/ 를 도구의 theme/ 로 복사하고 theme/SOURCE 에 커밋과 해시를 적는다. 도구 쪽 theme/ 는 손으로 고치지 않는다(단위 테스트가 깨진다).

이 폴더를 고치면 theme/ 가 있는 모든 도구에서 npm run theme 을 돌리고 전체 테스트를 통과시킨 뒤 커밋, 배포한다.

페이지 골격

<head>
  <link rel="stylesheet" href="./theme/tools-theme.css">   <!-- 도구 <style> 보다 앞 -->
  <style> 도구 스타일. .site-shell { box-sizing: content-box } 를 한 번 더 적는다 </style>
</head>
<body>
  <script src="./theme/tools-theme.js"></script>          <!-- body 첫 자식, 일반 스크립트 -->
  <div class="site-shell">
    <nav class="site-nav" aria-label="사이트 메뉴">
      <a href="/">Home</a> | <a href="/about">About</a> | <a href="/tools/">Tools</a> | <a class="dark-light-switch" href="#">Dark</a>
    </nav>
    <hr class="site-rule">
    <header><h1 class="site-title">도구 이름</h1><p class="site-subtitle">부제</p></header>
    <hr class="site-rule">
  </div>
  <main> … <div class="site-notes">안내 문장</div> </main>
  <footer class="site-footer site-shell">
    <hr class="site-rule">
    <nav class="site-nav" aria-label="사이트 메뉴 (아래)"> 같은 네 링크 </nav>
    <p class="site-copy">임성민 - 개발자 Blog © 2026</p>
  </footer>
</body>

클래스

클래스	쓰는 곳
`.site-shell`	메뉴, 제목, 푸터를 감싸는 700px 폭(content-box)
`.site-nav`	메뉴. 위와 푸터 두 곳, `aria-label` 을 단다
`.site-rule`	가로선(`<hr>`)
`.site-title`, `.site-subtitle`	도구 이름과 부제
`.site-footer`, `.site-copy`	푸터와 저작권 줄
`.site-btn--primary`	주 버튼. 단독으로 쓴다(`.site-btn` 과 함께 붙이지 않는다)
`.site-btn`	보조 버튼
`.site-btn-icon`	테두리 없는 글자 버튼(`×`)
`.step`	버튼 안 단계 숫자. 색만 테마, 모양은 도구
`.site-file` > `.site-file__input` + `label`	파일 선택. 입력이 label 앞, `hidden` 속성 금지
`.site-error`	오류 문장
`.site-artifact`	결과물(미리보기, 종이). 어두운 테마에서도 흰 바탕, 검은 글자
`.site-notes`	도구 영역 맨 아래 안내 문장. 링크 금지

공존 규칙 (중요)

화면 규칙은 모두 :where() 라 명시도가 0 이다. 도구 스타일이 언제나 이긴다. 그래서:

테마 클래스를 붙인 요소에서 도구가 주던 color, background, border, border-radius, font, padding 을 지운다.
도구의 색 변수를 지우고 쓰던 곳을 바꾼다: --fg → var(--site-fg), --muted → var(--site-muted), --line → var(--site-border), --card → 바탕 선언 삭제.
--bg 는 지운다(body 는 테마가 칠한다). 정의되지 않은 var() 를 남기지 않는다.
강조색, 경고, 오류 변수(--accent, --warn-*, --err*)는 설계 5.2 표대로 바꾼다.
prefers-color-scheme, color-scheme: light dark 를 지운다. 어두운 테마는 쿠키로만 켠다.
도구가 * { box-sizing: border-box } 를 쓰면 .site-shell { box-sizing: content-box } 를 도구 스타일에 한 번 더 적는다(명시도가 같아 뒤에 오는 도구 규칙이 이긴다).

명시도 예외는 둘이다: [hidden] { display: none !important }(무엇이 display 를 주든 숨김 유지), 파일 끝의 @media print(어두운 테마로 인쇄해도 밝은 인쇄와 같게, 껍데기는 인쇄하지 않음).

이 CSS 는 원본 자리에서도 ./fonts/ 로 글꼴을 부른다.