/* Metalogy Spatial Editor — 카메라 타임라인 (v1.6.0 · 그래프 편집기 v1.6.1, timeline.js)
   After Effects 컴포지션 패널처럼: 위 머리줄(재생 · 시간 · 키 · 보간 · 카메라 동작 · 길이 · fps · 반복 · 확대),
   왼쪽 레이어 · 속성(스톱워치 · 키 이동 ◀ ◆ ▶ · 값), 오른쪽 시간자 · 키 줄 · 지금 시간 선(주황).
   editor.css 의 예전 .timeline 규칙(높이 132px)을 여기서 덮는다 — 예전 .tl-* 규칙은 더는 쓰지 않음 */

.timeline.tlx {
  --tlx-row: 28px;
  --tlx-ruler: 26px;
  --tlx-left: 322px;
  --tlx-cti: #ff8a3d;
  --tlx-key: #c3ccd6;
  --tlx-sel: var(--accent);
  position: relative;
  flex: none;
  height: var(--tlx-height, 230px); /* 위 가장자리를 끌어 바꾼다 (timeline.js — 키 줄 · 그래프 따로 기억) */
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: #0b0f13;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- 머리줄 */
.tlx-head {
  flex: none; display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 10px;
  border-bottom: 1px solid #ffffff10; background: #0d1217;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tlx-head::-webkit-scrollbar { display: none; }
.tlx-group { flex: none; display: flex; align-items: center; gap: 2px; }
.tlx .btn.small { height: 28px; gap: 6px; padding: 0 9px; flex: none; }
.tlx .btn.icon.small { width: 28px; padding: 0; }
.tlx .btn svg { width: 15px; height: 15px; }
.tlx-play { color: #ffd9bf; }
.tlx-play.is-active { border-color: #ff8a3d99; background: #ff8a3d26; color: #ffe2cc; }
.tlx-tc { flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 104px; padding: 0 4px 0 6px; line-height: 1.15; }
.tlx-tc-main { font: 600 15px/1.15 ui-monospace, Consolas, monospace; color: #ffb27a; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tlx-tc-sub { font: 10.5px/1.2 ui-monospace, Consolas, monospace; color: var(--dim); font-variant-numeric: tabular-nums; }
.tlx-sep { flex: none; width: 1px; height: 22px; margin: 0 2px; background: #ffffff1c; }
.tlx-spacer { flex: 1 0 6px; }
.tlx-addkey .tlx-glyph { width: 12px; height: 12px; fill: var(--accent); stroke: none; }
.tlx-auto .tlx-rec { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ff6b81; }
.tlx-auto.is-on { border-color: #ff6b8188; background: #ff6b811f; color: #ffd0d8; }
.tlx-auto.is-on .tlx-rec { border-color: #ff4d6a; background: #ff4d6a; box-shadow: 0 0 8px #ff4d6a; animation: tlx-rec 1.2s ease-in-out infinite; }
@keyframes tlx-rec { 50% { opacity: .45; } }
.tlx-eases { flex: none; }
.tlx-eases .seg-btn { height: 26px; gap: 5px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.tlx-eases .seg-btn .tlx-glyph { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.tlx-eases .seg-btn:disabled { opacity: .38; cursor: not-allowed; }
.tlx-eases .seg-btn:disabled:hover { color: var(--muted); }
.tlx-eases .seg-btn[aria-pressed="true"] { background: #2fd3a826; color: #c4f7e8; box-shadow: inset 0 0 0 1px #2fd3a866; }
.tlx-caret { width: 12px !important; height: 12px !important; margin-left: -3px; opacity: .7; }
.tlx-preset-btn.is-active { background: var(--accent-soft); border-color: #2fd3a880; color: #bff5e6; }
.tlx-field { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tlx-field .field { height: 28px; font-size: 12px; }
.tlx-dur { width: 64px; }
.tlx-head select.field { width: auto; padding: 0 22px 0 8px; }

/* ---- 몸통: 왼쪽 속성 · 오른쪽 시간 */
.tlx-body { flex: 1; min-height: 0; display: flex; }
.tlx-left { flex: none; width: var(--tlx-left); min-height: 0; display: flex; flex-direction: column; border-right: 1px solid #ffffff17; background: #0d1217; }
.tlx-lhead { flex: none; height: var(--tlx-ruler); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid #ffffff14; font-size: 10.5px; letter-spacing: .06em; color: var(--dim); }
.tlx-lrow { flex: none; height: var(--tlx-row); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; border-bottom: 1px solid #ffffff0d; background: #ffffff08; font-size: 12.5px; color: var(--text); }
.tlx-twirl { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); /* v2.0.5 단추 선 */ border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.tlx-twirl:hover { background: #ffffff12; color: var(--text); }
.tlx-twirl svg { width: 13px; height: 13px; transition: transform .25s; }
.tlx-twirl[aria-expanded="true"] svg { transform: rotate(90deg); }
.tlx-lname { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tlx-lname svg { width: 15px; height: 15px; color: var(--accent); }
.tlx-linfo { margin-left: auto; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tlx-prow {
  flex: none; height: var(--tlx-row); display: grid; grid-template-columns: 51px 20px minmax(0, 1fr) auto; align-items: center; gap: 4px;
  padding: 0 6px 0 8px; border-bottom: 1px solid #ffffff0a; font-size: 12px; color: var(--muted);
}
.tlx-prow.is-animated .tlx-pname { color: var(--text); }
.tlx-navs { display: flex; align-items: center; }
.tlx-navbtn, .tlx-watch { display: grid; place-items: center; padding: 0; border: 1px solid var(--line); /* v2.0.5 단추 선 */ border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.tlx-navbtn { width: 17px; height: 20px; }
.tlx-navbtn:hover:not(:disabled), .tlx-watch:hover { background: #ffffff12; border-color: #ffffff38; color: var(--text); }
.tlx-navbtn:disabled { opacity: .28; cursor: not-allowed; }
.tlx-navbtn svg { width: 12px; height: 12px; }
.tlx-navkey svg { width: 14px; height: 14px; }
.tlx-navkey.is-on { color: var(--accent); }
.tlx-navkey.is-on svg path { fill: currentColor; }
.tlx-watch { width: 20px; height: 20px; color: var(--dim); }
.tlx-watch svg { width: 15px; height: 15px; }
.tlx-watch.is-on { color: var(--accent); }
.tlx-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-vals { display: grid; grid-template-columns: repeat(3, 49px); gap: 3px; }
.tlx-vals.is-one { grid-template-columns: 49px; }
.tlx-num {
  width: 100%; height: 22px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; background: #ffffff0a;
  color: #8cc8ff; font: 11px/1 ui-monospace, Consolas, monospace; text-align: right; font-variant-numeric: tabular-nums; cursor: ew-resize;
  -webkit-user-select: text; user-select: text;
}
.tlx-num:hover { background: #ffffff14; }
.tlx-num:focus { outline: none; border-color: var(--accent); background: var(--field); color: var(--text); cursor: text; }
.tlx-num.is-scrubbing { box-shadow: 0 0 0 2px #4f9dff66; }
.tlx-status { margin-top: auto; padding: 6px 10px 7px; font-size: 11px; line-height: 1.45; color: var(--dim); }
.tlx-status.is-flash { color: #c4f7e8; }

/* ---- 시간 줄 */
.tlx-graph { position: relative; flex: 1; min-width: 0; overflow: hidden; outline: none; background: #0a0e12; touch-action: none; }
.tlx-ruler { position: absolute; left: 0; right: 0; top: 0; height: var(--tlx-ruler); border-bottom: 1px solid #ffffff17; background: #0d1217; cursor: pointer; }
.tlx-tick { position: absolute; bottom: 0; width: 0; height: 5px; border-left: 1px solid #ffffff2b; pointer-events: none; }
.tlx-tick.is-major { height: 9px; border-left-color: #ffffff63; }
.tlx-tick > span { position: absolute; left: 3px; bottom: 8px; font: 10px/1 ui-monospace, Consolas, monospace; color: #8d99a8; white-space: nowrap; }
.tlx-tick.is-frame > span { color: var(--dim); }
.tlx-tick.is-end > span { left: auto; right: 3px; } /* 오른쪽 끝 눈금 글자는 눈금 왼쪽에 (잘리지 않게) */
.tlx-lanes { position: absolute; left: 0; right: 0; top: var(--tlx-ruler); }
.tlx-lane { position: relative; height: var(--tlx-row); border-bottom: 1px solid #ffffff0a; overflow: hidden; }
.tlx-lane.is-layer { background: #ffffff06; border-bottom-color: #ffffff0f; }
.tlx-bar { position: absolute; top: 5px; bottom: 5px; border: 1px solid #2fd3a840; border-radius: 4px; background: linear-gradient(180deg, #2fd3a830, #2fd3a814); pointer-events: none; }
.tlx-key, .tlx-skey { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 15px; height: 18px; margin: -9px 0 0 -7.5px; cursor: pointer; }
.tlx-glyph { width: 12px; height: 12px; overflow: visible; fill: var(--tlx-key); stroke: #0a0e12; stroke-width: .9; }
.tlx-key:hover .tlx-glyph { fill: #fff; }
.tlx-key.is-selected .tlx-glyph { fill: var(--tlx-sel); filter: drop-shadow(0 0 4px #2fd3a8b3); }
.tlx-glyph.is-summary { width: 9px; height: 9px; fill: #8d99a8; }
.tlx-skey:hover .tlx-glyph { fill: #dfe6ee; }
.tlx-skey.is-selected .tlx-glyph { fill: var(--tlx-sel); }
.tlx-skey.is-partial .tlx-glyph { stroke: var(--tlx-sel); stroke-width: 1.6; }
.tlx-out { position: absolute; top: var(--tlx-ruler); bottom: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, #00000066 0 6px, #0000003d 6px 12px); }
.tlx-out.is-before { left: 0; }
.tlx-out.is-after { right: 0; border-left: 1px solid #ffffff1f; }
.tlx-cti { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: 0; pointer-events: none; }
.tlx-cti::after { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: var(--tlx-cti); }
.tlx-cti-head { position: absolute; top: 3px; left: -6px; width: 12px; height: 16px; background: var(--tlx-cti); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.tlx-marquee { position: absolute; z-index: 4; border: 1px solid #2fd3a8b3; background: #2fd3a81c; pointer-events: none; }
.tlx-snap { position: absolute; left: 0; top: var(--tlx-ruler); bottom: 0; z-index: 3; width: 0; border-left: 1px dashed #ffe08a; pointer-events: none; }
.tlx-dragtag { position: absolute; left: 0; top: 4px; z-index: 5; margin-left: 9px; padding: 1px 6px; border: 1px solid #ffffff33; border-radius: 5px; background: #000000d0; color: #fff; font: 10.5px/1.4 ui-monospace, Consolas, monospace; white-space: pre; pointer-events: none; }
.tlx-scroll { position: absolute; left: 8px; right: 8px; bottom: 5px; z-index: 4; height: 7px; border-radius: 4px; background: #ffffff0f; cursor: pointer; }
.tlx-thumb { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #ffffff40; }
.tlx-scroll:hover .tlx-thumb { background: #ffffff66; }
.tlx-graph.is-dragging, .tlx-graph.is-dragging * { cursor: ew-resize !important; }

/* 레이어 접기: 속성 줄을 숨기고 요약 키만 */
.tlx.is-collapsed .tlx-prow, .tlx.is-collapsed .tlx-lane:not(.is-layer) { display: none; }

/* ---- 높이 손잡이 (위 가장자리) */
.tlx-sizer { position: absolute; left: 0; right: 0; top: -4px; z-index: 8; height: 8px; cursor: ns-resize; touch-action: none; }
.tlx-sizer::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.tlx-sizer:hover::after, .tlx-sizer.is-active::after { opacity: .75; }

/* ---- 그래프 편집기 (Shift+F3): 키 줄 자리에 곡선 · 아래 막대(종류 · 범례 · 도움말 · 키 속도) */
.tlx-graph-btn.is-active { background: var(--accent-soft); border-color: #2fd3a880; color: #bff5e6; }
.tlx-gwrap { position: absolute; left: 0; right: 0; top: var(--tlx-ruler); bottom: 0; display: flex; flex-direction: column; }
.tlx-gwrap[hidden] { display: none; }
.tlx-gcanvas { display: block; flex: 1; min-height: 0; width: 100%; }
.tlx-gbar {
  flex: none; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 8px;
  border-top: 1px solid #ffffff14; background: #0d1217; font-size: 11.5px; color: var(--muted); overflow: hidden;
}
.tlx-gtype { flex: none; }
.tlx-gtype .seg-btn { height: 22px; padding: 0 10px; font-size: 11.5px; }
.tlx-gtype .seg-btn[aria-checked="true"] { background: #2fd3a826; color: #c4f7e8; box-shadow: inset 0 0 0 1px #2fd3a866; }
.tlx-legend { flex: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.tlx-lg { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.tlx-lg i { width: 14px; height: 0; border-top: 2px solid var(--c); }
.tlx-lg.is-dash i { border-top-style: dashed; }
.tlx-ghint { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.tlx .btn.small.tlx-velbtn { flex: none; height: 24px; }
.tlx.is-graph .tlx-out, .tlx.is-graph .tlx-cti, .tlx.is-graph .tlx-snap { bottom: 30px; }
.tlx.is-graph .tlx-scroll { bottom: 36px; }
.tlx.is-graph .tlx-lrow, .tlx.is-graph .tlx-prow { cursor: pointer; }
.tlx.is-graph .tlx-prow:hover { background: #ffffff06; }
.tlx.is-graph .tlx-prow.is-shown { background: #ffffff0b; box-shadow: inset 3px 0 0 var(--c); }
.tlx.is-graph .tlx-prow.is-shown .tlx-pname { color: var(--c); font-weight: 600; }

/* ---- 키프레임 속도 창 (After Effects '키프레임 속도' — 그래프에서 키를 두 번 누름 · Ctrl+Shift+K, v1.8.2) */
dialog.modal.tlx-vm { width: min(580px, calc(100vw - 32px)); }
.tlx-vm .tlx-vm-body { display: grid; gap: 14px; padding-top: 18px; }
.tlx-vm .tlx-vm-type { margin: 0; font-size: 13.5px; color: var(--muted); }
.tlx-vm-type strong { color: var(--text); font-weight: 600; }
.tlx-vm-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tlx-vm-side { min-width: 0; margin: 0; padding: 8px 14px 14px; border: 1px solid #ffffff1f; border-radius: 10px; display: grid; gap: 9px; }
.tlx-vm-side legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.tlx-vm-side:disabled { opacity: .4; }
.tlx-vm-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tlx-vm-l { flex: none; width: 40px; text-align: right; }
.tlx-num.tlx-vm-num { flex: none; width: 96px; height: 28px; padding: 0 8px; font-size: 13px; text-align: left; }
.tlx-vm-u { flex: none; }
.tlx-vm-cont { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tlx-vm-cont input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.tlx-vm-cont:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.tlx-vm .tlx-vm-note { margin: 0; font-size: 12px; color: var(--dim); }
.tlx-vm .tlx-vm-key { margin: 2px 0 0; text-align: right; font-size: 12.5px; color: var(--muted); }
.tlx-vm-foot { display: flex; justify-content: flex-end; gap: 8px; }
.tlx-vm-foot .btn { min-width: 78px; justify-content: center; }
@media (max-width: 520px) { .tlx-vm-sides { grid-template-columns: 1fr; } }

/* ---- 카메라 동작 칸 (타임라인 위, 3D 화면 쪽으로 펼침) */
.tlx-pop {
  position: absolute; bottom: calc(100% + 8px); left: 8px; z-index: 30; width: 392px; max-width: calc(100% - 16px);
  padding: 10px 12px 12px; border: 1px solid #ffffff24; border-radius: 12px; background: #0d1217f5;
  box-shadow: 0 14px 50px #000a; font-size: 12.5px; -webkit-user-select: none; user-select: none;
}
.tlx-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tlx-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tlx-preset {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 7px 2px 6px;
  border: 1px solid #ffffff17; border-radius: 9px; background: #ffffff06; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.tlx-preset span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-preset svg { width: 20px; height: 20px; }
.tlx-preset:hover { color: var(--text); background: #ffffff0f; }
.tlx-preset[aria-checked="true"] { border-color: #2fd3a880; background: #2fd3a81c; color: #e3fff7; }
.tlx-pop-tip { margin: 8px 0 7px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tlx-pop-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tlx-pop-row .field.num { width: 66px; height: 28px; }
.tlx-dirs .seg-btn { height: 26px; padding: 0 10px; }
.tlx-pop-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tlx-pop-hint { flex: 1; margin: 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
.tlx-pop-hint.is-warn { color: #ffd479; }

/* ---- 키 메뉴 (오른쪽 단추) */
.tlx-menu { position: fixed; z-index: 40; min-width: 214px; padding: 5px; border: 1px solid #ffffff26; border-radius: 10px; background: #0d1217f7; box-shadow: 0 14px 40px #000b; font-size: 12.5px; }
.tlx-mi-head { padding: 3px 8px 6px; font-size: 11px; color: var(--dim); }
.tlx-mi { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tlx-mi:hover, .tlx-mi:focus-visible { background: #ffffff12; outline: none; }
.tlx-mi svg { flex: none; width: 14px; height: 14px; }
.tlx-mi .tlx-glyph { width: 12px; height: 12px; fill: var(--tlx-key); stroke: none; }
.tlx-mi.is-current { color: #c4f7e8; }
.tlx-mi.is-current .tlx-glyph { fill: var(--accent); }
.tlx-mi-label { flex: 1; }
.tlx-mi kbd { margin: 0; border-color: #ffffff26; color: var(--dim); font-size: 10px; }
.tlx-mi.is-danger:hover { color: var(--danger); }
.tlx-mi-sep { height: 1px; margin: 4px 6px; background: #ffffff14; }

/* 타임라인이 열려 있으면 알림(toast)을 그만큼 위로 — 3D 화면 아래 도구 막대 위 자리를 지킨다 (editor.css 의 bottom 78px + 칸 높이) */
@media (min-width: 761px) {
  body.editor:has(#timeline.tlx:not([hidden])) .toast-host { bottom: calc(78px + var(--tlx-h, 230px)); }
}

/* ---- 좁은 화면: 머리줄 글자를 아이콘만으로, 그다음 값 칸을 숨긴다. v2.3.33 기준은 3D 칸(.ed-stage) 너비 — 예전 창 너비 기준(창 − 왼쪽 패널 320px)과
   같은 자리에서 바뀌고, 편집 칸을 넓히면(+100 · +150 px) 그만큼 일찍 (editor.css container ed-stage) */
@container ed-stage (max-width: 1440px) {
  .tlx-eases .tlx-lbl { display: none; }
  .tlx-eases .seg-btn { padding: 0 7px; }
}
@container ed-stage (max-width: 1180px) {
  .tlx-auto .tlx-lbl, .tlx-graph-btn .tlx-lbl, .tlx-velbtn .tlx-lbl { display: none; }
}
/* '카메라 동작' 글자는 더 오래 (재어 보니 글자까지 1081px — 창 1401px 부터 들어감) */
@container ed-stage (max-width: 1100px) {
  .tlx-preset-btn .tlx-lbl { display: none; }
}
/* 1380px 아래(타임라인 넓이 1060px 아래)는 '키 추가' · '길이' · 'fps' 글자도 — 1280px 창에서 머리줄이 넘치지 않게 */
@container ed-stage (max-width: 1060px) {
  .tlx-addkey .tlx-lbl, .tlx-flbl { display: none; }
}
@container ed-stage (max-width: 780px) {
  .timeline.tlx { --tlx-left: 172px; }
  .tlx-vals, .tlx-lhead-r { display: none; }
  .tlx-zoom .btn:not(:first-child) { display: none; }
  .tlx-eases .seg-btn { padding: 0 5px; }
  .tlx-prow { grid-template-columns: 51px 20px minmax(0, 1fr); }
  .tlx-legend { display: none; }
}
@media (max-width: 760px) {
  .timeline.tlx { height: min(var(--tlx-height, 214px), 55vh); }
  .tlx-tc { min-width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .tlx-auto.is-on .tlx-rec { animation: none; }
  .tlx-twirl svg { transition: none; }
}