/* 웹 디자인 도감의 움직임 견본 — 견본 자체의 색을 보여 주는 도식이라 색을 직접 쓴다(허브 디자인 계약의 '계기·도식' 예외).
 * .wd-motion 은 다크 섬(tokens.css)이라 라이트 테마에서도 이 모습 그대로다.
 * 반응형 규칙(web-design.css 끝)이 뒤에서 덮을 수 있게 web-design.css 보다 먼저 불러온다. */
.wd-motion{margin-top:25px;border:1px solid #55442e;background:#1c1b15;border-radius:8px;padding:28px}
.wd-step-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.wd-step-buttons button[aria-pressed="true"]{background:#d9ddc0;color:#273521;border-color:#d9ddc0}
.wd-kinetic{display:flex;justify-content:center;align-items:center;gap:20px;min-height:260px;padding:40px 20px;background:#25493f;color:#a9c0b2;border-radius:8px}
.wd-kinetic span{font-size:clamp(24px,4vw,60px);transition:transform .4s,color .4s;font-weight:650}
.wd-motion[data-current="0"] .wd-kinetic span:nth-child(1),.wd-motion[data-current="1"] .wd-kinetic span:nth-child(2),.wd-motion[data-current="2"] .wd-kinetic span:nth-child(3){transform:translateY(-16px);color:#f7d570}
.wd-play{margin-top:20px}
.wd-scroll-demo{display:grid;grid-template-columns:230px 1fr;gap:22px}
.wd-scroll-visual{padding:20px;background:#233f31;color:#b4cba5;border-radius:6px}
.wd-story-node{display:flex;align-items:center;gap:12px;margin:15px 0;padding:16px;border:1px solid #677d5c;border-radius:6px}
.wd-story-node b{font-family:Georgia,serif;font-weight:400}
.wd-story-scene{display:none;width:100%;padding:25px 0;text-align:center}
.wd-story-scene svg{display:block;width:100%;max-height:180px;margin-bottom:18px}
.wd-motion[data-current="0"] [data-scene="0"],.wd-motion[data-current="1"] [data-scene="1"],.wd-motion[data-current="2"] [data-scene="2"]{display:block}
.wd-motion[data-current="0"] [data-node="0"],.wd-motion[data-current="1"] [data-node="1"],.wd-motion[data-current="2"] [data-node="2"]{background:#d5dfbb;color:#283c26}
.wd-demo-progress{height:5px;background:#102b1e;border-radius:3px;overflow:hidden}
.wd-demo-progress i{display:block;height:100%;width:0;background:#e7cc7b}
.wd-reading-demo{height:340px;overflow:auto;overscroll-behavior:contain;background:#eeeee0;color:#29402b;border-radius:6px;position:relative}
.wd-reading-demo section{min-height:340px;padding:35px}
.wd-reading-demo section h4{font-size:28px;margin:13px 0}
.wd-reading-demo p{font-size:18px}
.wd-reading-demo .wd-eyebrow,.wd-reading-demo .wd-muted{color:#5f7054;font-size:14px}
.wd-reading-demo .wd-muted{margin-top:40px}
.wd-parallax{height:340px;background:#d8e4da;position:relative;overflow:hidden;border-radius:8px;--shift:0px}
.wd-sun{position:absolute;right:20%;top:40px;width:88px;height:88px;border-radius:50%;background:#e4be7b;transform:translateY(calc(var(--shift) * -.1))}
.wd-far,.wd-near{position:absolute;width:150%;height:310px;left:-20%;bottom:-175px;border-radius:48% 53% 0 0;transform:translateY(calc(var(--shift) * -.4));background:#88a395}
.wd-near{left:0;bottom:-225px;transform:translateY(calc(var(--shift) * -1));background:#345f50}
.wd-parallax>span{position:absolute;bottom:15px;left:20px;right:20px;color:#fff9df;font-size:14px}
.wd-range{display:flex;align-items:center;gap:20px;margin-top:20px}
.wd-range input{flex:1;min-width:80px;accent-color:#aac083}
.wd-range output{min-width:40px}
.wd-micro{max-width:750px;margin:auto;padding:25px;background:#233a2c;border-radius:8px;color:#eef0d7}
.wd-micro textarea{margin:13px 0 20px}
.wd-micro [role="status"]{margin-top:15px}
.wd-space{height:330px;display:grid;place-items:center;perspective:900px;overflow:hidden;background:radial-gradient(#d2dfcc 1px,transparent 1px),#e9ede0;background-size:18px 18px;border-radius:6px}
.wd-cube{position:relative;width:144px;height:144px;transform-style:preserve-3d;transition:transform .55s;transform:rotateX(0) rotateY(0)}
.wd-cube span{position:absolute;inset:0;display:grid;place-items:center;border:2px solid #47664d;color:#163c27;background:#a0bfa1;font-size:20px;backface-visibility:hidden}
.wd-cube .front{transform:translateZ(72px)}
.wd-cube .back{transform:rotateY(180deg) translateZ(72px)}
.wd-cube .left{transform:rotateY(-90deg) translateZ(72px)}
.wd-cube .right{transform:rotateY(90deg) translateZ(72px);background:#668e78;color:#092b1b}
.wd-cube .top{transform:rotateX(90deg) translateZ(72px);background:#d3e7c9}
.wd-cube .bottom{transform:rotateX(-90deg) translateZ(72px)}
.wd-motion[data-current="1"] .wd-cube{transform:rotateX(-22deg) rotateY(-35deg)}
.wd-motion[data-current="2"] .wd-cube{transform:rotateX(0) rotateY(-90deg)}