/* 데모 전용 덮어쓰기. styles.css 는 앱에서 복사한 그대로 두고 차이만 여기 모은다.
   앱을 고친 뒤 styles.css 를 다시 복사해도 이 파일은 그대로 살아남는다. */

/* iframe 을 실제 창 크기(320x500, cutodo/main.js 의 BrowserWindow)로 잡아 두므로
   .app 의 100vw/100vh 가 그대로 맞는다. 그래도 못박아 둔다 — 감싸는 쪽이 바뀌어도
   앱이 늘어나서 레이아웃이 무너지는 일은 없어야 한다 */
html { background: transparent; }
/* 실제 창은 500px 이지만 데모에는 할 일이 3개뿐이라 목록 아래가 조금 빈다.
   .todos 가 flex:1 이라 높이를 줄이면 그 빈 곳만 사라진다 — 다른 요소는 그대로다.
   424 까지 줄였더니 320:424 = 1:1.33 이라 실제 앱(1:1.56)보다 뭉툭해 보였다.
   470 이면 빈 곳은 걷어내면서 세로 위젯 비율(1:1.47)은 남는다 */
.app { width: 320px; height: 470px; }

/* 320px 위젯을 그대로 두면 랜딩 히어로에서 화면 폭의 25%밖에 안 돼서 주인공으로 안 보인다.
   transform: scale 로 키우면 래스터를 늘리는 거라 글자가 뭉개진다. CSS zoom 은 레이아웃
   배율이라 글자가 그 크기로 새로 그려진다 — capture/CLAUDE.md 에 같은 이유로 기록돼 있다.
   감싸는 iframe 크기(index.html 의 .demo-frame)를 320*1.35, 500*1.35 로 맞춰 둬야 한다 */
html { zoom: 1; }

/* 브라우저에서 눌러도 아무 일이 일어나지 않는 창 버튼은 감춘다.
   눌리는데 반응이 없는 버튼은 앱이 고장 난 것처럼 보인다.
   테마·소리 두 개는 브라우저에서 그대로 동작하므로 남긴다 */
#compactBtn, #pinBtn, #hideBtn, #closeBtn { display: none; }

/* 위젯이라 원래 드래그로 창을 옮기는 영역이다. 웹에서는 글자만 안 잡히게 두면 된다 */
.titlebar, .head { -webkit-app-region: no-drag; }

/* 메모칸이 비어 있는데도 scrollHeight(32) > clientHeight(30) 이라 스크롤바가 뜬다.
   확대해 놓으니 위아래 화살표가 도드라져서 화면이 덜 만들어진 것처럼 보인다.
   스크롤 자체는 살려두고 막대만 감춘다. 크기조절 손잡이도 같이 없앤다 */
.memo { resize: none; scrollbar-width: none; }
.memo::-webkit-scrollbar { display: none; }