/* Tenode 브랜드 영상(소개 페이지 /about) — 전역 이름을 쓰는 스크립트(reel.js)와 짝이라 CSS 모듈이 아닌 일반 파일. 모두 .reel 아래로 가둔다 */
.reel { --r-bg: #07111f; --r-line: #22385a; --r-gold: #c9a45c; --r-hi: #f1d9a0; --r-text: #eef2f8; --r-muted: #93a3bb; display: grid; gap: 12px; }
.reel .stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 50% 40%, #0d2140 0%, var(--r-bg) 62%); border: 1px solid var(--r-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.reel #net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.reel .world { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.reel .layer { position: absolute; inset: 0; }
.reel .abs { position: absolute; left: 0; top: 0; }
.reel .node { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4d6, var(--r-hi) 35%, var(--r-gold) 70%, #8e6a2c); box-shadow: 0 0 calc(18px + 26px * var(--glow, .5)) calc(2px + 6px * var(--glow, .5)) rgba(226, 198, 138, .55); }
.reel .edge { stroke: var(--r-gold); stroke-width: 3; stroke-linecap: round; opacity: .6; fill: none; }
.reel .word { top: 470px; width: 1600px; text-align: center; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 128px; line-height: 1.12; letter-spacing: .01em; color: var(--r-text); white-space: nowrap; }
.reel .lw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 3px 14px; }
.reel .li { display: inline-block; }
.reel .tag { top: 648px; font-size: 34px; font-weight: 700; letter-spacing: .02em; color: var(--r-hi); white-space: nowrap; }
.reel .tagbar { top: 640px; width: 4px; height: 58px; border-radius: 2px; background: var(--r-hi); box-shadow: 0 0 18px rgba(241, 217, 160, .9); }
.reel .ground { top: 640px; left: 260px; width: 1080px; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .7) 20%, rgba(201, 164, 92, .7) 80%, transparent); }
.reel .ball { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4d6, var(--r-hi) 35%, var(--r-gold) 70%, #8e6a2c); box-shadow: 0 0 28px 4px rgba(226, 198, 138, .55); }
.reel .ghost { width: 36px; height: 36px; border-radius: 50%; background: var(--r-hi); }
.reel .tail { border-radius: 50%; background: var(--r-hi); box-shadow: 0 0 10px rgba(241, 217, 160, .8); }
.reel .ring { width: 240px; height: 240px; border-radius: 50%; border: 3px solid var(--r-hi); opacity: 0; }
.reel .stats { top: 560px; width: 1600px; display: grid; justify-items: center; gap: 26px; }
.reel .cap { top: 96px; width: 1600px; text-align: center; font-family: var(--font-display, sans-serif); font-size: 52px; font-weight: 800; letter-spacing: .01em; color: var(--r-text); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.reel .stats-head { font-family: var(--font-display, sans-serif); font-size: 44px; font-weight: 800; letter-spacing: .02em; color: var(--r-hi); }
.reel .stats-row { display: flex; gap: 110px; }
.reel .stat { display: grid; justify-items: center; gap: 4px; }
.reel .stat b { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 104px; line-height: 1; color: var(--r-hi); font-variant-numeric: tabular-nums; }
.reel .stat span { font-size: 30px; font-weight: 600; color: var(--r-text); }
.reel .disc { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--r-hi) 30%, var(--r-gold) 70%, #8e6a2c); }
.reel .beatdot { position: absolute; right: 14px; top: 12px; display: flex; gap: 6px; }
.reel .beatdot i { width: 7px; height: 7px; border-radius: 50%; background: var(--r-line); }
.reel .beatdot i.on { background: var(--r-hi); box-shadow: 0 0 8px var(--r-hi); }
.reel .ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reel .ctrl button { font: 700 14px var(--font-ko, sans-serif); color: var(--r-text); background: #0c1b30; border: 1px solid var(--r-line); border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.reel .ctrl button:hover { border-color: var(--r-gold); }
.reel .ctrl button:focus-visible { outline: 2px solid var(--r-hi); outline-offset: 2px; }
.reel .ctrl small { color: var(--r-muted); font-size: 13px; }