/*
  tools-theme: 도구(yt-play-thumb, qr-maker, a4-photo-sheet)의 겉모습을 블로그와 맞춘다.
  원본은 블로그 저장소 assets/tools-theme/ 이다. 도구 쪽 theme/ 는 npm run theme 으로만 바꾼다.
  설계: 블로그 저장소 docs/superpowers/specs/2026-09-14-tools-theme-design.md

  화면 규칙은 모두 :where() 로 감싸 명시도 0 이다. 도구 자신의 스타일이 언제나 이긴다.
  그래서 도구 쪽은 테마가 맡는 속성을 반드시 지워야 한다(설계 3.1 공존 규칙).
  예외는 [hidden] 과 파일 맨 끝의 @media print 둘뿐이다.
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('./fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
    url('./fonts/open-sans-v17-latin-regular.woff') format('woff');
}

/* 색 변수: 값은 블로그 _sass 에서 가져왔다(설계 3.2). */
:where(:root) {
  --site-fg: #333;
  --site-heading: #000;
  --site-bg: #fff;
  --site-line: #000;
  --site-border: #828282;
  --site-muted: #555;
  --site-error: #a33;
  --site-work: #eee;
}
:where(body.dark) {
  --site-fg: rgb(191, 191, 191);
  --site-heading: rgb(191, 191, 191);
  --site-bg: rgb(26, 26, 26);
  --site-line: #fff;
  --site-muted: rgb(154, 154, 154);
  --site-error: #e08a8a;
  --site-work: #111;
}

/* body 에는 글꼴, 글자색, 바탕색, color-scheme 만 준다. 여백과 폭은 도구 몫이다. */
:where(body) {
  font-family: 'Open Sans', sans-serif;
  color: var(--site-fg);
  background: var(--site-bg);
  color-scheme: light;
}
:where(body.dark) { color-scheme: dark; }

:where(a) { color: var(--site-fg); }
:where(a:hover) { background: var(--site-fg); color: var(--site-bg); }

/* ---- 껍데기 ---- */

/* 블로그 body 와 같은 치수: content-box 로 내용 700px. 도구의 * { box-sizing } 이 이기므로
   도구 스타일에 .site-shell { box-sizing: content-box } 를 한 번 더 적는다(설계 3.3). */
:where(.site-shell) { box-sizing: content-box; max-width: 700px; margin: 0 auto; padding: 0 12px; }
@media screen and (max-width: 700px) {
  :where(.site-shell) { margin: 0; }
}
:where(.site-nav) { margin: 3px; color: var(--site-heading); }
:where(.site-rule) { border: 0; height: 1px; background: var(--site-line); margin: 5px 0; }
:where(.site-title) {
  font-size: 1.75rem; margin: .75rem 0; letter-spacing: .5px;
  font-weight: bold; color: var(--site-heading);
}
:where(.site-subtitle) { margin: 0 0 .75rem; color: var(--site-muted); }
:where(.site-footer) { padding-bottom: 1rem; }
:where(.site-copy) { margin: 0; }
:where(.site-notes) { color: var(--site-muted); font-size: .875rem; }

/* ---- 버튼 ---- */

/* .site-btn--primary 는 단독으로 쓴다. .site-btn 과 함께 붙이지 않는다(설계 3.3).
   display 는 주지 않는다: 주면 hidden 속성과 싸운다(아래 [hidden] 참고). */
:where(.site-btn, .site-btn--primary) {
  border-radius: 5px; padding: 5px 10px; font: inherit; cursor: pointer;
}
:where(.site-btn--primary) {
  background: #272822; color: #fff; border: 1px solid #272822; font-weight: bold;
}
/* 어두운 테마 테두리는 화면에서만. 인쇄와 결과물 영역에서는 밝은 테마와 같은 #272822. */
@media screen {
  :where(body.dark .site-btn--primary) { border-color: var(--site-fg); }
  :where(body.dark .site-artifact .site-btn--primary) { border-color: #272822; }
}
:where(.site-btn--primary:hover:not(:disabled)) { opacity: .7; }
:where(.site-btn) {
  background: transparent; color: var(--site-fg); border: 1px solid var(--site-fg);
}
:where(.site-btn:hover:not(:disabled)) { background: var(--site-fg); color: var(--site-bg); }
:where(.site-btn:disabled, .site-btn--primary:disabled) { opacity: .4; cursor: not-allowed; }

:where(.site-btn-icon) {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--site-muted); cursor: pointer;
}
:where(.site-btn-icon:hover) { color: var(--site-fg); }

/* 버튼 안 단계 숫자. 원 모양과 크기는 도구 쪽 규칙이 맡는다. */
:where(.site-btn--primary .step) { background: #fff; color: #272822; }
:where(.site-btn .step) { background: var(--site-fg); color: var(--site-bg); }
:where(.site-btn:hover:not(:disabled) .step) { background: var(--site-bg); color: var(--site-fg); }

/* ---- 입력칸 ---- */

:where(input:is([type=text], [type=url], [type=search], [type=number], :not([type])), select, textarea) {
  border: 1px solid var(--site-border); border-radius: 5px;
  background: var(--site-bg); color: var(--site-fg); font: inherit;
}

/* 파일 선택: 입력은 화면에서만 숨기고(포커스는 받는다) 바로 뒤 label 을 버튼처럼 보인다. */
:where(.site-file) { position: relative; display: inline-block; }
:where(.site-file__input) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
:where(.site-file__input + label) { display: inline-block; }
:where(.site-file__input:disabled + label) { opacity: .4; pointer-events: none; }

/* ---- 포커스, 오류 ---- */

:where(:focus-visible) { outline: 2px solid var(--site-fg); outline-offset: 2px; }
:where(.site-file__input:focus-visible + label) { outline: 2px solid var(--site-fg); outline-offset: 2px; }
:where(.site-error) { color: var(--site-error); }

/* ---- 결과물 영역 ----
   저장, 인쇄되는 결과물(QR 미리보기, 썸네일, A4 종이)은 어두운 테마에서도 그대로 보여야 한다.
   글자색만 바꾸면 안의 입력칸이 color: var(--site-fg) 를 받아 연회색이 되므로 변수를 되돌린다. */
:where(.site-artifact) {
  --site-fg: #000; --site-heading: #000; --site-bg: #fff; --site-line: #000;
  --site-border: #828282; --site-muted: #555; --site-error: #a33; --site-work: #eee;
  background: #fff; color: #000; color-scheme: light;
}

/* ---- 명시도 예외 1: hidden 속성은 무엇이 display 를 주든 숨긴다. ---- */
[hidden] { display: none !important; }

/* ---- 명시도 예외 2: 인쇄. 반드시 파일 맨 끝. ----
   어두운 테마를 켠 채 인쇄해도 밝은 테마 인쇄와 같아야 한다. body.dark 를 이겨야 하므로
   :where 로 감싸지 않는다. */
@media print {
  body.dark {
    --site-fg: #333; --site-heading: #000; --site-bg: #fff; --site-line: #000;
    --site-border: #828282; --site-muted: #555; --site-error: #a33; --site-work: #eee;
    background: #fff; color-scheme: light;
  }
  .site-shell, .site-footer { display: none; }
}