/* Metalogy Spatial Editor — 상호작용 탭 일반화 · 맵 이동 · 빠른 이동 (v1.18.0, assets/interactions.js · assets/ix-move.js)
   편집기 모양(editor.css · mse.css 의 --accent · --line · --text · --muted · --field, .modal · .btn · .seg)을 따른다.
   종류별 창 · 칸은 ix-video.css · ix-context.css · ix-intro.css 가 따로 */

/* ---- 편집 칸: 종류 칸 자리 (제목 바로 아래) */
.ix-type-slot { display: contents; }
/* 모듈이 빈 칸을 주면(아직 내용 없음) 칸째 숨긴다 */
.ix-tsec:has(> :empty:only-child) { display: none; }
.ix-sec-error { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #ffffff0d; color: #ffb4c0; }
.ix-label-note { margin-left: 6px; letter-spacing: 0; color: var(--dim); font-size: 10.5px; }
.ix-gap { margin-top: 10px; }
.hint.ix-warn, .modal-body .hint.ix-warn { color: #ffd479; }
.ix-warn b { color: #ffe3a3; }
#tab-ann .ix-group > .btn.wide + .hint { margin-top: 8px; }
/* 놓는 중인 종류의 '추가' 단추 (누른 채로 보임) */
#tab-ann .btn.primary[data-ix-add].is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px #2fd3a880; color: #bff5e6; }

/* ---- 맵 이동 편집 칸 */
.ix-mm-sec .field { width: 100%; }
.ix-mm-sec select.field { height: 32px; }
.ix-mm-sec select.field:disabled { opacity: .55; }
.ix-mm-sec .hint { margin-top: 8px; }
.ix-mm-sec .col-actions { margin-top: 6px; }

/* ---- 빠른 이동 편집 칸 */
.ix-qm-sec .row { margin-top: 2px; }
.ix-qm-sec .hint { margin-top: 2px; }
.ix-qm-sec .ix-preview-row, .ix-mm-sec .ix-preview-row { margin-top: 10px; }

/* ---- 방향 나침반 (평면도 3×3 — 가운데 = 서 있는 자리 · 바라보는 쪽) */
.ix-compass {
  flex: none; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px;
  padding: 6px; border: 1px solid #ffffff14; border-radius: 13px; background: #ffffff06;
}
.ix-compass.is-small { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 3px; padding: 4px; border-radius: 11px; }
.ix-compass-btn {
  position: relative; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff1f; border-radius: 9px;
  background: #0b1116; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, box-shadow .25s;
}
.ix-compass.is-small .ix-compass-btn { border-radius: 8px; }
.ix-compass-btn:hover { color: var(--text); border-color: #ffffff45; background: #121a22; }
.ix-compass-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ix-compass-btn[aria-checked="true"] { border-color: transparent; background: var(--gradient); color: #fff; box-shadow: 0 0 0 1px #2fd3a866, 0 6px 18px #00b88c33; }
.ix-compass-btn .ix-arrow { width: 20px; height: 20px; }
.ix-compass.is-small .ix-compass-btn .ix-arrow { width: 16px; height: 16px; }
/* 지금 카메라가 보는 쪽 (설정 창) */
.ix-compass-btn.is-cam::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: #ffd479; box-shadow: 0 0 0 2px #0b1116;
}
.ix-compass-mid { display: grid; place-items: center; color: var(--accent); }
.ix-compass-mid svg { width: 40px; height: 40px; overflow: visible; }
.ix-compass.is-small .ix-compass-mid svg { width: 32px; height: 32px; }
.ix-cone-g { transform-origin: 12px 12px; transition: transform .3s cubic-bezier(.22,.68,.2,1); }
.ix-cone { fill: #2fd3a88c; }
.ix-spot-dot { fill: #2fd3a8; stroke: #0b1116; stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .ix-cone-g { transition: none; } }

.ix-qm-pick { display: flex; align-items: center; gap: 16px; }
.ix-qm-pick.is-inline { gap: 12px; margin: 4px 0 8px; }
.ix-qm-aside { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.ix-qm-aside .hint { margin: 0; }
.ix-qm-now-row { font-size: 12px; color: var(--muted); }
.ix-qm-now { margin-left: 2px; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
/* v2.1.6 도착 자리 목록의 썸네일 · 맵 이동 도착 시점 */
.ix-spot-thumb { flex: none; display: block; width: 58px; height: 38px; margin-left: auto; border-radius: 6px; overflow: hidden; background: #ffffff0d; box-shadow: 0 0 0 1px #ffffff1a; }
.ix-spot-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-arr-label { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ffffff10; }
/* v2.3.40 버튼 클릭 시 카메라 위치 지정 — 저장한 값 칸 (저장됨 / 자동 · 방금 저장 강조) · 모바일 전용 칸 · 안내는 맨 아래 */
.ix-pos-card { margin: 4px 0 8px; padding: 9px 11px 10px; border: 1px solid #ffffff17; border-radius: 9px; background: #ffffff06; transition: border-color .45s, background-color .45s, box-shadow .45s; }
.ix-pos-card.is-saved { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.ix-pos-card.is-just { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ix-pos-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 20px; }
.ix-pos-head > strong { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ix-pos-badge { padding: 0 8px; border-radius: 999px; font-size: 10.5px; line-height: 18px; background: #ffffff12; color: var(--muted); }
.ix-pos-card.is-saved .ix-pos-badge { background: var(--accent-soft); color: var(--accent); }
.ix-pos-just { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ix-pos-just[hidden] { display: none; }
.ix-pos-just > svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ix-pos-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.ix-pos-rows dt { color: var(--dim); white-space: nowrap; }
.ix-pos-rows dd { margin: 0; min-width: 0; color: #d5dde6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ix-pos-dir { display: flex; align-items: center; gap: 5px; }
.ix-pos-dir .ix-arrow { flex: none; width: 14px; height: 14px; color: var(--accent); }
.ix-pos-empty { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* v2.3.57 저장할 때의 화면 (작은 썸네일 — 값 줄 위) */
.ix-pos-shot { width: 132px; aspect-ratio: 16 / 10; margin: 8px 0 0; border-radius: 6px; overflow: hidden; background: #0b1116; box-shadow: 0 0 0 1px #ffffff1f; }
.ix-pos-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* v2.4.7 카메라 위치 가져오기 창 */
.ix-camimp-modal { width: min(560px, 94vw); }
/* 낮은 화면에서도 창은 화면 안 — 목록만 스크롤 (창과 목록이 함께 스크롤되지 않게) */
dialog.modal.ix-camimp-modal[open] { display: flex; flex-direction: column; }
.ix-camimp-modal .modal-head, .ix-camimp-modal .modal-foot { flex: none; }
.ix-camimp-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ix-camimp-body > .hint, .ix-camimp-body > .field { flex: none; margin: 0; }
.ix-camimp-list { flex: 0 1 auto; min-height: 96px; max-height: 520px; display: grid; align-content: start; gap: 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
/* v2.4.8 상호작용(컨테이너) 카드 — 머리(아이콘 · 이름 · 종류) + 저장한 곳마다 일반 · 모바일 줄 */
.ix-camimp-card { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid #ffffff17; border-radius: 12px; background: #ffffff06; }
.ix-camimp-card.is-self { border-color: #2fd3a84d; }
.ix-camimp-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ix-camimp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--accent); border-radius: 50%; color: #e9fff8; background: #0b1016; }
.ix-camimp-ic svg { width: 12px; height: 12px; }
.ix-camimp-title { min-width: 0; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-camimp-type, .ix-camimp-self { flex: none; padding: 0 8px; border-radius: 999px; font-size: 10.5px; line-height: 18px; background: #ffffff10; color: var(--muted); }
.ix-camimp-self { margin-left: auto; background: var(--accent-soft); color: var(--accent); }
.ix-camimp-slot { display: grid; gap: 6px; }
.ix-camimp-where { font-size: 11px; color: var(--dim); }
.ix-camimp-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #ffffff12; border-radius: 9px; background: #00000026; }
.ix-camimp-row:hover { border-color: #ffffff2a; }
.ix-camimp-row.is-mobile { border-color: #4ea8ff3d; background: #4ea8ff0d; }
/* 일반 · 모바일 배지 (라운딩 박스) — 모바일은 강조 */
.ix-camimp-badge { justify-self: start; padding: 0 9px; border: 1px solid #ffffff24; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 19px; color: var(--muted); background: #ffffff0a; }
.ix-camimp-badge.is-mobile { border-color: #4ea8ffb3; color: #d6ebff; background: #4ea8ff2e; }
.ix-camimp-shot { flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0b1116; box-shadow: 0 0 0 1px #ffffff1f; display: grid; place-items: center; color: var(--dim); }
.ix-camimp-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-camimp-shot.is-none svg { width: 18px; height: 18px; opacity: .5; }
.ix-camimp-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ix-camimp-main small { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-camimp-row > .btn { flex: none; }
.ix-camimp-empty { margin: 4px 0; }
.ix-grow { flex: 1; }
.ix-pos-shot.is-none { display: grid; place-items: center; border: 1px dashed #ffffff29; background: transparent; box-shadow: none; }
.ix-pos-shot.is-none > span { padding: 4px 8px; font-size: 10.5px; line-height: 1.35; color: var(--dim); text-align: center; }
.ix-mob-row { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ffffff10; }
.ix-mob-box { margin-top: 8px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.ix-arr-hint { margin: 12px 0 0; }
.ix-arr-hint + .ix-arr-hint { margin-top: 6px; }
/* v2.3.42 공용 카메라 위치 칸 (ix-campos.js) — 상호작용 시점 칸은 칸 맨 위라 구분선 없이, 드롭 메뉴 창 안은 칸 폭 그대로 */
.ix-arr-label.is-first { margin-top: 0; padding-top: 0; border-top: 0; }
.ixm-view .ix-campos .ix-pos-card { margin-top: 0; }
/* v2.1.6 프로젝트 썸네일 불러오기 창 */
dialog.modal.ix-tl-modal { width: min(720px, calc(100vw - 32px)); }
.ix-tl-tabs { display: flex; margin: 4px 0 10px; }
.ix-tl-tabs .seg-btn { flex: 1 1 0; gap: 6px; }
.ix-tl-tabs .seg-btn .count { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #ffffff14; font-size: 11px; }
.ix-tl-grid { display: grid; gap: 14px; max-height: min(52vh, 460px); overflow: auto; padding: 2px; }
.ix-tl-group { display: grid; gap: 8px; }
.ix-tl-map { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: #d5dde6; }
.ix-tl-map small { font-weight: 400; color: var(--dim); font-size: 10.5px; }
.ix-tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ix-tl-card { display: grid; gap: 6px; padding: 6px; border: 1px solid #ffffff17; border-radius: 10px; background: #ffffff06; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ix-tl-card:hover { border-color: #2fd3a866; background: #2fd3a80d; }
/* v2.1.10 불러오기 카드의 '이 자리'(등록용) · '표시' 표 */
.ix-tl-card[aria-checked="true"] { border-color: #2fd3a8; box-shadow: 0 0 0 2px #2fd3a855; background: #2fd3a814; }
.ix-tl-card.is-broken .ix-tl-img::after { content: '그림 없음'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 11px; }
.ix-tl-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #ffffff0d; }
.ix-tl-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ix-tl-note { min-height: 1.4em; margin: 8px 0 0; }
/* v2.1.4 빠른 이동 세부 회전 (방향 ° · 기울기 °) */
.ix-qm-detail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.ix-qm-detail .field.num { width: 64px; }
.ix-qm-detail .ix-unit { color: var(--dim); font-size: 11.5px; margin-right: 6px; }
.ix-qm-detail-label { font-size: 11px; letter-spacing: 0.02em; color: var(--dim); padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; }
/* v2.1.4 맵 이동 도착 애니메이션 */
.ix-mm-anim { display: grid; gap: 6px; margin: 10px 0 4px; }
.ix-mm-anim > label { font-size: 12.5px; color: var(--muted); }

/* ---- 창 (맵 이동 · 빠른 이동) — <dialog class="modal ix-modal …"> */
dialog.modal.ix-modal { width: min(560px, calc(100vw - 32px)); }
dialog.modal.ix-mm-modal { width: min(660px, calc(100vw - 32px)); }
/* 본문만 스크롤 (머리 · 아래 단추는 늘 보임) */
dialog.modal.ix-modal[open] { display: flex; flex-direction: column; }
dialog.modal.ix-modal:focus, dialog.modal.ix-modal:focus-visible { outline: none; }
.ix-modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ix-modal .modal-body { flex: 1 1 auto; min-height: 0; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ix-modal .modal-foot { padding-top: 4px; }
.ix-modal-lead { margin: 0 0 4px !important; line-height: 1.65; }
.ix-modal-lead b { color: var(--text); font-weight: 600; }
.ix-field { display: grid; gap: 7px; margin: 16px 0 0; }
.ix-field > label, .ix-field-label { font-size: 12.5px; font-weight: 600; color: #d5dde6; }
.ix-field-label small { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--dim); }
.ix-check-row { margin-top: 14px; }
.ix-check-row > label { font-size: 13px; color: #d5dde6; }
.ix-modal .hint { margin: 8px 0 0; }

/* 단계 (맵 이동: 1 도착 맵 · 2 도착 자리) */
.ix-step { margin-top: 18px; }
.ix-step h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.ix-step-num {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-size: 11px; font-weight: 700;
}
.ix-step-sub { margin-left: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.ix-step h3 .btn { margin-left: auto; }
.ix-loading { margin: 4px 0 !important; color: var(--muted); font-size: 12.5px; }

.ix-map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.ix-map-list > .ix-empty-note, .ix-map-list > .ix-loading { grid-column: 1 / -1; }
.ix-map-card {
  display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid #ffffff1f; border-radius: 11px; background: #ffffff06; color: var(--text); cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .25s;
}
.ix-map-card:hover { border-color: #ffffff45; background: #ffffff0a; }
.ix-map-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ix-map-card[aria-checked="true"] { border-color: var(--accent); background: #2fd3a80f; box-shadow: 0 0 0 1px var(--accent), 0 8px 26px #00b88c26; }
.ix-map-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b1116; border-bottom: 1px solid #ffffff12; }
.ix-map-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-map-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #3b4a58; }
.ix-map-ph svg { width: 34px; height: 34px; }
.ix-map-text { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.ix-map-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.ix-map-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); }
.ix-tag {
  flex: none; justify-self: start; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px;
  background: #ffffff14; color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}

.ix-spot-list { display: grid; gap: 6px; }
.ix-spot {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid #ffffff1f; border-radius: 10px; background: #ffffff06; color: var(--text); cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .25s;
}
.ix-spot:hover:not(:disabled) { border-color: #ffffff45; background: #ffffff0a; }
.ix-spot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ix-spot[aria-checked="true"] { border-color: var(--accent); background: #2fd3a80f; box-shadow: 0 0 0 1px var(--accent); }
.ix-spot:disabled { opacity: .5; cursor: not-allowed; }
.ix-spot-ic {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #2fd3a8; background: #0b1116; color: #fff;
}
.ix-spot[aria-checked="true"] .ix-spot-ic { background: var(--gradient); border-color: #fff; }
.ix-spot-ic svg { width: 16px; height: 16px; }
.ix-spot-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ix-spot-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.ix-spot-main small { font-size: 11.5px; color: var(--muted); }

.ix-check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12.5px; color: #d5dde6; cursor: pointer; }
.ix-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ix-check input:disabled { cursor: not-allowed; }
.ix-check input:disabled + span { opacity: .55; }
.ix-check small { font-size: 11.5px; }

.ix-empty-note {
  display: grid; gap: 8px; justify-items: start; margin: 0 !important; padding: 14px 16px;
  border: 1px dashed #ffffff29; border-radius: 10px; background: #ffffff05;
}
.ix-empty-note strong { color: #ffd479; font-size: 13.5px; font-weight: 600; }
.ix-empty-note span { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 560px) {
  .ix-qm-pick:not(.is-inline) { flex-direction: column; align-items: flex-start; }
  .ix-map-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-compass { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); }
}

/* ---- v1.20.0 애니메이션 효과 (assets/ix-anim.js) — 편집 칸의 스위치 · 3D 화면 위 애니메이션 리모컨
   리모컨은 Webflow 상호작용 패널처럼 위에서 아래로: 트리거 · 처음 상태 · 동작(타임라인 카드) · 미리 보기.
   칸 · 카드의 왼쪽 색 막대(--k)는 왼쪽 탭 묶음 제목 막대와 같은 모양 — 종류별 색: 등장 청록 · 사라짐 분홍 · 이동 파랑 · 크기 주황 · 회전 보라 */
/* v1.23.0 편집 칸 맨 위 (고른 상호작용 카드 바로 아래) — 눈에 띄는 노란 테두리 칸, 켜면 더 또렷하게 */
.ix-anim-sec { margin: 10px 0 2px; padding: 9px 10px 10px; border: 1px solid #ffd47933; border-radius: 10px; background: linear-gradient(180deg, #ffd4790d, #ffd47905); transition: border-color .25s, background-color .25s, box-shadow .25s; }
.ix-anim-sec.is-on { border-color: #ffd47980; box-shadow: 0 0 0 1px #ffd47922 inset; }
.ix-anim-sec .row { margin: 0; }
.ix-anim-sec label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ix-anim-ic { display: inline-flex; color: #ffd479; }
.ix-anim-ic svg { width: 14px; height: 14px; }
.ix-anim-state { margin: 6px 0 0; }

/* 처음 자리(오른쪽 위 회전축 아래 176 px)에서 3D 화면 아래 끝까지 — 넘치면 안에서 스크롤 */
.remote.remote-anim { width: 340px; display: flex; flex-direction: column; max-height: calc(100% - 184px); min-height: 0; }
.remote.remote-anim .remote-head { flex: none; }
.remote.remote-anim .remote-icon svg { color: #ffd479; }
.remote.remote-anim .remote-title { color: #ffd479; }
.remote.remote-anim .remote-body { display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 10px; scrollbar-width: thin; }
.remote.remote-anim.is-collapsed:not(.is-animating) .remote-body { display: none; }
.remote.remote-anim.is-playing { box-shadow: 0 12px 32px #0000008c, 0 0 0 1px #ffd47966; }

.ax { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ax-sec { position: relative; border: 1px solid #ffffff14; border-radius: 10px; background: linear-gradient(180deg, #ffffff08, #ffffff02); }
.ax-sec-head { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px 7px 13px; border: 0; border-radius: 10px 10px 0 0; background: #ffffff07; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ax-sec-head:hover { background: #ffffff0d; }
.ax-sec.is-folded:not(.is-animating) .ax-sec-head { border-radius: 10px; }
.ax-sec-bar { position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k, var(--accent)); opacity: .9; }
.ax-sec-title { font-size: 12px; font-weight: 700; }
.ax-sec-en { font-size: 9.5px; letter-spacing: .08em; color: var(--dim); }
.ax-sec-extra { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ax-chev { display: inline-flex; flex: none; color: var(--dim); }
.ax-chev svg { width: 13px; height: 13px; transition: transform .4s ease; }
.ax-sec.is-folded .ax-sec-head .ax-chev svg, .ax-card.is-folded .ax-card-head .ax-chev svg { transform: rotate(-90deg); }
.ax-sec-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px 9px 10px; border-top: 1px solid #ffffff0d; }
.ax-sec.is-folded:not(.is-animating) > .ax-sec-body { display: none; }

.ax-trigger { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ax-trigger b { color: var(--text); font-weight: 600; }
.ax-trigger > span:last-child { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; text-wrap: pretty; }
.ax-trigger-ic, .ax-with-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--accent); border-radius: 50%; color: #e9fff8; background: #0b1016; }
.ax-trigger-ic svg, .ax-with-ic svg { width: 12px; height: 12px; }
.ax-with-ic { width: 18px; height: 18px; border-width: 1.2px; }
.ax-with-ic svg { width: 10px; height: 10px; }
.ax-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.ax-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 6px; }
.ax-row.ax-row-top { align-items: start; grid-template-columns: 1fr; }
.ax-label { color: var(--dim); font-size: 11px; }
.ax-seg { display: flex; }
.ax-seg .seg-btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; justify-content: center; white-space: nowrap; font-size: 11.5px; }
.ax-sub { margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ax-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* v1.23.0 긴 이름은 잘리지 않고 여러 줄로 */
.ax-chip { display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%; min-width: 0; padding: 3px 9px 3px 6px; border: 1px solid #ffffff1a; border-radius: 11px; background: #ffffff0a; color: var(--text); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; word-break: keep-all; }
.ax-chip > svg { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--dim); }
.ax-chip > .ax-with-ic { margin-top: 0; }
.ax-note { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.5; }
.ax-warn { margin: 0; color: #ffd479; font-size: 11px; line-height: 1.5; }
/* v2.4.9 대상 유형 칸: 고른 표시는 미끄러지는 잉크 (전환 움직임 — ix-anim.js playTypeSwitch) */
.ax-type-seg { position: relative; isolation: isolate; } /* 단추 z-index 가 칸 밖(아래 고정 줄 위)으로 나오지 않게 */
.ax-type-seg .seg-btn { z-index: 1; }
.editor .ax-type-seg .seg-btn[aria-checked="true"]::before { opacity: 0; }
/* v2.7.6 칸 셋 (상호작용 / 3D 오브젝트 / 드롭 메뉴 — 칸 폭 = (폭 - 안쪽 여백 4 - 사이 4) / 3) */
.ax-type-ink { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 8px) / 3); border-radius: 7px; background: var(--gradient); pointer-events: none; z-index: 0; opacity: 0; }
.ax-type-ink[data-at="0"] { opacity: 1; transform: translateX(0); }
.ax-type-ink[data-at="1"] { opacity: 1; transform: translateX(calc(100% + 2px)); }
.ax-type-ink[data-at="2"] { opacity: 1; transform: translateX(calc(200% + 4px)); }
/* v2.7.6 드롭 메뉴 막대의 효과 (페이드 고정 — 고르기 칸 대신 글) */
.ax-fixed { color: var(--text); font-size: 12px; line-height: 1.4; }
/* v2.4.8 막대 대상 유형 (상호작용 / 3D 오브젝트) — 고르기 전 안내 */
.ax-guide { display: grid; gap: 3px; padding: 8px 10px; border: 1px dashed #2fd3a866; border-radius: 9px; background: #2fd3a80d; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ax-guide > b { color: var(--accent); font-size: 12px; font-weight: 600; }
.ax-warn-row { display: flex; align-items: center; gap: 6px; }
.ax-warn-row > span { flex: 1; min-width: 0; }
.ax-warn-row .btn { flex: none; height: 24px; padding: 0 8px; font-size: 11px; }
/* v2.0.17 '다른 상호작용 영향을 받을 경우 처음부터 재생' · 영향을 받는 상호작용 (트리거 칸) */
.ax-restart { display: grid; gap: 6px; padding: 8px 9px; border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff05; }
.ax-restart.is-on { border-color: #2fd3a855; background: #2fd3a80d; }
.ax-restart .ax-switch-row > span:first-child { color: var(--text); font-weight: 600; }
.ax-switch-row.is-disabled { opacity: .5; cursor: not-allowed; }
/* v2.3.51 '누르면 … 도 열기' 아래 열기 지연 (초) */
.ax-delay-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.ax-delay-row > small { margin-left: auto; }
.ax-delay-row.is-off { opacity: .5; }
.ax-delay-row > .ax-numwrap { flex: 0 0 84px; }
/* v2.6.12 그 아래 카메라 이동 시간 (같은 줄 모양) — 이름은 한 줄로 */
.ax-delay-row > span:first-child { white-space: nowrap; }
/* v2.7.0 맵 효과 전환 (흐름 머리 카드 — 카메라 이동 시간 아래, ix-anim.js mapFxBlock) */
.ax-mapfx { display: grid; gap: 7px; }
.ax-mapfx.is-on { padding: 8px 9px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff05; }
.ax-mapfx.is-off .ax-mapfx-head { opacity: .5; cursor: not-allowed; }
.ax-mapfx .ax-mapfx-head > span:first-child { color: var(--text); font-weight: 600; }
.ax-mapfx-note { margin-top: -2px; }
.ax-mapfx-row .ax-mapfx-pick { flex: 1; min-width: 0; height: 28px; font-size: 12px; }
.ax-restart:not(.is-on) .ax-infl { opacity: .7; }
.ax-infl-name { display: inline-flex; flex-direction: column; min-width: 0; }
/* v2.7.8 영향을 받는 상호작용: 머리 한 줄(개수, 겹치는 대상, 목록 보기 · 접기) + 펼친 이름 칩은 칸 안에서 스크롤 (예전엔 칩마다 겹치는 대상 이름이 다 붙어 rucas 에서 4만 px) */
.ax-infl-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ax-infl-head > .ax-sub { flex: 1; min-width: 0; margin-top: 0; }
.ax-infl-fold { flex: none; height: 24px; padding: 0 9px; font-size: 11px; }
.ax-infl.is-scroll { max-height: 176px; overflow-y: auto; padding-right: 2px; overscroll-behavior: contain; }
.ax-empty { margin: 0; padding: 10px; border: 1px dashed #ffffff24; border-radius: 9px; color: var(--muted); font-size: 11.5px; line-height: 1.55; text-align: center; }

.ax-add { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ax-add-btn { justify-content: center; gap: 4px; padding: 0 2px; font-size: 11px; white-space: nowrap; }
.ax-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 25%, transparent); }
.ax-ruler { position: relative; height: 14px; margin: 0 8px 0 11px; border-bottom: 1px solid #ffffff14; }
.ax-tick { position: absolute; bottom: 1px; transform: translateX(-50%); color: var(--dim); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.ax-tick:first-child { transform: none; }
.ax-cards { display: grid; gap: 6px; }

.ax-card { position: relative; border: 1px solid #ffffff17; border-radius: 9px; background: #0d1218; }
.ax-card::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.ax-card.is-missing { border-color: #ffd47955; }
/* v1.23.0 카드 머리: [종류] [이름(여러 줄) / 시간] [복제] [삭제] [접기] — 이름이 넓게 쓰도록 시간은 이름 아래 줄 */
.ax-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 5px; row-gap: 1px; min-height: 30px; padding: 5px 4px 3px 11px; cursor: pointer; border-radius: 9px 9px 0 0; }
.ax-card-head > .ax-kind { grid-row: 1 / span 2; align-self: start; margin-top: 1px; }
.ax-card-head > .ax-time { grid-row: 2; grid-column: 2; justify-self: start; }
.ax-card-head > .btn.icon, .ax-card-head > .ax-chev { grid-row: 1 / span 2; }
.ax-card-head:hover { background: #ffffff08; }
.ax-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ax-kind { flex: none; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--k) 18%, transparent); color: var(--k); font-size: 10.5px; font-weight: 700; }
.ax-card-title { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; word-break: keep-all; }
.ax-time { flex: none; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ax-card-head .btn.icon { flex: none; width: 24px; height: 24px; padding: 0; }
.ax-card-head .btn.icon svg { width: 13px; height: 13px; }
.ax-bar { position: relative; display: block; height: 4px; margin: 2px 8px 7px 11px; border-radius: 3px; background: #ffffff0d; overflow: hidden; }
.ax-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--k); opacity: .85; transition: left .2s ease, width .2s ease; }
.ax-card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 4px 9px 9px 11px; border-top: 1px solid #ffffff0b; }
.ax-card.is-folded:not(.is-animating) > .ax-card-body { display: none; }
.ax-select { width: 100%; height: 28px; font-size: 12px; }
.ax-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ax-axis { display: flex; align-items: center; gap: 3px; min-width: 0; }
.ax-axis > span { flex: none; width: 10px; font-size: 10px; font-weight: 700; }
.ax-axis-x > span { color: #ff6b6b; }
.ax-axis-y > span { color: #6bdc7b; }
.ax-axis-z > span { color: #5aa9ff; }
.remote .field.num.ax-num { width: 100%; min-width: 0; height: 26px; padding: 0 5px; font-size: 11.5px; text-align: right; }
.ax-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ax-timing > label { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--dim); font-size: 11px; }
.ax-numwrap { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.ax-unit { flex: none; color: var(--dim); font-size: 10.5px; }
.ax-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; cursor: pointer; }
.ax-with { display: grid; gap: 3px; max-height: 148px; overflow-y: auto; padding: 4px; border: 1px solid #ffffff12; border-radius: 8px; background: #ffffff05; scrollbar-width: thin; }
.ax-with-item { display: flex; align-items: flex-start; gap: 6px; min-height: 24px; padding: 3px 4px; border-radius: 6px; font-size: 11.5px; line-height: 1.4; cursor: pointer; }
.ax-with-item:hover { background: #ffffff0a; }
.ax-with-item input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.ax-with-item .ax-with-ic { margin-top: 0; }
/* v2.0.18 '함께 사라질 상호작용' 의 자신(누른 버튼) — 맨 앞, 표시 */
/* v2.3.53 '자신' 은 막대 종류 색(--k — 등장 초록, 사라짐 분홍) — 등장에서도 고를 수 있어 붉은 경고처럼 보이지 않게 */
.ax-with-item.is-self { background: color-mix(in srgb, var(--k, #ff7a93) 7%, transparent); }
.ax-self { flex: none; margin-left: auto; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--k, #ff7a93) 40%, transparent); border-radius: 8px; color: color-mix(in srgb, var(--k, #ff7a93) 55%, #fff); font-size: 10.5px; line-height: 16px; }
.ax-with-name { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }

.ax-foot { position: sticky; bottom: -10px; display: grid; gap: 5px; margin: 0 -8px -10px; padding: 8px 8px 10px; border-top: 1px solid #ffffff12; background: #10141bf2; }
.ax-foot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ax-foot-btns .btn { justify-content: center; }
.ax-status { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.45; }
.remote-anim.is-playing .ax-status { color: #ffd479; }
.ax-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ax-chev svg, .ax-bar-fill, .ax-sec-chev { transition: none; }
}

/* ---- v1.21.0 애니메이션 타임라인 (assets/ix-timeline.js) — 카메라 타임라인(timeline.css)과 같은 모양:
   머리줄(재생 · 시간 · 키 추가 · 보간 · 레이어 · 보기 길이), 왼쪽 레이어 · 속성(◀ ◆ ▶ · 값), 오른쪽 시간자 · 막대 · 키 줄 · 지금 시간 선(주황) */
.timeline.axt {
  --axt-row: 28px;
  --axt-left: 300px;
  --axt-cti: #ff8a3d;
  --axt-key: #c3ccd6;
  position: relative;
  flex: none;
  height: 262px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: #0b0f13;
  -webkit-user-select: none;
  user-select: none;
}
.axt-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; }
.axt-head::-webkit-scrollbar { display: none; }
.axt .btn.small { height: 28px; gap: 6px; padding: 0 9px; flex: none; }
.axt .btn.icon.small { width: 28px; padding: 0; }
.axt .btn svg { width: 15px; height: 15px; }
.axt-name { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-right: 2px; color: #ffd479; font-size: 12.5px; }
.axt-name svg { width: 15px; height: 15px; }
.axt-title { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.axt-sep { flex: none; width: 1px; height: 22px; margin: 0 2px; background: #ffffff1c; }
.axt-spacer { flex: 1 0 6px; }
.axt-play { color: #ffd9bf; }
.axt-play.is-active { border-color: #ff8a3d99; background: #ff8a3d26; color: #ffe2cc; }
.axt-tc { flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 92px; padding: 0 4px 0 6px; line-height: 1.15; }
.axt-tc-main { font: 600 14px/1.15 ui-monospace, Consolas, monospace; color: #ffb27a; font-variant-numeric: tabular-nums; }
.axt-tc-sub { font: 10.5px/1.2 ui-monospace, Consolas, monospace; color: var(--dim); font-variant-numeric: tabular-nums; }
.axt-kglyph { flex: none; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 1px; background: var(--accent); }
.axt .field.axt-ease { flex: none; width: auto; height: 28px; padding: 0 22px 0 8px; font-size: 12px; }
.axt .field.axt-ease:disabled { opacity: .45; }
.axt-eases { flex: none; }
.axt-eases .seg-btn { height: 26px; padding: 0 7px; font-size: 11.5px; font-weight: 500; }
.axt-eases .seg-btn:disabled { opacity: .38; cursor: not-allowed; }
.axt-eases .seg-btn[aria-pressed="true"] { background: #2fd3a826; color: #c4f7e8; box-shadow: inset 0 0 0 1px #2fd3a866; }
.axt .field.axt-addlayer, .axt .field.axt-view { flex: none; width: auto; height: 28px; padding: 0 22px 0 8px; font-size: 12px; }

.axt-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; outline: none; scrollbar-width: thin; }
.axt-grid { position: relative; display: grid; grid-template-columns: var(--axt-left) minmax(0, 1fr); align-content: start; min-height: 100%; }
.axt-corner, .axt-ruler { position: sticky; top: 0; z-index: 4; height: 26px; border-bottom: 1px solid #ffffff17; background: #0d1217; }
.axt-corner { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-right: 1px solid #ffffff17; font-size: 10.5px; letter-spacing: .04em; color: var(--dim); }
.axt-ruler { cursor: pointer; overflow: hidden; }
.axt-tick { position: absolute; bottom: 0; width: 0; height: 5px; border-left: 1px solid #ffffff2b; pointer-events: none; }
.axt-tick.is-major { height: 9px; border-left-color: #ffffff63; }
.axt-tick > span { position: absolute; left: 3px; bottom: 8px; font: 10px/1 ui-monospace, Consolas, monospace; color: #8d99a8; white-space: nowrap; }
.axt-end { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #ffd47999; pointer-events: none; }
.axt-dim { color: var(--dim); font-size: 10.5px; }
.axt-lcell { height: var(--axt-row); display: flex; align-items: center; gap: 5px; min-width: 0; padding: 0 8px 0 6px; border-right: 1px solid #ffffff17; border-bottom: 1px solid #ffffff0a; background: #0d1217; font-size: 12px; color: var(--muted); }
.axt-lcell.axt-layer { background: #131a21; color: var(--text); font-size: 12.5px; }
.axt-lcell.axt-layer.is-current { box-shadow: inset 3px 0 0 var(--accent); }
.axt-lcell.axt-layer.is-missing .axt-lname { color: #ffd479; }
.axt-hint-cell { grid-column: 1 / -1; color: var(--dim); }
.axt-twirl, .axt-twirl-pad { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.axt-twirl { border: 1px solid var(--line); } /* v2.0.5 단추 선 (자리 채움 -pad 는 빼고) */
.axt-twirl:hover { background: #ffffff12; border-color: #ffffff38; color: var(--text); }
.axt-twirl svg { width: 13px; height: 13px; transform: rotate(-90deg); transition: transform .25s; }
.axt-twirl[aria-expanded="true"] svg { transform: none; }
.axt-type { flex: none; padding: 0 5px; border-radius: 5px; background: #3b74e0; color: #fff; font-size: 9.5px; font-weight: 700; line-height: 16px; }
.axt-type.is-splat { background: var(--gradient); }
.axt-type.is-group { background: #8a68d8; } /* v2.0.26 레이어 탭의 그룹 */
.axt-lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.axt-tag { flex: none; padding: 0 5px; border: 1px solid #ffd47966; border-radius: 5px; color: #ffd479; font-size: 9.5px; line-height: 15px; }
.axt-lbtns { flex: none; display: flex; align-items: center; gap: 3px; }
.axt .btn.small.axt-mini { height: 22px; gap: 4px; padding: 0 6px; font-size: 11px; }
.axt .btn.small.icon.axt-mini-icon { width: 22px; height: 22px; }
.axt .btn.small.icon.axt-mini-icon svg { width: 13px; height: 13px; }
.axt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.axt-prow { padding-left: 8px; }
.axt-prow.is-animated .axt-pname { color: var(--text); }
.axt-navs { flex: none; display: flex; align-items: center; }
.axt-nav { display: grid; place-items: center; width: 18px; height: 20px; padding: 0; border: 1px solid var(--line); /* v2.0.5 단추 선 */ border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.axt-nav:hover:not(:disabled) { background: #ffffff12; border-color: #ffffff38; color: var(--text); }
.axt-nav:disabled { opacity: .28; cursor: not-allowed; }
.axt-nav svg { width: 12px; height: 12px; }
.axt-next svg { transform: rotate(180deg); }
.axt-navkey .axt-glyph { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.axt-navkey.is-on { color: var(--accent); }
.axt-navkey.is-on .axt-glyph { fill: currentColor; }
.axt-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axt-vals { flex: none; display: grid; grid-template-columns: repeat(3, 52px); gap: 3px; }
.axt-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; }
.axt-num:hover { background: #ffffff14; }
.axt-num:focus { outline: none; border-color: var(--accent); background: var(--field); color: var(--text); cursor: text; }
.axt-num.is-scrubbing { box-shadow: 0 0 0 2px #4f9dff66; }

.axt-lane { position: relative; height: var(--axt-row); border-bottom: 1px solid #ffffff0a; overflow: hidden; background: #0a0e12; }
.axt-lane.is-layer { background: #10161c; }
.axt-key, .axt-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; }
.axt-skey { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: rotate(45deg); border-radius: 1px; background: #8d99a8; cursor: default; pointer-events: none; }
.axt-glyph { width: 12px; height: 12px; overflow: visible; fill: var(--axt-key); stroke: #0a0e12; stroke-width: .9; }
.axt-key:hover .axt-glyph { fill: #fff; }
.axt-key.is-selected .axt-glyph { fill: var(--accent); filter: drop-shadow(0 0 4px #2fd3a8b3); }
.axt-clip { position: absolute; top: 4px; bottom: 4px; z-index: 1; display: flex; align-items: center; min-width: 6px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--k) 70%, transparent); border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 42%, transparent), color-mix(in srgb, var(--k) 22%, transparent)); color: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; cursor: grab; }
.axt-clip:active { cursor: grabbing; }
.axt-clip.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 12px color-mix(in srgb, var(--k) 70%, transparent); }
.axt-clip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.axt-clip-l, .axt-clip-r { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.axt-clip-l { left: 0; }
.axt-clip-r { right: 0; }
.axt-cti { position: absolute; top: 0; bottom: 0; left: 0; z-index: 5; width: 0; border-left: 1.5px solid var(--axt-cti); pointer-events: none; }
.axt-cti[hidden] { display: none; }
.axt-cti-head { position: sticky; top: 0; display: block; width: 13px; height: 14px; margin-left: -7.2px; border-radius: 3px 3px 7px 7px; background: var(--axt-cti); pointer-events: auto; cursor: ew-resize; }
.axt-empty { grid-column: 1 / -1; padding: 24px; color: var(--dim); text-align: center; font-size: 12.5px; }
.axt-status { flex: none; padding: 5px 10px 6px; border-top: 1px solid #ffffff0d; background: #0d1217; font-size: 11px; line-height: 1.45; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axt-status.is-flash { color: #c4f7e8; }
@media (prefers-reduced-motion: reduce) {
  .axt-twirl svg { transition: none; }
}

/* v1.21.0 리모컨: 막대 추가 둘 · 움직임(키 트랙) 줄 · 아래 단추 셋 · 타임라인에서 고른 카드 */
.ax-add.ax-add-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* v2.3.22 사라짐 단계: 추가 둘 + 거꾸로 채우기 */
.ax-add.ax-add-2.ax-add-refill { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.ax-refill-btn { padding: 0 8px; white-space: nowrap; }
.ax-tracks { display: grid; gap: 4px; }
.ax-track { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 5px; row-gap: 1px; min-height: 30px; padding: 5px 4px 4px 11px; border: 1px solid #ffffff17; border-radius: 9px; background: #0d1218; }
.ax-track > .ax-kind { grid-row: 1 / span 2; align-self: start; margin-top: 1px; }
.ax-track > .ax-time { grid-row: 2; grid-column: 2; justify-self: start; }
.ax-track > .btn.icon { grid-row: 1 / span 2; }
.ax-track::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.ax-track.is-missing { border-color: #ffd47955; }
.ax-track .btn.icon { flex: none; width: 24px; height: 24px; padding: 0; }
.ax-track .btn.icon svg { width: 13px; height: 13px; }
/* v2.3.33 움직임 추가 줄 — 오브젝트 고르기는 한 줄 전체, 아래 줄에 속성 · (단계) · 키 트랙 (예전 한 줄의 58 · 64 px 선택 칸에서 '사라짐',
   '위치' 글이 잘리고 오브젝트 이름 칸이 좁아졌다) */
.ax-motion-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 4px; align-items: center; }
.ax-motion-add > .field.ax-pick { grid-column: 1 / -1; }
.ax-motion-add > select.ax-select { padding: 0 24px 0 9px; }
.ax-motion-add > .ax-select { height: auto; min-height: 30px; }
.ax-motion-add .btn { height: 28px; gap: 4px; padding: 0 8px; }
.ax-foot-btns.ax-foot-3 { grid-template-columns: 1.2fr 1fr 1fr; }
.ax-foot-btns .btn.is-active { background: var(--accent-soft); border-color: #2fd3a880; color: #bff5e6; }
.ax-card.is-focus { box-shadow: 0 0 0 1.5px var(--k); }

/* v1.23.0 오브젝트 고르기 (ix-anim.js objPicker) — 고른 이름을 여러 줄로 다 보이는 단추 + 누르면 목록 (문서 위 고정 칸) */
.field.ax-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 3px; width: 100%; min-width: 0; height: auto; min-height: 30px; padding: 5px 6px 5px 9px; text-align: left; cursor: pointer; }
.ax-pick-name { grid-column: 1; min-width: 0; font-size: 12px; line-height: 1.38; color: var(--text); overflow-wrap: anywhere; word-break: keep-all; white-space: normal; }
.ax-pick-tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 3px; }
.ax-pick-tags[hidden] { display: none; }
.ax-pick-chev { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--dim); }
.ax-pick-chev svg { width: 13px; height: 13px; transition: transform .2s ease; }
.ax-pick[aria-expanded="true"] .ax-pick-chev svg { transform: rotate(180deg); }
.ax-pick[aria-expanded="true"] { border-color: var(--accent); }
.ax-tag { padding: 0 5px; border-radius: 4px; background: #ffffff12; color: var(--dim); font-size: 10px; line-height: 16px; white-space: nowrap; }
.ax-tag.is-warn { background: #ffd4791f; color: #ffd479; }
.ax-pick-pop {
  position: fixed; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  border: 1px solid #ffffff26; border-radius: 10px; background: #10161df7; color: var(--text);
  box-shadow: 0 16px 40px #000b, 0 0 0 1px #0006; outline: none; scrollbar-width: thin;
  -webkit-user-select: none; user-select: none; animation: remote-in .14s ease-out;
}
.ax-pick-opt { display: grid; gap: 3px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.ax-pick-opt.is-active { background: #2fd3a81f; }
/* v2.2.18 다른 계정 것 — 보이되 고르지 못함 */
.ax-pick-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.ax-pick-opt.is-disabled.is-active { background: #ffffff0a; }
.ax-with-item.is-other { opacity: .6; cursor: not-allowed; }
.ax-pick-opt.is-cur { box-shadow: inset 2px 0 0 var(--accent); }
.ax-pick-oname { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; word-break: keep-all; }
.ax-pick-opt.is-cur .ax-pick-oname { color: #bff5e6; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ax-pick-pop { animation: none; } .ax-pick-chev svg { transition: none; } }

/* v2.3.10 애니메이션 흐름 — (시작) 등장 (중간) 사라짐 (끝) 세로 줄기 (ix-anim.js flowBlock) */
.ax-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* v2.3.53 줄기: 마디(카드)마다 제 점 가운데(왼쪽 -10 px, 위 18 px)에서 다음 카드 점 가운데까지 한 토막 — 그 마디 색. 카드 사이 8 px 를 넘어
   다음 점 가운데(18 px)까지라 높이가 바뀌어도 늘 점과 점 사이 (예전 한 줄은 위 64 px 고정이라 머리 카드 안을 지나고 아래 끝이 남았다) */
.ax-flow-rail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 16px; }
.ax-flow-rail > :not(:last-child)::before { content: ""; position: absolute; left: -11px; top: 18px; bottom: -26px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--k, #8ecbff) 42%, transparent); pointer-events: none; }
.ax-flow-rail > .is-off:not(:last-child)::before { background: #ffffff1c; }
.ax-flow-head { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff05; }
.ax-flow-head > .ax-trigger + * { padding-top: 7px; border-top: 1px solid #ffffff0f; }
.ax-node { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 9px 9px; border: 1px solid #ffffff17; border-radius: 10px; background: #0d1218; transition: border-color .25s, box-shadow .25s; }
.ax-node-dot { position: absolute; left: -16px; top: 12px; width: 12px; height: 12px; border: 2px solid var(--k); border-radius: 50%; background: #10141b; box-shadow: 0 0 0 3px #10141b; }
.ax-node-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ax-node-head { display: flex; align-items: center; gap: 6px; }
.ax-node-label { color: var(--k); font-size: 12px; }
.ax-node-en { color: var(--dim); font-size: 9.5px; letter-spacing: .08em; }
.ax-node-now { display: none; margin-left: auto; padding: 0 7px; border-radius: 8px; background: var(--k); color: #061014; font-size: 10px; font-weight: 700; line-height: 16px; }
.ax-node-param { grid-template-columns: 62px minmax(0, 1fr); }
.ax-node-timer { display: block; height: 3px; border-radius: 2px; background: var(--k); transform-origin: left center; }
.ax-node-timer[hidden] { display: none; }
.ax-node.is-now { border-color: var(--k); box-shadow: 0 0 0 1px var(--k), 0 0 18px color-mix(in srgb, var(--k) 30%, transparent); }
.ax-node.is-now .ax-node-now { display: inline-block; }
.ax-node.is-now .ax-node-dot { background: var(--k); animation: ax-pulse 1.1s ease-in-out infinite; }
.ax-stage::after { content: ""; position: absolute; left: -16px; top: 12px; width: 12px; height: 12px; border-radius: 3px; background: var(--k); box-shadow: 0 0 0 3px #10141b; }
.ax-stage.is-now { border-color: var(--k); box-shadow: 0 0 0 1px var(--k), 0 0 18px color-mix(in srgb, var(--k) 28%, transparent); }
.ax-stage.is-now::after { animation: ax-pulse 1.1s ease-in-out infinite; }
.ax-stage.is-off::after { background: #ffffff33; }
.ax-stage.is-off > .ax-sec-body > :not(.ax-off-note) { opacity: .38; pointer-events: none; }
.ax-off-note { margin: 0; padding: 7px 9px; border: 1px dashed #ffd47966; border-radius: 8px; color: #ffd479; font-size: 11.5px; line-height: 1.5; }
@keyframes ax-pulse { 0%, 100% { box-shadow: 0 0 0 3px #10141b; } 50% { box-shadow: 0 0 0 3px #10141b, 0 0 0 7px color-mix(in srgb, var(--k) 45%, transparent); } }
@keyframes ax-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* v2.3.10 (시작) 시작할 때 초기화할 상호작용 */
.ax-reset { display: grid; gap: 6px; padding: 6px 8px; border: 1px solid #ffffff14; border-radius: 8px; background: #ffffff05; }
.ax-reset.is-on { border-color: #ff7a9355; background: #ff7a930a; }
.ax-reset-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; }
.ax-reset-head > small { margin-left: auto; font-weight: 400; }
.ax-reset-head .ax-reset-n { color: #ffb4c0; }
.ax-reset-head[aria-expanded="false"] .ax-chev svg { transform: rotate(-90deg); }
.ax-reset-body { display: grid; gap: 6px; }
.ax-reset-all { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid #ff7a9333; border-radius: 7px; background: #ff7a930a; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ax-reset-all input { flex: none; margin: 0; accent-color: var(--accent); }
.ax-reset-all small { font-weight: 400; }
.ax-reset-body[hidden] { display: none; }
.ax-reset-foot { display: flex; justify-content: flex-end; }
.ax-reset-foot .btn { height: 24px; padding: 0 8px; font-size: 11px; }
/* v2.3.13 동기화 한 줄 (리모컨 (끝) 아래 · 왼쪽 상호작용 칸 — 활성화 + 이름) */
.ax-sw-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.ax-sw-line .ax-sw-name:disabled { opacity: .45; }
.ix-sw-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; }
.ix-sw-line + .ix-sw-line { margin-top: 7px; }
.ix-sw-line[hidden] { display: none; }
.ix-sw-label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; font-size: 12px; }
.ix-sw-line .field { min-width: 0; height: 30px; }
.ix-sw-line .field:disabled { opacity: .45; }
/* v2.3.14 동기화 변수 고르기 (리모컨 · 왼쪽 편집 칸) */
.ax-sw-vars { display: grid; gap: 6px; }
.ax-vars { display: grid; gap: 5px; }
.ax-vars-all { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid #2fd3a833; border-radius: 7px; background: #2fd3a80a; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ax-vars-all input { flex: none; margin: 0; accent-color: var(--accent); }
.ax-vars-all small { font-weight: 400; }
.ax-vars-list { max-height: 180px; }
/* v2.3.16 긴 목록 — 체크 목록 묶음 접기 · 찾기, 상호작용 탭 찾기 칸 · 모두 접기, 오브젝트 찾기 */
.ax-list { display: grid; gap: 5px; min-width: 0; }
.ax-list-find { height: 28px; font-size: 12px; }
.ax-with-sec.is-toggle { display: flex; align-items: center; gap: 5px; padding: 2px 3px; border-radius: 5px; cursor: pointer; user-select: none; }
.ax-with-sec.is-toggle:hover { background: #ffffff0a; color: var(--text, #e9eef3); }
.ax-with-sec.is-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.ax-sec-chev { display: inline-flex; transition: transform .32s cubic-bezier(.22,.68,.2,1); } /* v2.3.18 줄 접힘(0.32초)과 함께 */
.ax-sec-chev svg { width: 11px; height: 11px; }
.ax-with-sec.is-closed .ax-sec-chev { transform: rotate(-90deg); }
.ax-sec-name { flex: 1; min-width: 0; }
.ax-sec-count { font-weight: 600; opacity: .85; }
.ax-with-sec[hidden], .ax-with-item[hidden] { display: none; }
.ax-list-empty { padding: 4px 2px; }
/* v2.3.17 탭 맨 위 통합 찾기 (상호작용 · 3D 오브젝트 · 레이어 — findbar.js) */
.fb-bar { position: sticky; top: 0; z-index: 6; margin: 0 -8px 10px; padding: 8px 8px 9px; background: var(--panel, #0f1419); border-bottom: 1px solid #ffffff12; }
.fb-row { display: flex; align-items: center; gap: 8px; }
/* v2.3.64 (사용자: 찾기 칸이 위 탭과 애매하게 떨어져 있음 — 간격을 좁혀 한 칸으로) 탭 바로 밑에 붙인 한 덩어리 머리: 탭 아래 여백을 없애고,
   찾기 칸은 탭 패널 위 여백(10 px)을 덮어 스크롤 칸 맨 위에 붙는다 (예전에는 사이 20 px 로 아래 목록이 비쳐 보였다). 바탕은 편집 칸과 같게,
   찾기 칸 좌우를 탭 줄과 맞춤 */
.ed-panel > .tabs { margin-bottom: 0; }
.tabpanel > .fb-bar:first-child, .tabpanel > [hidden]:first-child + .fb-bar { top: -10px; margin-top: -10px; padding: 8px 10px 9px; background: #0d1115; }
.fb-row .field { flex: 1; min-width: 0; height: 32px; }
.fb-row .btn { flex: none; white-space: nowrap; }
/* v2.3.33 스위치 — 누를 때 바꿀 애니메이션 고르기 (편집 칸) */
.ix-asw-list { display: grid; gap: 4px; max-height: 280px; overflow: auto; margin: 6px 0 8px; padding: 1px; }
.ix-asw-item { display: grid; grid-template-columns: auto 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #ffffff12; border-radius: 8px; background: #ffffff05; cursor: pointer; }
.ix-asw-item:hover { border-color: #ffffff26; }
.ix-asw-item:has(input:checked) { border-color: #2fd3a870; background: #2fd3a80d; }
.ix-asw-item.is-missing { grid-template-columns: 22px minmax(0, 1fr) auto; border-color: #ffd47955; cursor: default; }
.ix-asw-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.25px solid #2fd3a8; box-sizing: border-box; color: #fff; }
.ix-asw-ic svg { width: 13px; height: 13px; }
.ix-asw-text { min-width: 0; display: grid; gap: 1px; }
.ix-asw-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); }
.ix-asw-text small { color: var(--muted); font-size: 11px; line-height: 1.35; }
/* v2.3.33 목록 보기 고르기 (간소화 · 전체보기) */
.fb-row.ix-view-row { margin-top: 7px; }
.ix-view-label { flex: none; color: var(--muted); font-size: 12px; }
.ix-view-seg { flex: 1; display: flex; }
.ix-view-seg .seg-btn { flex: 1 1 0; justify-content: center; height: 28px; font-size: 12px; }
/* v2.3.33 상호작용 목록 '간소화'(기본) — 레이어 탭처럼 한 줄: 아이콘 · 이름 · (마우스를 올리거나 고르면) 단추. 종류별 설명 글 · 부제 · 썸네일 · 정보는
   숨기고, 보이지 않는 단추가 눌리지 않게 visibility 로 감춘다. '전체보기' 는 예전 그대로 */
#tab-ann.ix-compact .ix-group > .hint { display: none; }
#tab-ann.ix-compact .ix-list { gap: 1px; margin-top: 6px; }
#tab-ann.ix-compact .ix-item { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 0; min-height: 32px; padding: 2px 3px 2px 6px; border-color: transparent; border-radius: 7px; background: transparent; }
#tab-ann.ix-compact .ix-item:hover { border-color: transparent; background: #ffffff0a; }
#tab-ann.ix-compact .ix-item.is-selected { border-color: #2fd3a870; background: #2fd3a814; }
#tab-ann.ix-compact .ix-ic { width: 22px; height: 22px; border-width: 1.25px; }
#tab-ann.ix-compact .ix-ic svg { width: 13px; height: 13px; }
#tab-ann.ix-compact .ix-sub, #tab-ann.ix-compact .ix-meta, #tab-ann.ix-compact .ix-thumb { display: none; }
#tab-ann.ix-compact .ix-title { font-size: 12.5px; font-weight: 500; color: #cfd8e2; }
#tab-ann.ix-compact .ix-item.is-selected .ix-title { color: var(--text); font-weight: 600; }
#tab-ann.ix-compact .ix-tools { grid-column: auto; gap: 3px; visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility .15s ease; }
#tab-ann.ix-compact .ix-item:hover .ix-tools, #tab-ann.ix-compact .ix-item.is-selected .ix-tools, #tab-ann.ix-compact .ix-item:focus-within .ix-tools { visibility: visible; opacity: 1; }
#tab-ann.ix-compact .ix-tools .btn.icon { width: 24px; height: 24px; }
.fb-note { margin: 6px 0 0; }
.fb-note[hidden], .fb-results[hidden] { display: none; }
.fb-results { margin-top: 6px; max-height: min(52vh, 460px); overflow: auto; padding: 4px; border: 1px solid #2fd3a833; border-radius: 10px; background: #0b1016; box-shadow: 0 10px 28px #0009; scrollbar-width: thin; }
.fb-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 7px 6px 3px; color: var(--dim); font-size: 11px; font-weight: 700; }
.fb-sec:first-child { margin-top: 3px; }
.fb-sec small { font-weight: 600; }
.fb-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.fb-item:hover, .fb-item.is-active { background: #2fd3a81f; }
.fb-ic { grid-row: span 2; display: inline-flex; justify-content: center; color: #8ecbff; }
.fb-ic svg { width: 15px; height: 15px; }
.fb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fb-sub { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 11px; }
.fb-item mark { padding: 0 1px; border-radius: 3px; background: #2fd3a845; color: inherit; }
.fb-more { margin: 6px 6px 2px; color: var(--dim); font-size: 11px; }
#ix-edit { scroll-margin-top: 70px; }
body.is-colmode #obj-findbar, body.is-colmode #lyr-findbar { opacity: .4; pointer-events: none; }
/* v2.3.15 '동기화' 묶음 = 동기화 목록 (추가 없음) */
.ix-sw-list { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.ix-sw-list:empty { display: none; }
.ix-sw-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 7px; width: 100%; padding: 7px 9px; border: 1px solid #2fd3a833; border-radius: 8px; background: #2fd3a80a; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.ix-sw-item:hover { border-color: #2fd3a877; background: #2fd3a814; }
.ix-sw-item.is-selected { border-color: #2fd3a8; background: #2fd3a81f; }
.ix-sw-item:disabled { opacity: .5; cursor: not-allowed; }
.ix-sw-item-name { white-space: nowrap; }
.ix-sw-item-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ix-sw-item-meta { grid-column: 2 / -1; }
.ix-sw-old { margin-top: 10px; }
/* v2.3.14 방문자처럼 시험 — 탭 단추 · 3D 화면 위 안내 띠 */
.ix-vtest-row .btn[aria-pressed="true"] { border-color: #2fd3a8; color: #2fd3a8; background: #2fd3a814; }
/* v2.3.33 상호작용 묶음 맨 위의 미리보기 (예전 방문자처럼 시험) — 꽉 찬 강조 단추 + 설명, 시험 중이면 끝내기 */
.ix-preview-box { margin: 2px 0 12px; padding: 10px; border: 1px solid #2fd3a840; border-radius: 10px; background: #2fd3a80d; }
.ix-preview-box .ix-vtest-btn { width: 100%; justify-content: center; }
.ix-preview-box .ix-vtest-btn[aria-pressed="true"] { background: #0f2a24; border-color: #2fd3a8; color: #2fd3a8; }
.ix-preview-box .hint { margin: 8px 0 0; }
.vtest-bar { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 6px 6px 14px; border: 1px solid #2fd3a8; border-radius: 10px; background: #0b1016eb; color: #e9fff8; font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 24px #0009; }
.vtest-bar[hidden] { display: none; }
.vtest-bar b { flex: none; color: #2fd3a8; white-space: nowrap; }
.vtest-bar span { min-width: 0; color: var(--muted); }
.vtest-bar .btn { flex: none; }
/* v2.3.14 왼쪽 동기화 · 동기화 적용 — 줄 아래 설명 · 경고 · 변수 */
.ix-sw-box[hidden] { display: none; }
.ix-sw-box + .ix-sw-box { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #ffffff14; }
.ix-sw-box .hint.ix-warn { margin-top: 4px; }
.ix-sw-vars { display: grid; gap: 5px; margin-top: 6px; }
.ix-sw-vars:empty { display: none; }
.ix-sw-sub { font-size: 11.5px; font-weight: 600; }
.ix-sw-sub small { font-weight: 400; }
/* v2.3.13 (끝) 아래 동기화 칸 */
.ax-swnode .ax-node-dot { border-radius: 3px; }
.ax-swnode.is-on { border-color: #2fd3a866; background: linear-gradient(180deg, #2fd3a80d, #0d1218); }
.ax-swnode .ax-switch-row > span:first-child { color: var(--text); font-weight: 600; }
/* 그룹 안내 · 전환 */
.ax-hint-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #8ecbff40; border-radius: 8px; background: #8ecbff0d; color: #cfe6ff; font-size: 11px; line-height: 1.5; }
.ax-hint-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.ax-hint-row .btn { flex: none; height: 24px; padding: 0 8px; font-size: 11px; }
.ax-chip.is-ingroup { border-color: #8ecbff55; }
/* 고르기 목록 묶음 머리 · 찾기 · 고를 수 없는 까닭 */
.ax-pick-sec { position: sticky; top: -4px; z-index: 1; margin: 4px -4px 2px; padding: 5px 12px 4px; border-bottom: 1px solid #ffffff12; background: #10161df7; color: var(--dim); font-size: 10.5px; font-weight: 700; }
.ax-pick-sec[hidden], .ax-pick-opt[hidden] { display: none; }
.ax-pick-find { position: sticky; top: -4px; z-index: 2; width: 100%; height: 28px; margin-bottom: 2px; font-size: 12px; }
/* 찾기 칸이 있으면 묶음 머리는 그 아래에 붙는다 (스크롤할 때 찾기 칸 뒤로 숨지 않게) */
.ax-pick-pop.has-find .ax-pick-sec { top: 26px; }
.ax-pick-why { color: #ffd479; font-size: 10.5px; line-height: 1.4; }
.ax-with-sec { margin: 5px 2px 1px; color: var(--dim); font-size: 10.5px; font-weight: 700; }
.ax-with-sec:first-child { margin-top: 0; }
/* 동기화 적용 */
.ax-swsec.is-on { border-color: #2fd3a855; }
.ax-sw-name { width: 100%; height: 28px; font-size: 12px; }
.ax-stage-tag { margin-left: 5px; vertical-align: 1px; }
.ax-motion-add.has-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
/* 확인할 것 · 아래 단추 넷 (v2.3.56 '적용' 단추 걷음) */
.ax-probs { display: grid; gap: 3px; margin: 0; padding: 6px 8px 6px 22px; border: 1px solid #ffd47933; border-radius: 8px; background: #ffd47909; font-size: 11px; line-height: 1.45; }
.ax-probs[hidden] { display: none; }
.ax-probs li.is-error { color: #ff9fae; }
.ax-probs li.is-warn { color: #ffd479; }
/* v2.3.58 확인 목록의 한 번에 고치기 */
.ax-probs .ax-prob-fix { display: flex; margin: 4px 0 2px; height: 24px; padding: 0 9px; font-size: 11px; }
.ax-foot-btns.ax-foot-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-foot-4 .btn { gap: 3px; padding: 0 4px; font-size: 11px; }
/* v2.3.12 편집 칸 동기화 — '애니메이션 효과 적용' 묶음 안 (고르면 위 애니메이션 효과는 꺼지고 잠김) */
.ix-anim-sec .ix-link-sec { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #ffd47933; }
.ix-anim-sec .ix-link-sec[hidden] { display: none; }
.ix-link-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ix-anim-sec .ix-link-row { margin: 0; }
.ix-link-pick { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ix-link-pick[hidden] { display: none; }
.ix-link-pick .field { flex: 1; min-width: 0; }
.ix-link-head label { font-weight: 600; }
.ix-link-ic { display: inline-flex; color: #8ecbff; }
.ix-link-ic svg { width: 14px; height: 14px; }
.ix-anim-sec.is-linked { border-color: #8ecbff66; background: linear-gradient(180deg, #8ecbff0d, #8ecbff05); }
.ix-anim-sec.is-linked .ix-anim-row { opacity: .5; }
.ix-anim-sec.is-linked .ix-anim-state { color: #cfe6ff; }
/* v2.3.10 동기화 (예전 동기화 활성화 자리) — 누르면 바꿈 · 켜기 · 끄기 */
.ix-link-sec .ix-link-act { display: flex; margin-top: 6px; }
.ix-link-sec .ix-link-act[hidden] { display: none; }
.ix-link-sec .ix-link-act { align-items: center; gap: 8px; }
.ix-link-sec .ix-link-actlabel { flex: none; color: var(--dim); font-size: 11.5px; }
.ix-link-sec .ix-link-act .seg { flex: 1; display: flex; min-width: 0; }
.ix-link-sec .ix-link-act .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; font-size: 11.5px; }
.ix-link-sec .ix-link-hint { margin-top: 6px; }
/* v2.3.10 타임라인 단계 */
.axt-stage { flex: none; display: flex; }
.axt-stage .seg-btn { height: 26px; padding: 0 9px; font-size: 11.5px; }
.axt-stage .seg-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .ax-node.is-now .ax-node-dot, .ax-stage.is-now::after { animation: none; } .ax-node { transition: none; } }

/* v2.0.1 상호작용 리모컨 (interactions.js renderRemote) — 처음 자리는 3D 화면 왼쪽 위 (오른쪽 위는 애니메이션 리모컨) */
.remote.remote-ix { width: 264px; }
.remote.remote-ix .remote-icon svg { color: #2fd3a8; }
/* v2.3.43 상호작용 리모컨만 넓게 (248 → 320 px — 세 칸 줄의 '카메라 다시' · '썸네일 다시' · '불러오기' · '도착 자리' 가 잘렸다, 좁은 3D 화면은 .remote 의 max-width) */
.remote.remote-ix { width: 320px; }
/* 맨 아래 '전체 상호작용 미리보기' — 위 줄과 선으로 나누고, 고른 것의 '미리보기'(강조 단추)와 다르게 은은한 강조 */
.remote-ix .remote-allpreview { margin-top: 2px; padding-top: 8px; border-top: 1px solid #ffffff12; }
.remote-ix .remote-allpreview > .btn { height: 30px; border-color: #2fd3a855; background: #2fd3a814; color: #bff5e6; }
.remote-ix .remote-allpreview > .btn:hover:not(:disabled) { border-color: #2fd3a8aa; background: #2fd3a824; }
.remote-ix .remote-adds { justify-content: space-between; gap: 4px; }
.remote-ix .remote-adds > .btn { flex: 1 1 0; min-width: 0; height: 30px; padding: 0; justify-content: center; }
.remote-ix .remote-adds > .btn svg { width: 16px; height: 16px; }
.remote-ix .remote-adds > .btn.is-active { border-color: #2fd3a8; background: #2fd3a826; color: #bff5e6; box-shadow: 0 0 0 1px #2fd3a855 inset; }
.remote-ix .remote-row > .btn.is-active:not(.danger) { border-color: #2fd3a8aa; color: #bff5e6; }
.remote-ix .remote-lift > .remote-label { flex: none; font-size: 11.5px; color: var(--muted); }
.remote-ix .remote-lift > .remote-num { flex: 1 1 56px; width: auto; }
.remote-ix .remote-lift > .remote-unit { flex: none; font-size: 11px; color: var(--dim); }
/* v2.1.4 버튼 띄우기 줄 (좌우 · 높이) */
.remote-ix .remote-float > .remote-label { flex: none; font-size: 11.5px; color: var(--muted); }
.remote-ix .remote-float > .remote-num { flex: 1 1 44px; width: auto; min-width: 0; }
.remote-ix .remote-float > .remote-unit { flex: none; font-size: 11px; color: var(--dim); }
.remote-ix .remote-lift > .btn { flex: none; }
/* v2.3.43 '위치' 줄의 '바닥으로'(아이콘만) — 늘거나 눌리지 않게 (예전 flex 1 1 0 이라 248 px 에서 12 px 로 눌림 · 넓히면 늘어남) */
.remote-ix .remote-float > .btn { flex: none; width: 28px; padding: 0; justify-content: center; }

/* v2.2.16 미디어 효과 — 3D 화면에 끌어 그리는 네모 (SVG 덮개, 누름은 지나감) · 파일 창 · 편집 칸 */
.ixfx-draw { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }
.ixfx-draw polygon { fill: color-mix(in srgb, var(--accent, #2fd3a8) 18%, transparent); stroke: var(--accent, #2fd3a8); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.ixfx-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ixfx-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 104px; justify-content: center; }
.ixfx-pick > svg { display: block; margin: 0 auto; }
.ixfx-pick svg { width: 24px; height: 24px; }
.ixfx-preview { margin-top: 12px; border-radius: 10px; overflow: hidden; background: #0b0f12; display: flex; justify-content: center; }
.ixfx-preview img, .ixfx-preview video { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }
.ixfx-status { word-break: keep-all; }
/* v2.3.65 (사용자: 리모컨 간격처럼 — 단추 묶음끼리 붙어 있음) 줄 사이 6 px — 리모컨 .remote-body 의 grid gap 과 같게 (예전 0 px) */
.ixfx-sec { display: grid; gap: 6px; }
.ixfx-sec > .card-label { margin: 0; }
.ixfx-video { display: grid; gap: 6px; }
.ixfx-sec .row { gap: 8px; }
.ixfx-sec .row > label { flex: 0 0 auto; min-width: 72px; }
/* v2.3.64 (사용자: 미디어 효과 칸의 단추 간격 어색) 파일 단추 반반, 자리 · 방향 · 크기 숫자는 3D 오브젝트 칸 모양 — 이름 칸을 다른 줄(72 px)과 맞춤 */
.ixfx-files { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ixfx-files .btn { justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ixfx-sec .coords { margin-top: 0; }
.ixfx-coords .coord-row { grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: 6px; }
.ixfx-coords .coord-row > span { font-size: 12px; white-space: nowrap; }
.ixfx-coords .ixfx-ratio { height: 26px; min-width: 0; padding-inline: 4px; font-size: 11.5px; justify-content: center; white-space: nowrap; }
.ixfx-erase { display: grid; gap: 6px; }
.ixfx-gizmo-row { display: flex; }
.ixfx-gizmo-row .seg { flex: 1 1 auto; }
.ixfx-hotnote { margin: 0; word-break: keep-all; }
.ixfx-erase .hint { margin: 0; word-break: keep-all; }
.ixfx-sec .range { flex: 1 1 auto; min-width: 0; }
.ixfx-val { flex: 0 0 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12px; }
.ixfx-size { flex-wrap: wrap; justify-content: flex-start; }
.ixfx-size .field.narrow { flex: 0 0 54px; width: 54px; min-width: 0; padding-inline: 6px; }
.ixfx-size .btn { margin-left: auto; padding-inline: 8px; }
.ixfx-seg { flex: 1 1 auto; display: flex; flex-wrap: nowrap; min-width: 0; }
.ixfx-seg .seg-btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; white-space: nowrap; justify-content: center; }
.ixfx-gizmo .seg-btn svg { width: 14px; height: 14px; margin-right: 4px; flex: 0 0 auto; }
.ixfx-gizmo .seg-key { margin-left: 4px; }
.ixfx-file { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ixfx-info { word-break: keep-all; }

/* v2.2.19 버튼 아이콘 — 편집 칸 · 고르기 창 (ix-btnicon.js) */
.ixbi-cur { display: flex; align-items: center; gap: 10px; }
.ixbi-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(10, 14, 18, .86); color: var(--accent, #2fd3a8); box-shadow: inset 0 0 0 1px #ffffff1f; }
.ixbi-tile svg { width: 20px; height: 20px; }
.ixbi-tile img, .ixbi-img { display: block; width: 24px; height: 24px; object-fit: contain; }
.ixbi-cur-name { font-size: 12px; color: var(--muted); word-break: keep-all; }
.ixbi-sec .col-actions { margin-top: 8px; }
/* v2.3.41 이전으로 되돌리기 — 단추 끝 백업 아이콘 (선 아이콘은 단추 글자 색, 올린 그림은 그대로) */
.ixbi-undo-tile { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: rgba(10, 14, 18, .86); color: var(--accent, #2fd3a8); box-shadow: inset 0 0 0 1px #ffffff1f; }
.ixbi-undo-tile:empty { display: none; }
.ixbi-undo-tile svg { width: 11px; height: 11px; }
.ixbi-undo-tile img { display: block; width: 12px; height: 12px; object-fit: contain; }
.ixbi-modal { width: min(640px, calc(100vw - 32px)); }
.ixbi-modal .modal-body { display: flex; flex-direction: column; gap: 8px; max-height: min(70vh, 680px); overflow: auto; }
.ixbi-sub { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; }
.ixbi-sub small { font-weight: 400; }
.ixbi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ixbi-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 8px 4px 6px; border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff05; color: var(--text); cursor: pointer; font: inherit; }
.ixbi-cell svg { width: 22px; height: 22px; }
.ixbi-cell span { font-size: 10.5px; line-height: 1.25; color: var(--muted); text-align: center; word-break: keep-all; }
.ixbi-cell:hover, .ixbi-cell:focus-visible { border-color: var(--accent, #2fd3a8); background: #2fd3a814; outline: none; }
.ixbi-cell.is-cur { border-color: var(--accent, #2fd3a8); box-shadow: inset 0 0 0 1px var(--accent, #2fd3a8); }
.ixbi-msg { margin: 0; font-size: 12px; color: var(--muted); word-break: keep-all; }
.ixbi-msg.is-bad { color: #ff8a9a; }
.ixbi-note { margin: 0; word-break: keep-all; }
.ixbi-modal .modal-foot { display: flex; align-items: center; gap: 8px; }
.ixbi-flex { flex: 1 1 auto; }

/* v2.2.20 미디어 효과 재생 확인 */
.ixfx-play { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 9px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff12; }
.ixfx-play .card-label { margin: 0; }
.ixfx-playinfo { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; word-break: keep-all; min-height: 1.2em; }

/* v2.3.48 창을 닫으면 (ix-close.js) — 종류 고르기 아래 그 종류의 칸 */
.ix-close-body { display: grid; gap: 8px; margin-top: 8px; }
.ix-close-body[hidden] { display: none; }
.ix-close-body .seg { align-self: start; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.ix-close-body .ix-asw-list { margin: 0; }
.ix-close-anim, .ix-close-url, .ix-close-video, .ix-close-open { display: grid; gap: 8px; }
.ix-close-anim .card-label { margin: 2px 0 0; }
.ix-close-vsum { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #ffffff14; border-radius: 8px; background: #ffffff05; font-size: 12.5px; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.ix-close-hint { margin-top: 8px; }

/* v2.3.50 공통 · 개별 (F 키 거리 · 썸네일 디자인) */
.ix-own-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ix-own-num { display: inline-flex; align-items: center; gap: 4px; }
.ix-own-num[hidden] { display: none; }
.ix-own-num .field.num { width: 72px; }
.ix-own-note { margin-top: 6px; }
.ix-design-row { margin-top: 8px; }
.ix-design-row .ix-mk-label { min-width: 0; }
/* v2.3.56 썸네일 그림 정렬 (편집 칸 미리보기 아래) · v2.3.61 그림 맞춤 (맞춤 · 위치 9 칸 · 반복 · 바탕색 · 잘림 안내) */
.ix-align-row { margin: -2px 0 8px; }
.ix-align-row[hidden] { display: none; }
.ix-align-row .ix-mk-label { min-width: 0; }
.ix-look { display: grid; gap: 7px; margin: -2px 0 8px; }
.ix-look[hidden] { display: none; }
.ix-look .ix-align-row { margin: 0; }
.ix-pos-grid { display: grid; grid-template-columns: repeat(3, 24px); grid-auto-rows: 17px; gap: 3px; padding: 3px; border: 1px solid #ffffff1f; border-radius: 7px; background: #ffffff08; }
.ix-pos-btn { display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: background-color 140ms ease; }
.ix-pos-btn > .ix-pos-dot { width: 5px; height: 5px; border-radius: 50%; background: #ffffff59; transition: background-color 140ms ease, transform 140ms ease; }
.ix-pos-btn:hover > .ix-pos-dot { background: #ffffffb3; }
.ix-pos-btn[aria-checked='true'] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ix-pos-btn[aria-checked='true'] > .ix-pos-dot { background: var(--accent); transform: scale(1.5); }
.ix-pos-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ix-look-color { width: 34px; height: 24px; padding: 0; border: 1px solid #ffffff2e; border-radius: 6px; background: transparent; cursor: pointer; }
.ix-look-color.is-none { opacity: .45; }
.ix-look-note { margin: 0; }
.ix-look-note:empty { display: none; }
.ix-fkey-own { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12px; color: var(--muted); }
.ix-fkey-own[hidden] { display: none; }

/* v2.3.55 상호작용별 설정 — 탭 위 줄 · 편집 칸 요약 줄 (지금 값 칩 + 창 열기) */
.ix-bulk-line { margin: 2px 0 8px; padding: 8px 0 0; border-top: 1px solid #ffffff0f; }
.ix-bulk-line .ix-bulk-sum { flex: 1 1 auto; }
.ix-bulk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.ix-bulk-row[hidden] { display: none; }
.ix-bulk-info { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.ix-bulk-chip { padding: 1px 7px; border: 1px solid #ffffff1f; border-radius: 9px; color: var(--muted); font-size: 11px; line-height: 17px; white-space: nowrap; }
.ix-bulk-chip.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: color-mix(in srgb, var(--accent) 70%, #fff); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* v2.3.55 상호작용별 설정 창 (ix-bulk.js) — 공통 값 · 찾기 · 목록(머리 고정) · 바닥 */
dialog.modal.ixb-modal { width: min(760px, calc(100vw - 32px)); height: min(84vh, 860px); max-height: calc(100vh - 32px); overflow: hidden; }
dialog.modal.ixb-modal[open] { display: flex; flex-direction: column; }
.ixb-modal .modal-head h2 small { font-size: 12px; font-weight: 400; }
.ixb-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ixb-body > * { flex: none; }
.ixb-common { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff05; }
.ixb-crow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ixb-clabel { min-width: 150px; color: var(--text); font-weight: 600; }
.ixb-cl { color: var(--muted); }
.ixb-num { display: inline-flex; align-items: center; gap: 4px; }
.ixb-num .field.num { width: 66px; }
.ixb-hint { margin: 0 0 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.ixb-hint.is-warn { color: #ffcf86; }
.ixb-tools { display: flex; align-items: center; gap: 10px; }
.ixb-tools .ixb-search { flex: 1 1 auto; min-width: 0; }
.ixb-shown { flex: none; }
.ixb-body > .ixb-table { flex: 1 1 auto; min-height: 140px; overflow: auto; border: 1px solid #ffffff14; border-radius: 10px; }
.ixb-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 96px); align-items: center; min-height: 34px; padding: 0 10px; border-top: 1px solid #ffffff0a; }
.ixb-row[hidden], .ixb-group[hidden] { display: none; }
.ixb-head { position: sticky; top: 0; z-index: 1; min-height: 50px; padding-top: 4px; padding-bottom: 4px; border-top: 0; background: #121820; box-shadow: 0 1px 0 #ffffff14; color: var(--muted); font-size: 12px; }
.ixb-col { display: grid; justify-items: center; gap: 3px; }
.ixb-col b { color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ixb-count { color: var(--accent); font-weight: 700; }
.ixb-all { display: inline-flex; gap: 2px; }
.ixb-all .btn.small { min-height: 0; height: 19px; padding: 0 6px; font-size: 10.5px; }
.ixb-group { display: flex; align-items: center; gap: 7px; padding: 7px 10px 5px; border-top: 1px solid #ffffff10; background: #ffffff04; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ixb-group .ax-with-ic { width: 18px; height: 18px; }
.ixb-group .ax-with-ic svg { width: 10px; height: 10px; }
.ixb-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.ixb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ixb-name small { flex: none; }
.ixb-cell { display: flex; align-items: center; justify-content: center; gap: 5px; }
.ixb-cell input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ixb-cell input:disabled { cursor: not-allowed; }
.ixb-cell.is-off input { opacity: .4; }
.ixb-own { color: var(--muted); font-size: 10.5px; }
.ixb-own[hidden] { display: none; }
.ixb-row.is-changed { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ixb-row.is-focus { box-shadow: inset 3px 0 0 var(--accent); }
.ixb-row.is-disabled .ixb-title { color: var(--muted); }
.ixb-foot { align-items: center; padding-top: 12px; }
.ixb-sum { margin-right: auto; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
    .ixb-row { grid-template-columns: minmax(0, 1fr) repeat(3, 62px); }
    .ixb-clabel { flex: 1 1 100%; min-width: 0; }
}

/* v2.3.48 복제 놓기 안내 줄의 '복사본도 같은 대상으로 넣기' (안내 줄은 누름을 3D 화면으로 넘김 — 이 칸만 받는다) */
.ix-place-hint .ix-hint-dup { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; cursor: pointer; color: #e6fff7; }
.ix-place-hint .ix-hint-dup input { margin: 0; accent-color: #2fd3a8; cursor: pointer; }

/* v2.7.1 빠른 이동 '전환 이동' · '특정 조건 시 표시' (ix-move.js): 켜면 아래 칸이 펼쳐짐 */
.ix-qm-opt { margin-top: 10px; padding: 8px 10px 9px; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff05; }
.ix-qm-opt > .ix-check-row { margin: 0; }
.ix-qm-opt > .ix-check-row > label small { margin-left: 6px; font-size: 11px; }
.ix-qm-opt-body { display: grid; gap: 6px; padding-top: 8px; }
.ix-qm-opt-body .hint { margin: 0; }
.ix-qm-num { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.ix-qm-num > label { flex: 0 0 auto; min-width: 58px; }
.ix-qm-num > .field.num { flex: 0 0 64px; width: 64px; height: 28px; text-align: right; }
.ix-qm-num > small { min-width: 0; font-size: 11px; line-height: 1.35; }
.ix-qm-when-list .ax-with { max-height: 220px; }