/* 꿈을 찾아서 웹 체험. 톱니 색은 앱의 keyGold(노랑) · magicSparkle(주황)이다. */
.demo-card { --gold: #FFCC00; --spark: #FF9500; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: stretch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bc-stage { background: var(--bg); border-radius: var(--r-inner); padding: var(--s6) var(--s5); text-align: center;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); }
.bc-cat { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--accent); }
.bc-dream { margin: 0 0 var(--s4); font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }

/* 열쇠: 손잡이 고리 + 몸통 + 아래로 난 톱니 */
.bc-key { display: flex; align-items: flex-start; height: 64px; }
.bc-bow { width: 46px; height: 46px; border-radius: 50%; border: 10px solid var(--gold); flex: none; }
.bc-shaft { width: 18px; height: 12px; margin-top: 17px; background: var(--gold); flex: none; }
.bc-teeth { display: flex; gap: 3px; margin-top: 17px; padding-top: 12px; position: relative; }
.bc-teeth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--gold); border-radius: 0 6px 6px 0; }
.bc-teeth i { width: 22px; height: 26px; border-radius: 0 0 4px 4px; background: color-mix(in srgb, var(--text) 12%, transparent);
              transition: background .3s var(--ease), transform .3s var(--ease); }
.bc-teeth i.on { background: var(--gold); }
.bc-teeth i.now { box-shadow: inset 0 0 0 2px var(--spark); }
.bc-count { margin: var(--s3) 0 0; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bc-full .bc-count { color: var(--text); }
.bc-box { font-size: 56px; line-height: 1; opacity: .35; filter: grayscale(1); transition: transform .5s var(--ease), opacity .3s, filter .3s; }
.bc-full .bc-box { opacity: 1; filter: none; }
.bc-opened .bc-box { transform: scale(1.25) rotate(-6deg); }
.bc-opened .bc-bow, .bc-opened .bc-shaft, .bc-opened .bc-teeth::before { box-shadow: 0 0 18px var(--gold); }

.bc-side { display: flex; flex-direction: column; gap: var(--s4); }
.bc-card { background: var(--bg); border-radius: var(--r-inner); padding: var(--s5); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
.bc-now { margin: 0 0 var(--s2); font-weight: 700; }
.bc-step { display: inline-block; margin: 0 0 var(--s2); padding: 2px var(--s2); border-radius: 6px; font-size: .75rem; font-weight: 800;
           background: color-mix(in srgb, var(--gold) 30%, transparent); }
.bc-title { margin: 0 0 var(--s3); font-size: 1.25rem; font-weight: 800; }
.bc-q { display: flex; gap: var(--s2); margin-bottom: var(--s3); color: var(--muted); }
.bc-qn { flex: none; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bc-label textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
                     border-radius: 12px; padding: var(--s2) var(--s3); resize: vertical; min-height: 64px; }
.bc-go { font: inherit; font-weight: 700; min-height: 52px; padding: 0 var(--s5); border: 0; border-radius: 999px; cursor: pointer;
         background: var(--accent); color: var(--on-accent); transition: transform .15s var(--ease); }
.bc-go:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) { .bc-teeth i, .bc-box, .bc-go { transition: none; } .bc-opened .bc-box { transform: none; } }
@media (max-width: 760px) { .demo-card { grid-template-columns: 1fr; } }