/* Smithly 체험 무대. 색은 style.css 토큰과 아래 무대 토큰만 쓴다. 원형 메뉴는 앱처럼 항상 어둡다. */
:root {
  --desk-a: #3f6fd8; --desk-b: #7a63d6; --desk-c: #2aa59a; --desk-d: #e27aa6;
  --desk-base: #31407a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --desk-a: #2b56d6; --desk-b: #6b3fd1; --desk-c: #15a39a; --desk-d: #e0699b; --desk-base: #0d1433; }
}
:root[data-theme="dark"] { --desk-a: #2b56d6; --desk-b: #6b3fd1; --desk-c: #15a39a; --desk-d: #e0699b; --desk-base: #0d1433; }

/* 첫 화면 앱 아이콘 + 이름: 좁은 화면에서도 가로 한 줄 */
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-brand .app-icon { flex: none; }
.hero-brand p { margin: 0; line-height: 1.35; }
@media (max-width: 480px) { .hero-brand { gap: 12px; margin-bottom: 18px; } .hero-brand .app-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; } }

/* 홍보 영상 */
.promo { position: relative; margin: 40px 0 0; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #07080c; }
.promo-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.promo-controls button {
  min-height: 36px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(12,14,20,.62); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.promo-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) { .promo { border-radius: 16px; } .promo-controls { right: 8px; bottom: 8px; gap: 6px; } .promo-controls button { min-height: 32px; padding: 5px 10px; font-size: 12px; } }

/* 체험 */
.try-title { margin-top: 56px; font-size: 24px; color: var(--text); }
.try { margin-top: 16px; }
.try-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.try-keys, .try-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.key-toggle, .try-own, .try-reset {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.key-toggle kbd { pointer-events: none; }
.key-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.key-toggle[aria-pressed="true"] kbd { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: inherit; border-color: transparent; }
.try-own input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.try-own:focus-within, .key-toggle:focus-visible, .try-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.try-reset { color: var(--muted); }

.try-stage {
  position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line);
  aspect-ratio: 16 / 9; min-height: 400px; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(60% 70% at 18% 25%, color-mix(in srgb, var(--desk-a) 80%, transparent), transparent 70%),
    radial-gradient(55% 60% at 85% 70%, color-mix(in srgb, var(--desk-c) 70%, transparent), transparent 70%),
    radial-gradient(45% 50% at 60% 10%, color-mix(in srgb, var(--desk-b) 70%, transparent), transparent 70%),
    radial-gradient(40% 45% at 35% 95%, color-mix(in srgb, var(--desk-d) 45%, transparent), transparent 70%),
    var(--desk-base);
}
@media (max-width: 560px) { .try-stage { aspect-ratio: auto; height: 440px; min-height: 0; border-radius: 16px; } }

.try-desk { position: absolute; inset: 0; }
.try-file {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  background: none; border: 0; border-radius: 10px; color: #fff; font: inherit; cursor: grab;
  touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.try-file canvas { width: 64px; height: 64px; pointer-events: none; }
@media (max-width: 560px) { .try-file canvas { width: 54px; height: 54px; } }
.try-file .name, .try-file .size { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.65); pointer-events: none; }
.try-file .name { font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 1px 6px; border-radius: 5px; }
.try-file .size { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.72); line-height: 1.2; }
.try-file .size.down { color: #7ff0a0; }
.try-file:focus-visible { outline: none; background: rgba(255,255,255,.16); }
.try-file:focus-visible .name { background: #2d73f5; text-shadow: none; }
.try-file.dragging { opacity: .5; }
/* 고른 파일(파인더처럼 파란 이름 띠) */
.try-file.sel { background: rgba(255,255,255,.16); }
.try-file.sel .name { background: #2d73f5; text-shadow: none; }
.try-ghost .count { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.try-file.pop { animation: try-pop .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes try-pop { 0% { transform: scale(.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }

.try-ghost { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; opacity: .9; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.try-ghost canvas { display: block; }
/* 메뉴가 열리면 끄는 아이콘을 줄이고 흐리게 해서 꽃잎 글자를 덜 가린다 */
.menu-open .try-ghost { opacity: .55; }
.menu-open .try-ghost canvas { transform: scale(.7); transform-origin: 0 0; }

.try-wheel { position: absolute; z-index: 4; pointer-events: none; transform-origin: 50% 50%; }
.try-wheel .glass {
  position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(22, 22, 26, .62);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 .6px rgba(255,255,255,.22);
}
.try-wheel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.try-wheel .petals button {
  position: absolute; width: 64px; height: 52px; margin: -26px 0 0 -32px; padding: 0;
  background: none; border: 0; border-radius: 12px; pointer-events: none; color: transparent;
}
.try-wheel .petals button:focus { outline: none; }

.try-pro {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 32px)); padding: 20px; border-radius: 16px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.try-pro[hidden] { display: none; }
.try-pro .t { color: var(--text); font-weight: 700; font-size: 17px; }
.try-pro .b { margin-top: 6px; font-size: 14px; }
.try-pro .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.try-pro .btn { padding: 11px 14px; font-size: 14px; }

.try-toast {
  position: absolute; z-index: 7; left: 50%; bottom: 14px; transform: translate(-50%, 8px);
  width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 9px 14px; border-radius: 12px;
  background: rgba(16,18,24,.82); color: #fff; font-size: 13.5px; line-height: 1.45; text-align: center;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.try-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 안내 문장은 도구줄 가운데 빈 곳에. 좁으면 다음 줄로 내려가 한 줄을 다 쓴다 */
.try-hint { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--faint); }
.try-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.try-file .size.app { color: #ffe07a; font-size: 10.5px; }
.try-fallback { display: block; margin: 24px auto 0; width: min(64%, 300px); height: auto; }

@media (prefers-reduced-motion: reduce) {
  .try-file.pop { animation: none; }
  .try-toast { transition: none; }
}