/* =========================================================================
   조인 슬라이드 스튜디오 (jcm-slide-composer) — Studio v3.0
   파워포인트급 자유 편집기 + joyn-gallery 무한 스크롤 + 슬라이드별 개별 설정.

   모든 규칙은 `.jcm-studio` 스코프로 묶여 있어 호스트 테마 스타일을 침범하지 않는다.
   웹 페이지에서 슬라이드 제작 라우트로 진입하면 body 에 `jcm-studio-active` 가
   더해져 페이지 스크롤이 잠기고, `.jcm-studio` 가 뷰포트를 가득 덮는다.
   ========================================================================= */

/* 풀스크린 셸 — 슬라이드 제작 페이지에서만 활성화.
   v0.6.2: 호스트 테마의 헤더(Astra 의 .ast-primary-header-bar 등)는 그대로 보이게 두고,
   그 아래에 스튜디오를 풀폭으로 위치시킨다. JS 가 헤더 높이를 측정하여
   --jcm-studio-top CSS 변수에 반영하면, 스튜디오는 그 만큼 아래에서 시작한다.
   이 방식이라면 사이트 메뉴/로고/검색 등은 평소와 똑같이 동작하고, 스튜디오만
   본문 영역을 덮는다.

   z-index: hc-joyn-menu-learn(joyn-menu.css) — 트리거 9990, 오버레이 9991, 래퍼 9992.
   스튜디오 셸은 6000 대역, 상단 히어로(.topbar)는 그보다 약간 위(6010)만 사용한다.

   transform: translateZ(0) — transform:none 이면 position:fixed 자식(.jcm-studio-boot 등)이
   뷰포트 기준 z-index 9만 단위로 올라가 hc-joyn 메뉴보다 위에 그려질 수 있다. 셸에 얇은
   3D 변환을 주면 fixed 자식의 containing block 이 스튜디오 안으로 묶여, 전역 z 충돌이 사라진다.

   스튜디오 셸 z-index 는 5000 대 — hc-joyn-menu-learn 크리티컬 #hcMenuTrigger 100050 보다 낮게 유지.
   그래도 겹침이 있으면( body 맨 끝 append · 테마 헤더 문맥 차이 ) 아래 «메뉴·헤더 부스트»로
   트리거·오버레이·Astra 헤더 바를 스튜디오 위로 고정한다. */
body.jcm-studio-active {
  overflow: hidden !important;
  height: auto !important;
  /* 헤더 오프셋 측정 전·측정 오차 시에도 본문 뒤가 흰색으로 비지 않도록 */
  background: #0E0E12 !important;
}
body.jcm-studio-active .jcm-studio {
  position: fixed !important;
  top:    var(--jcm-studio-top, 0px) !important;
  left:   0 !important;
  right:  0 !important;
  bottom: 0 !important;
  z-index: 5500 !important;
  height: calc(100vh - var(--jcm-studio-top, 0px)) !important;
  width:  100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateZ(0) !important;
  border: none !important;
  overflow: hidden !important;
  isolation: isolate;
}

/*
 * hc-joyn-menu-learn + Astra: 스튜디오(.jcm-studio)가 body 직속 말단으로 이동하면
 * 동기화 데스크톱 네비(learn-top-nav 에서 z-index:5) 등이 헤더 문맥만으로는 스튜디오 풀폭
 * 레이어에 가려질 수 있다. 활성 시에만 메뉴 스택·헤더 래퍼를 10만 번대로 올려 항상 위에 둔다.
 * (learn class-plugin.php 인라인 #hcMenuTrigger 100050 !important 보다 구체성·값이 우선)
 */
body.jcm-studio-active #hcMenuTrigger.hc-joyn-menu-trigger,
body.jcm-studio-active button#hcMenuTrigger.hc-joyn-menu-trigger {
  z-index: 101000 !important;
}
body.jcm-studio-active #hcMenuOverlay.hc-joyn-menu-overlay,
body.jcm-studio-active div#hcMenuOverlay {
  z-index: 100900 !important;
}
body.jcm-studio-active #hcMenuWrapper {
  z-index: 100901 !important;
}
body.jcm-studio-active .hc-joyn-menu-route-loading,
body.jcm-studio-active #hcJoynMenuRouteLoading {
  z-index: 100950 !important;
}
body.jcm-studio-active #masthead.site-header,
body.jcm-studio-active #masthead,
body.jcm-studio-active .site-header,
body.jcm-studio-active #ast-desktop-header,
body.jcm-studio-active #ast-mobile-header,
body.jcm-studio-active .ast-mobile-header-wrap,
body.jcm-studio-active .ast-primary-header-bar,
body.jcm-studio-active .ast-desktop-header-content,
body.jcm-studio-active .ast-builder-grid-row {
  z-index: 100800 !important;
  overflow: visible !important;
}

/*
 * 데스크톱 동기화 메뉴 + 서브메뉴: learn-top-nav 가 nav 에 z-index:5 를 주어
 * 스튜디오(5500) 풀폭 레이어에 드롭다운이 깔릴 수 있다. hc-joyn-menu-active 까지 붙여
 * learn 규칙보다 구체적으로 올리고, Astra .sub-menu / 메가메뉴도 동일 층으로 맞춘다.
 */
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar nav.hcjoyn-synced-menu-nav.hcjoyn-sync-site-nav,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar nav.hcjoyn-synced-menu-nav.hcjoyn-sync-main-nav,
body.hc-joyn-menu-active.jcm-studio-active .ast-mobile-header-wrap nav.hcjoyn-synced-menu-nav.hcjoyn-sync-site-nav {
  z-index: 101200 !important;
}

body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .hcjoyn-synced-menu-nav .sub-menu,
body.hc-joyn-menu-active.jcm-studio-active .ast-mobile-header-wrap .hcjoyn-synced-menu-nav .hcjoyn-sync-menu .sub-menu,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .main-navigation .sub-menu,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .sub-menu,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .astra-megamenu,
body.hc-joyn-menu-active.jcm-studio-active .ast-primary-header-bar .astra-full-megamenu-wrapper {
  z-index: 101350 !important;
}

/* learn 에 hc-joyn-menu-active 가 없는 경우(드물게) 동기화 네비만 보강 */
body.jcm-studio-active:not(.hc-joyn-menu-active) nav.hcjoyn-synced-menu-nav.hcjoyn-sync-site-nav,
body.jcm-studio-active:not(.hc-joyn-menu-active) nav.hcjoyn-synced-menu-nav.hcjoyn-sync-main-nav {
  z-index: 101200 !important;
}
body.jcm-studio-active:not(.hc-joyn-menu-active) .ast-primary-header-bar .hcjoyn-synced-menu-nav .sub-menu,
body.jcm-studio-active:not(.hc-joyn-menu-active) .ast-primary-header-bar .sub-menu {
  z-index: 101350 !important;
}

/* Astra 호환 — 본문 컨테이너의 max-width / padding 을 풀스크린 동안 무시.
   (헤더 자체는 가리지 않고, 메인 본문 wrapper 만 정리한다.) */
body.jcm-studio-active #page,
body.jcm-studio-active .ast-container,
body.jcm-studio-active .site-content,
body.jcm-studio-active #primary,
body.jcm-studio-active .entry-content,
body.jcm-studio-active main {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  /* 헤더·fixed 스튜디오 사이가 잠깐 비어도 테마 기본(흰색)이 보이지 않게 */
  background: #0E0E12 !important;
}
/* 푸터는 가린다 (스튜디오에 가려져 어차피 안 보이므로 깔끔하게) */
body.jcm-studio-active footer,
body.jcm-studio-active #colophon,
body.jcm-studio-active .site-footer {
  display: none !important;
}

/* .jcm-studio 자체에 body 수준의 타이포그래피 ・컬러 적용 (원본 demo 의 body{} 대체) */
.jcm-studio {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
  user-select: none;
}

/* 호스트 테마가 wrapper 를 inline-block 등으로 만든 경우 보정 */
.jcm-scope.jcm-slide-composer.jcm-studio {
  display: block;
  margin: 0;
  padding: 0;
  text-align: initial;
}

/* 호스트 테마의 a/button reset 우회 */
.jcm-studio a { color: inherit; text-decoration: none; }
.jcm-studio img { max-width: none; }

/* =========================================================================
   조인 슬라이드 스튜디오 — 디자인 토큰
   다크 에디토리얼 + 전통 단청 다홍 액센트 + 시안 보조
   ========================================================================= */
.jcm-studio{
  /* surface */
  --bg:           #0E0E12;
  --bg-2:         #14141A;
  --panel:        #181820;
  --panel-2:      #1F1F29;
  --panel-3:      #262633;
  --hover:        #2D2D3B;
  --line:         #2A2A36;
  --line-strong:  #3A3A4A;
  --line-soft:    #1F1F29;
  /* text */
  --fg:           #ECECF1;
  --fg-mid:       #B8B8C4;
  --fg-dim:       #7A7A8A;
  --fg-faint:     #4A4A58;
  /* accent — 깊은 단청 다홍 */
  --accent:       #D43F3A;
  --accent-2:     #B82E29;
  --accent-soft:  rgba(212,63,58,.18);
  --accent-line:  rgba(212,63,58,.45);
  /* secondary — 차분한 청록 (인스펙터 강조용) */
  --cyan:         #2EB6A8;
  --cyan-soft:    rgba(46,182,168,.16);
  --cyan-line:    rgba(46,182,168,.4);
  /* state */
  --warn:         #E8A93B;
  --ok:           #4CC38A;
  --err:          #E25555;
  /* chrome */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow:       0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.55);
  --r-sm:         4px;
  --r:            6px;
  --r-lg:         10px;
  /* layout */
  --topbar-h:     56px;
  --bottombar-h:  36px;
  --sidebar-w:    280px;
  --inspector-w:  300px;
  /* font stacks */
  --ui:           'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:         'JetBrains Mono','SF Mono',Menlo,monospace;
}

.jcm-studio *, .jcm-studio *::before, .jcm-studio *::after{box-sizing:border-box;margin:0;padding:0;}



/* scrollbars */
.jcm-studio ::-webkit-scrollbar{width:8px;height:8px;}
.jcm-studio ::-webkit-scrollbar-track{background:transparent;}
.jcm-studio ::-webkit-scrollbar-thumb{background:#2D2D3B;border-radius:4px;border:2px solid transparent;background-clip:padding-box;}
.jcm-studio ::-webkit-scrollbar-thumb:hover{background:#3A3A4A;border:2px solid transparent;background-clip:padding-box;}

.jcm-studio button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit;}
.jcm-studio input, .jcm-studio select, .jcm-studio textarea{font-family:inherit;color:inherit;}
.jcm-studio [hidden]{display:none!important;}

/* =========================================================================
   APP SHELL — 3-열 레이아웃
   ========================================================================= */
.jcm-studio .app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
  grid-template-rows: var(--topbar-h) 1fr var(--bottombar-h);
  grid-template-areas:
    "topbar  topbar    topbar"
    "sidebar canvas    inspector"
    "bottom  bottom    bottom";
  height:100vh;
  width:100vw;
}

/* ---------- TOPBAR ---------- */
.jcm-studio .topbar{
  grid-area:topbar;
  background:linear-gradient(to bottom,#15151D 0%,#0F0F15 100%);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 4px 12px rgba(0,0,0,.3);
  position:relative;
  /* 스튜디오 셸(6000) 안: 상단 히어로만 캔버스 위 레이어 — 전역 메뉴(9990+)보다 낮게 유지 */
  z-index:6010;
}
.jcm-studio .brand{display:flex;align-items:center;gap:10px;padding-right:14px;border-right:1px solid var(--line);height:32px;}
.jcm-studio .brand-mark{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;
  box-shadow:0 2px 6px rgba(212,63,58,.4);
}
.jcm-studio .brand-text{display:flex;flex-direction:column;line-height:1;}
.jcm-studio .brand-name{font-size:13px;font-weight:800;letter-spacing:-.01em;}
.jcm-studio .brand-sub{font-size:9px;color:var(--fg-dim);margin-top:3px;letter-spacing:.04em;font-weight:600;}

.jcm-studio .song-info{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.jcm-studio .song-icon{color:var(--fg-dim);font-size:16px;flex-shrink:0;}
.jcm-studio .song-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.jcm-studio .song-title{font-size:13px;font-weight:700;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jcm-studio .song-subtitle{font-size:10px;color:var(--fg-dim);margin-top:2px;font-weight:500;}
.jcm-studio .song-edit{margin-left:6px;color:var(--fg-faint);font-size:13px;padding:4px;border-radius:4px;}
.jcm-studio .song-edit:hover{color:var(--fg-mid);background:var(--hover);}

/* topbar — undo/redo / preview / export */
.jcm-studio .topbar-tools{display:flex;align-items:center;gap:2px;border-left:1px solid var(--line);padding-left:14px;}
.jcm-studio .tool-btn{
  height:30px;min-width:30px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--r);
  color:var(--fg-mid);
  font-size:12px;font-weight:600;
  transition:background .15s,color .15s;
}
.jcm-studio .tool-btn i{font-size:15px;}
.jcm-studio .tool-btn:hover:not(:disabled){background:var(--hover);color:var(--fg);}
.jcm-studio .tool-btn:disabled{color:var(--fg-faint);cursor:not-allowed;}
.jcm-studio .tool-btn.active{background:var(--accent-soft);color:var(--accent);}
.jcm-studio .tool-divider{width:1px;height:18px;background:var(--line);margin:0 4px;}

.jcm-studio .btn-primary{
  height:30px;padding:0 14px;
  background:linear-gradient(to bottom,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;font-weight:700;font-size:12px;
  border-radius:var(--r);
  display:flex;align-items:center;gap:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(212,63,58,.3);
  transition:filter .15s, transform .1s;
}
.jcm-studio .btn-primary:hover{filter:brightness(1.08);}
.jcm-studio .btn-primary:active{transform:translateY(1px);}
.jcm-studio .btn-primary i{font-size:15px;}

.jcm-studio .btn-ghost{
  height:30px;padding:0 12px;
  background:var(--panel-2);
  color:var(--fg-mid);
  font-weight:600;font-size:12px;
  border-radius:var(--r);
  border:1px solid var(--line);
  display:flex;align-items:center;gap:5px;
  transition:all .15s;
}
.jcm-studio .btn-ghost:hover{background:var(--panel-3);color:var(--fg);border-color:var(--line-strong);}
.jcm-studio .btn-ghost i{font-size:14px;}

/* ---------- SIDEBAR ---------- */
.jcm-studio .sidebar{
  grid-area:sidebar;
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.jcm-studio .sidebar-tabs{
  display:flex;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:0 4px;
}
.jcm-studio .sidebar-tab{
  flex:1;
  height:38px;
  font-size:11px;font-weight:700;
  color:var(--fg-dim);
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
  letter-spacing:.02em;
}
.jcm-studio .sidebar-tab i{font-size:14px;}
.jcm-studio .sidebar-tab:hover{color:var(--fg-mid);}
.jcm-studio .sidebar-tab.active{color:var(--fg);border-bottom-color:var(--accent);}
.jcm-studio .sidebar-tab .badge{
  background:var(--accent-soft);color:var(--accent);
  font-size:9px;padding:1px 5px;border-radius:8px;
  font-weight:800;
}

.jcm-studio .sidebar-body{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.jcm-studio .sidebar-pane{flex:1;overflow-y:auto;display:none;min-height:0;}
.jcm-studio .sidebar-pane.active{display:block;}
/* 조인갤러리: 검색·카테고리는 고정, 썸네일 그리드만 스크롤 → #gal-grid 에서 무한 스크롤 이벤트 발생 */
.jcm-studio .sidebar-pane.gallery-pane{
  overflow:hidden;
  min-height:0;
}
.jcm-studio .sidebar-pane.gallery-pane.active{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ---------- SLIDES PANE ---------- */
.jcm-studio .slides-pane{padding:8px;}
.jcm-studio .slide-thumb{
  position:relative;
  margin-bottom:10px;
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color .15s,transform .12s;
}
.jcm-studio .slide-thumb.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.jcm-studio .slide-thumb:hover:not(.selected){border-color:var(--line-strong);}
.jcm-studio .slide-thumb-num{
  position:absolute;top:4px;left:6px;
  font-size:10px;font-weight:700;
  color:var(--fg);
  background:rgba(0,0,0,.55);
  padding:2px 5px;border-radius:3px;
  z-index:5;
  font-family:var(--mono);
}
.jcm-studio .slide-thumb-canvas{
  width:100%;
  aspect-ratio:16/9;
  background:#1A1A22;
  display:block;
  position:relative;
  overflow:hidden;
}
.jcm-studio .slide-thumb-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.jcm-studio .slide-thumb-dim{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}
.jcm-studio .slide-thumb-shapes{z-index:2;}
.jcm-studio .slide-thumb-text{
  position:absolute;inset:0;
  z-index:3;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:8px;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  font-size:9px;
  line-height:1.3;
  font-family:'Noto Serif KR',serif;
  font-weight:500;
}
/* 배경 → 오버레이 → 도형 → 텍스트(z:3) → PNG 악보(z:4) */
.jcm-studio .slide-thumb-score{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.jcm-studio .stage-score-sheet{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  contain:strict;
}
.jcm-studio .slide-thumb-actions{
  position:absolute;bottom:4px;right:4px;
  display:none;gap:2px;
  z-index:4;
}
.jcm-studio .slide-thumb:hover .slide-thumb-actions{display:flex;}
.jcm-studio .slide-thumb-actions button{
  width:22px;height:22px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  transition:background .15s;
}
.jcm-studio .slide-thumb-actions button:hover{background:rgba(0,0,0,.85);}
.jcm-studio .slide-thumb-actions button.danger:hover{background:var(--accent);}
.jcm-studio .slide-thumb-drag{
  position:absolute;top:4px;right:4px;
  width:18px;height:18px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:3px;
  display:none;align-items:center;justify-content:center;
  font-size:11px;cursor:grab;
  z-index:5;
}
.jcm-studio .slide-thumb:hover .slide-thumb-drag{display:flex;}
.jcm-studio .slide-thumb.dragging{opacity:.4;}
.jcm-studio .slide-thumb.drop-before{box-shadow:0 -3px 0 var(--accent);}
.jcm-studio .slide-thumb.drop-after{box-shadow:0 3px 0 var(--accent);}

.jcm-studio .add-slide-btn{
  width:100%;
  padding:10px;
  background:var(--panel-2);
  color:var(--fg-mid);
  border:1px dashed var(--line-strong);
  border-radius:var(--r);
  font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s;
}
.jcm-studio .add-slide-btn:hover{background:var(--panel-3);color:var(--fg);border-color:var(--accent);border-style:solid;}

/* ---------- GALLERY PANE ---------- */
.jcm-studio .gallery-search{padding:8px 8px 0;flex-shrink:0;}
.jcm-studio .gallery-search-wrap{position:relative;}
.jcm-studio .gallery-search input{
  width:100%;height:32px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:0 30px 0 28px;
  color:var(--fg);
  font-size:12px;
  outline:none;
  transition:border-color .15s;
}
.jcm-studio .gallery-search input:focus{border-color:var(--accent);}
.jcm-studio .gallery-search input::placeholder{color:var(--fg-faint);}
.jcm-studio .gallery-search-icon{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--fg-dim);font-size:14px;pointer-events:none;
}
.jcm-studio .gallery-search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;
  display:none;align-items:center;justify-content:center;
  color:var(--fg-dim);font-size:14px;border-radius:3px;
}
.jcm-studio .gallery-search-clear:hover{background:var(--hover);color:var(--fg);}
.jcm-studio .gallery-search.has-query .gallery-search-clear{display:flex;}

.jcm-studio .gallery-cats{
  padding:8px;
  display:flex;flex-wrap:wrap;gap:4px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.jcm-studio .gallery-cat{
  height:24px;padding:0 9px;
  background:var(--panel-2);
  color:var(--fg-mid);
  font-size:11px;font-weight:600;
  border-radius:12px;
  border:1px solid var(--line);
  display:flex;align-items:center;gap:4px;
  transition:all .15s;
}
.jcm-studio .gallery-cat:hover{background:var(--panel-3);color:var(--fg);}
.jcm-studio .gallery-cat.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.jcm-studio .gallery-cat i{font-size:12px;}
.jcm-studio .gallery-cat .count{
  font-size:9px;opacity:.7;font-family:var(--mono);font-weight:700;
}

.jcm-studio .gallery-info{
  padding:6px 10px;
  font-size:10px;color:var(--fg-dim);
  font-family:var(--mono);
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;
}
.jcm-studio .gallery-info b{color:var(--fg-mid);font-weight:700;}

.jcm-studio .gallery-grid{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px;
  display:grid;
  /* v0.6.2: 적응형 그리드 — 사이드바 폭에 맞춰 3~4열을 자동으로 채운다.
     이미지 한 장의 최소 가로폭 80px, 그 위로는 셀이 자연스럽게 늘어난다. */
  grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:6px;
  align-content:start;
  /* 행 높이를 잘못 늘리면 aspect-ratio 셀이 겹쳐 보일 수 있음 */
  align-items:start;
  grid-auto-rows:min-content;
}
/* 조인갤러리 썸네일: 16:9 — padding-bottom 트릭으로 그리드 행 높이 확정(자식 전부 absolute 시 aspect-ratio 만으로는 0높이 이슈) */
.jcm-studio .gal-item{
  position:relative;
  width:100%;
  max-width:100%;
  height:0;
  padding-bottom:56.25%;
  align-self:start;
  justify-self:stretch;
  border-radius:var(--r-sm);
  overflow:hidden;
  cursor:grab;
  background:var(--panel-2);
  border:1.5px solid transparent;
  transition:border-color .15s,transform .12s;
}
.jcm-studio .gal-item:hover{border-color:var(--accent);transform:scale(1.04);z-index:2;}
.jcm-studio .gal-item.dragging{opacity:.4;cursor:grabbing;}
.jcm-studio .gal-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
  background:var(--panel-2);
}
.jcm-studio .gal-img-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);font-size:18px;
}
.jcm-studio .gal-item-meta{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 100%);
  color:#fff;
  font-size:9px;font-weight:600;
  padding:14px 5px 4px;
  line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;
}
.jcm-studio .gallery-loading{
  padding:20px;text-align:center;
  color:var(--fg-dim);font-size:11px;
  min-height:48px;
  box-sizing:border-box;
}
.jcm-studio .gallery-empty{
  padding:30px 16px;text-align:center;
  color:var(--fg-dim);font-size:11px;
}
.jcm-studio .gallery-empty i{font-size:28px;display:block;margin-bottom:8px;color:var(--fg-faint);}

.jcm-studio .gallery-hint{
  padding:8px 10px;
  background:var(--panel-2);
  border-top:1px solid var(--line);
  font-size:10px;color:var(--fg-dim);
  display:flex;align-items:center;gap:5px;
  line-height:1.3;
  flex-shrink:0;
}
.jcm-studio .gallery-hint i{color:var(--cyan);font-size:13px;flex-shrink:0;}

/* ---------- CANVAS AREA ---------- */
.jcm-studio .canvas-area{
  grid-area:canvas;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,63,58,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(46,182,168,.03) 0%, transparent 50%),
    #0A0A10;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* canvas toolbar */
.jcm-studio .canvas-toolbar{
  height:38px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 12px;
  gap:6px;
  flex-shrink:0;
}
.jcm-studio .canvas-toolbar .tool-btn{height:26px;font-size:11px;}
.jcm-studio .canvas-toolbar .tool-btn i{font-size:13px;}
.jcm-studio .toolbar-spacer{flex:1;}
.jcm-studio .toolbar-label{
  font-size:10px;color:var(--fg-dim);
  font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  margin-right:4px;
}

/* canvas viewport — 슬라이드를 가운데 큰 화면으로 */
.jcm-studio .canvas-viewport{
  flex:1;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  position:relative;
}

/* 레이아웃 높이 = 스케일된 캔버스와 일치 (JS: transform + margin 보정). 창·사이드바 리사이즈 시에도 비율 유지 */
.jcm-studio .stage-wrap{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-shrink:0;
  overflow:visible;
}

.jcm-studio .stage{
  position:relative;
  width:1280px;
  height:720px;
  background:#000;
  box-shadow:0 16px 60px rgba(0,0,0,.5),0 0 0 1px var(--line);
  overflow:hidden;
  border-radius:2px;
  transform-origin:center center;
}
.jcm-studio .stage[data-ratio="4:3"]{width:1024px;height:768px;}
.jcm-studio .stage[data-ratio="9:16"]{width:540px;height:960px;}
.jcm-studio .stage[data-ratio="1:1"]{width:900px;height:900px;}

.jcm-studio .stage-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#1A1A22;z-index:0;}
.jcm-studio .stage-dim{position:absolute;inset:0;pointer-events:none;z-index:1;background:transparent;}
.jcm-studio .stage-shapes{position:absolute;inset:0;pointer-events:none;z-index:1;}
.jcm-studio .stage-shapes .studio-shape{pointer-events:auto;}
/* 전체를 덮는 레이어가 도형(z 아래가 아닌 위 스택)보다 위에 있으면 빈 영역 클릭도 텍스트 레이어가 먹어 도형 선택이 불가 — 텍스트 박스만 포인터 타깃 */
.jcm-studio #tboxes-layer{z-index:2;pointer-events:none;}
.jcm-studio #tboxes-layer .tbox{pointer-events:auto;}
.jcm-studio .stage-overlay{position:absolute;inset:0;pointer-events:none;z-index:3;}
.jcm-studio .studio-shape{position:absolute;box-sizing:border-box;cursor:move;border:1px solid transparent;}
.jcm-studio .studio-shape:hover{border-color:rgba(255,255,255,.2);}
.jcm-studio .studio-shape.selected{border-color:var(--accent);border-style:solid;border-width:1.5px;}
.jcm-studio .studio-shape-inner{position:absolute;inset:0;box-sizing:border-box;}
.jcm-studio .studio-shape-handle{
  position:absolute;width:9px;height:9px;background:var(--accent);border:1.5px solid #fff;border-radius:2px;
  display:none;z-index:6;
}
.jcm-studio .studio-shape.selected .studio-shape-handle{display:block;}
.jcm-studio .studio-shape-handle.tl{top:-5px;left:-5px;cursor:nw-resize;}
.jcm-studio .studio-shape-handle.tr{top:-5px;right:-5px;cursor:ne-resize;}
.jcm-studio .studio-shape-handle.bl{bottom:-5px;left:-5px;cursor:sw-resize;}
.jcm-studio .studio-shape-handle.br{bottom:-5px;right:-5px;cursor:se-resize;}
.jcm-studio .studio-shape-handle.t{top:-5px;left:50%;transform:translateX(-50%);cursor:n-resize;width:14px;height:8px;}
.jcm-studio .studio-shape-handle.b{bottom:-5px;left:50%;transform:translateX(-50%);cursor:s-resize;width:14px;height:8px;}
.jcm-studio .studio-shape-handle.l{top:50%;left:-5px;transform:translateY(-50%);cursor:w-resize;width:8px;height:14px;}
.jcm-studio .studio-shape-handle.r{top:50%;right:-5px;transform:translateY(-50%);cursor:e-resize;width:8px;height:14px;}
.jcm-studio .studio-shape.dragging{opacity:.9;}
.jcm-studio .slide-thumb-shapes{position:absolute;inset:0;pointer-events:none;}
.jcm-studio .slide-thumb-shape{position:absolute;box-sizing:border-box;opacity:.9;}

/* grid overlay */
.jcm-studio .stage-grid{
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: calc(100%/12) calc(100%/12);
  display:none;
}
.jcm-studio .stage.grid-on .stage-grid{display:block;}

/* safe-area guides */
.jcm-studio .stage-safe{
  position:absolute;
  inset:8%;
  border:1px dashed rgba(255,255,255,.12);
  pointer-events:none;
  display:none;
}
.jcm-studio .stage.guides-on .stage-safe{display:block;}

/* TEXT BOXES (PowerPoint-style) */
.jcm-studio .tbox{
  position:absolute;
  cursor:move;
  border:1px solid transparent;
  display:flex;
  padding:8px;
  box-sizing:border-box;
  transition:border-color .12s;
}
.jcm-studio .tbox:hover{border-color:rgba(255,255,255,.18);}
.jcm-studio .tbox.selected{border-color:var(--accent);border-style:solid;border-width:1.5px;}
.jcm-studio .tbox-content{
  flex:1;
  outline:none;
  white-space:pre-wrap;
  word-break:keep-all;
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.jcm-studio .tbox.dragging{opacity:.85;}

/* tbox handles */
.jcm-studio .tbox-handle{
  position:absolute;
  width:10px;height:10px;
  background:var(--accent);
  border:1.5px solid #fff;
  border-radius:2px;
  display:none;
  z-index:5;
  transition:transform .1s;
}
.jcm-studio .tbox-handle:hover{transform:scale(1.3);}
.jcm-studio .tbox.selected .tbox-handle{display:block;}
.jcm-studio .tbox-handle.tl{top:-6px;left:-6px;cursor:nw-resize;}
.jcm-studio .tbox-handle.tr{top:-6px;right:-6px;cursor:ne-resize;}
.jcm-studio .tbox-handle.bl{bottom:-6px;left:-6px;cursor:sw-resize;}
.jcm-studio .tbox-handle.br{bottom:-6px;right:-6px;cursor:se-resize;}
.jcm-studio .tbox-handle.t{top:-6px;left:50%;transform:translateX(-50%);cursor:n-resize;width:14px;height:8px;}
.jcm-studio .tbox-handle.b{bottom:-6px;left:50%;transform:translateX(-50%);cursor:s-resize;width:14px;height:8px;}
.jcm-studio .tbox-handle.l{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize;width:8px;height:14px;}
.jcm-studio .tbox-handle.r{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize;width:8px;height:14px;}

/* drop indicator on canvas */
.jcm-studio .stage.drop-target::after{
  content:'';
  position:absolute;inset:6px;
  border:3px dashed var(--accent);
  border-radius:6px;
  background:rgba(212,63,58,.08);
  pointer-events:none;
  z-index:99;
}

/* alignment guides */
.jcm-studio .align-guide{
  position:absolute;
  background:var(--cyan);
  pointer-events:none;
  z-index:50;
  opacity:0;
  transition:opacity .08s;
}
.jcm-studio .align-guide.active{opacity:1;}
.jcm-studio .align-guide.h{height:1px;left:0;right:0;}
.jcm-studio .align-guide.v{width:1px;top:0;bottom:0;}

/* ---------- INSPECTOR ---------- */
.jcm-studio .inspector{
  grid-area:inspector;
  background:var(--panel);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.jcm-studio .inspector-head{
  height:38px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 12px;
  gap:6px;
}
.jcm-studio .inspector-title{
  font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg-mid);
}
.jcm-studio .inspector-title i{font-size:13px;color:var(--accent);margin-right:4px;}
.jcm-studio .inspector-target{
  margin-left:auto;
  font-size:10px;color:var(--fg-dim);
  font-family:var(--mono);
  background:var(--panel-2);
  padding:2px 6px;border-radius:3px;
}

.jcm-studio .inspector-body{flex:1;overflow-y:auto;}

.jcm-studio .inspector-section{
  border-bottom:1px solid var(--line);
}
.jcm-studio .inspector-section-head{
  display:flex;align-items:center;
  padding:9px 14px 9px 12px;
  font-size:10px;font-weight:800;
  color:var(--fg-mid);
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none;
  transition:color .12s;
}
.jcm-studio .inspector-section-head:hover{color:var(--fg);}
.jcm-studio .inspector-section-head i.chevron{
  margin-right:6px;font-size:13px;
  color:var(--fg-dim);
  transition:transform .15s;
}
.jcm-studio .inspector-section.collapsed .inspector-section-head i.chevron{transform:rotate(-90deg);}
.jcm-studio .inspector-section-body{padding:0 12px 12px;}
.jcm-studio .inspector-section.collapsed .inspector-section-body{display:none;}

.jcm-studio .field{margin-bottom:10px;}
.jcm-studio .field:last-child{margin-bottom:0;}
.jcm-studio .field-label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:600;
  color:var(--fg-dim);
  margin-bottom:5px;
  letter-spacing:.02em;
}
.jcm-studio .field-label .field-value{
  font-family:var(--mono);
  font-size:10px;
  color:var(--fg-mid);
}

.jcm-studio .input, .jcm-studio .select{
  width:100%;height:28px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:0 8px;
  font-size:12px;
  color:var(--fg);
  outline:none;
  transition:border-color .12s;
}
.jcm-studio .input:focus, .jcm-studio .select:focus{border-color:var(--accent);}
.jcm-studio .input[type=number]{padding-right:4px;}
.jcm-studio .select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237A7A8A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  padding-right:22px;
}

.jcm-studio .field-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.jcm-studio .field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}

/* 오버레이: 체크박스 + 색 + 프리셋 한 줄 */
.jcm-studio .overlay-master-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
}
.jcm-studio .overlay-enable-inline{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  flex-shrink:0;
  font-size:12px;
  font-weight:700;
  color:var(--fg);
  user-select:none;
}
.jcm-studio .overlay-enable-inline input[type=checkbox]{margin:0;flex-shrink:0;}
.jcm-studio .overlay-tools-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  flex:1;
  min-width:0;
}
.jcm-studio #overlay-detail-wrap.overlay-tools-color{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
}
.jcm-studio #overlay-detail-wrap.overlay-tools-color > input.color-input.overlay-toolbar-color{
  width:32px;
  max-width:32px;
  min-width:32px;
  flex:0 0 32px;
  height:28px;
  padding:2px;
  box-sizing:border-box;
}
.jcm-studio .overlay-inline-lbl{
  font-size:10px;
  font-weight:600;
  color:var(--fg-dim);
  white-space:nowrap;
}
.jcm-studio .overlay-toolbar-color{
  flex:0 0 auto;
  width:32px;
  height:28px;
  padding:2px;
  cursor:pointer;
}
.jcm-studio .overlay-preset-buttons{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  align-items:center;
}
.jcm-studio .overlay-tone-btn.bg-source-tab{
  height:auto;
  min-height:26px;
  padding:4px 10px;
  flex-direction:row;
  gap:0;
  white-space:nowrap;
}

.jcm-studio .seg{
  display:flex;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:2px;
  gap:1px;
}
.jcm-studio .seg button{
  flex:1;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;
  color:var(--fg-dim);
  font-size:11px;font-weight:700;
  transition:background .12s,color .12s;
}
.jcm-studio .seg button:hover{color:var(--fg);}
.jcm-studio .seg button.active{background:var(--accent);color:#fff;}
.jcm-studio .seg button i{font-size:14px;}

.jcm-studio .bg-source-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  margin-bottom:10px;
}
.jcm-studio .bg-source-tab{
  height:48px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  color:var(--fg-mid);
  font-size:10px;font-weight:600;
  transition:all .12s;
}
.jcm-studio .bg-source-tab:hover{background:var(--panel-3);color:var(--fg);}
.jcm-studio .bg-source-tab.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.jcm-studio .bg-source-tab i{font-size:16px;}

/* 오버레이 톤 프리셋: 버튼 자체를 해당 색 100%로 표시 */
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="black"]{
  background:#000000;
  border-color:#2a2a2a;
  color:#f5f5f5;
}
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="navy"]{
  background:#0D1B2A;
  border-color:#1e3044;
  color:#eef2f6;
}
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="wine"]{
  background:#4A0E16;
  border-color:#6b1520;
  color:#fdeff1;
}
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="black"]:hover{
  background:#141414;
  border-color:#3d3d3d;
  color:#fff;
}
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="navy"]:hover{
  background:#152535;
  border-color:#2a4158;
  color:#fff;
}
.jcm-studio .overlay-preset-buttons .overlay-tone-btn.bg-source-tab[data-overlay-preset="wine"]:hover{
  background:#5c121c;
  border-color:#7a1a28;
  color:#fff;
}

/* color swatches */
.jcm-studio .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.jcm-studio .swatch{
  aspect-ratio:1;
  border-radius:4px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .1s,border-color .12s;
}
.jcm-studio .swatch:hover{transform:scale(1.1);}
.jcm-studio .swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
.jcm-studio .color-input{
  width:100%;height:32px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:3px;
  cursor:pointer;
}
.jcm-studio .color-input::-webkit-color-swatch-wrapper{padding:0;}
.jcm-studio .color-input::-webkit-color-swatch{border:none;border-radius:3px;}

.jcm-studio .color-input-row{display:flex;gap:4px;align-items:center;}
.jcm-studio .color-input-row .color-input{flex:0 0 32px;height:28px;padding:2px;}
.jcm-studio .color-input-row .input{flex:1;font-family:var(--mono);font-size:11px;text-transform:uppercase;}

/* image picker preview */
.jcm-studio .bg-preview{
  position:relative;
  margin-bottom:8px;
  aspect-ratio:16/9;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--panel-2) center/cover;
  border:1px solid var(--line);
}
.jcm-studio .bg-preview-empty{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--fg-faint);font-size:10px;gap:4px;
}
.jcm-studio .bg-preview-empty i{font-size:22px;}
.jcm-studio .bg-preview-clear{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;
  background:rgba(0,0,0,.7);
  color:#fff;
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.jcm-studio .bg-preview-clear:hover{background:var(--accent);}

/* slider */
.jcm-studio .slider-row{display:flex;gap:6px;align-items:center;}
.jcm-studio .slider-row .input{flex:0 0 50px;text-align:center;font-family:var(--mono);font-size:11px;}
.jcm-studio .slider{
  flex:1;
  -webkit-appearance:none;appearance:none;
  height:4px;background:var(--panel-3);border-radius:2px;
  outline:none;
  cursor:pointer;
}
.jcm-studio .slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);
  border:2px solid var(--fg);
  cursor:pointer;
  transition:transform .1s;
}
.jcm-studio .slider::-webkit-slider-thumb:hover{transform:scale(1.15);}
.jcm-studio .slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);
  border:2px solid var(--fg);
  cursor:pointer;
}

/* inspector — text effects toggles */
.jcm-studio .text-fx{display:flex;gap:4px;}
.jcm-studio .text-fx button{
  flex:1;height:28px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--fg-mid);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  transition:all .12s;
}
.jcm-studio .text-fx button:hover{color:var(--fg);}
.jcm-studio .text-fx button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

/* apply-to */
.jcm-studio .apply-to{
  margin-top:10px;
  padding:8px;
  background:var(--cyan-soft);
  border:1px solid var(--cyan-line);
  border-radius:var(--r);
}
.jcm-studio .apply-to-label{
  font-size:10px;color:var(--cyan);font-weight:700;
  display:flex;align-items:center;gap:4px;
  margin-bottom:6px;
}
.jcm-studio .apply-to-label i{font-size:13px;}
.jcm-studio .apply-to-buttons{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.jcm-studio .apply-to-buttons button{
  height:24px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--fg-mid);
  font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:3px;
  transition:all .12s;
}
.jcm-studio .apply-to-buttons button:hover{background:var(--cyan-soft);color:var(--cyan);border-color:var(--cyan-line);}
.jcm-studio .apply-to-buttons button i{font-size:12px;}

.jcm-studio .add-tbox-btn{
  width:100%;height:30px;
  margin-top:8px;
  background:var(--panel-2);
  color:var(--fg-mid);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);
  font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .12s;
}
.jcm-studio .add-tbox-btn:hover{background:var(--panel-3);color:var(--fg);border-color:var(--accent);border-style:solid;}

/* font preview chips */
.jcm-studio .font-chips{
  display:flex;flex-direction:column;gap:3px;
  max-height:200px;overflow-y:auto;
  padding:2px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.jcm-studio .font-chip{
  height:32px;
  padding:0 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:3px;
  color:var(--fg);
  cursor:pointer;
  transition:background .1s;
}
.jcm-studio .font-chip:hover{background:var(--panel-3);}
.jcm-studio .font-chip.active{background:var(--accent-soft);color:var(--fg);}
.jcm-studio .font-chip-name{font-size:13px;font-weight:600;}
.jcm-studio .font-chip-tag{font-size:9px;color:var(--fg-dim);font-family:var(--mono);text-transform:uppercase;}

/* ---------- BOTTOM BAR ---------- */
.jcm-studio .bottombar{
  grid-area:bottom;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 14px;
  gap:14px;
  font-size:11px;
  color:var(--fg-dim);
}
.jcm-studio .zoom-controls{display:flex;align-items:center;gap:4px;}
.jcm-studio .zoom-controls button{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-mid);border-radius:3px;
  transition:background .12s;
}
.jcm-studio .zoom-controls button:hover{background:var(--hover);color:var(--fg);}
.jcm-studio .zoom-display{
  min-width:48px;height:24px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:var(--fg-mid);font-weight:700;
}

.jcm-studio .bottombar-divider{width:1px;height:18px;background:var(--line);}

.jcm-studio .shortcut-hint{display:flex;align-items:center;gap:4px;color:var(--fg-dim);}
.jcm-studio .kbd{
  font-family:var(--mono);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-bottom-width:2px;
  padding:1px 5px;
  border-radius:3px;
  font-size:9px;font-weight:700;
  color:var(--fg-mid);
}

.jcm-studio .save-status{
  margin-left:auto;
  display:flex;align-items:center;gap:5px;
  color:var(--ok);
  font-size:10px;font-weight:600;
}
.jcm-studio .save-status i{font-size:12px;}

/* ---------- MODALS ---------- */
.jcm-studio .modal-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  z-index:6200;
  padding:40px;
}
.jcm-studio .modal-backdrop.show{display:flex;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.jcm-studio .modal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  max-width:640px;width:100%;
  max-height:80vh;display:flex;flex-direction:column;overflow:hidden;
}
.jcm-studio .modal-head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.jcm-studio .modal-title{font-size:14px;font-weight:700;}
.jcm-studio .modal-close{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--fg-mid);font-size:18px;}
.jcm-studio .modal-close:hover{background:var(--hover);color:var(--fg);}
.jcm-studio .modal-body{padding:16px;overflow-y:auto;}
.jcm-studio .modal-body p{margin-bottom:10px;color:var(--fg-mid);line-height:1.55;font-size:12.5px;}
.jcm-studio .modal-body h3{font-size:12px;font-weight:700;color:var(--fg);margin:16px 0 8px;}
.jcm-studio .modal-body kbd{
  font-family:var(--mono);
  background:var(--panel-2);border:1px solid var(--line);
  padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700;
  color:var(--fg);
  border-bottom-width:2px;
}
.jcm-studio .modal-body .shortcut-table{
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  font-size:11.5px;
}
.jcm-studio .modal-body .shortcut-table > div:nth-child(odd){text-align:right;}

.jcm-studio .export-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;}
.jcm-studio .export-card{
  padding:14px;
  background:var(--panel-2);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  cursor:pointer;
  transition:all .12s;
  text-align:left;
}
.jcm-studio .export-card:hover{border-color:var(--accent);background:var(--panel-3);}
.jcm-studio .export-card.active{border-color:var(--accent);background:var(--accent-soft);}
.jcm-studio .export-card-icon{
  width:32px;height:32px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:8px;
}
.jcm-studio .export-card-name{font-size:12px;font-weight:700;color:var(--fg);}
.jcm-studio .export-card-desc{font-size:10px;color:var(--fg-dim);margin-top:3px;line-height:1.3;}

.jcm-studio .progress-bar{
  height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-top:14px;
}
.jcm-studio .progress-bar-fill{
  height:100%;
  background:linear-gradient(to right,var(--accent),#E55048);
  border-radius:3px;
  transition:width .25s ease;
}
.jcm-studio .progress-text{
  text-align:center;font-size:10px;color:var(--fg-mid);margin-top:6px;font-family:var(--mono);
}

/* mobile lock */
.jcm-studio .mobile-lock{display:none;}
@media (max-width: 1100px){
  .jcm-studio .app{display:none;}
  .jcm-studio .mobile-lock{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100vh;padding:24px;text-align:center;
    color:var(--fg-mid);
  }
  .jcm-studio .mobile-lock i{font-size:48px;color:var(--accent);margin-bottom:16px;}
  .jcm-studio .mobile-lock h2{font-size:16px;color:var(--fg);margin-bottom:8px;font-weight:700;}
  .jcm-studio .mobile-lock p{font-size:13px;line-height:1.5;}
}

/* tooltips */
.jcm-studio [data-tip]{position:relative;}
.jcm-studio [data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--fg);
  padding:4px 8px;
  border-radius:4px;
  font-size:10px;font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  z-index:100;
  box-shadow:var(--shadow);
}

/* utility */
.jcm-studio .hidden{display:none!important;}
.jcm-studio .flex-spacer{flex:1;}

/* =========================================================================
   PLUGIN-ONLY 추가 — 데모에 없는 요소들 (boot overlay, toast, spinner, etc.)
   ========================================================================= */

/* 부팅 로딩 오버레이 */
.jcm-studio .jcm-studio-boot{
  position:fixed;inset:0;z-index:6020;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg);
  color:var(--fg-mid);
  font-family:var(--ui);
}
.jcm-studio .jcm-studio-boot.hidden{display:none;}
.jcm-studio .jcm-studio-boot i{font-size:36px;color:var(--accent);}
.jcm-studio .jcm-studio-boot p{font-size:13px;color:var(--fg-mid);}
.jcm-studio .ri-spin{animation:spin 1s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }

/* 토스트 스택 */
.jcm-studio .jcm-toast-stack{
  position:fixed;
  right:18px;
  bottom:60px;
  z-index:6050;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.jcm-studio .jcm-toast{
  pointer-events:auto;
  min-width:240px;max-width:380px;
  padding:10px 14px;
  background:var(--panel-2);
  color:var(--fg);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  font-size:12px;
  display:flex;align-items:center;gap:10px;
  animation:tslideIn .18s ease;
}
.jcm-studio .jcm-toast.warn{border-color:var(--warn);}
.jcm-studio .jcm-toast.warn i{color:var(--warn);}
.jcm-studio .jcm-toast.err{border-color:var(--err);}
.jcm-studio .jcm-toast.err i{color:var(--err);}
.jcm-studio .jcm-toast.ok i{color:var(--ok);}
.jcm-studio .jcm-toast i{font-size:16px;flex-shrink:0;color:var(--cyan);}
.jcm-studio .jcm-toast .close{margin-left:auto;color:var(--fg-dim);cursor:pointer;font-size:14px;}
@keyframes tslideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 갤러리 grid 의 빈 placeholder 카드 */
.jcm-studio .gal-item-skel{
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  position:relative;
  overflow:hidden;
  width:100%;
  height:0;
  padding-bottom:56.25%;
  align-self:start;
}
.jcm-studio .gal-item-skel::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  animation:skel 1.4s infinite;
}
@keyframes skel { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* 갤러리 이미지 로딩 실패 폴백 */
.jcm-studio .gal-item-error{
  background:var(--panel-3);
  color:var(--fg-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;
  text-align:center;
  padding:6px;
}

/* 텍스트 박스 컨텐츠 안에서 빈 줄 보존 */
.jcm-studio .tbox-content{white-space:pre-wrap;word-break:keep-all;outline:none;}
.jcm-studio .tbox-content:focus{outline:none;}

/* 인스펙터 — 비어 있을 때 안내 */
.jcm-studio .inspector-empty{
  padding:24px 14px;
  color:var(--fg-dim);
  font-size:12px;
  text-align:center;
  line-height:1.6;
}
.jcm-studio .inspector-empty i{font-size:28px;color:var(--fg-faint);margin-bottom:10px;display:block;}

/* 갤러리 비활성화 안내 */
.jcm-studio .gallery-disabled{
  padding:18px 14px;
  text-align:center;
  color:var(--fg-dim);
  font-size:11.5px;
  line-height:1.55;
}
.jcm-studio .gallery-disabled i{font-size:24px;color:var(--warn);display:block;margin-bottom:8px;}

/* 줌 컨트롤 — 줌 인풋 직접 조정 */
.jcm-studio .zoom-display{user-select:text;}

/* Export progress overlay */
.jcm-studio .progress-bar{
  height:6px;
  background:var(--panel-3);
  border-radius:3px;
  overflow:hidden;
}
.jcm-studio .progress-bar-fill{
  height:100%;
  background:var(--accent);
  transition:width .2s ease;
}
.jcm-studio .progress-text{
  margin-top:6px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--fg-mid);
  text-align:center;
}

/* (Astra/Footer/메인 wrapper 가림 규칙은 파일 상단의 풀스크린 셸 블록에 통합되어 있다.) */