/* 소개 영상(쇼릴). 무대는 페이지 테마와 무관하게 로고의 세 색(검정·에메랄드·밝은 회색)만 쓴다.
   첫 화면에는 정지한 썸네일로 놓이고, 누르면 reel.js가 무대를 대화상자로 옮겨 키운 뒤 처음부터 재생한다.
   기본 상태는 마지막 장면(로고)이라 스크립트가 실패해도 로고가 보인다. */
.reel-slot { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; border-radius: clamp(14px, 1.6vw, 20px); background: #05070d; }
.reel-stage {
  --k: #05070d; --w: #e8edf2; --g: #10b981; --on-g: #04150f;
  position: relative; overflow: hidden; container-type: size; aspect-ratio: 16 / 9; transform-origin: 0 0;
  border-radius: clamp(14px, 1.6vw, 20px); border: 1px solid var(--line);
  background: var(--k); color: var(--w); font-family: inherit; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  user-select: none;
}
.reel-slot .r-hud { display: none; }
/* 썸네일 장면: 트랙을 만들기 전에 reel.js의 POSTER 시각과 같은 모습을 그린다 */
.reel-on .r-s1 { opacity: 1; }
.reel-on .r-s6 { opacity: 0; }
.reel-on .r-dots { opacity: 0.435; }
.reel-open { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(12px, 1.6vw, 18px); border: 0; border-radius: inherit; background: none; cursor: pointer; }
.reel-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 22px; background: var(--accent); color: var(--on-accent); font-size: var(--t-sm); font-weight: 700; transition: transform var(--d-short) var(--ease); transform-origin: 0 100%; }
.reel-pill svg { width: 12px; height: 12px; fill: currentColor; }
.reel-pill .mono { font-weight: 500; font-size: var(--t-xs); opacity: 0.75; }
@media (hover: hover) { .reel-open:hover .reel-pill { transform: scale(1.06); } }
/* 썸네일이 작으면 그림을 가리지 않게 재생 표시와 길이만 남긴다 */
@container (max-width: 559px) { .reel-open { padding: 10px; } .reel-pill { min-height: 34px; gap: 8px; padding: 0 12px 0 11px; } .reel-pill-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* 대화상자: 바탕은 테마와 무관하게 어둡다 */
.reel-dlg {
  --ink: #e8edf2; --ink-2: #a9b8c6; --ink-3: #8191a1; --line: rgba(255, 255, 255, 0.16);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.reel-dlg[open] { display: grid; place-items: center; }
.reel-dlg::backdrop { background: rgba(2, 4, 8, 0.9); }
.reel-box { width: min(92vw, 1280px, (100dvh - 150px) * 16 / 9); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.reel-bar { display: flex; align-items: center; gap: 8px; }
.reel-bar .sp { flex: 1; }
.reel-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.reel-bar button:hover { color: var(--ink); border-color: var(--ink-3); }
.reel-bar svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.reel-bar .reel-x { padding: 0; }
@media (max-width: 719px) {
  .reel-box { width: min(92vw, (100dvh - 190px) * 4 / 5); }
  .reel-bar { flex-wrap: wrap; }
  .reel-bar .btn { order: 1; flex: 1 0 100%; }
  .reel-dlg .reel-stage { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: no-preference) {
  .reel-dlg[open]::backdrop, .reel-dlg[open] .reel-bar { animation: mo-t var(--d-mid) both; }
  .reel-dlg.closing::backdrop, .reel-dlg.closing .reel-bar { animation: reel-out var(--d-short) both; }
}
@keyframes reel-out { to { opacity: 0; } }
.r-cam, .r-s, .r-flood, .r-dots, .r-card { position: absolute; inset: 0; }
.r-cam { transform-origin: 50% 50%; }
.r-s { display: grid; place-items: center; opacity: 0; }
.r-s6 { opacity: 1; }
.r-w { display: inline-block; white-space: nowrap; }
.r-ch { display: inline-block; }

/* 배경: 점 격자와 가장자리 어둠 */
.r-dots {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.22cqmin, transparent 0.3cqmin) 0 0 / 3.2cqmin 3.2cqmin;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 52%); mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 52%);
  opacity: 0.16;
}
.reel-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.42) 100%); }

/* 1 입력 */
.r-s1 .r-stack { display: grid; gap: 3cqmin; justify-items: start; }
.r-chip { display: inline-flex; align-items: center; gap: 0.38em; padding: 0.24em 0.62em 0.26em 0.5em; border-radius: 0.42em; background: var(--w); color: var(--k); font-size: 13cqmin; }
.r-chip svg { width: 0.82em; height: 0.82em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.r-chip:nth-child(2) { margin-left: 9cqmin; background: transparent; color: var(--w); box-shadow: inset 0 0 0 0.05em var(--w); }
.r-chip:nth-child(3) { margin-left: 18cqmin; background: var(--g); color: var(--on-g); }

/* 2 AI 처리 */
.r-s2 { align-content: center; }
.r-s2 .r-core { position: relative; width: 32cqmin; aspect-ratio: 1; margin-bottom: 10cqmin; }
.r-orbit { position: absolute; inset: -24%; }
.r-orbit i { position: absolute; left: 50%; top: 0; width: 3.2cqmin; height: 3.2cqmin; margin: -1.6cqmin; border-radius: 25%; background: var(--w); }
.r-orbit i:nth-child(2) { top: 75%; left: 6.7%; background: var(--g); }
.r-orbit i:nth-child(3) { top: 75%; left: 93.3%; background: transparent; box-shadow: inset 0 0 0 0.5cqmin var(--w); }
.r-s2 .r-core svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-s2 .r-ring { inset: -24%; width: 148%; height: 148%; }
.r-ring circle { fill: none; stroke: var(--g); stroke-width: 2.2; stroke-linecap: butt; stroke-dasharray: 0.3 0.7; }
.r-ring .r-ring-bg { stroke: rgba(255, 255, 255, 0.14); stroke-dasharray: none; stroke-width: 1; }
.r-tile { fill: #0c1117; } .r-tile-line { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.75; } .r-u { fill: var(--g); }
.r-s2 .r-label { position: absolute; left: 0; right: 0; top: calc(50% + 20cqmin); margin: 0; text-align: center; font-size: 9.5cqmin; }
.r-flood { background: var(--g); border-radius: 50%; inset: auto; left: 50%; top: 50%; width: 30cqmin; height: 30cqmin; margin: -15cqmin; transform: scale(0); }

/* 3 서비스 여섯 가지: 카드마다 이름과 작은 도식 하나 */
.r-card { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 6cqw; padding: 0 8cqw; }
.r-card-k { background: var(--k); color: var(--w); }
.r-card-g { background: var(--g); color: var(--on-g); }
.r-idx { position: absolute; left: 8cqw; top: 15cqh; font: 500 2.6cqmin/1 var(--mono); letter-spacing: 0.08em; opacity: 0.7; }
.r-name { margin: 0; font-size: min(11.5cqmin, 42cqw / var(--wide, 4)); line-height: 1.14; }
.r-mo { --dim: rgba(255, 255, 255, 0.16); justify-self: center; width: 42cqmin; aspect-ratio: 1 / 0.8; padding: 5.4cqmin; border-radius: 4cqmin; background: var(--k); display: grid; align-content: center; gap: 3cqmin; }
.r-card-k .r-mo { background: #0c1117; box-shadow: inset 0 0 0 0.25cqmin rgba(255, 255, 255, 0.14); }
.r-mo-rows i { height: 4.4cqmin; border-radius: 1.3cqmin; background: var(--dim); transform-origin: left; }
.r-mo-chat i { transform-origin: 0 100%; }
.r-mo-chat .q { width: 58%; height: 7cqmin; border-radius: 3.5cqmin 3.5cqmin 3.5cqmin 1cqmin; background: var(--dim); }
.r-mo-chat .a { justify-self: end; width: 74%; height: 11cqmin; border-radius: 3.5cqmin 3.5cqmin 1cqmin 3.5cqmin; background: var(--g); transform-origin: 100% 100%; }
.r-mo-chat .src { justify-self: end; width: 36%; height: 3.6cqmin; border-radius: 2cqmin; box-shadow: inset 0 0 0 0.45cqmin var(--g); transform-origin: 100% 0; }
.r-mo-link { grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 0; }
.r-mo-link .n { width: 9.6cqmin; aspect-ratio: 1; border-radius: 25%; background: var(--dim); }
.r-mo-link .l { height: 1cqmin; background: rgba(255, 255, 255, 0.4); transform-origin: left; }
.r-mo-agent .st { display: flex; align-items: center; gap: 2.6cqmin; }
.r-mo-agent b { width: 5.4cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--dim); flex: none; }
.r-mo-agent u { flex: 1; height: 3.6cqmin; border-radius: 1.3cqmin; background: var(--dim); transform-origin: left; }
.r-mo-doc { grid-template-columns: auto 1fr; align-items: center; gap: 4.4cqmin; }
.r-mo-doc .sheet { width: 13cqmin; aspect-ratio: 1 / 1.3; border-radius: 1.8cqmin; background: linear-gradient(var(--k), var(--k)) 22% 30% / 56% 0.9cqmin no-repeat, linear-gradient(var(--k), var(--k)) 22% 50% / 56% 0.9cqmin no-repeat, linear-gradient(var(--k), var(--k)) 22% 70% / 36% 0.9cqmin no-repeat, var(--w); }
.r-mo-doc .fields { display: grid; gap: 2.4cqmin; }
.r-mo-doc .fields i { height: 4cqmin; border-radius: 2cqmin; background: var(--g); }
.r-mo-doc .fields i:nth-child(2) { width: 68%; background: var(--dim); }
.r-mo-doc .fields i:nth-child(3) { width: 84%; }
.r-mo-chart { grid-template: 1fr / repeat(4, 1fr); align-items: end; gap: 2.6cqmin; }
.r-mo-chart i { height: 100%; border-radius: 1.3cqmin 1.3cqmin 0 0; background: var(--dim); transform-origin: bottom; }
.r-mo .on { background: var(--g); }
@container (max-aspect-ratio: 1 / 1) {
  .r-card { grid-template-columns: 1fr; align-content: center; justify-items: start; gap: 7cqh; padding: 0 9cqw; }
  .r-name { font-size: min(11.5cqmin, 80cqw / var(--wide, 4)); }
  .r-mo { order: -1; justify-self: start; width: 52cqmin; }
  .r-idx { left: 9cqw; top: 9cqh; }
}

/* 6 로고 */
.r-s6 { align-content: center; justify-items: center; }
.r-logo { width: 62cqw; height: auto; overflow: visible; }
.r-logo .lg-umi { fill: var(--w); } .r-logo .lg-corp { fill: var(--g); }
/* 슬로건: 로고 세트의 '슬로건이 아래에 있는 조합형'과 같은 자리와 색 */
.r-logo .lg-slo { fill: #8191a1; }
@container (max-aspect-ratio: 1 / 1) { .r-logo { width: 78cqw; } }

/* 화면 표시: 위 이름, 아래 진행 줄 */
.r-hud { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: difference; color: #fff; font: 500 max(9px, 1.9cqmin)/1 var(--mono); letter-spacing: 0.06em; }
.r-hud-l { position: absolute; left: 3.4cqmin; top: 3.2cqmin; }
.r-prog { position: absolute; left: 3.4cqmin; right: 3.4cqmin; bottom: 3.2cqmin; height: max(2px, 0.4cqmin); background: rgba(255, 255, 255, 0.22); }
.r-prog i { position: absolute; inset: 0; background: #fff; transform-origin: left; }