/* 실앱 창(2026-10-16, app-window.js). 맥북 베젤(mac-shot.css) 위에 제목 줄을 조금 높여(32px) 가운데에 '실제 Thinket 앱 따라하기',
   오른쪽에 '돌아가기'를 둔다. 미리 띄운 앱이 자리를 잡도록 창은 늘 그 자리에 있고, 열기 전에는 보이지 않게만 한다(visibility). */
.aw.mac-shot { --bar: 32px; position: absolute; z-index: 4; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }
.aw.on { visibility: visible; pointer-events: auto; }
.aw-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f5f2ec;
  border-radius: 3px 3px calc(var(--mr) - var(--mb)) calc(var(--mr) - var(--mb)); }
html[data-theme="dark"] .aw-screen { background: #0d100e; }
.aw-app { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .3s ease; }
.aw.ready .aw-app { opacity: 1; }

/* 제목 줄 가운데: 따라하기(창의 제목 자리라 눈에 먼저 들되, 바탕과 같은 결의 작은 단추) */
.aw-bar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.aw-tut { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 12px 0 3px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .09); color: #e8ecea; font: 600 12.5px/1 "Jost", "Noto Sans KR", system-ui, sans-serif; letter-spacing: -.005em;
  cursor: pointer; pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1), background-color .15s ease; }
.aw-tut svg { width: 18px; height: 18px; padding: 4px 3px 4px 5px; border-radius: 50%; background: #1e6e43; color: #fff; }
.aw.tut-show .aw-tut { opacity: 1; transform: none; pointer-events: auto; }
.aw.tut-show.tut-run .aw-tut { opacity: 0; transform: translateY(3px); pointer-events: none; }
.aw-tut:hover { background: rgba(255, 255, 255, .16); }
.aw-tut:active { transform: scale(.97); }
.aw-tut:focus-visible { outline: 2px solid #9bcca9; outline-offset: 2px; }
.aw-tut.glow { animation: aw-glow 1.8s ease-out 2; }
@keyframes aw-glow { 0% { box-shadow: 0 0 0 0 rgba(155, 204, 169, .6); } 100% { box-shadow: 0 0 0 11px rgba(155, 204, 169, 0); } }

.aw-back { position: absolute; right: calc(var(--mb) + 2px); top: 0; height: var(--bar); padding: 0 9px; border: 0; background: none;
  color: #c9cdc6; font: 600 12px/1 "Jost", "Noto Sans KR", system-ui, sans-serif; cursor: pointer; }
.aw-back:hover { color: #fff; }
.aw-back:focus-visible { outline: 2px solid #9bcca9; outline-offset: -4px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { .aw-app, .aw-tut { transition: none; } .aw-tut.glow { animation: none; } }

/* 유리 창(10-17 21:35 Y "창 사이 빈 틈에 히어로의 배경이 비쳐보이게"): 맥 창틀(검은 베젤과 창 단추)을 걷고 앱의 유리 판들만 숲 위에 띄운다.
   제목 줄 자리(따라하기, 돌아가기)는 그대로 두되 숲 위에 뜨는 작은 유리 알약으로. 앱 바탕은 창 속에서 비운다(shared/aw-app.css) */
.aw.aw-glass { background: transparent; box-shadow: none; }
.aw.aw-glass .plights { display: none; }
/* 틈 = 서리 유리(10-18 Y "주변 배경이 보여야한다니까", "실제 앱에서 유리모드 하면 틈이 유리재질로 보이잖아. 데모에서도 마찬가지여야해").
   iframe 속 앱은 뒤의 랜딩을 흐릴 수 없으므로 흐림은 창 쪽 판이 맡는다. 빛 테두리는 앱 유리 판(--gl-edge)과 같은 문법.
   창과 앱 문서의 color-scheme 을 둘 다 light 로(aw-app.css): 다르면 브라우저가 창 뒤에 불투명한 바탕을 깐다.
   10-18 12:56 Y "조금 더 뿌옇게": 흐림 10px → 20px, 낮 막 .14 → .26, 밤 막 .06 → .11 (지난 판 캡처 shots/assembly/*_fixed.png) */
.aw-app { color-scheme: light; }
.aw.aw-glass .aw-screen { --aw-tint: rgba(253, 252, 249, .26); --aw-blur: 20px;
  background: var(--aw-tint) !important; border-radius: 16px;
  -webkit-backdrop-filter: blur(var(--aw-blur)) saturate(1.15); backdrop-filter: blur(var(--aw-blur)) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .6), 0 24px 60px -24px rgba(13, 16, 14, .45); }
html[data-theme="dark"] .aw.aw-glass .aw-screen { --aw-tint: rgba(232, 236, 234, .11);   /* 밤 = 달빛이 살짝 어린 유리(숯으로 덮으면 숲과 구분이 안 됐다) */
  box-shadow: inset 0 0 0 1px rgba(232, 236, 234, .13), inset 0 1px 0 rgba(232, 236, 234, .2), 0 24px 60px -24px rgba(0, 0, 0, .7); }
.aw.aw-glass .aw-tut { background: rgba(13, 16, 14, .38); }
.aw.aw-glass .aw-tut:hover { background: rgba(13, 16, 14, .52); }
.aw.aw-glass .aw-back { top: 4px; height: 24px; border-radius: 12px; background: rgba(13, 16, 14, .38); color: #eef1ef; }
.aw.aw-glass .aw-back:hover { background: rgba(13, 16, 14, .52); color: #fff; }