2074 lines
52 KiB
CSS
2074 lines
52 KiB
CSS
* { box-sizing: border-box; }
|
|
:root {
|
|
--step-height: 52px;
|
|
--bg-deep: #04140f;
|
|
--bg-mid: #0a2e23;
|
|
--bg-panel: rgba(7, 43, 33, 0.78);
|
|
--bg-panel-strong: rgba(8, 37, 29, 0.88);
|
|
--surface-soft: #f4f1e8;
|
|
--surface-plain: #fbf8f1;
|
|
--surface-tint: #eef4ef;
|
|
--line-soft: rgba(129, 201, 171, 0.18);
|
|
--line-strong: rgba(215, 166, 84, 0.42);
|
|
--text-main: #f3f1e8;
|
|
--text-soft: #bbd3c5;
|
|
--text-muted: #83a293;
|
|
--ink-strong: #183128;
|
|
--ink-soft: #51655b;
|
|
--accent: #d3a45f;
|
|
--accent-strong: #f0c574;
|
|
--accent-soft: rgba(211, 164, 95, 0.16);
|
|
--signal-blue: #62b2ff;
|
|
--shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.34);
|
|
}
|
|
html {
|
|
min-height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", "Noto Sans KR", sans-serif;
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
background:
|
|
linear-gradient(rgba(120, 186, 158, 0.08) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(120, 186, 158, 0.08) 1px, transparent 1px),
|
|
radial-gradient(circle at 74% 26%, rgba(38, 114, 88, 0.38), transparent 28%),
|
|
radial-gradient(circle at 20% 72%, rgba(191, 149, 82, 0.14), transparent 22%),
|
|
linear-gradient(135deg, #04120d 0%, #0a241b 45%, #0f4534 100%);
|
|
background-size: 40px 40px, 40px 40px, auto, auto, auto;
|
|
position: relative;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
}
|
|
body::before,
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
body::before {
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 28% 24%, rgba(239, 192, 109, 0.12), transparent 18%);
|
|
opacity: 1;
|
|
box-shadow: none;
|
|
}
|
|
body::after {
|
|
background:
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.42)),
|
|
radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
|
|
}
|
|
|
|
.board {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: 100vh;
|
|
height: auto;
|
|
padding: 16px 12px 12px;
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.sitemap-fab {
|
|
position: fixed;
|
|
left: 16px;
|
|
top: 16px;
|
|
z-index: 25;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(223, 182, 110, 0.52);
|
|
background: linear-gradient(180deg, rgba(10, 55, 42, 0.96) 0%, rgba(6, 35, 28, 0.96) 100%);
|
|
color: var(--accent-strong);
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
|
|
}
|
|
.data-io {
|
|
position: fixed;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
z-index: 24;
|
|
display: grid;
|
|
gap: 7px;
|
|
justify-items: start;
|
|
}
|
|
.floating-edit-btn {
|
|
width: 42px;
|
|
min-width: 42px;
|
|
height: 42px;
|
|
border: 1px solid rgba(133, 183, 160, 0.26);
|
|
background: linear-gradient(180deg, rgba(10, 51, 40, 0.96) 0%, rgba(5, 33, 26, 0.96) 100%);
|
|
color: var(--text-soft);
|
|
border-radius: 999px;
|
|
padding: 0;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: .01em;
|
|
cursor: pointer;
|
|
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
|
|
white-space: nowrap;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.floating-edit-btn:hover {
|
|
border-color: rgba(229, 188, 114, 0.62);
|
|
background: linear-gradient(180deg, rgba(22, 72, 57, 0.98) 0%, rgba(8, 40, 31, 0.98) 100%);
|
|
color: var(--accent-strong);
|
|
}
|
|
.floating-edit-btn.active {
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
background: linear-gradient(135deg, #c08a3f 0%, #f1c16f 100%);
|
|
color: #11281f;
|
|
box-shadow: 0 12px 24px rgba(120, 74, 17, 0.34);
|
|
}
|
|
.sync-status {
|
|
width: 42px;
|
|
height: 42px;
|
|
min-height: 42px;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(133, 183, 160, 0.26);
|
|
background: rgba(7, 41, 32, 0.92);
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
|
|
white-space: nowrap;
|
|
display: grid;
|
|
place-items: center;
|
|
line-height: 1;
|
|
}
|
|
.sync-status[data-state="loading"] {
|
|
border-color: rgba(98, 178, 255, 0.45);
|
|
background: rgba(11, 44, 55, 0.96);
|
|
color: #b4deff;
|
|
}
|
|
.sync-status[data-state="saving"] {
|
|
border-color: rgba(240, 197, 116, 0.44);
|
|
background: rgba(69, 53, 22, 0.9);
|
|
color: #ffe29d;
|
|
}
|
|
.sync-status[data-state="ready"] {
|
|
border-color: rgba(98, 201, 160, 0.44);
|
|
background: rgba(7, 56, 43, 0.96);
|
|
color: #bcead4;
|
|
}
|
|
.sync-status[data-state="cache"] {
|
|
border-color: rgba(240, 197, 116, 0.44);
|
|
background: rgba(74, 56, 21, 0.9);
|
|
color: #ffd897;
|
|
}
|
|
.sync-status[data-state="error"] {
|
|
border-color: rgba(236, 119, 100, 0.42);
|
|
background: rgba(72, 21, 18, 0.9);
|
|
color: #ffb4a9;
|
|
}
|
|
.data-io-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 1px solid rgba(133, 183, 160, 0.26);
|
|
background: rgba(7, 41, 32, 0.94);
|
|
color: var(--text-soft);
|
|
border-radius: 999px;
|
|
padding: 0;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.data-io-btn svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke: currentColor;
|
|
stroke-width: 2.6;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.data-io-btn:hover {
|
|
border-color: rgba(229, 188, 114, 0.62);
|
|
background: rgba(15, 61, 47, 0.96);
|
|
}
|
|
.data-io-btn.export {
|
|
color: #ffd793;
|
|
}
|
|
.data-io-btn.import {
|
|
color: #bfe8d6;
|
|
}
|
|
.data-io-input {
|
|
display: none;
|
|
}
|
|
.board-track {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
min-height: calc(100vh - 20px);
|
|
margin: 0;
|
|
padding-left: var(--track-side-pad, 64px);
|
|
padding-right: var(--track-side-pad, 64px);
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: flex-start;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.board-track.map-bar-layout {
|
|
justify-content: flex-start;
|
|
}
|
|
#drillColumns {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flow-panel {
|
|
width: 188px;
|
|
min-width: 188px;
|
|
background:
|
|
linear-gradient(180deg, rgba(11, 54, 43, 0.82) 0%, rgba(7, 34, 28, 0.9) 100%);
|
|
border: 1px solid rgba(132, 187, 161, 0.18);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow-deep);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow:
|
|
var(--shadow-deep),
|
|
inset 0 1px 0 rgba(255, 245, 222, 0.06);
|
|
padding: 12px 12px 14px;
|
|
height: calc(100vh - 20px);
|
|
max-height: calc(100vh - 20px);
|
|
overflow: auto;
|
|
}
|
|
.flow-panel.flow-bar-mode {
|
|
--bar-panel-width: 58px;
|
|
width: var(--bar-panel-width);
|
|
min-width: var(--bar-panel-width);
|
|
padding: 10px 8px 12px;
|
|
background: linear-gradient(180deg, rgba(8, 45, 35, 0.96) 0%, rgba(4, 27, 22, 0.96) 100%);
|
|
border-color: rgba(132, 187, 161, 0.18);
|
|
box-shadow: inset 0 1px 0 rgba(255, 240, 214, 0.08), 0 12px 24px rgba(0, 0, 0, 0.26);
|
|
position: relative;
|
|
}
|
|
.bar-toggle-title {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.bar-toggle-title:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
.bar-restore-btn {
|
|
border: 1px solid #cbd5e1;
|
|
background: #ffffff;
|
|
color: #334155;
|
|
border-radius: 12px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
margin: 2px auto 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
|
|
}
|
|
.bar-collapse-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 999px;
|
|
background: #ffffff;
|
|
color: #334155;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
.bar-restore-btn:hover {
|
|
border-color: #93c5fd;
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
}
|
|
.bar-collapse-btn:hover {
|
|
border-color: #93c5fd;
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
}
|
|
.flow-panel.flow-bar-mode .project-title,
|
|
.flow-panel.flow-bar-mode .mode-btn,
|
|
.flow-panel.flow-bar-mode .panel-badge,
|
|
.flow-panel.flow-bar-mode .title {
|
|
display: none;
|
|
}
|
|
.flow-panel.flow-bar-mode .panel-head,
|
|
.flow-panel.flow-bar-mode .panel-title-row {
|
|
display: none;
|
|
}
|
|
.flow-panel.flow-bar-mode .flow-list {
|
|
gap: 10px;
|
|
justify-items: center;
|
|
position: relative;
|
|
padding: 6px 0 10px;
|
|
}
|
|
.flow-panel.flow-bar-mode .flow-list::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 8px;
|
|
bottom: 10px;
|
|
width: 1px;
|
|
transform: translateX(-50%);
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
#d8e2f1 0 4px,
|
|
transparent 4px 8px
|
|
);
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn {
|
|
width: 42px;
|
|
min-width: 42px;
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
padding: 0;
|
|
border: 1px solid #cbd5e1;
|
|
background: #ffffff;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
|
|
font-size: 0;
|
|
color: transparent;
|
|
overflow: visible;
|
|
justify-content: center;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn.with-meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
}
|
|
.flow-panel.flow-bar-mode .step-main,
|
|
.flow-panel.flow-bar-mode .step-meta {
|
|
display: none;
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn::before {
|
|
content: "";
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 39, 31, 0.94);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(229, 188, 114, 0.58);
|
|
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn.active {
|
|
background: linear-gradient(135deg, #b8833d 0%, #efc06d 100%);
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
box-shadow: 0 12px 24px rgba(120, 74, 17, 0.34);
|
|
}
|
|
.flow-panel.flow-bar-mode .step-btn.active::before {
|
|
background: rgba(8, 39, 31, 0.94);
|
|
}
|
|
.flow-panel.flow-bar-mode .down-arrow {
|
|
width: 1px;
|
|
height: 14px;
|
|
margin: 0 auto;
|
|
background: transparent;
|
|
color: transparent;
|
|
font-size: 0;
|
|
border-radius: 999px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.flow-panel.flow-bar-mode .down-arrow.broken {
|
|
background: transparent;
|
|
}
|
|
.flow-panel.flow-bar-mode .down-arrow.broken::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(50% + 6px);
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-right: 8px solid #d9b261;
|
|
}
|
|
.flow-panel.flow-bar-mode .link-reason,
|
|
.flow-panel.flow-bar-mode .insert-row,
|
|
.flow-panel.flow-bar-mode .step-actions {
|
|
display: none;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-head,
|
|
.flow-panel.flow-bar-mode .common-title,
|
|
.flow-panel.flow-bar-mode .common-add-btn {
|
|
display: none;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-section {
|
|
border-top: 1px solid rgba(132, 187, 161, 0.16);
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
gap: 12px;
|
|
justify-items: center;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-list {
|
|
gap: 12px;
|
|
justify-items: center;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
justify-items: center;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-btn {
|
|
width: 42px;
|
|
min-width: 42px;
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
padding: 0;
|
|
border: 1px solid #cbd5e1;
|
|
background: #ffffff;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
|
|
font-size: 0;
|
|
color: transparent;
|
|
overflow: visible;
|
|
justify-content: center;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
|
|
}
|
|
.flow-panel.flow-bar-mode .common-btn::before {
|
|
content: "";
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 39, 31, 0.94);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
|
|
}
|
|
.flow-panel.flow-bar-mode .common-btn:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(229, 188, 114, 0.58);
|
|
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
|
|
}
|
|
.flow-panel.flow-bar-mode .common-btn.active {
|
|
background: linear-gradient(135deg, #b8833d 0%, #efc06d 100%);
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
box-shadow: 0 12px 24px rgba(120, 74, 17, 0.34);
|
|
}
|
|
.flow-panel.flow-bar-mode .common-btn.active::before {
|
|
background: rgba(8, 39, 31, 0.94);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
|
|
}
|
|
.bar-step-tooltip {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translateY(-50%);
|
|
background: rgba(5, 24, 19, 0.94);
|
|
color: #f5efe1;
|
|
border-radius: 8px;
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
letter-spacing: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.12s ease, visibility 0.12s ease;
|
|
}
|
|
.bar-step-tooltip.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
#mainPanel {
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
#mainFlow {
|
|
overflow: visible;
|
|
min-height: auto;
|
|
max-height: none;
|
|
padding-right: 2px;
|
|
}
|
|
.common-section {
|
|
border-top: 1px solid rgba(132, 187, 161, 0.16);
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 8px;
|
|
min-height: auto;
|
|
overflow: visible;
|
|
}
|
|
.common-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
.common-title {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
color: var(--accent-strong);
|
|
font-weight: 900;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.project-title {
|
|
margin: 0 0 8px;
|
|
font-size: 11px;
|
|
color: var(--accent-strong);
|
|
font-weight: 900;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.common-add-btn {
|
|
border: 1px solid rgba(224, 181, 108, 0.45);
|
|
background: rgba(79, 58, 24, 0.52);
|
|
color: #ffe19f;
|
|
border-radius: 7px;
|
|
padding: 3px 8px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
.common-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.common-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
align-items: stretch;
|
|
}
|
|
.common-btn {
|
|
border: 1px solid rgba(184, 195, 185, 0.9);
|
|
background: var(--surface-soft);
|
|
border-radius: 10px;
|
|
padding: 0 10px;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--ink-strong);
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: var(--step-height);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all .15s ease;
|
|
}
|
|
.common-btn:hover {
|
|
border-color: rgba(229, 188, 114, 0.58);
|
|
}
|
|
.common-btn.active {
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
background: linear-gradient(135deg, #b8833d 0%, #efc06d 100%);
|
|
box-shadow: 0 12px 24px rgba(120, 74, 17, 0.32);
|
|
color: #10241c;
|
|
}
|
|
.common-empty {
|
|
border: 1px dashed rgba(132, 187, 161, 0.22);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-weight: 700;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
color: var(--accent-strong);
|
|
letter-spacing: .02em;
|
|
text-transform: uppercase;
|
|
}
|
|
.panel-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
gap: 8px;
|
|
}
|
|
.panel-badge {
|
|
border-radius: 999px;
|
|
background: rgba(208, 160, 88, 0.16);
|
|
color: #ffe0a3;
|
|
border: 1px solid rgba(224, 181, 108, 0.32);
|
|
padding: 4px 9px;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: .02em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.panel-head .title {
|
|
margin: 0;
|
|
}
|
|
.mode-btn {
|
|
border: 1px solid rgba(132, 187, 161, 0.2);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text-soft);
|
|
border-radius: 7px;
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.mode-btn.active {
|
|
background: linear-gradient(135deg, #b8833d 0%, #efc06d 100%);
|
|
color: #10241c;
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
}
|
|
.panel-tools {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
.add-end-btn {
|
|
border: 1px solid rgba(224, 181, 108, 0.45);
|
|
background: rgba(79, 58, 24, 0.52);
|
|
color: #ffe19f;
|
|
border-radius: 7px;
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.flow-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-content: start;
|
|
}
|
|
.step-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
align-items: stretch;
|
|
}
|
|
.step-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
}
|
|
.step-row > .step-actions,
|
|
.common-row > .step-actions {
|
|
grid-column: 1;
|
|
}
|
|
.step-edit-meta {
|
|
width: 100%;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
line-height: 1.25;
|
|
white-space: pre-line;
|
|
padding: 0 2px;
|
|
}
|
|
.icon-btn {
|
|
border: 1px solid rgba(132, 187, 161, 0.2);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text-soft);
|
|
border-radius: 6px;
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.icon-btn.delete {
|
|
color: #ffb4a9;
|
|
border-color: rgba(236, 119, 100, 0.42);
|
|
background: rgba(72, 21, 18, 0.9);
|
|
}
|
|
|
|
.step-btn {
|
|
border: 1px solid rgba(184, 195, 185, 0.92);
|
|
background: linear-gradient(180deg, var(--surface-plain) 0%, var(--surface-soft) 100%);
|
|
border-radius: 11px;
|
|
padding: 0 10px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--ink-strong);
|
|
cursor: pointer;
|
|
transition: all .15s ease;
|
|
width: 100%;
|
|
height: var(--step-height);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.step-btn:hover { border-color: rgba(229, 188, 114, 0.58); }
|
|
.step-btn.active {
|
|
border-color: rgba(241, 202, 128, 0.7);
|
|
background: linear-gradient(135deg, #b8833d 0%, #efc06d 100%);
|
|
box-shadow: 0 12px 24px rgba(120, 74, 17, 0.32);
|
|
color: #10241c;
|
|
}
|
|
.step-btn.with-meta {
|
|
white-space: normal;
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 1px;
|
|
height: var(--step-height);
|
|
}
|
|
.step-main {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--ink-strong);
|
|
line-height: 1.2;
|
|
}
|
|
.step-btn.active .step-main {
|
|
color: #10241c;
|
|
}
|
|
.step-meta {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--ink-soft);
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.step-btn.active .step-meta {
|
|
color: rgba(16, 36, 28, 0.72);
|
|
}
|
|
|
|
.down-arrow {
|
|
text-align: center;
|
|
color: rgba(132, 187, 161, 0.42);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
user-select: none;
|
|
}
|
|
.insert-row {
|
|
text-align: center;
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 4px;
|
|
}
|
|
.insert-btn {
|
|
border: 1px dashed rgba(229, 188, 114, 0.56);
|
|
background: rgba(79, 58, 24, 0.38);
|
|
color: #ffe19f;
|
|
border-radius: 999px;
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.link-edit-btn {
|
|
border: 1px solid rgba(239, 192, 109, 0.62);
|
|
background: rgba(79, 58, 24, 0.62);
|
|
color: #ffe09b;
|
|
border-radius: 999px;
|
|
padding: 2px 7px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.link-clear-btn {
|
|
border: 1px solid rgba(236, 119, 100, 0.42);
|
|
background: rgba(72, 21, 18, 0.9);
|
|
color: #ffb4a9;
|
|
border-radius: 999px;
|
|
padding: 2px 7px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
.down-arrow.broken {
|
|
color: #ffd18a;
|
|
font-weight: 900;
|
|
}
|
|
.link-reason {
|
|
width: fit-content;
|
|
max-width: 170px;
|
|
border: 1px solid rgba(247, 214, 143, 0.92);
|
|
background: linear-gradient(180deg, #f5d48d 0%, #e2b255 100%);
|
|
color: #3f2d08;
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
justify-self: center;
|
|
box-shadow:
|
|
0 6px 14px rgba(0, 0, 0, 0.18),
|
|
inset 0 1px 0 rgba(255, 248, 226, 0.7);
|
|
letter-spacing: .01em;
|
|
}
|
|
|
|
.empty {
|
|
border: 1px dashed rgba(132, 187, 161, 0.22);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 700;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
line-height: 1.4;
|
|
}
|
|
.editor-panel {
|
|
--viewer-note-font-size: 18px;
|
|
--viewer-note-line-height: 1.35;
|
|
display: none;
|
|
width: 1396px;
|
|
min-width: 1396px;
|
|
max-width: 1396px;
|
|
flex: 0 0 1396px;
|
|
height: calc(100vh - 20px);
|
|
max-height: calc(100vh - 20px);
|
|
background: linear-gradient(180deg, rgba(10, 52, 41, 0.88) 0%, rgba(7, 34, 28, 0.95) 100%);
|
|
border: 1px solid rgba(132, 187, 161, 0.18);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow-deep);
|
|
box-shadow:
|
|
var(--shadow-deep),
|
|
inset 0 1px 0 rgba(255, 245, 222, 0.06);
|
|
grid-template-rows: auto 1fr;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
.board-track.map-bar-layout .editor-panel {
|
|
--viewer-note-font-size: 18px;
|
|
--viewer-note-line-height: 1.35;
|
|
}
|
|
.board-track.map-bar-layout .editor-title {
|
|
font-size: 18px;
|
|
}
|
|
.board-track.map-bar-layout .editor-viewer-title {
|
|
font-size: var(--viewer-note-font-size);
|
|
}
|
|
.board-track.map-bar-layout .preview { border-width: 2px; padding: 0; }
|
|
.board-track.map-bar-layout .preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.editor-panel.open { display: grid; }
|
|
.editor-panel.viewer-mode .uploader {
|
|
display: none;
|
|
}
|
|
.editor-input-only {}
|
|
.editor-panel .editor-view-only {
|
|
display: none !important;
|
|
}
|
|
.editor-panel.viewer-mode .editor-input-only {
|
|
display: none !important;
|
|
}
|
|
.editor-panel.viewer-mode .editor-view-only {
|
|
display: block !important;
|
|
}
|
|
.editor-panel.viewer-mode .path-input,
|
|
.editor-panel.viewer-mode .note-input,
|
|
.editor-panel.viewer-mode .mini-input {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-soft);
|
|
border-color: rgba(132, 187, 161, 0.16);
|
|
box-shadow: none;
|
|
}
|
|
.editor-panel.viewer-mode .path-input:focus,
|
|
.editor-panel.viewer-mode .note-input:focus,
|
|
.editor-panel.viewer-mode .mini-input:focus {
|
|
border-color: rgba(132, 187, 161, 0.16);
|
|
box-shadow: none;
|
|
}
|
|
.editor-head {
|
|
padding: 16px 16px 14px;
|
|
border-bottom: 1px solid rgba(132, 187, 161, 0.16);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
background: rgba(8, 37, 29, 0.92);
|
|
flex-wrap: nowrap;
|
|
}
|
|
.editor-head-info {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.editor-panel.viewer-mode .editor-head {
|
|
align-items: flex-start;
|
|
padding: 18px 18px 16px;
|
|
}
|
|
.editor-head-path {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 0 0 630px;
|
|
min-width: 420px;
|
|
}
|
|
.editor-head-path .label {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.editor-head-path .path-wrap {
|
|
flex: 1 1 auto;
|
|
}
|
|
.editor-head-path .path-input {
|
|
padding: 8px 10px;
|
|
height: 34px;
|
|
}
|
|
.editor-title {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: var(--text-main);
|
|
line-height: 1.2;
|
|
}
|
|
.editor-sub {
|
|
margin: 4px 0 0;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
}
|
|
.editor-viewer-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 40px;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
}
|
|
.editor-viewer-title {
|
|
margin: 0;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
font-size: var(--viewer-note-font-size);
|
|
line-height: var(--viewer-note-line-height);
|
|
font-weight: 800;
|
|
color: var(--accent-strong);
|
|
word-break: keep-all;
|
|
}
|
|
.viewer-title-line {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
padding-left: 22px;
|
|
}
|
|
.viewer-title-line::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.55em;
|
|
transform: translateY(-50%);
|
|
}
|
|
.viewer-title-line.is-primary::before {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(135deg, #f0c86f 0%, #c9973c 100%);
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 236, 186, 0.22),
|
|
0 4px 10px rgba(24, 10, 0, 0.18);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.viewer-title-line.is-continuation {
|
|
padding-left: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
.viewer-title-line.is-continuation::before {
|
|
content: none;
|
|
}
|
|
.editor-viewer-meta {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0;
|
|
margin-top: 13px;
|
|
margin-left: auto;
|
|
max-width: none;
|
|
white-space: nowrap;
|
|
}
|
|
.editor-viewer-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
.editor-viewer-chip + .editor-viewer-chip {
|
|
position: relative;
|
|
margin-left: 10px;
|
|
padding-left: 11px;
|
|
}
|
|
.editor-viewer-chip + .editor-viewer-chip::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 1px;
|
|
height: 12px;
|
|
background: rgba(132, 187, 161, 0.24);
|
|
transform: translateY(-50%);
|
|
}
|
|
.editor-viewer-chip.is-empty {
|
|
display: none;
|
|
}
|
|
.editor-close {
|
|
border: 1px solid rgba(132, 187, 161, 0.18);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text-soft);
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 999px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.editor-head-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.ci-logo {
|
|
display: block;
|
|
width: auto;
|
|
height: 30px;
|
|
max-width: 132px;
|
|
object-fit: contain;
|
|
flex: 0 0 auto;
|
|
}
|
|
.editor-ci-logo {
|
|
margin: 0;
|
|
}
|
|
.editor-panel.viewer-mode .editor-ci-logo,
|
|
.editor-panel.viewer-mode .editor-close {
|
|
display: none;
|
|
}
|
|
.editor-panel.viewer-mode .editor-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
.editor-panel.viewer-mode .flow-info-card.open {
|
|
margin-top: 17px;
|
|
}
|
|
.editor-panel.viewer-mode .flow-info-card.open .viewer-mini-grid {
|
|
margin-top: 13px;
|
|
}
|
|
.editor-panel.viewer-mode .flow-info-card.open + .section-divider {
|
|
margin-top: 15px;
|
|
}
|
|
.editor-panel.viewer-mode .flow-info-card.open + .section-divider + .screen-info-section {
|
|
margin-top: 13px;
|
|
}
|
|
.editor-body {
|
|
padding: 14px 16px 16px;
|
|
overflow: auto;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 12px;
|
|
background: linear-gradient(180deg, #f7f4ec 0%, #eef4ef 100%);
|
|
min-height: 0;
|
|
overscroll-behavior: none;
|
|
}
|
|
.editor-card {
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.image-card {
|
|
--preview-ratio: var(--dynamic-preview-ratio, 2);
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto auto;
|
|
gap: 10px;
|
|
align-content: start;
|
|
overscroll-behavior: none;
|
|
}
|
|
.image-card > .label-row,
|
|
.image-card > .image-nav,
|
|
.image-card > .uploader {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.image-card > .image-nav {
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.image-note-field {
|
|
display: grid;
|
|
gap: 4px;
|
|
align-content: start;
|
|
}
|
|
.label {
|
|
margin: 0 0 4px;
|
|
font-size: 10px;
|
|
color: var(--accent-strong);
|
|
font-weight: 900;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
.label-row .label {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.uploader {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
}
|
|
.file-input-hidden {
|
|
display: none;
|
|
}
|
|
.file-btn {
|
|
border: 1px solid #564cf5;
|
|
background: linear-gradient(135deg, #3f55f2 0%, #6b3cf1 100%);
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.file-status {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #475569;
|
|
white-space: nowrap;
|
|
display: none;
|
|
}
|
|
.path-wrap { margin-bottom: 0; }
|
|
.path-input {
|
|
width: 100%;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 9px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
background: #fff;
|
|
}
|
|
.path-input:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px #dbeafe;
|
|
}
|
|
.viewer-value,
|
|
.viewer-meta-value {
|
|
border: 1px solid #dbe5f2;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
color: #1e293b;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
font-weight: 700;
|
|
}
|
|
.viewer-value {
|
|
min-height: 44px;
|
|
padding: 12px 14px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
|
|
}
|
|
.viewer-value.is-empty,
|
|
.viewer-meta-value.is-empty {
|
|
color: #94a3b8;
|
|
font-weight: 600;
|
|
}
|
|
.viewer-mini-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.editor-panel.viewer-mode .viewer-mini-grid {
|
|
display: grid !important;
|
|
}
|
|
.viewer-meta-card {
|
|
display: grid;
|
|
gap: 4px;
|
|
align-content: start;
|
|
}
|
|
.viewer-meta-value {
|
|
min-height: 42px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.editor-panel.viewer-mode .step-info-section {
|
|
display: none;
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section .section-title,
|
|
.editor-panel.viewer-mode .screen-info-section .path-card > .label,
|
|
.editor-panel.viewer-mode .screen-info-section .image-note-card > .label,
|
|
.editor-panel.viewer-mode .screen-info-section .image-card > .label-row > .label {
|
|
display: none;
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section {
|
|
display: grid;
|
|
grid-template-rows: auto auto auto;
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
gap: 2px;
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section .path-card {
|
|
margin-top: -2px;
|
|
}
|
|
.editor-panel.viewer-mode #editorPathView {
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
min-height: 1.35em;
|
|
padding: 0;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.editor-panel.viewer-mode #editorNoteView,
|
|
.editor-panel.viewer-mode #editorImageNoteView {
|
|
font-family: "Segoe UI", "Noto Sans KR", sans-serif !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
min-height: 2.2em !important;
|
|
max-height: 2.2em !important;
|
|
padding: 0 !important;
|
|
color: #22483a !important;
|
|
font-size: var(--viewer-note-font-size) !important;
|
|
line-height: var(--viewer-note-line-height) !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: 0 !important;
|
|
text-align: left !important;
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
overflow: hidden !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 2 !important;
|
|
-webkit-box-orient: vertical !important;
|
|
}
|
|
.editor-panel.viewer-mode #editorImageNoteView {
|
|
position: relative;
|
|
padding-left: 18px !important;
|
|
}
|
|
.editor-panel.viewer-mode #editorImageNoteView:not(.is-empty)::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc(var(--viewer-note-line-height) * 0.5em);
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: #2d6758;
|
|
box-shadow: 0 0 0 2px rgba(45, 103, 88, 0.12);
|
|
transform: translateY(-50%);
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section .image-card {
|
|
height: auto;
|
|
min-height: 0;
|
|
grid-template-rows: auto auto;
|
|
align-content: start;
|
|
margin-top: 0;
|
|
gap: 4px;
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section .preview {
|
|
aspect-ratio: auto;
|
|
height: clamp(450px, 70vh, 828px);
|
|
min-height: 450px;
|
|
max-height: 828px;
|
|
}
|
|
.editor-panel.viewer-mode .screen-info-section .image-nav {
|
|
margin-top: 10px;
|
|
margin-bottom: 16px;
|
|
min-height: 34px;
|
|
display: flex !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.clear-btn {
|
|
border: 1px solid #cfd7d0;
|
|
border-radius: 10px;
|
|
background: #f5f1e8;
|
|
color: var(--ink-strong);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.preview {
|
|
border: 1px solid #d7ddd6;
|
|
border-radius: 12px;
|
|
background: #fcfaf5;
|
|
width: 100%;
|
|
aspect-ratio: var(--preview-ratio);
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
overscroll-behavior: none;
|
|
}
|
|
.image-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 2px;
|
|
}
|
|
.nav-btn {
|
|
border: 1px solid #cfd7d0;
|
|
background: #fffdf8;
|
|
color: var(--ink-strong);
|
|
border-radius: 9px;
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
.nav-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
.page-info {
|
|
min-width: 54px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: var(--ink-soft);
|
|
}
|
|
.editor-panel *::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.image-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.72);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 80;
|
|
padding: 24px;
|
|
}
|
|
.image-modal.open {
|
|
display: flex;
|
|
}
|
|
.image-modal-inner {
|
|
position: relative;
|
|
width: min(92vw, 1600px);
|
|
height: min(90vh, 980px);
|
|
background: #f6f2ea;
|
|
border: 1px solid #cfd7d0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.image-modal-nav {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 12px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
z-index: 2;
|
|
background: rgba(15, 23, 42, 0.55);
|
|
border: 1px solid rgba(148, 163, 184, 0.35);
|
|
border-radius: 999px;
|
|
padding: 6px 8px;
|
|
}
|
|
.image-modal-note {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 58px;
|
|
transform: translateX(-50%);
|
|
max-width: min(84vw, 1200px);
|
|
z-index: 2;
|
|
background: rgba(15, 23, 42, 0.62);
|
|
border: 1px solid rgba(148, 163, 184, 0.35);
|
|
border-radius: 12px;
|
|
color: #f7f3e8;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: none;
|
|
}
|
|
.image-modal-note.show {
|
|
display: block;
|
|
}
|
|
.image-modal-btn {
|
|
border: 1px solid #64748b;
|
|
background: rgba(15, 23, 42, 0.6);
|
|
color: #e2e8f0;
|
|
border-radius: 999px;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
line-height: 1.1;
|
|
}
|
|
.image-modal-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
.image-modal-page {
|
|
min-width: 56px;
|
|
text-align: center;
|
|
color: #e2e8f0;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
.image-modal img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background: #f6f2ea;
|
|
}
|
|
.image-modal-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
border: 1px solid #475569;
|
|
background: rgba(15, 23, 42, 0.75);
|
|
color: #fff;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 999px;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.sitemap-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.45);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 70;
|
|
padding: 18px;
|
|
}
|
|
.sitemap-modal.open {
|
|
display: flex;
|
|
}
|
|
.sitemap-modal-inner {
|
|
width: min(99.4vw, 1720px);
|
|
height: min(95vh, 1180px);
|
|
background: #ffffff;
|
|
border: 1px solid #dbe5f2;
|
|
border-radius: 28px;
|
|
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
.sitemap-modal-head {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-areas:
|
|
"title tools"
|
|
"legend legend";
|
|
align-items: start;
|
|
column-gap: 20px;
|
|
row-gap: 14px;
|
|
padding: 32px 40px 26px;
|
|
border-bottom: 1px solid #dbe5f2;
|
|
background: #ffffff;
|
|
}
|
|
.sitemap-modal-head > div:first-child {
|
|
grid-area: title;
|
|
min-width: 0;
|
|
}
|
|
.sitemap-modal-title {
|
|
margin: 0;
|
|
font-size: 34px;
|
|
font-weight: 900;
|
|
color: #132949;
|
|
letter-spacing: .01em;
|
|
text-transform: none;
|
|
}
|
|
.sitemap-modal-sub {
|
|
margin: 6px 0 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #6f819d;
|
|
}
|
|
.sitemap-close-btn {
|
|
border: 1px solid #dbe5f2;
|
|
background: #f3f7fc;
|
|
color: #5f738f;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 999px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.sitemap-toolbar {
|
|
grid-area: tools;
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
margin-top: 0;
|
|
align-self: start;
|
|
}
|
|
.sitemap-ci-logo {
|
|
height: 28px;
|
|
max-width: 124px;
|
|
margin-left: 4px;
|
|
}
|
|
.sm-select {
|
|
border: 1px solid #ced9e8;
|
|
background: #fff;
|
|
color: #0f172a;
|
|
border-radius: 12px;
|
|
padding: 11px 14px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
min-width: 220px;
|
|
}
|
|
.sm-legend {
|
|
grid-area: legend;
|
|
margin-top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px 12px;
|
|
}
|
|
.sm-legend-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 10px;
|
|
border: 1px solid #dbe5f2;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #334155;
|
|
line-height: 1;
|
|
}
|
|
.sm-legend-swatch {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid #cbd5e1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.sitemap-full {
|
|
display: grid;
|
|
gap: 0;
|
|
align-content: start;
|
|
font-size: 15px;
|
|
color: #0f172a;
|
|
font-weight: 800;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: #ffffff;
|
|
padding: 18px 40px 32px;
|
|
}
|
|
.sm-section-title {
|
|
margin: 0;
|
|
padding: 16px 0 10px;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
color: #60738f;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.sm-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
flex-wrap: nowrap;
|
|
min-width: 100%;
|
|
padding: 18px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.sm-main {
|
|
min-width: 156px;
|
|
font-weight: 900;
|
|
color: #0f2343;
|
|
font-size: 21px;
|
|
line-height: 1.25;
|
|
padding-top: 3px;
|
|
}
|
|
.sm-chain {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
.sm-arrow {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 2px;
|
|
margin: 0;
|
|
background: #4b5563;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
.sm-arrow::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -1px;
|
|
top: -4px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 8px solid #4b5563;
|
|
}
|
|
.sm-link-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
min-width: 34px;
|
|
flex: 0 0 auto;
|
|
justify-content: stretch;
|
|
}
|
|
.sm-link-arrow-frag {
|
|
color: #d97706;
|
|
font-size: 0;
|
|
font-weight: 800;
|
|
letter-spacing: .01em;
|
|
line-height: 0;
|
|
flex: 1 1 12px;
|
|
min-width: 12px;
|
|
height: 0;
|
|
border-top: 2px dashed #f59e0b;
|
|
display: inline-block;
|
|
}
|
|
.sm-arrow.broken {
|
|
color: #d97706;
|
|
width: 34px;
|
|
height: 2px;
|
|
margin: 0;
|
|
background: repeating-linear-gradient(90deg, #f59e0b 0 5px, transparent 5px 8px);
|
|
font-size: 0;
|
|
font-weight: 900;
|
|
line-height: 0;
|
|
}
|
|
.sm-arrow.broken::after {
|
|
display: block;
|
|
border-left-color: #f59e0b;
|
|
}
|
|
.sm-chip {
|
|
border: 1px solid #d2ddeb;
|
|
border-radius: 16px;
|
|
width: 108px;
|
|
min-width: 108px;
|
|
min-height: 44px;
|
|
padding: 6px 8px;
|
|
background: #f8fbff;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: #3b5b80;
|
|
line-height: 1.25;
|
|
white-space: normal;
|
|
word-break: keep-all;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.sm-chip:hover {
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16) inset;
|
|
}
|
|
.sm-chip.match {
|
|
border-color: #2563eb;
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18) inset;
|
|
}
|
|
.sm-chip.system-colored {
|
|
background: var(--sys-bg, #f8fbff);
|
|
border-color: var(--sys-border, #d2ddeb);
|
|
color: var(--sys-text, #1f2937);
|
|
}
|
|
.sm-chip.multi-system {
|
|
background:
|
|
linear-gradient(135deg,
|
|
var(--sys-bg-a, #eef2ff) 0 49.5%,
|
|
var(--sys-bg-b, #ecfeff) 50% 100%);
|
|
border-color: var(--sys-border-a, #b6c6e0);
|
|
color: #1f2937;
|
|
box-shadow: inset -1px -1px 0 0 var(--sys-border-b, #b6c6e0);
|
|
}
|
|
.sm-chip.no-system {
|
|
background: #e5e7eb;
|
|
border-color: #cbd5e1;
|
|
color: #6b7280;
|
|
}
|
|
.sm-chip.dim {
|
|
opacity: 0.14;
|
|
filter: grayscale(0.2);
|
|
}
|
|
.sm-link-reason {
|
|
border: 0;
|
|
background: #fffbeb;
|
|
color: #b45309;
|
|
border-radius: 12px;
|
|
padding: 2px 5px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
max-width: 86px;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
flex: 0 1 auto;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.sm-link-wrap.manual {
|
|
gap: 0;
|
|
min-width: 0;
|
|
}
|
|
.sm-link-wrap.manual .sm-link-arrow-frag:first-child {
|
|
margin-right: 0;
|
|
}
|
|
.sm-link-wrap.manual .sm-link-arrow-frag:last-child {
|
|
position: relative;
|
|
margin-left: 0;
|
|
}
|
|
.sm-link-wrap.manual .sm-link-arrow-frag:last-child::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 8px solid #f59e0b;
|
|
}
|
|
.sm-link-wrap:not(.manual) .sm-arrow {
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
}
|
|
.sm-shared-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
flex-wrap: nowrap;
|
|
border: 1px dashed #f97316;
|
|
border-radius: 12px;
|
|
padding: 6px 8px;
|
|
background: #fff7ed;
|
|
}
|
|
.sm-arrow.dim,
|
|
.sm-main.dim {
|
|
opacity: 0.14;
|
|
}
|
|
.preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
object-position: center center;
|
|
display: block;
|
|
background: transparent;
|
|
}
|
|
.note-card {
|
|
display: block;
|
|
}
|
|
.editor-section {
|
|
display: grid;
|
|
gap: 12px;
|
|
align-content: start;
|
|
}
|
|
.section-title {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: #295240;
|
|
}
|
|
.flow-info-card {
|
|
display: none;
|
|
}
|
|
.flow-info-card.open {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-content: start;
|
|
margin-top: 4px;
|
|
}
|
|
.section-divider {
|
|
display: block;
|
|
height: 1px;
|
|
border-top: 1px solid #dbe5f2;
|
|
margin: 2px 0;
|
|
}
|
|
.mini-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
.mini-label {
|
|
margin: 0 0 4px;
|
|
font-size: 10px;
|
|
color: #587064;
|
|
font-weight: 900;
|
|
letter-spacing: .03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.mini-input {
|
|
width: 100%;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 9px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
background: #fffdf8;
|
|
}
|
|
.mini-input:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px #dbeafe;
|
|
}
|
|
.preview-empty {
|
|
margin: 0;
|
|
padding: 8px;
|
|
color: #6b7f76;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
line-height: 1.35;
|
|
}
|
|
.note-input {
|
|
width: 100%;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
height: 42px;
|
|
outline: none;
|
|
background: #fff;
|
|
}
|
|
.note-input:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px #dbeafe;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.board-track {
|
|
padding-left: var(--track-side-pad, 15px);
|
|
padding-right: var(--track-side-pad, 15px);
|
|
}
|
|
.sitemap-fab {
|
|
left: 10px;
|
|
top: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 10px;
|
|
}
|
|
.data-io {
|
|
left: 10px;
|
|
bottom: 10px;
|
|
}
|
|
.data-io-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
font-size: 14px;
|
|
}
|
|
.floating-edit-btn {
|
|
width: 36px;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
}
|
|
.flow-panel {
|
|
width: 165px;
|
|
min-width: 165px;
|
|
}
|
|
.flow-panel.flow-bar-mode {
|
|
width: var(--bar-panel-width, 58px);
|
|
min-width: var(--bar-panel-width, 58px);
|
|
}
|
|
.step-btn { font-size: 14px; }
|
|
.editor-panel {
|
|
width: 900px;
|
|
min-width: 900px;
|
|
max-width: 900px;
|
|
flex: 0 0 900px;
|
|
}
|
|
.board-track.map-bar-layout .editor-panel { }
|
|
.mini-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.viewer-mini-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.editor-viewer-summary {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.editor-viewer-meta {
|
|
max-width: 100%;
|
|
justify-content: flex-start;
|
|
margin-left: 0;
|
|
white-space: normal;
|
|
}
|
|
.preview {
|
|
min-height: 240px;
|
|
}
|
|
.sitemap-modal-inner {
|
|
width: min(98vw, 1000px);
|
|
height: 92vh;
|
|
}
|
|
.editor-head-path {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.ci-logo {
|
|
height: 26px;
|
|
max-width: 108px;
|
|
}
|
|
.sitemap-modal-head {
|
|
padding: 18px 18px 14px;
|
|
}
|
|
.sitemap-modal-title { font-size: 22px; }
|
|
.sitemap-modal-sub { font-size: 14px; }
|
|
.sm-select {
|
|
min-width: 180px;
|
|
font-size: 14px;
|
|
}
|
|
.sitemap-full {
|
|
padding: 10px 18px 16px;
|
|
}
|
|
.sm-main {
|
|
min-width: 118px;
|
|
font-size: 18px;
|
|
padding-top: 2px;
|
|
}
|
|
.sm-chain {
|
|
gap: 0;
|
|
}
|
|
.sm-chip {
|
|
width: 96px;
|
|
min-width: 96px;
|
|
min-height: 40px;
|
|
font-size: 13px;
|
|
padding: 6px 8px;
|
|
}
|
|
.sm-link-reason {
|
|
max-width: 72px;
|
|
font-size: 10px;
|
|
padding: 2px 4px;
|
|
}
|
|
.sm-link-arrow-frag {
|
|
min-width: 8px;
|
|
}
|
|
.sm-arrow,
|
|
.sm-arrow.broken,
|
|
.sm-link-wrap {
|
|
min-width: 28px;
|
|
width: 28px;
|
|
}
|
|
.sm-link-wrap.manual {
|
|
min-width: 0;
|
|
}
|
|
}
|