/* 블록 전용 레이아웃입니다. 사이트의 Additional CSS와 기존 shortcode는 변경하지 않습니다. */
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
/* 너비를 이중 적용하지 않도록 인라인 상자에서는 바깥 요소가 너비를 담당합니다.
   편집기의 전역 .wp-block 너비 규칙보다 이 블록의 개별 설정을 우선합니다. */
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="block"] { display: block; }
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="flex"] { display: flex; }
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-block"] { display: inline-block; }
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-flex"] { display: inline-flex; }
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-block"],
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-flex"] {
 width: var(--cg-network-width, 100%) !important; vertical-align: top;
 margin-left: 0 !important; margin-right: 0 !important;
}
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox) > :is(.cg-network-frame, .cg-network-shell) { width: var(--cg-network-width, 100%); }
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-block"] > :is(.cg-network-frame, .cg-network-shell),
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline-flex"] > :is(.cg-network-frame, .cg-network-shell) { width: 100%; }
/* inline에는 width가 적용되지 않으므로 내부 그래프 상자에 너비를 유지합니다. */
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline"] {
 display: inline; width: auto !important; margin-left: 0 !important; margin-right: 0 !important;
}
:is(.wp-block-celestigram-planet-network-graph, .wp-block-celestigram-graph-sandbox)[data-display="inline"] > :is(.cg-network-frame, .cg-network-shell) {
 display: inline-block; vertical-align: top; margin-left: 0; margin-right: 0;
}
.cg-network-frame { border: 0 solid currentColor; box-sizing: border-box; max-width: 100%; min-width: 0; }
:is(.cg-network-frame, .cg-network-shell)[data-align="left"] { margin-left: 0; margin-right: auto; }
:is(.cg-network-frame, .cg-network-shell)[data-align="center"] { margin-left: auto; margin-right: auto; }
:is(.cg-network-frame, .cg-network-shell)[data-align="right"] { margin-left: auto; margin-right: 0; }
.cg-network-host { position: relative; width: 100%; min-width: 0; }
.cg-network-stage { position: relative; overflow: hidden; width: 100%; padding: 0; box-sizing: border-box; }
/* 클릭 및 Enter 확대/복귀 모두 그래프에 별도 포커스 선을 추가하지 않습니다. */
.cg-network-stage:focus, .cg-network-stage:focus-visible { outline: none; }
.cg-network-stage svg { position: absolute; left: 0; top: 0; max-width: none !important; margin: 0 !important; transform-origin: 0 0; }
.cg-network-stage[data-interactive="true"] { cursor: grab; touch-action: none; }
.cg-network-caption { margin: .6em 0; }
/* 제목은 그래프를 움직이거나 확대해도 모서리에 고정되며 레이아웃 높이를 늘리지 않습니다. */
.cg-network-host > .cg-network-title {
 position: absolute; z-index: 2; margin: 0; padding: 0; line-height: 1.3;
 max-width: calc(100% - 16px); overflow-wrap: anywhere; pointer-events: none;
}
.cg-network-title[data-position="top-left"] { top: 8px; left: 8px; }
.cg-network-title[data-position="top-right"] { top: 8px; right: 8px; text-align: right; }
.cg-network-title[data-position="bottom-left"] { bottom: 8px; left: 8px; }
.cg-network-title[data-position="bottom-right"] { bottom: 8px; right: 8px; text-align: right; }
/* 도움말은 그래프 테두리 밖의 캡션에만 80% 불투명도를 적용합니다. */
.cg-network-shell > .cg-network-caption { padding-top: 8px; font-size: .85em; opacity: .8; }
.cg-network-host.cg-network-expanded { position: fixed; inset: 36px 12px 12px; z-index: 100000; width: auto; padding: 12px; background: #fff; color: #222; box-shadow: 0 0 0 100vmax #0008; box-sizing: border-box; }
.cg-network-editor-status { padding: 12px; border: 1px dashed #aaa; }

/* 패딩은 블록 설정의 값을 inline style로 적용합니다. 기본값은 사방 20px입니다. */

/* 다중 Target: 탭은 그래프 상자의 윗선에 연결하며 본문 테마의 버튼 스타일을 격리합니다. */
.cg-network-shell { min-width: 0; max-width: 100%; box-sizing: border-box; --cg-tab-surface: #fff; }
.cg-network-shell > .cg-network-frame { width: 100%; }
.cg-network-tablist {
 position: relative; z-index: 3; display: flex; gap: 3px; align-items: end;
 width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
 padding: 0; margin: 0 0 calc(-1 * var(--cg-tab-border-width, 0px)); box-sizing: border-box;
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab {
 appearance: none; flex: 0 0 auto; position: relative; box-sizing: border-box;
 margin: 0; padding: 0 12px; height: 28px; min-height: 28px;
 border: var(--cg-tab-border-width, 0px) var(--cg-tab-border-style, solid) var(--cg-tab-border-color, currentColor); border-radius: 3px 0 0 0;
 background: #f0f0f0; color: #555; box-shadow: none; text-transform: none;
 font: 600 13px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 letter-spacing: .015em; text-decoration: none; white-space: nowrap; cursor: pointer;
 transition: background-color .15s, color .15s;
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab:hover { background: #e6e6e6; color: #222; }
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab[aria-selected="true"] {
 background: var(--cg-tab-surface); color: #222; border-color: var(--cg-tab-border-color, currentColor);
 border-bottom-color: var(--cg-tab-surface); box-shadow: none;
}
/* 탭 사이를 3px 띄우며, 선택된 탭만 아래 선을 배경색으로 연결합니다. */
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab:focus { outline: none; }
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab:focus-visible { outline: 2px solid #42658e; outline-offset: -4px; }
.cg-network-tab-panel { width: 100%; height: 100%; min-width: 0; }
.cg-network-tab-panel[hidden] { display: none !important; }
.cg-network-tab-status {
 height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
 gap: 16px; padding: 24px; box-sizing: border-box; color: #64748b;
 font: 400 13px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center;
}
.cg-network-tab-retry { font: inherit; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #334155; cursor: pointer; }
/* 확대해도 탭을 유지하여 Target 사이를 이동할 수 있습니다. */
.cg-network-shell.cg-network-tabs-expanded {
 position: fixed; inset: 36px 12px 12px; z-index: 100000; width: auto !important; max-width: none;
 padding: 12px; margin: 0; background: #fff; box-shadow: 0 0 0 100vmax #0008;
}
@media (max-width: 480px) {
 .cg-network-tablist { gap: 3px; }
 :is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab { padding-left: 13px; padding-right: 13px; }
}
@media (prefers-reduced-motion: reduce) { :is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab { transition: none; } }

/* 우측 상단은 곡선이나 직각이 아닌 10px 사선 모따기입니다.
   바깥/안쪽 다각형을 겹쳐 사선에도 그래프와 동일한 두께의 테두리를 그립니다. */
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab {
 --cg-tab-cut: 10px; --cg-tab-fill: #f0f0f0;
 isolation: isolate; border: 0; border-radius: 0;
 background: var(--cg-tab-border-color, currentColor);
 clip-path: polygon(0 0, calc(100% - var(--cg-tab-cut)) 0, 100% var(--cg-tab-cut), 100% 100%, 0 100%);
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab::before {
 content: ''; position: absolute; z-index: -1;
 inset: var(--cg-tab-border-width, 0px);
 background: var(--cg-tab-fill);
 --cg-tab-inner-cut: calc(var(--cg-tab-cut) - .585786 * var(--cg-tab-border-width, 0px));
 clip-path: polygon(0 0, calc(100% - var(--cg-tab-inner-cut)) 0, 100% var(--cg-tab-inner-cut), 100% 100%, 0 100%);
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab:hover { --cg-tab-fill: #e6e6e6; background: var(--cg-tab-border-color, currentColor); }
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab[aria-selected="true"] {
 --cg-tab-fill: var(--cg-tab-surface); background: var(--cg-tab-border-color, currentColor);
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab[aria-selected="true"]::before { bottom: 0; }

/* 선택 탭 아래의 그래프 상단 선 자체를 생략합니다. */
.cg-network-frame.cg-network-split-top { position: relative; border-top-color: transparent !important; }
.cg-network-top-line {
 position: absolute; pointer-events: none; box-sizing: border-box;
 top: calc(-1 * var(--cg-tab-border-width, 0px));
 border-top: var(--cg-tab-border-width, 0px) var(--cg-tab-border-style, solid) var(--cg-tab-border-color);
}
.cg-network-top-line-left {
 left: calc(-1 * var(--cg-frame-left-width, 0px));
 height: var(--cg-frame-left-radius, 0px); border-top-left-radius: var(--cg-frame-left-radius, 0px);
}
.cg-network-top-line-right {
 right: calc(-1 * var(--cg-frame-right-width, 0px));
 height: var(--cg-frame-right-radius, 0px); border-top-right-radius: var(--cg-frame-right-radius, 0px);
}
:is(.cg-network-tablist,.cg-network-tabgroup) > .cg-network-tab[aria-selected="true"] {
 background:
 linear-gradient(var(--cg-tab-border-color), var(--cg-tab-border-color)) left / var(--cg-tab-border-width) 100% no-repeat,
 linear-gradient(var(--cg-tab-border-color), var(--cg-tab-border-color)) right / var(--cg-tab-border-width) 100% no-repeat,
 linear-gradient(to bottom, var(--cg-tab-border-color) calc(100% - var(--cg-tab-border-width)), transparent 0);
}

/* DBFP scroll controls for CPNG/CGS; the viewport stays attached to the frame. */
.cg-network-tabgroup {display:flex;gap:3px;align-items:end;height:26px;min-width:0;position:relative;z-index:3;margin-bottom:calc(-1 * var(--cg-tab-border-width,0px));}
.cg-network-tabgroup > .cg-network-tablist {flex:1;min-width:0;width:auto;height:26px;margin:0;scrollbar-width:none;-ms-overflow-style:none;}
.cg-network-tabgroup > .cg-network-tablist::-webkit-scrollbar {display:none;width:0;height:0;}
.cg-network-tabgroup .cg-network-tablist > .cg-network-tab,.cg-network-tabgroup > .cg-network-tab {height:26px;min-height:26px;padding:0 24px;font-weight:400;}
.cg-network-tabgroup .cg-network-tablist > .cg-network-tab[aria-selected=true] {font-weight:600;}
.cg-network-tabgroup > .cg-network-scroll-tab {display:inline-flex;align-items:center;justify-content:center;width:28px;padding:0;opacity:.7;}
.cg-network-tabgroup > .cg-network-scroll-tab[hidden] {display:none!important;}

/* Desktop and Mobile share the existing caption position. */
.cg-caption-switch > .cg-caption-mobile,
.cg-caption-switch[data-desktop-empty] { display:none; }
@media (hover:none) and (pointer:coarse) {
 .cg-caption-switch, .cg-caption-switch[data-desktop-empty] { display:block; }
 .cg-caption-switch[data-mobile-empty], .cg-caption-switch > .cg-caption-desktop { display:none; }
 .cg-caption-switch > .cg-caption-mobile { display:inline; }
}
 .cg-caption-switch { white-space:pre-line; }