/* Metalogy Spatial Editor — 인트로 스킨 편집 창 (v1.18.0, assets/ix-intro.js)
   Webflow 느낌의 어두운 편집 화면: 위 줄 · 왼쪽(요소 더하기 · 층) · 가운데 캔버스(뷰어 크기를 줄여 보임) · ⚙ 옵션 팝업.
   편집기 변수(--accent · --line · --text · --muted · --field)와 .modal · .btn · .seg 모양을 따른다. 접두어 ixi- */

/* ---- 창 (편집기 화면 거의 전체) */
dialog.modal.ixi-modal {
  width: calc(100vw - 24px); height: calc(100vh - 24px); max-width: none; max-height: none;
  overflow: hidden; border-radius: 14px; background: #0a0e12; backdrop-filter: none; -webkit-backdrop-filter: none;
}
dialog.modal.ixi-modal[open] { display: flex; flex-direction: column; }
dialog.modal.ixi-modal::backdrop { background: rgb(0 0 0 / 78%); }

/* 위 줄 */
.ixi-top { flex: none; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: #0d1217; }
.ixi-brand { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.ixi-brand-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gradient); color: #fff; }
.ixi-brand-ic svg { width: 16px; height: 16px; }
.ixi-brand-t { display: grid; min-width: 0; line-height: 1.25; }
.ixi-brand-t strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ixi-brand-t small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.ixi-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.ixi-flex { flex: 1; }
.ixi-dirty { margin-right: 6px; font-size: 12px; color: #ffd479; white-space: nowrap; }
.ixi-layoutseg .seg-btn { height: 28px; padding: 0 12px; }
.ixi-bgbtn.is-busy { opacity: .7; cursor: not-allowed; }
.ixi-top .btn.small svg { width: 15px; height: 15px; }

/* 몸통: 왼쪽 · 가운데 */
.ixi-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.ixi-modal.is-preview .ixi-left { opacity: .45; pointer-events: none; transition: opacity .3s; }

/* ---- 왼쪽: 요소 더하기 · 층 */
.ixi-left { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px; overflow: hidden; border-right: 1px solid var(--line); background: #0d1115; }
.ixi-ptitle { display: flex; align-items: center; gap: 6px; margin: 6px 2px 2px; font-size: 10.5px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.ixi-ptitle svg { width: 13px; height: 13px; }
.ixi-ptitle .ixi-count { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ixi-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ixi-add {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 9px;
  border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff06; color: #dfe6ee;
  font-size: 12px; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.ixi-add:last-child { grid-column: 1 / -1; }
.ixi-add:hover { border-color: #2fd3a866; background: #2fd3a80f; color: #fff; }
.ixi-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ixi-add-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #ffffff0d; color: var(--accent); }
.ixi-add-ic svg { width: 15px; height: 15px; }

.ixi-layers-wrap { position: relative; flex: 1; min-height: 80px; margin: 0 -4px; padding: 0 4px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ixi-layers { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ixi-layer {
  min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 3px 0 calc(3px + var(--d, 0) * 14px);
  border: 1px solid transparent; border-radius: 7px; color: #cfd8e2; font-size: 12.5px; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.ixi-layer:hover { background: #ffffff0a; }
.ixi-layer.is-sel { border-color: #2fd3a855; background: #2fd3a81a; color: #fff; }
.ixi-layer.is-hidden .ixi-ln, .ixi-layer.is-hidden .ixi-lk { opacity: .42; }
.ixi-layer.is-dragging { opacity: .35; }
.ixi-layer.is-drop-in { background: #2fd3a826; outline: 1px dashed var(--accent); }
.ixi-grip { flex: none; display: grid; place-items: center; width: 16px; color: var(--dim); cursor: grab; touch-action: none; }
.ixi-grip svg { width: 14px; height: 14px; }
.ixi-lk { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent); }
.ixi-lk svg { width: 15px; height: 15px; }
.ixi-layer.is-box .ixi-lk { color: #8fb6ff; }
.ixi-ln { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 도구는 올렸을 때 · 고른 줄에만 (이름이 넓게 보이도록) — 숨긴 줄은 눈 하나는 늘 */
.ixi-ltools { display: none; flex: none; }
.ixi-layer:hover .ixi-ltools, .ixi-layer.is-sel .ixi-ltools, .ixi-layer:focus-within .ixi-ltools { display: flex; }
.ixi-layer.is-hidden:not(:hover):not(.is-sel):not(:focus-within) .ixi-ltools { display: flex; }
.ixi-layer.is-hidden:not(:hover):not(.is-sel):not(:focus-within) .ixi-ltool:not(.is-on) { display: none; }
.ixi-ltools .btn.icon.small { width: 22px; height: 22px; }
.ixi-ltools .btn svg { width: 13px; height: 13px; }
.ixi-ltool.is-on { color: #ffd479; }
.ixi-dropmark { position: absolute; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 6px #2fd3a8; pointer-events: none; }
.ixi-empty { margin: 0; padding: 10px 4px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.ixi-left-hint { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--dim); }

/* ---- 가운데: 캔버스 */
.ixi-center { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #06090c; }
.ixi-canvas {
  position: relative; flex: 1; min-height: 0; overflow: hidden; outline: none;
  background-color: #07090c; background-image: radial-gradient(#ffffff12 1px, transparent 1px); background-size: 18px 18px;
}
.ixi-canvas.is-dragging { cursor: grabbing; }
.ixi-canvas .ixi-stage, .ixi-canvas .ixi-stage * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.ixi-frame { position: absolute; overflow: hidden; border-radius: 4px; background: #111a22; box-shadow: 0 0 0 1px #ffffff1f, 0 24px 70px #000c; }
.ixi-frame[data-layout="mobile"] { border-radius: 26px; box-shadow: 0 0 0 8px #161d24, 0 0 0 9px #2c3742, 0 30px 80px #000c; }
/* v2.2.13 태블릿 캔버스 — 휴대폰보다 얇은 테두리 */
.ixi-frame[data-layout="tablet"] { border-radius: 22px; box-shadow: 0 0 0 10px #161d24, 0 0 0 11px #2c3742, 0 30px 80px #000c; }
/* 뷰어 크기 그대로 (transform 으로 줄임) — 3D 화면 자리는 어두운 하늘색 */
.ixi-stage { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; background: linear-gradient(180deg, #1d3140 0%, #13212c 55%, #0a1016 100%); }
.ixi-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, #0b141b 60%); }
.ixi-bg { position: absolute; inset: -18px; background: center / cover no-repeat; filter: blur(5px) brightness(.88) saturate(1.05); }
.ixi-backdrop { position: absolute; inset: 0; pointer-events: none; }
.ixi-skin { position: absolute; inset: 0; }
/* PC 배치 재기 (휴대폰 배치에서 컨테이너 안팎으로 옮길 때 — 화면 밖에 1:1 로 잠깐 그림, ix-intro.js withPcRender) */
.ixi-measure { position: absolute; left: -30000px; top: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.ixi-closemock {
  position: absolute; top: 14px; right: 14px; z-index: 1000; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid #ffffff3a; border-radius: 50%; background: #0b1116b3; color: #fff; pointer-events: none; backdrop-filter: blur(6px);
}
.ixi-closemock svg { width: 20px; height: 20px; }
.ixi-closemock.is-phone { top: 16px; right: 16px; width: 46px; height: 46px; }
.ixi-modal.is-preview .ixi-closemock { pointer-events: auto; cursor: pointer; }

/* 덮개: 선택 틀 · 손잡이 · ⚙ · 맞춤 선 */
.ixi-overlay { position: absolute; inset: 0; pointer-events: none; }
.ixi-modal.is-preview .ixi-overlay > :not(.ixi-inline) { display: none; }
.ixi-hover { position: absolute; outline: 1px dashed #2fd3a8b0; pointer-events: none; }
.ixi-hover::after { content: attr(data-name); position: absolute; left: -1px; top: -20px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: 4px; background: #0b1116e6; color: #c9f7ea; font-size: 10.5px; white-space: nowrap; }
.ixi-sel { position: absolute; outline: 1.5px solid var(--accent); pointer-events: none; }
.ixi-handle { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1.5px solid var(--accent); border-radius: 2px; background: #fff; pointer-events: auto; touch-action: none; }
.ixi-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.ixi-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.ixi-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.ixi-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.ixi-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.ixi-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.ixi-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.ixi-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }
.ixi-sel.is-small .ixi-handle.is-n, .ixi-sel.is-small .ixi-handle.is-s, .ixi-sel.is-small .ixi-handle.is-e, .ixi-sel.is-small .ixi-handle.is-w { display: none; }
.ixi-sel-label { position: absolute; max-width: 340px; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px; border-radius: 5px; background: var(--accent); color: #04140f; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
/* v1.22.0: 버튼(원)은 돌리지 않고 안의 아이콘만 돌린다 — 원 안 정중앙 (아이콘 16px = 안쪽 24px 의 정수 4px 자리) */
.ixi-gear {
  position: absolute; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; padding: 0;
  border: 1px solid #2fd3a8aa; border-radius: 50%; background: #0b1116; color: #bff5e6; cursor: pointer; pointer-events: auto;
  box-shadow: 0 4px 14px #0008; transition: background-color .2s, color .2s;
}
.ixi-gear:hover, .ixi-gear.is-on { background: var(--accent); color: #04140f; }
.ixi-gear svg { display: block; width: 16px; height: 16px; transform-origin: 50% 50%; transition: transform .2s; }
.ixi-gear:hover svg, .ixi-gear.is-on svg { transform: rotate(35deg); }
.ixi-guide { position: absolute; background: #ff4fa3; pointer-events: none; }
.ixi-guide.is-x { top: 0; bottom: 0; width: 1px; }
.ixi-guide.is-y { left: 0; right: 0; height: 1px; }

/* 캔버스에서 바로 글 고치기 */
.ixi-inline { position: absolute; z-index: 5; display: grid; gap: 4px; pointer-events: auto; }
.ixi-inline-input { width: 100%; padding: 6px 8px; border: 1.5px solid var(--accent); border-radius: 6px; outline: none; background: #071019f2; color: #fff; box-shadow: 0 10px 30px #000a; resize: none; }
.ixi-inline-hint { justify-self: start; padding: 2px 7px; border: 1px solid transparent; border-radius: 5px; background: #0b1116e6; font-size: 11px; color: var(--muted); }
.ixi-inline-hint.is-warn { border-color: #ffd47966; color: #ffd479; }

/* 안내 · 바쁨 · 미리보기 칩 · 아래 상태 줄 */
.ixi-notice { position: absolute; left: 12px; top: 12px; z-index: 3; max-width: min(540px, calc(100% - 24px)); padding: 7px 12px; border: 1px solid #6b5a22; border-radius: 8px; background: #2b2410e6; color: #ffe7a6; font-size: 12px; line-height: 1.5; }
/* v2.2.10 휴대폰 캔버스: 휴대폰 배치가 없으면 방문자 휴대폰에서 자동 세로 정렬 */
.ixi-mobauto { position: absolute; left: 12px; right: 12px; bottom: 42px; z-index: 3; display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 0 auto; padding: 8px 12px; border: 1px solid #2fd3a866; border-radius: 10px; background: #0b1116ee; color: #cfe9e1; font-size: 12px; line-height: 1.55; pointer-events: none; }
.ixi-mobauto[hidden] { display: none; }
.ixi-mobauto > svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.ixi-mobauto strong { color: #fff; }
.ixi-busy { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 10px; background: #000a; color: #dff9f1; font-size: 13px; }
.ixi-spin { width: 26px; height: 26px; border: 3px solid #ffffff22; border-top-color: var(--accent); border-radius: 50%; animation: ixi-spin .8s linear infinite; }
@keyframes ixi-spin { to { transform: rotate(360deg); } }
.ixi-prevchip {
  position: absolute; top: 12px; left: 50%; translate: -50% 0; z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid #2fd3a888; border-radius: 999px; background: #0b1116e6; color: #bff5e6; font-size: 12.5px; cursor: pointer;
}
.ixi-prevchip svg { width: 14px; height: 14px; }
.ixi-status { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; padding: 0 12px; border-top: 1px solid var(--line); background: #0b0f13; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ixi-status-l, .ixi-status-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ixi-status-r { color: var(--dim); }

/* 시작 템플릿 (빈 스킨을 처음 열 때) */
.ixi-starter {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 7; width: min(880px, calc(100% - 40px)); max-height: calc(100% - 40px); overflow: auto;
  padding: 20px 22px 22px; border: 1px solid #ffffff1f; border-radius: 16px; background: #0b1116f2; box-shadow: 0 30px 90px #000d; backdrop-filter: blur(14px);
  animation: ixi-pop-in .3s ease;
}
.ixi-starter-head { display: grid; gap: 4px; margin-bottom: 14px; }
.ixi-starter-head strong { font-size: 16px; }
.ixi-starter-head span { font-size: 12.5px; color: var(--muted); }
.ixi-starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ixi-starter-card {
  display: grid; align-content: start; gap: 6px; padding: 8px 8px 10px; border: 1px solid #ffffff17; border-radius: 12px;
  background: #ffffff06; color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s;
}
.ixi-starter-card:hover, .ixi-starter-card:focus-visible { border-color: var(--accent); background: #2fd3a80f; transform: translateY(-2px); outline: none; }
.ixi-starter-pv svg { display: block; width: 100%; height: auto; border-radius: 7px; }
.ixi-starter-card strong { font-size: 12.5px; line-height: 1.35; }
.ixi-starter-card small { font-size: 11px; line-height: 1.45; color: var(--muted); }
@keyframes ixi-pop-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- ⚙ 옵션 팝업 (Webflow 식 칸) */
.ixi-pop {
  position: absolute; z-index: 9; display: flex; flex-direction: column; width: 318px; max-height: calc(100% - 16px);
  border: 1px solid #ffffff24; border-radius: 12px; background: #0d1217f7; box-shadow: 0 24px 70px #000c; backdrop-filter: blur(12px);
  animation: ixi-pop-in .2s ease;
}
.ixi-pop.is-mobile { border-color: #4f8cff66; }
.ixi-pop:focus { outline: none; } /* 다시 만든 팝업이 초점을 받아도 테두리 없이 (ix-intro.js buildPop) */
/* 좁은 창(560px 아래): 캔버스 칸 안에서는 잘리므로 창 아래 판으로 (ix-intro.js placePop) */
.ixi-pop.is-sheet { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: min(64%, 560px); z-index: 19; } /* 작은 메뉴 · 스킨 설정(20)은 그 위에 */
.ixi-pop.is-sheet .ixi-pop-head { cursor: default; }
.ixi-pop-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 12px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.ixi-pop-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.ixi-pop-ic svg { width: 15px; height: 15px; }
.ixi-pop-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ixi-pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ixi-pop-t small { font-size: 10.5px; color: var(--muted); }
.ixi-pop-body { flex: 1; min-height: 0; overflow: auto; padding: 2px 12px 12px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }

.ixi-sec { border-bottom: 1px solid #ffffff0f; }
.ixi-sec-head { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 2px; border: 0; background: none; color: #dfe6ee; font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.ixi-sec-head:hover { color: #fff; }
.ixi-sec-chev { display: inline-flex; }
.ixi-sec-chev svg { width: 13px; height: 13px; color: var(--dim); transition: transform .25s; }
.ixi-sec-head[aria-expanded="false"] .ixi-sec-chev svg { transform: rotate(-90deg); }
.ixi-sec-body { display: grid; gap: 8px; padding: 2px 0 12px; }

/* 칸 한 줄: 이름 · 입력 (is-wide = 이름 위 · 입력 아래) */
.ixi-f { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.ixi-f.is-wide { grid-template-columns: minmax(0, 1fr); }
.ixi-fl { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.ixi-f.is-over > .ixi-fl { color: #8fb6ff; }
.ixi-over { flex: none; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #4f8cff; cursor: pointer; }
.ixi-over:hover { box-shadow: 0 0 0 3px #4f8cff55; }
.ixi-fc { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ixi-f.is-wide > .ixi-fc { display: block; }
.ixi-fh { grid-column: 1 / -1; margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--dim); }
.ixi-fh.is-bad { color: #ffb4c1; }
.ixi-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ixi-grid2 > .ixi-f { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ixi-num.field.num { width: 100%; height: 28px; padding: 0 6px; font-size: 12px; }
.ixi-numwrap { position: relative; display: flex; align-items: center; width: 100%; }
.ixi-numwrap .ixi-num.field.num { padding-right: 26px; }
.ixi-unit { position: absolute; right: 7px; font-size: 10.5px; color: var(--dim); pointer-events: none; }
.ixi-select.field { height: 28px; padding: 0 6px; font-size: 12px; }
.ixi-seg { width: 100%; }
.ixi-seg .seg-btn { flex: 1; justify-content: center; height: 26px; padding: 0 6px; font-size: 11.5px; }
.ixi-seg .seg-btn svg { width: 14px; height: 14px; }
.ixi-levelseg .seg-btn, .ixi-shadowseg .seg-btn { padding: 0 2px; font-size: 11px; }
.ixi-size { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; width: 100%; }
/* v1.22.0 단위 고르기 (px · % · svw · svh · 자동) */
.ixi-unitsel.field { width: 100%; min-width: 0; height: 30px; padding: 0 20px 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ixi-unitseg .seg-btn { padding: 0 3px; }
.ixi-colorf { display: flex; align-items: center; gap: 6px; width: 100%; }
.ixi-color { flex: none; width: 30px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; }
.ixi-color::-webkit-color-swatch-wrapper { padding: 2px; }
.ixi-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ixi-hex.field { height: 26px; padding: 0 7px; font: 12px ui-monospace, Consolas, monospace; text-transform: lowercase; }
.ixi-colorf.is-none .ixi-color { opacity: .35; }
.ixi-none.btn { flex: none; height: 26px; padding: 0 8px; }
.ixi-textf { display: grid; gap: 3px; }
.ixi-textf .field { height: 30px; font-size: 12.5px; }
.ixi-textf textarea.field { height: auto; }
.ixi-ta.field { min-height: 96px; font-size: 12.5px; line-height: 1.6; }
.ixi-tcount { justify-self: end; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ixi-tcount.is-warn { color: #ffd479; }
.ixi-toggles { display: flex; gap: 4px; }
.ixi-tog { width: 34px; height: 26px; padding: 0; border: 1px solid #ffffff1f; border-radius: 6px; background: #ffffff08; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ixi-tog.is-italic { font-family: Georgia, serif; font-style: italic; }
.ixi-tog.is-underline { text-decoration: underline; }
.ixi-tog[aria-pressed="true"] { border-color: #2fd3a880; background: var(--accent-soft); color: #bff5e6; }
.ixi-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ixi-actions .btn svg { width: 14px; height: 14px; }

/* 붙는 점 9 */
.ixi-anchor-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; }
.ixi-anchor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 72px; height: 54px; padding: 4px; border: 1px solid #ffffff1f; border-radius: 8px; background: #ffffff06; }
.ixi-anchor-btn { display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.ixi-anchor-btn:hover { background: #ffffff0d; }
.ixi-anchor-btn span { width: 6px; height: 6px; border-radius: 50%; background: #ffffff40; transition: background-color .15s, transform .15s; }
.ixi-anchor-btn:hover span { background: #ffffffa0; }
.ixi-anchor-btn[aria-checked="true"] span { background: var(--accent); box-shadow: 0 0 6px #2fd3a8; transform: scale(1.5); }
.ixi-anchor-side { display: grid; justify-items: start; gap: 4px; }

/* 여백 상자 그림 */
.ixi-padbox { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: 30px 30px 30px; gap: 4px; padding: 6px; border: 1px dashed #ffffff26; border-radius: 9px; background: #4f8cff0a; }
.ixi-pad { display: grid; place-items: center; }
.ixi-pad.is-t { grid-area: 1 / 2; }
.ixi-pad.is-r { grid-area: 2 / 3; }
.ixi-pad.is-b { grid-area: 3 / 2; }
.ixi-pad.is-l { grid-area: 2 / 1; }
.ixi-pad .ixi-num.field.num { width: 58px; text-align: center; }
.ixi-pad-c { grid-area: 2 / 2; display: grid; place-items: center; border: 1px solid #ffffff26; border-radius: 6px; background: #0b1116; font-size: 10.5px; color: var(--dim); }

/* 고급 CSS */
.ixi-css.field { min-height: 96px; font: 12px/1.5 ui-monospace, Consolas, monospace; }
.ixi-css-report { display: grid; gap: 4px; }
.ixi-css-report:empty { display: none; }
.ixi-css-sum { margin: 0; font-size: 11px; color: var(--muted); }
.ixi-css-drop { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ixi-css-drop li { padding: 2px 7px; border-radius: 5px; background: #ff6b8114; color: #ffb4c1; font: 11px ui-monospace, Consolas, monospace; text-decoration: line-through; overflow-wrap: anywhere; }

/* 종류별 칸 */
.ixi-kv { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--muted); }
.ixi-src { font-size: 11px; overflow-wrap: anywhere; }
.ixi-kthumb { width: 100%; max-height: 140px; object-fit: contain; border: 1px solid #ffffff1a; border-radius: 8px; background: #0b1116; }
.ixi-kinfo { margin: 0; font-size: 12px; color: #cfd8e2; }
.ixi-iconrow { display: flex; align-items: center; gap: 8px; }
.ixi-iconpv { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffffff2a; border-radius: 50%; background: #0b1116; color: #fff; }
.ixi-iconpv svg { width: 20px; height: 20px; }
.ixi-mbanner { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 6px 8px; margin: 8px 0 4px; padding: 8px 10px; border: 1px solid #4f8cff44; border-radius: 9px; background: #4f8cff14; color: #cfe0ff; font-size: 11.5px; line-height: 1.45; }
.ixi-mbanner > svg { width: 18px; height: 18px; color: #8fb6ff; }
.ixi-mbanner strong { display: block; font-size: 12px; }
.ixi-mbanner .btn { grid-column: 2; justify-self: start; }
.ixi-pop-foot { display: grid; gap: 8px; padding-top: 12px; }

/* ---- 작은 메뉴 · 스킨 설정 */
.ixi-menu { position: absolute; z-index: 20; display: grid; gap: 2px; min-width: min(210px, calc(100% - 16px)); max-width: min(300px, calc(100% - 16px)); max-height: 70vh; overflow: auto; padding: 6px; border: 1px solid #ffffff26; border-radius: 11px; background: #0d1217fa; box-shadow: 0 18px 50px #000c; animation: ixi-pop-in .18s ease; }
.ixi-menu-title { padding: 4px 8px 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--dim); }
.ixi-menu-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font-size: 12.5px; text-align: left; cursor: pointer; }
.ixi-menu-item:hover, .ixi-menu-item:focus-visible { background: #2fd3a81a; outline: none; }
.ixi-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.ixi-menu-item small { font-size: 11px; color: var(--dim); }
.ixi-mi-ic { display: inline-flex; }
.ixi-mi-ic svg { width: 15px; height: 15px; color: var(--accent); }
.ixi-mi-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ixi-lv { font-weight: 700; }
.ixi-lv.is-h1 { font-size: 20px; }
.ixi-lv.is-h2 { font-size: 17.5px; }
.ixi-lv.is-h3 { font-size: 15.5px; }
.ixi-lv.is-h4 { font-size: 14px; }
.ixi-lv.is-h5 { font-size: 13px; }
.ixi-lv.is-p { font-size: 12.5px; font-weight: 400; }
.ixi-setpop { position: absolute; z-index: 20; width: 352px; max-width: calc(100% - 16px); overflow: auto; overscroll-behavior: contain; padding: 12px 14px 14px; border: 1px solid #ffffff26; border-radius: 12px; background: #0d1217fa; box-shadow: 0 18px 50px #000c; animation: ixi-pop-in .18s ease; }
.ixi-set-body { display: grid; gap: 10px; }
.ixi-set-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.ixi-set-title svg { width: 15px; height: 15px; color: var(--accent); }
.ixi-setpop .ixi-f { grid-template-columns: 100px minmax(0, 1fr); }
.ixi-dist { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 6px; width: 100%; }

/* ---- 작은 창: 템플릿 · 웹프레임 코드 · 아이콘 */
dialog.modal.ixi-subdlg { width: min(760px, calc(100vw - 32px)); }
dialog.modal.ixi-iframe-modal { width: min(840px, calc(100vw - 32px)); }
.ixi-subdlg .modal-foot { align-items: center; }
.ixi-tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ixi-tpl { display: grid; align-content: start; gap: 4px; padding: 8px 8px 10px; border: 1px solid #ffffff17; border-radius: 12px; background: #ffffff06; color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.ixi-tpl:hover, .ixi-tpl:focus-visible { border-color: var(--accent); background: #2fd3a80f; transform: translateY(-2px); outline: none; }
.ixi-tpl-pv svg { display: block; width: 100%; height: auto; }
.ixi-tpl strong { font-size: 12.5px; }
.ixi-tpl small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.pv-bg { fill: #101a22; }
.pv-box { fill: #0b1116; stroke: #ffffff26; }
.pv-t { fill: #e9f0f6; }
.pv-l { fill: #7f8b98; }
.pv-a { fill: #2fd3a8; }
.pv-dash { fill: none; stroke: #ffffff4d; stroke-dasharray: 4 3; }
.ixi-code.field { min-height: 92px; font: 12px/1.5 ui-monospace, Consolas, monospace; }
.modal-body p.ixi-iframe-state { margin: 8px 0; font-size: 12px; }
.modal-body p.ixi-iframe-state.is-ok { color: #7fe3c2; }
.modal-body p.ixi-iframe-state.is-bad { color: #ffb4c1; }
.ixi-iframe-view { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 10px; background: #05080b; }
.ixi-iframe-view iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ixi-iframe-view.is-empty span { font-size: 12px; color: var(--dim); }
.ixi-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; max-height: 52vh; overflow: auto; padding: 2px; }
.ixi-icon-cell { display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff05; color: #e9f0f6; font-size: 10.5px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ixi-icon-cell svg { width: 22px; height: 22px; }
.ixi-icon-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ixi-icon-cell:hover, .ixi-icon-cell:focus-visible { border-color: var(--accent); background: #2fd3a80f; outline: none; }
.modal-body p.ixi-icon-msg { margin: 10px 0 0; }
.modal-body p.ixi-icon-msg:empty { display: none; }
.modal-body p.ixi-icon-msg.is-bad { color: #ffb4c1; }

/* ---- 대신 그리기 (뷰어 판이 스킨 그리기를 못 할 때 — 게시 화면과 조금 다를 수 있음) */
/* v1.22.0: svw · svh 단위 = 이 칸(스킨 화면) 폭 · 높이의 % (cqw · cqh) — 뷰어 .mse-ix-skin 과 같게 */
.ixi-fb { position: absolute; inset: 0; container-type: size; }
.ixi-fb.is-design, .ixi-fb.is-design * { pointer-events: none; }
.ixi-fb-el { position: absolute; box-sizing: border-box; margin: 0; color: #fff; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
.ixi-fb-ph {
  display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; height: 100%; min-height: 60px;
  border: 1px dashed #ffffff38; border-radius: inherit; background: repeating-linear-gradient(135deg, #ffffff06 0 10px, transparent 10px 20px);
  color: #cfd8e2; font-size: 15px; text-align: center;
}
.ixi-fb-ph svg { width: 34px; height: 34px; color: #2fd3a8; }
.ixi-fb-ph small { font-size: 12px; color: #9aa6b3; }
/* 종류 기본 모양 (뷰어 _intro.scss 와 같은 값 — 인라인 스타일이 이긴다) */
.ixi-fb-text { font-size: 16px; font-weight: 400; line-height: 1.55; }
.ixi-fb-text[data-level="h1"] { font-size: 56px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.ixi-fb-text[data-level="h2"] { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.ixi-fb-text[data-level="h3"] { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.ixi-fb-text[data-level="h4"] { font-size: 24px; font-weight: 600; line-height: 1.3; }
.ixi-fb-text[data-level="h5"] { font-size: 19px; font-weight: 600; line-height: 1.4; }
.ixi-fb-text[data-level="p"] { font-size: 16px; line-height: 1.6; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="h1"] { font-size: 36px; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="h2"] { font-size: 28px; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="h3"] { font-size: 23px; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="h4"] { font-size: 20px; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="h5"] { font-size: 17px; }
.ixi-fb.is-mobile .ixi-fb-text[data-level="p"] { font-size: 15px; }
.ixi-fb-multiline { display: flex; flex-direction: column; gap: .8em; font-size: 16px; line-height: 1.7; }
.ixi-fb-multiline > p { margin: 0; }
.ixi-fb.is-mobile .ixi-fb-multiline { font-size: 15px; }
.ixi-fb-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 12px 26px; border: 1px solid #3a5264; border-radius: 999px; background-color: rgba(11, 17, 22, .8); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ixi-fb-button.is-icon { padding: 12px; }
.ixi-fb-button > svg { display: block; flex: none; width: 1.4em; height: 1.4em; }
.ixi-fb-image, .ixi-fb-iframe, .ixi-fb-video { overflow: hidden; }

/* ---- 상호작용 탭의 '인트로 스킨' 칸 */
.ixi-section { display: grid; gap: 8px; }
.ixi-mini { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 1px solid #ffffff24; border-radius: 9px; background: linear-gradient(180deg, #1d3140, #0a1016); cursor: pointer; transition: border-color .2s; }
.ixi-mini:hover { border-color: #2fd3a8aa; }
.ixi-mini-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; pointer-events: none; }
.ixi-mini-backdrop, .ixi-mini-skin { position: absolute; inset: 0; }
.ixi-sum { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ixi-sec-dist { display: flex; align-items: center; gap: 6px; }
.ixi-sec-dl { margin-right: auto; font-size: 12.5px; color: #d5dde6; white-space: nowrap; }
.ixi-sec-dist .seg-btn { height: 26px; padding: 0 9px; font-size: 12px; }
.ixi-sec-dist .field.num { width: 64px; height: 28px; }

/* 좁은 화면 */
@media (max-width: 1100px) {
  .ixi-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ixi-status-r { display: none; }
  .ixi-brand-t small { display: none; }
}
@media (max-width: 860px) {
  .ixi-body { grid-template-columns: 196px minmax(0, 1fr); }
  .ixi-addgrid { grid-template-columns: minmax(0, 1fr); }
  .ixi-top { flex-wrap: wrap; padding: 6px 8px; row-gap: 6px; }
  .ixi-brand { border-right: 0; }
  .ixi-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ixi-pop, .ixi-menu, .ixi-setpop, .ixi-starter { animation: none; }
}
/* v2.0.31 슬라이드 이미지 — 캔버스의 장 수 표시 · 속성 칸 그림 줄 */
.ixi-slider-badge { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(5, 8, 11, .72); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none; }
.ixi-slider-strip { display: flex; gap: 4px; overflow: hidden; }
.ixi-slider-strip img { width: 46px; height: 32px; flex: none; border-radius: 5px; object-fit: cover; background: #0b1116; }