/* demo.css — 공개 데모 안내 배너와 데모에서 막는 요소 (운영 style.css 뒤에 읽힌다) */
.demo-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;padding:8px 12px;border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:10px;background:var(--accent-soft);color:var(--ink2);font-size:12px;line-height:1.5}
.demo-bar-tag{font-weight:800;color:var(--accent);letter-spacing:.02em;white-space:nowrap}
.demo-bar-text{flex:1;min-width:200px}
.demo-bar-reset{border:1px solid var(--accent);background:var(--card);color:var(--accent);border-radius:8px;padding:5px 10px;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.demo-bar-reset:hover{background:var(--accent);color:#fff}
.demo-bar-notice{flex-basis:100%;font-weight:700;color:var(--accent)}
body.dark .demo-bar{background:rgba(185,79,50,.14);color:var(--ink)}
/* 개인용 모드 고정 — 회사용/개인용 선택 상자는 숨긴다 (mode-switch.js 는 그대로 돈다) */
html.demo .mode-slot{display:none}
/* 바탕화면 고정 배너(.pyw 내려받기)는 데모에서 제공하지 않는다 */
html.demo .desktop-banner-download{display:none}
/* 외부 계정 연결 버튼은 보이되 눌러도 안내만 */
html.demo a.demo-off{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.demo-bar{font-size:11.5px;padding:8px 10px}}

/* ── 로딩 덮개 (demo-loader.js) — 픽셀 토끼 캐릭터가 손을 흔들며 기다려 준다 ───────────── */
.demo-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg,#f2f5f4);color:var(--ink2,#4c5f5e);transition:opacity .4s ease;font-family:"Noto Sans KR","Roboto",system-ui,sans-serif}
.demo-loader.out{opacity:0;pointer-events:none}
.demo-loader-text{margin:0;font-size:14px;font-weight:700;letter-spacing:.01em}
.demo-dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.demo-dots i{width:5px;height:5px;border-radius:1px;background:var(--accent,#b94f32);animation:demo-dot 1.2s infinite ease-in-out}
.demo-dots i:nth-child(2){animation-delay:.2s}.demo-dots i:nth-child(3){animation-delay:.4s}
@keyframes demo-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* 캐릭터 */
.demo-char{position:relative;width:100px;height:150px;display:flex;align-items:flex-end;justify-content:center}
.demo-char-body{position:relative;width:100px;height:130px;animation:demo-bob 1.1s infinite ease-in-out}
.demo-char-body svg{position:absolute;inset:0;width:100px;height:130px;image-rendering:pixelated}
.demo-char-body .fa{animation:demo-fa 1.1s infinite steps(1)}
.demo-char-body .fb{animation:demo-fb 1.1s infinite steps(1)}
@keyframes demo-fa{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes demo-fb{0%,50%{opacity:0}50.01%,100%{opacity:1}}
@keyframes demo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.demo-char-shadow{position:absolute;left:28px;right:28px;bottom:2px;height:8px;border-radius:50%;background:rgba(0,0,0,.12);animation:demo-shadow 1.1s infinite ease-in-out}
@keyframes demo-shadow{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.8);opacity:.35}}
.demo-heart{position:absolute;bottom:90px;opacity:0;image-rendering:pixelated;animation:demo-heart 2.6s infinite ease-out}
.demo-heart.h1{left:-14px}.demo-heart.h2{right:-18px;bottom:70px}.demo-heart.h3{left:34px;bottom:118px}
@keyframes demo-heart{0%{opacity:0;transform:translateY(8px) scale(.6)}15%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translateY(-46px) scale(1)}}
body.dark .demo-loader{background:var(--bg,#121716)}
body.dark .demo-char-shadow{background:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){.demo-char-body,.demo-char-body svg,.demo-char-shadow,.demo-heart,.demo-dots i{animation:none}.demo-char-body .fb{opacity:0}.demo-heart{opacity:.9}}
/* 루트(/) 안내 페이지 — 캐릭터 뒤의 글자는 스크린리더·JS 없는 환경용 */
.demo-root{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;font-family:"Noto Sans KR","Roboto",system-ui,sans-serif;color:var(--ink2,#4c5f5e)}
.demo-root a{color:var(--accent,#b94f32);font-weight:700}