/* this will be exported as base.css and can be used for a basic styling */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-border-default: 1px solid #bbb;
  --xy-node-border-selected-default: 1px solid #555;

  --xy-handle-background-color-default: #333;

  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  border: var(--xy-node-border, var(--xy-node-border-default));
  color: var(--xy-node-color, var(--xy-node-color-default));
}
.react-flow__node-input.selected,
  .react-flow__node-input:focus,
  .react-flow__node-input:focus-visible,
  .react-flow__node-default.selected,
  .react-flow__node-default:focus,
  .react-flow__node-default:focus-visible,
  .react-flow__node-output.selected,
  .react-flow__node-output:focus,
  .react-flow__node-output:focus-visible,
  .react-flow__node-group.selected,
  .react-flow__node-group:focus,
  .react-flow__node-group:focus-visible {
    outline: none;
    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
  }
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/* ------------------------------------------------------------------
   Design tokens (light theme, Toss greys + lion amber)
------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Latin: Inter, Hangul: Noto Sans KR, Kana: Noto Sans JP (per-glyph fallback) */
  --font-sans: Inter, 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* surfaces */
  --bg: #ffffff;
  --bg-2: #f9fafb;
  --bg-3: #f2f4f6;
  --bg-4: #eceef1;
  --bg-5: #e5e8eb;

  /* lines */
  --border: #e5e8eb;
  --border-2: #f2f4f6;
  --border-strong: #d1d6db;
  --line: rgba(0, 23, 51, 0.08);
  --line-strong: rgba(0, 23, 51, 0.12);

  /* text */
  --fg: #191f28;
  --fg-2: #333d4b;
  --fg-muted: #4e5968;
  --fg-subtle: #6b7684;
  --fg-faint: #8b95a1;
  --fg-dim: #b0b8c1;

  /* brand / accents — lion amber */
  --primary: #ffa41b;
  --primary-hover: #f59300;
  --primary-strong: #c26b00;
  --primary-text: #a85a00;
  --primary-border: #ffd699;
  --primary-bg: #fff4e0;
  --on-primary: #1a1206;

  --green: #03b26c;
  --green-soft: #03b26c;
  --green-text: #0a7d4d;
  --green-bg: #e8f8f0;
  --green-bg-border: #c6eedb;
  --green-line: #c6eedb;
  --green-dim: #9fdcc0;

  --red: #e42939;
  --red-text: #d22030;
  --red-bar: #f04452;
  --red-row: #fff0f1;
  --red-bg: #fff0f1;
  --red-line: #fbd0d3;

  --yellow: #9a6b00;
  --yellow-bar: #ffb331;
  --yellow-bg: #fff8e6;

  --blue: #1b64da;
  --blue-bar: #3182f6;

  --dot: #d1d6db;
  --wash: 0, 23, 51; /* rgb of hover/stripe washes: rgba(var(--wash), a) */
}

/* Japanese pages: shared Han characters should use Japanese glyph shapes */
:root:lang(ja) {
  --font-sans: Inter, 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark theme: same token names, toggled by <html data-theme="dark"> */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #14120f;
  --bg-2: #1a1814;
  --bg-3: #1f1c18;
  --bg-4: #25221d;
  --bg-5: #2a2621;

  --border: #38342e;
  --border-2: #25221d;
  --border-strong: #50493f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.12);

  --fg: #ffffff;
  --fg-2: #f8f7f5;
  --fg-muted: #a8a29a;
  --fg-subtle: #8c867d;
  --fg-faint: #716b63;
  --fg-dim: #57524b;

  --primary-hover: #ffb547;
  --primary-strong: #ffb547;
  --primary-text: #ffc266;
  --primary-border: #4a3412;
  --primary-bg: #2a1e0c;

  --green: #4cc38a;
  --green-soft: #72c09c;
  --green-text: #95d0b4;
  --green-bg: #161d1a;
  --green-bg-border: #15231d;
  --green-line: #1c362a;
  --green-dim: #26543f;

  --red: #f06a6a;
  --red-text: #f0a3a1;
  --red-bar: #b62d2b;
  --red-row: #221111;
  --red-bg: #1c1010;
  --red-line: #4a1a19;

  --yellow: #f5d04a;
  --yellow-bar: #dfaf2a;
  --yellow-bg: #1d180c;

  --blue: #5b8def;
  --blue-bar: #306ee8;

  --dot: #736d64;
  --wash: 255, 255, 255;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

svg {
  display: block;
  flex-shrink: 0;
}

kbd {
  font-family: var(--font-sans);
}

:focus-visible {
  outline: 2px solid rgba(255, 164, 27, 0.6);
  outline-offset: 1px;
}

::selection {
  background: rgba(255, 164, 27, 0.35);
}

/* scrollbars: 8px, dark, like the original */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--wash), 0.1);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--wash), 0.18);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Shared primitives
------------------------------------------------------------------- */
.icon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--bg-4);
}

.avatar > div {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-size: cover;
  background-position: center;
}

.vsep {
  width: 2px;
  height: 20px;
  margin: 0 4px;
  border-radius: 9999px;
  background: rgba(var(--wash), 0.1);
  flex-shrink: 0;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 20px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background: var(--bg-4);
  border-color: var(--border);
  color: var(--fg);
}

.btn-secondary:hover {
  background: var(--bg-5);
}

.btn-outline {
  border-color: var(--border);
  color: var(--fg);
}

.btn-outline:hover {
  background: rgba(var(--wash), 0.03);
}

.btn-ghost {
  color: var(--primary-text);
}

.btn-ghost:hover {
  background: rgba(255, 164, 27, 0.08);
}

.btn-ghost .btn-icon {
  color: var(--primary);
}

.btn-ghost .btn-label-muted {
  color: var(--fg-muted);
}

.btn-primary-outline {
  border-color: var(--primary-border);
  color: var(--primary-text);
}

.btn-primary-outline:hover {
  background: rgba(255, 164, 27, 0.08);
}

.btn-primary-outline .btn-icon {
  color: var(--primary);
}

.btn-danger {
  background: #d22030;
  border-color: #d22030;
  color: #fff;
}

.btn-icon-only {
  width: 34px;
  padding: 6px 0;
}

.btn-sm {
  height: 30px;
  padding: 4px 10px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--fg-muted);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-btn:hover {
  background: rgba(var(--wash), 0.06);
  color: var(--fg);
}

/* Tooltip ---------------------------------------------------------- */
.tooltip-anchor {
  position: relative;
}

.tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  animation: fade-in 0.1s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Menus / popovers ------------------------------------------------- */
.menu {
  position: fixed;
  z-index: 900;
  min-width: 200px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: pop-in 0.12s ease;
}

.menu-label {
  padding: 6px 8px 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg);
  border-radius: 6px;
}

.menu-item:hover,
.menu-item[data-active='true'] {
  background: rgba(var(--wash), 0.06);
}

.menu-item .menu-icon {
  color: var(--fg-subtle);
}

.menu-item .menu-right {
  margin-left: auto;
  color: var(--fg-subtle);
  font-size: 12px;
}

.menu-item.danger {
  color: var(--red);
}

.menu-sep {
  height: 1px;
  margin: 4px -4px;
  background: var(--border);
}

/* Dialog ----------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, 0.3);
  animation: fade-in 0.12s ease;
}

.dialog {
  position: fixed;
  z-index: 801;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-2);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  animation: fade-in 0.12s ease;
}

/* Confirm dialog: a .dialog with a title, a short body and two buttons */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.confirm-body {
  font-size: 14px;
  line-height: 22px;
  color: var(--fg-muted);
}

.confirm-dialog:lang(ko) {
  word-break: keep-all;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* Switch ----------------------------------------------------------- */
.switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--border);
  transition: background-color 0.15s ease;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  transition: transform 0.15s ease;
}

.switch[aria-checked='true'] {
  background: var(--primary);
}

.switch[aria-checked='true']::after {
  transform: translateX(16px);
}

/* Inputs ----------------------------------------------------------- */
.input {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  outline: none;
}

.input::placeholder {
  color: var(--fg-subtle);
}

.input:focus {
  border-color: var(--primary-strong);
}

/* Badges ----------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 9999px;
  white-space: nowrap;
}

.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}

.status-pill.active {
  color: var(--green-text);
  background: var(--green-bg);
}

.status-pill.removed,
.status-pill.taken_down,
.status-pill.rolled_back {
  color: var(--fg-subtle);
  background: var(--border);
}

.status-pill.crashed,
.status-pill.failed,
.status-pill.manual_intervention {
  color: var(--red-text);
  background: var(--red-bg);
}

.status-pill.queued,
.status-pill.building,
.status-pill.removing,
.status-pill.deploying {
  color: var(--primary-text);
  background: var(--primary-bg);
}

.round-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--fg-muted);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 9999px;
}

.round-pill.active {
  color: var(--green-soft);
  background: var(--green-bg);
  border-color: var(--green-dim);
}

/* Language menu: narrow; current = amber fill, hover = lighter amber */
.lang-menu {
  min-width: 0;
}

.lang-menu .menu-item:hover {
  background: color-mix(in srgb, var(--primary-bg) 55%, transparent);
  color: var(--primary-text);
}

.lang-menu .menu-item[data-active='true'] {
  background: var(--primary-bg);
  color: var(--primary-text);
  font-weight: 600;
}
/* ------------------------------------------------------------------
   Workspace shell: 220px sidebar + header + framed main panel
------------------------------------------------------------------- */
.ws-shell {
  display: flex;
  height: 100vh;
  background: var(--bg);
}

.ws-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  height: 100%;
  background: var(--bg);
}

.ws-aside-top {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 0 12px;
  overflow-y: auto;
}

.ws-brand {
  padding: 0 8px 8px;
}

.ws-logo {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
}

.side-divider {
  height: 1px;
  margin: 12px 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.side-divider.inset {
  margin: 8px -8px;
}

.side-section {
  padding: 0 8px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-link {
  display: block;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
  border-radius: 8px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.side-item:hover {
  background: rgba(var(--wash), 0.03);
  color: var(--fg);
}

.side-item.active {
  font-weight: 500;
  color: var(--fg);
  background: rgba(var(--wash), 0.06);
}

.side-item.active .side-icon {
  color: var(--primary-strong);
}

.side-item.external {
  color: var(--fg-faint);
}

.side-item.external:hover {
  color: var(--fg-muted);
}

.side-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
}

.ext-arrow {
  font-size: 12px;
  line-height: 18px;
  opacity: 0.5;
}

.side-btn-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-sub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-sub-line {
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 9999px;
  background: var(--line);
}

.side-sub-spacer {
  width: 16px;
  flex-shrink: 0;
}

.side-item.sub.active {
  background: rgba(var(--wash), 0.06);
}

.side-fill {
  flex: 1;
}

.ws-aside-bottom {
  padding: 8px;
  border-top: 1px solid var(--line);
}

.account-btn {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
}

.account-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.account-btn:hover .account-inner,
.account-btn[data-state='open'] .account-inner {
  background: rgba(var(--wash), 0.04);
}

.account-inner p {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 17.5px;
  text-align: left;
}

.account-chevron {
  display: flex;
  color: var(--fg-muted);
}

.side-collapse {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: col-resize;
  transition: opacity 0.15s ease;
}

.side-collapse:hover {
  opacity: 1;
}

.side-collapse div {
  width: 2px;
  height: 32px;
  border-radius: 9999px;
  background: rgba(var(--wash), 0.2);
}

/* right column ---------------------------------------------------- */
.ws-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding-right: 8px;
}

.ws-header {
  display: flex;
  align-items: center;
  height: 56px;
  flex-shrink: 0;
  padding: 0 8px 0 16px;
}

.ws-header-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-main {
  flex: 1;
  min-height: 0;
  margin: 0 0 8px 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.page {
  padding: 48px 64px 0;
}

.page-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 96px;
}

.page-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 38.5px;
}

/* notifications popover -------------------------------------------- */
.notif-pop {
  padding: 0;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.notif-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-subtle);
}

.notif-link:hover {
  color: var(--fg);
}

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 24px;
  color: var(--fg-subtle);
  text-align: center;
}

.notif-empty p {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.notif-empty span {
  font-size: 12px;
  line-height: 18px;
}

/* toasts */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  white-space: pre-line;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: pop-in 0.15s ease;
}
/* ------------------------------------------------------------------
   Dashboard (Projects)
------------------------------------------------------------------- */
.dash-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-h1 {
  flex: 1;
  min-width: 0;
}

.dash-new {
  min-width: 80px;
}

.dash-grid {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.dash-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}

.dash-filters-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-count-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
}

.dash-count-icon {
  color: var(--fg-faint);
}

.dash-vsep {
  width: 2px;
  height: 20px;
  border-radius: 9999px;
  background: var(--border);
}

.dash-sort {
  display: flex;
  flex-direction: column;
}

.dash-sort-box {
  position: relative;
  display: flex;
  align-items: center;
}

.dash-sort-box select {
  appearance: none;
  -webkit-appearance: none;
  width: 180px;
  height: 34px;
  padding: 4px 24px 4px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.dash-sort-box select:hover {
  color: var(--fg);
}

.dash-sort-box select option {
  background: var(--bg-2);
  color: var(--fg);
}

.dash-sort-chevron {
  position: absolute;
  right: 6px;
  top: 1px;
  height: 34px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--fg-faint);
}

.dash-view {
  display: flex;
  align-items: center;
}

.view-toggle {
  display: flex;
  background: var(--bg-3);
  border: 1px solid rgba(var(--wash), 0.05);
  border-radius: 8px;
}

.view-toggle button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: var(--fg-muted);
}

.view-toggle button[data-state='on'] {
  color: var(--fg);
}

.view-toggle button:hover {
  color: var(--fg);
}

.view-thumb {
  position: absolute;
  inset: 0;
  background: var(--bg-2);
  border: 0.5px solid rgba(var(--wash), 0.1);
  border-radius: 8px;
}

.view-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* cards ------------------------------------------------------------ */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px) {
  .pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pc {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
}

.pc:hover {
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.pc-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
}

.pc-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pc-head {
  padding: 16px 16px 4px;
}

.pc-head-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}

.pc-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.pc-fav-wrap {
  position: relative;
  z-index: 2;
  height: 28px;
}

.pc-fav {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  color: var(--fg-faint);
  border-radius: 6px;
}

.pc-fav:hover {
  color: var(--fg);
  background: rgba(var(--wash), 0.06);
}

.pc-fav.on {
  color: var(--primary);
}

/* project health: the first thing to read on the card */
.pc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--fg-subtle);
}

.pc-status.failed {
  color: var(--red-text);
}

.pc-status.deploying {
  color: var(--primary-text);
}

.pc-status.ok {
  color: var(--green-text);
}

.pc-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}

.pc-services {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 8px 8px;
  padding: 4px;
  min-height: 56px;
  background: var(--bg-2);
  border-radius: 10px;
}

.pc-svc {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  color: var(--fg-muted);
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.pc-svc:hover {
  background: var(--bg);
}

.pc-svc-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}

.pc-services-empty,
.pc-services-more {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  color: var(--fg-faint);
}

.pc-services-empty {
  margin: auto 0;
  text-align: center;
}

/* list view -------------------------------------------------------- */
.pl-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2);
  transition: background-color 0.12s ease;
}

.pl-row:last-child {
  border-bottom: 0;
}

.pl-row:hover {
  background: rgba(var(--wash), 0.02);
}

.pl-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-4);
  border: 1px solid rgba(var(--wash), 0.1);
  border-radius: 8px;
}

.pl-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pl-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.pl-sub {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.pl-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-muted);
}

.pl-state.crashed {
  color: var(--red);
}

.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 56px 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--fg-subtle);
  font-size: 14px;
  line-height: 20px;
}

.dash-empty p {
  color: var(--fg-muted);
  font-weight: 600;
}
/* ------------------------------------------------------------------
   Command palette (⌘K)
------------------------------------------------------------------- */
.cmdk {
  position: fixed;
  z-index: 801;
  left: 50%;
  top: 274px;
  width: 500px;
  max-width: calc(100vw - 32px);
  height: 420px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: fade-in 0.1s ease;
}

.cmdk-input-row {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.cmdk-input {
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--fg);
  background: var(--bg-2);
  border: 0;
  border-radius: 8px 8px 0 0;
  outline: none;
}

.cmdk-input::placeholder {
  color: var(--fg-subtle);
}

.cmdk-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 12px;
}

.cmdk-group + .cmdk-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.cmdk-group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-muted);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.cmdk-item[aria-selected='true'] {
  color: var(--fg);
  background: rgba(var(--wash), 0.04);
}

.cmdk-group:first-child .cmdk-item {
  color: var(--fg);
}

.cmdk-group:first-child .cmdk-item-icon {
  color: var(--primary-strong);
}

.cmdk-item-icon {
  width: 20px;
  height: 20px;
  color: var(--fg-subtle);
}

.cmdk-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmdk-item-hint {
  font-size: 12px;
  color: var(--fg-subtle);
}

.cmdk-shortcut {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--fg-subtle);
  border-radius: 4px;
}

.cmdk-shortcut .kbd {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--fg);
}

.cmdk-enter {
  color: var(--fg-subtle);
}

.cmdk-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  font-size: 14px;
  color: var(--fg-subtle);
}

/* ------------------------------------------------------------------
   Project shell: top bar + 56px rail + framed content
------------------------------------------------------------------- */
.proj-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}

.proj-header-wrap {
  flex-shrink: 0;
  padding: 0 16px;
}

.proj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 12px 0;
}

.ph-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ph-logo {
  display: flex;
  align-items: center;
}

.ph-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.ph-sep {
  width: 1px;
  height: 20px;
  margin: 0 8px;
  border-left: 1px solid var(--border);
}

.ph-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  transition: background-color 0.12s ease;
}

.ph-btn:hover,
.ph-btn[data-state='open'] {
  background: rgba(var(--wash), 0.05);
}

.ph-btn-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.ph-chevron {
  display: flex;
  color: var(--fg-dim);
}

.ph-env {
  display: flex;
  align-items: center;
}

.ph-sep-env {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 4px 0 0;
  border-left: 1px solid var(--border);
  transform: rotate(15deg);
}

.ph-env-btn {
  height: 42px;
}

.ph-env-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ph-right {
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.ph-right-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn.on {
  color: var(--fg);
  background: rgba(var(--wash), 0.08);
}


.proj-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.proj-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  flex-shrink: 0;
  padding: 16px 8px 12px;
}

.rail-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rail-item-wrap {
  width: 40px;
  height: 40px;
}

.rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--fg-subtle);
  border-radius: 8px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.rail-item:hover {
  color: var(--fg);
  background: rgba(var(--wash), 0.05);
}

.rail-item.active {
  color: var(--fg);
  background: rgba(var(--wash), 0.1);
}

.rail-fill {
  flex: 1;
}

.rail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.rail-avatar:hover,
.rail-avatar[data-state='open'] {
  background: rgba(var(--wash), 0.05);
}

.proj-content {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100vh;
  color: var(--fg-muted);
}

/* drawers (activity / agent) -------------------------------------- */
.side-drawer {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 8px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 360px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  animation: pop-in 0.14s ease;
}

.side-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.side-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.activity-empty {
  margin: 0;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
}

.activity-item:hover {
  background: rgba(var(--wash), 0.03);
}

.activity-icon {
  display: flex;
  margin-top: 2px;
}

.activity-text p {
  font-size: 13px;
  line-height: 19px;
}

.activity-text span {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.activity-state.removed {
  color: var(--fg-subtle);
}

.activity-state.active,
.activity-state.succeeded {
  color: var(--green-soft);
}

.activity-state.failed,
.activity-state.manual_intervention {
  color: var(--red-text);
}







/* ------------------------------------------------------------------
   Canvas
------------------------------------------------------------------- */
.canvas-region {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  padding: 0 8px 8px 0;
  border-radius: 12px;
}

.canvas-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.rw-flow {
  background: transparent;
}

.rw-flow .react-flow__pane {
  cursor: default;
}

.rw-flow .react-flow__pane.dragging {
  cursor: grabbing;
}

.rw-flow .react-flow__node {
  cursor: pointer;
}

.svc-handle {
  opacity: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: var(--bg-2);
}

.svc-node-wrap {
  width: 288px;
  height: 144px;
}

.svc-node-wrap > span {
  display: block;
  position: relative;
  width: 288px;
  height: 144px;
}

.svc-node {
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 288px;
  height: 144px;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease;
  user-select: none;
}

.svc-node:hover {
  border-color: var(--border-strong);
}

.svc-node.selected {
  border-color: #cb8010;
}

.svc-node-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}


.svc-node-icon {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  flex-shrink: 0;
}

.svc-node-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.svc-node-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.svc-node-domain {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

.svc-node-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.svc-node-failed {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--red-text);
}





/* toolbars */
.rw-flow .react-flow__panel {
  margin: 16px;
}

.toolbar {
  display: grid;
  grid-template-columns: 36px;
  gap: 8px;
}

.toolbar > .tool-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}

.tool-group {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 0.12s ease;
}

.tool-btn:hover {
  background: rgba(var(--wash), 0.05);
}

.tool-btn:hover .tool-icon {
  color: var(--fg);
}

.tool-icon {
  display: flex;
  align-items: center;
  color: var(--fg-subtle);
}

.tool-icon.dim {
  color: var(--fg-subtle);
}

.add-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-btn {
  height: 34px;
}

.add-btn .tool-icon {
  color: var(--fg-subtle);
}
/* ------------------------------------------------------------------
   Side panes (service / deployment): one at a time
------------------------------------------------------------------- */
.pane-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.pane {
  position: absolute;
  top: 23px;
  right: 0;
  bottom: -1px;
  width: min(904px, calc(100% - 24px));
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 12px 0 12px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  animation: pane-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.2s ease, bottom 0.2s ease;
}

@keyframes pane-in {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.deployment-pane {
  z-index: 31;
}

.pane-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  background: var(--bg-2);
}

.pane-head {
  display: flex;
  flex-direction: column;
  padding: 48px 48px 0;
  border-bottom: 1px solid var(--border);
}

.pane-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}

.pane-title-left,
.pane-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.pane-svc-icon {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.pane-svc-icon > div {
  display: flex;
  border-radius: 9999px;
}

.pane-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  min-width: 0;
}

.pane-title button {
  border-radius: 6px;
  min-width: 0;
}

.pane-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.pane-close .tool-icon {
  color: var(--fg);
}

.pane-close:hover {
  background: rgba(var(--wash), 0.05);
}

.pane-tabs {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
  margin-bottom: -1px;
}

.pane-tab {
  position: relative;
  display: block;
  padding-bottom: 12px;
  color: var(--fg-subtle);
  border-radius: 6px;
  transition: color 0.12s ease;
}

.pane-tab > div:first-child {
  display: flex;
  align-items: center;
}

.pane-tab:hover {
  color: var(--fg-muted);
}

.pane-tab.active {
  color: var(--fg);
}

.pane-tab-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--fg);
}

.pane-content {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.pane-content-inner {
  padding: 32px 48px 0;
}

/* ------------------------------------------------------------------
   Deployments tab
------------------------------------------------------------------- */
.deps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
}

.deps-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
}

.deps-info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
}

.deps-globe {
  color: var(--green-dim);
}

.side-icon.dim {
  color: var(--fg-dim);
}

.deps-domain:hover {
  text-decoration: underline;
}

.deps-unexposed {
  color: var(--fg-dim);
}

.deps-unexposed:hover {
  color: var(--fg-muted);
}

.deps-info-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.deps-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-dim);
}

.deps-meta a:hover {
  color: var(--fg-muted);
}

.deps-runtime {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deps-warning {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 50px;
  padding: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--yellow);
  background: var(--yellow-bg);
  border-radius: 6px;
}

.deps-warning-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 26px;
}

.deps-warning-icon {
  display: flex;
}

.deps-empty {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
}

.deps-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deps-empty-actions .btn {
  font-size: 14px;
  line-height: 20px;
}

.deps-empty-actions .btn span {
  display: inline;
}

.deps-empty-actions b {
  font-weight: 700;
}

.deps-active-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deps-active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.deps-success-wrap {
  border-top: 1px solid var(--border);
}

.deps-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: var(--bg-2);
  transition: background-color 0.12s ease;
}

.deps-success:hover {
  background: var(--bg-3);
}

.deps-success-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--green-text);
}

.deps-success.progress .deps-success-left {
  color: var(--primary-text);
}

.deps-success-chev {
  color: var(--fg-subtle);
}

.dep-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 16px 14px 40px;
  background: var(--bg-2);
}

.dep-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--green-soft);
}

/* placeholder row while the detail is still loading; same height as a real step */
.dep-step.skeleton {
  width: 60%;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-4) 0%, var(--bg-3) 50%, var(--bg-4) 100%) 0 0 / 200% 100%;
  animation: dep-shimmer 1.2s ease-in-out infinite;
}

@keyframes dep-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dep-step.skeleton {
    animation: none;
  }
}

.dep-step-time {
  margin-left: auto;
  color: var(--fg-subtle);
}

/* deployment row */
.dep-row-link {
  display: block;
}

.dep-row-link.history {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.dep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 16px;
}

.dep-row.history {
  transition: background-color 0.12s ease;
}

.dep-row-link:hover .dep-row {
  background: var(--bg-2);
}

.dep-grid {
  display: grid;
  grid-template-columns: 96px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  width: 100%;
}

.dep-status {
  display: flex;
}

.dep-avatar {
  position: relative;
  width: 32px;
  height: 32px;
}

/* GitHub mark: small black badge on the avatar's corner */
.dep-avatar-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #191f28;
  border: 2px solid var(--bg);
  border-radius: 9999px;
  box-sizing: content-box;
}

.dep-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dep-msg {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.dep-meta {
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.dep-actions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
}

.dep-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.dep-menu-btn .tool-icon {
  color: var(--fg);
}

.dep-menu-btn:hover {
  background: rgba(var(--wash), 0.08);
}







/* history */
.deps-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
}

.deps-history-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
}

.deps-history-toggle .tool-icon {
  color: var(--fg);
}

.deps-history-toggle p {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
}



.deps-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}

/* ------------------------------------------------------------------
   Variables tab
------------------------------------------------------------------- */
.vars {
  display: flex;
  flex-direction: column;
  padding-bottom: 48px;
}

.vars-head {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-2);
}

.vars-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vars-title {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.vars-actions {
  display: flex;
  align-items: center;
}

.vars-actions .btn + .btn {
  margin-left: 4px;
}

.vars-actions .btn-icon,
.vars-new .btn-icon {
  display: flex;
}

.vars-body {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.vars-new {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto 34px;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-3);
  border-radius: 6px;
}

.vars-empty-wrap {
  display: grid;
  gap: 4px;
  padding-bottom: 4px;
}

.vars-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.vars-empty-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--fg-muted);
}

.vars-empty-sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.vars-empty-sub button {
  color: var(--fg-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vars-empty-sub button:hover {
  color: var(--fg);
}

.vars-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.vars-table.system {
  margin-top: 12px;
}

.vars-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 8px 12px 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-2);
}

.vars-row:last-child {
  border-bottom: 0;
}

.vars-row:hover {
  background: rgba(var(--wash), 0.02);
}

.vars-key {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vars-val {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vars-row-actions {
  display: flex;
  gap: 2px;
}

.vars-table.system .vars-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
}

.vars-desc {
  overflow: hidden;
  font-size: 13px;
  color: var(--fg-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vars-note {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.vars-note.error {
  color: var(--red);
}

.vars-note.warn {
  color: var(--yellow);
}

.vars-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vars-load-error .vars-note {
  margin-bottom: 0;
}

.vars-system {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-2);
}

.vars-system-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 16px 0;
  color: var(--fg-muted);
  border-radius: 8px;
}

.vars-system-btn p {
  font-size: 14px;
  line-height: 20px;
}

.vars-system-btn:hover {
  color: var(--fg);
}

.vars-raw {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vars-raw-hint {
  font-size: 13px;
  color: var(--fg-subtle);
}

.vars-raw-text {
  min-height: 220px;
  padding: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
}

.vars-raw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ------------------------------------------------------------------
   Metrics tab
------------------------------------------------------------------- */
.metrics {
  display: flex;
  flex-direction: column;
  padding-bottom: 48px;
}

.metrics-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.metric-layout {
  display: flex;
  color: var(--fg-dim);
  border-radius: 6px;
}

.metric-layout button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--border);
}

.metric-layout button:first-child {
  border-radius: 6px 0 0 6px;
}

.metric-layout button:last-child {
  margin-left: -1px;
  border-radius: 0 6px 6px 0;
}

.metric-layout button .tool-icon {
  color: var(--fg-dim);
}

.metric-layout button[data-state='on'] {
  position: relative;
  background: var(--bg-2);
  border-color: var(--fg-dim);
}

.metric-layout button[data-state='on'] .tool-icon {
  color: var(--primary);
}

.metrics-bar-right {
  display: flex;
  gap: 8px;
}

.live-btn {
  color: var(--green-text);
  border-color: var(--green-line);
}

.live-btn .tool-icon {
  color: var(--green);
}

.live-btn.paused .tool-icon {
  color: var(--fg-subtle);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  padding-bottom: 40px;
}

.metrics-grid.rows {
  grid-template-columns: minmax(0, 1fr);
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.metric-card.flush {
  gap: 0;
}

.metric-chart-300 {
  height: 300px;
}

.metric-card.flush .metric-legend.bottom {
  height: 42px;
}

.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-title {
  font-weight: 600;
  line-height: 24px;
}

.metric-legend {
  display: flex;
  gap: 6px 12px;
  padding: 0 16px;
}

.metric-legend.bottom {
  padding: 16px 16px 8px;
}

/* Replicas 를 켰을 때 Pod 마다 하나씩 붙는 범례. 최대 50개라서 줄바꿈하고 높이를 제한한다. */
.metric-legend.replicas {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-height: 56px;
  overflow-y: auto;
}

.metric-note {
  margin-top: 4px;
  padding: 0 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--yellow);
}

.metric-legend-item > div,
.metric-legend-item.static {
  display: flex;
  align-items: center;
}

.metric-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: 1px solid;
  border-radius: 9999px;
}

.metric-legend-label {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-2);
}

.chart {
  display: block;
  overflow: visible;
}

.chart-tick {
  font-size: 11px;
  fill: var(--fg-subtle);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.metric-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}

.metric-empty-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--fg-muted);
}

.metric-empty-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------
   Console tab
------------------------------------------------------------------- */
.console {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px - 8px - 225px - 64px);
  min-height: 420px;
  padding-bottom: 16px;
}

.console.full {
  position: fixed;
  inset: 0;
  z-index: 700;
  height: auto;
  padding: 16px;
  background: var(--bg);
}

.console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.console-replica {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  max-width: min(360px, 50%);
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.console-replica .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  font-size: 13px;
  color: var(--fg-subtle);
}

.console-status.ok {
  color: var(--green-soft);
}

.console-status.pending {
  color: var(--primary-text);
}

.console-main {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.console-term-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* xterm 이 자리를 차지하게 한다. 안쪽 여백은 FitAddon 이 이 요소의 padding 을 빼고 줄·칸 수를 계산한다. */
.console-term {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 8px 14px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.console-term .xterm {
  height: 100%;
}

.console-term .xterm-viewport {
  background-color: transparent !important;
}

/* 터미널을 가리는 안내: 레플리카 고르기·불러오는 중·오류. */
.console-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.console-overlay .console-offline {
  align-items: center;
  border: 0;
}

.console-offline .btn {
  margin-top: 8px;
}

.console-pods {
  display: flex;
  flex-direction: column;
  width: min(100%, 360px);
  margin-top: 8px;
  gap: 6px;
}

.console-pod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  color: var(--fg);
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.console-pod:hover:not(:disabled) {
  border-color: var(--primary);
}

.console-pod:disabled,
.console-menu-pod:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.console-pod-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-pod-meta {
  font-size: 12px;
  color: var(--fg-subtle);
}

.console-menu-pod {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* 연결이 끝났을 때 터미널 아래에 띄운다. 이전 출력은 그대로 읽을 수 있다. */
.console-banner {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.console-banner.error {
  color: var(--red-text);
  background: var(--red-bg);
  border-color: var(--red-line);
}

.console-banner-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.console-banner .btn {
  flex-shrink: 0;
}

.console-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 64px 24px;
  color: var(--fg-subtle);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.console-offline p {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}

.console-offline span {
  font-size: 14px;
}

/* ------------------------------------------------------------------
   Service settings
------------------------------------------------------------------- */
.pane-content-inner.flush {
  padding: 0;
}

.st {
  position: relative;
}

.st-filter-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 36px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-2);
}

.st-filter {
  position: relative;
}

.st-filter input {
  width: 100%;
  height: 34px;
  padding: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-filter input::placeholder {
  color: var(--fg-subtle);
}

.st-filter input:focus {
  border-color: var(--primary-strong);
}

.st-filter-kbd {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  color: var(--fg-muted);
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
}

.st-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
}

.st-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  margin: 48px 48px 0;
  padding-bottom: 48px;
  border-left: 2px solid rgba(var(--wash), 0.08);
}

.st-section {
  position: relative;
  scroll-margin-top: 80px;
}

.st-section-icon {
  position: absolute;
  left: -22px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--fg-subtle);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 9999px;
}

.st-section-title {
  padding-left: 40px;
  font-size: 20px;
  font-weight: 500;
  line-height: 27.5px;
  color: var(--fg-muted);
}

.st-section-body {
  display: grid;
  gap: 32px;
  margin-top: 32px;
  padding-left: 40px;
}

.st-section.danger .st-section-body,
.st-section.danger > .st-item {
  padding-left: 40px;
}

.st-item {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 80px;
}

.st-item-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.st-item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.st-item-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--fg-muted);
}

.st-item-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.st-muted {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.st-box {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-radius: 6px;
}

button.st-box {
  width: 100%;
  text-align: left;
}

.st-switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.st-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
  background: var(--fg-dim);
  border-radius: 9999px;
  transition: background-color 0.15s ease;
}

.st-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}

.st-switch[aria-checked='true'] {
  background: var(--primary);
}

.st-switch[aria-checked='true'] span {
  transform: translateX(16px);
}

.st-switch-label {
  cursor: pointer;
}

.st-repo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-radius: 6px;
}

.st-repo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 26px;
  min-width: 0;
  flex: 1;
}

.st-repo-link.tall {
  height: 34px;
}

.st-repo-link p {
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-repo-link:hover span {
  text-decoration: underline;
}

.st-repo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}



.st-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.st-mini-btn.red {
  color: var(--red-text);
  border-color: var(--red-line);
}

.st-mini-btn.red svg {
  color: var(--red-bar);
}

.st-mini-btn.primary svg {
  color: var(--primary);
}

.st-check {
  display: flex;
  margin-top: -4px;
}

.st-mini-btn:hover {
  background: rgba(var(--wash), 0.04);
}

.st-mini-btn:disabled {
  opacity: 0.5;
}

.st-mini-btn.primary {
  color: var(--primary-text);
  border-color: var(--primary-border);
}

.st-root-dir {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.st-root-dir button {
  color: var(--fg-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.st-root-dir a span:first-child {
  margin-right: 4px;
}

.st-root-dir button:hover,
.st-root-dir a:hover {
  color: var(--fg);
}



.st-branch {
  display: flex;
  flex-direction: column;
}

.st-branch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 45px;
  padding: 0 16px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.st-branch-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.st-branch-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 44px;
  padding: 0 4px 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.st-branch-chev {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--fg-subtle);
}

.st-branch-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 6px 16px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 0 0 6px 6px;
}

.st-branch-status {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-left: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

.st-branch-info {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--fg-subtle);
}

.st-error {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: -12px;
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--red);
  background: var(--red-row);
  border-radius: 6px;
  white-space: pre;
}

.st-error svg {
  margin-right: 12px;
}

.st-retry {
  font-size: 14px;
  color: var(--red);
}

.st-retry:hover {
  text-decoration: underline;
}


.st-domain {
  justify-content: space-between;
}

.st-domain-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--green);
}

.st-domain-left a {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-domain-left a:hover {
  text-decoration: underline;
}

.st-domain-right {
  display: flex;
  align-items: center;
  gap: 2px;
}




.st-tag {
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  color: var(--primary-text);
  background: var(--primary-bg);
  border-radius: 4px;
  white-space: nowrap;
}

.st-attack {
  justify-content: space-between;
}

.st-region-row {
  display: flex;
  gap: 12px;
}

.st-region {
  flex: 1;
}

.st-region span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-region-chev {
  margin-left: auto;
  color: var(--fg-subtle);
}

.st-replicas {
  position: relative;
  display: flex;
  align-items: center;
  width: 112px;
}

.st-replicas input {
  width: 100%;
  height: 42px;
  margin-top: 1px;
  padding: 8px 12px;
  line-height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-replicas input:focus {
  border-color: var(--primary-strong);
}

.st-replicas span {
  position: absolute;
  right: 12px;
  font-size: 14px;
  color: var(--fg-subtle);
  pointer-events: none;
}



.st-limit-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
}

.st-range {
  --ratio: 1;
  --thumb: 16px;
  width: 100%;
  height: var(--thumb);
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.st-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 채워진 부분은 thumb 의 중심까지다. thumb 이 양 끝에서 반 칸씩 안쪽에 멈추므로 그만큼 보정한다. */
.st-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--ratio)), var(--bg-4) 0);
}

.st-range::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--ratio)), var(--bg-4) 0);
}

.st-range::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: -6px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
}

.st-range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 9999px;
  background: #fff;
}

.st-range:focus-visible {
  outline: none;
}

.st-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--primary-border), 0 0 0 4px var(--primary-strong);
}

.st-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--primary-border), 0 0 0 4px var(--primary-strong);
}

.st-hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.st-hint.error {
  color: var(--red);
}

.st-replicas input[aria-invalid='true'] {
  border-color: var(--red);
}

.st-apply {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.st-apply .st-hint {
  flex: 1;
  margin-right: 4px;
}

.st-builder {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 16px;
}

.st-builder-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.st-runtime {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 12px;
  color: var(--fg-subtle);
}

.st-watch {
  display: flex;
  gap: 12px;
}

.st-watch input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 8px 12px;
  line-height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-watch input::placeholder {
  color: var(--fg-subtle);
}

.st-watch input:focus {
  border-color: var(--primary-strong);
}

.st-watch .btn {
  height: 42px;
}

.st-watch select {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 8px 12px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-watch select option {
  background: var(--bg-2);
}

.st-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  font-size: 14px;
}

.st-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.st-checks label.st-unsupported {
  opacity: 0.6;
}

.st-checks label.st-unsupported input:disabled {
  cursor: not-allowed;
}

.st-note {
  font-size: 12px;
  color: var(--fg-subtle);
}

.st-delete-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.st-delete-input {
  width: 100%;
  max-width: 360px;
  height: 42px;
  padding: 8px 12px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 12px;
  background: var(--bg-4);
  border-radius: 4px;
}

.st-policy {
  justify-content: space-between;
  padding: 10px 16px;
}

.st-policy b {
  font-size: 14px;
}

.st-retries {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--fg-muted);
}

.st-retries input {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.st-delete {
  font-weight: 700;
  color: #fff;
  background: var(--red-bar);
  border-color: var(--red-bar);
}

.st-delete:hover {
  background: #c43a37;
}

.st-toc {
  padding-right: 48px;
}

.st-toc ul {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 105px;
  margin-top: 53px;
}

.st-toc li {
  height: 20px;
}

.st-toc a {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
  transition: color 0.12s ease;
}

.st-toc li {
  white-space: nowrap;
}

.st-toc a:hover {
  color: var(--fg);
}

/* ------------------------------------------------------------------
   Deployment pane
------------------------------------------------------------------- */
.deployment-pane .pane-inner {
  display: block;
}

.dp-root {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
}

.dp-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 48px 0;
}

.dp-head-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 34px;
}

.dp-icon {
  display: flex;
  align-items: center;
}

.dp-crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dp-svc {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
}

.dp-svc:hover {
  text-decoration: underline;
}

.dp-slash {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--border);
}

.dp-id {
  font-size: 18px;
  line-height: 28px;
  border-radius: 4px;
}

.dp-id:hover {
  color: var(--primary-text);
}

.dp-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-action {
  width: 34px;
  height: 34px;
  padding: 6px 0;
  border-radius: 6px;
}

.dp-action .tool-icon {
  color: var(--fg);
}

.dp-action:hover {
  background: rgba(var(--wash), 0.05);
}

.dp-close .tool-icon {
  color: var(--fg);
}

.dp-close:hover {
  background: rgba(var(--wash), 0.05);
}

.dp-sub {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.dp-sub.has {
  padding-bottom: 16px;
}

.dp-sub-links {
  display: flex;
  gap: 16px;
}

.dp-domain {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg);
}

.dp-domain:hover span {
  text-decoration: underline;
}

.dp-tabs {
  position: sticky;
  top: 0;
  display: flex;
  gap: 16px;
  padding: 16px 48px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.dp-tab {
  position: relative;
  display: block;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
  border-radius: 6px;
}

.dp-tab:hover {
  color: var(--fg-muted);
}

.dp-tab.active {
  color: var(--fg);
}

.dp-panel {
  min-height: 0;
  display: grid;
}

/* details */
.details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 48px;
  overflow-y: auto;
  background: var(--bg-2);
}

/* deployment status: one card, tone by result */
.details-status {
  --tone: var(--fg-subtle);
  --tone-bg: var(--bg-3);
  flex-shrink: 0; /* .details is a scrolling column; overflow:hidden would let this card shrink */
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.details-status.ok {
  --tone: var(--green-text);
  --tone-bg: var(--green-bg);
}

.details-status.bad {
  --tone: var(--red-text);
  --tone-bg: var(--red-bg);
}

.details-status.running {
  --tone: var(--primary-text);
  --tone-bg: var(--primary-bg);
}

.details-status-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  transition: background-color 0.12s ease;
}

.details-status-btn:hover {
  background: var(--bg-2);
}

.details-status-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--tone);
  background: var(--tone-bg);
  border-radius: 12px;
}

.details-status-text {
  flex: 1;
  min-width: 0;
}

.details-status-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--fg);
}

.details-status-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.details-status-chev {
  display: flex;
  color: var(--fg-subtle);
  transform: rotate(-90deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.details-status-btn[aria-expanded='true'] .details-status-chev {
  transform: none;
}

.details-status-note {
  padding: 0 16px 12px 64px;
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.details-status-note a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* step timeline: dots joined by a line */
.details-timeline {
  margin: 0;
  padding: 4px 16px 16px;
  list-style: none;
  border-top: 1px solid var(--border);
}

.details-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 72px;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  font-size: 14px;
}

.details-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 26px;
  bottom: -14px;
  width: 2px;
  background: var(--border);
}

.details-step-dot {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.details-step.bad .details-step-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}

.details-step.running .details-step-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
  animation: details-pulse 1.4s ease-in-out infinite;
}

@keyframes details-pulse {
  50% {
    box-shadow: 0 0 0 6px var(--primary-bg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .details-step.running .details-step-dot {
    animation: none;
  }
}

.details-step-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
}

.details-step-reason {
  font-size: 13px;
  font-weight: 400;
  color: var(--red-text);
}

.details-step-dur {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.details-step.running .details-step-dur {
  color: var(--primary-text);
}

.details-step-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fg-faint);
}

.details-vars-list .red {
  color: var(--red);
}

.details-vars {
  background: rgba(var(--wash), 0.02);
  border-radius: 6px;
}

.details-vars-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 16px;
  color: var(--fg-muted);
  border-radius: 8px;
}

.details-vars-btn p {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg);
}

.details-vars-list {
  padding: 0 16px 14px 40px;
  font-size: 12px;
  line-height: 20px;
  color: var(--fg-muted);
}

.details-h {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.details-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.details-box {
  padding: 12px 16px;
  background: rgba(var(--wash), 0.02);
  border: 1px solid transparent;
  border-radius: 6px;
}

.details-commit {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
}

.details-commit-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.details-commit-text > p {
  font-size: 14px;
  line-height: 20px;
}

.details-commit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.details-branch {
  display: flex;
  align-items: center;
  gap: 4px;
}

.details-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}







/* segmented tabs: base for the log target / status-class switchers (logs.css overrides) */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.seg button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 8px 12px;
  color: var(--fg-subtle);
  border: 1px solid var(--border);
}

.seg button p {
  font-size: 14px;
  line-height: 20px;
}

.seg button:first-child {
  border-radius: 6px 0 0 6px;
}

.seg button:last-child {
  margin-left: -1px;
  border-radius: 0 6px 6px 0;
}

.seg button[data-state='active'] {
  color: var(--fg);
}

.details-cols {
  display: flex;
  gap: 8px;
}

.details-cols .details-box.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: flex-start;
}

.details-col-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.details-col-head p {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.details-col-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 32px;
}

.details-col-body hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.details-col-body hr.soft {
  border-top-color: rgba(var(--wash), 0.05);
}

.kv-label p {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.kv-value {
  line-height: 26px;
}

.details-builder {
  display: flex;
  align-items: center;
  gap: 8px;
}

.details-ver {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.details-runtimes {
  display: grid;
  gap: 2px;
}

.details-code {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto;
}

/* settings: cards & rows (networking / edge / scale) */
.st-item-body > .st-item-desc {
  margin-top: 0;
}

.st-card {
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* public domain: one tidy row (icon tile · host + meta · copy) */
.st-domain-card {
  margin-top: 4px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.st-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.st-card-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--fg-subtle);
  background: var(--bg-3);
  border-radius: 10px;
}

.st-card-icon.on {
  color: var(--green-text);
  background: var(--green-bg);
}

.st-domain-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.st-domain-text a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--fg);
}

.st-domain-text a svg {
  flex-shrink: 0;
  color: var(--fg-faint);
}

.st-domain-text a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.st-domain-text p {
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.st-card-actions {
  display: flex;
  gap: 4px;
}

.st-sq-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--fg-subtle);
  border-radius: 8px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.st-sq-btn:hover {
  color: var(--fg);
  background: var(--bg-3);
}

.st-gap16 {
  margin-top: 4px;
}








.st-attack {
  display: grid;
  gap: 8px;
}

.st-attack-row {
  display: flex;
  gap: 8px;
}

.st-select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-radius: 6px;
}

.st-activate {
  height: 42px;
  margin-top: 1px;
  padding: 8px 12px;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  background: var(--red-bar);
  border-color: var(--red-bar);
}

.st-activate:hover {
  background: #c43a37;
}

.st-region-row {
  display: flex;
  gap: 8px;
}

.st-gap12 {
  margin-top: 0;
}

.st-limits {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.st-limit {
  padding: 16px;
}

/* step values under the slider: each label centered under its thumb position */
.st-range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 8px; /* half of --thumb, so the ends line up with the thumb centers */
}

.st-range-ticks button {
  display: flex;
  justify-content: center;
  width: 0;
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-faint);
}

.st-range-ticks button:hover:not(:disabled) {
  color: var(--fg-muted);
}

/* end labels: anchor to the track edges instead of centering, so they stay inside the card */
.st-range-ticks button:first-child {
  justify-content: flex-start;
  margin-left: -8px;
}

.st-range-ticks button:last-child {
  justify-content: flex-end;
  margin-right: -8px;
}

.st-range-ticks button.on {
  font-weight: 600;
  color: var(--primary-text);
}

.st-range-ticks button:disabled {
  cursor: not-allowed;
}

.st-limit-hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-2);
}




/* Deployment strategy ---------------------------------------------- */
.st-strategies {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-strategy {
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.st-strategy > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-strategy input {
  flex-shrink: 0;
  margin: 3px 0 0;
  accent-color: var(--primary-strong);
}

.st-strategy.selected {
  border-color: var(--primary-strong);
}

.st-strategy.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.st-strategy:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--primary-border);
}

.st-hint.warn {
  color: var(--yellow);
}

.details-strategy-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--yellow);
}

.details-strategy-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.st-strategy:lang(ko),
.details-strategy-note:lang(ko) {
  word-break: keep-all;
}

/* .env upload: keep it from touching the editor/list below */
.vars-upload {
  margin-bottom: 16px;
}

/* Raw editor toggle: looks pressed while the editor is open */
.vars-actions .btn-ghost.on {
  background: var(--primary-bg);
}

/* 레포 구성 확인(분석 게이트) 결과 배지 — 서비스 패널 제목 옆, 설정의 Source */
.gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.gate-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gate-badge.skip {
  background: var(--green-bg);
  border-color: var(--green-bg-border);
  color: var(--green-text);
}
.gate-badge.analyze {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-text);
}
.st-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
}
/* ------------------------------------------------------------------
   Log viewer (build / deploy / network)
------------------------------------------------------------------- */
.logs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.logs-toolbar-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.logs-toolbar.single {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.logs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  align-items: stretch;
  gap: 12px;
  padding: 8px 24px 0;
}

.logs-filter {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  height: 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.12s ease;
}

.logs-filter:focus-within {
  border-color: var(--primary-strong);
}

.logs-filter-icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 0 0 10px;
  color: var(--fg-muted);
  opacity: 0.7;
}

.logs-filter-field {
  position: relative;
  padding-top: 6px;
}

.logs-filter-ph {
  position: absolute;
  top: 7.5px;
  left: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 17px;
  color: var(--fg-muted);
  pointer-events: none;
}

.logs-filter-field textarea {
  width: 100%;
  height: 26px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
}

.logs-filter-kbd {
  position: absolute;
  right: 4px;
  top: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  color: var(--fg-muted);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: text;
}

.logs-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.logs-tool-btn:hover {
  border-color: var(--border-strong);
}

.logs-tool-btn:hover .tool-icon {
  color: var(--fg);
}

.logs-table-wrap {
  min-height: 0;
  padding-bottom: 6px;
  background: var(--bg);
}

.logs-table {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.logs-head {
  background: var(--bg-2);
}

.logs-row {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
}

.logs-row.head {
  grid-template-columns: 196px minmax(0, 1fr) minmax(0, 1fr);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--fg-muted);
  box-shadow: inset 0 -1px 0 var(--border);
}

.logs-th {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  box-shadow: inset 0 -1px 0 var(--border);
  padding: 6px 8px;
  background: var(--bg-2);
}

.logs-th.time {
  padding-left: 24px;
}

.logs-th.settings {
  justify-content: flex-end;
  padding-right: 20px;
}

.logs-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 38px;
  cursor: col-resize;
}

.logs-resize div {
  position: absolute;
  top: 8px;
  right: 0;
  width: 4px;
  height: 22px;
  border-radius: 9999px;
}

.logs-resize:hover div {
  background: var(--border);
}

.logs-layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 6px;
}

.logs-layout-btn .tool-icon {
  color: var(--fg);
}

.logs-layout-btn:hover {
  background: rgba(var(--wash), 0.06);
}

.logs-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.logs-scroll::-webkit-scrollbar {
  width: 0;
}

.logs-body {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

.logs-body .logs-row:hover .logs-td {
  background: rgba(var(--wash), 0.03);
}

.logs-td {
  padding: 4px 8px;
  min-height: 26px;
}

.logs-td.time {
  padding: 4px 8px 4px 0;
  color: var(--fg-muted);
}

.logs-td.data {
  color: var(--fg-2);
}

.logs-row.level-error .logs-td {
  background: var(--red-row);
}

.logs-row.level-warn .logs-td {
  background: var(--yellow-bg);
}

.logs-body .logs-row.level-error:hover .logs-td {
  background: var(--red-bg);
}

.logs-body .logs-row.level-warn:hover .logs-td {
  background: var(--yellow-bg);
}

.logs-time {
  display: flex;
  align-items: flex-start;
}

.logs-time time {
  display: block;
  padding-left: 10px;
  font-size: 12px;
  line-height: 14px;
  margin-top: 2px;
}

.log-level-btn {
  display: flex;
  align-items: stretch;
  height: 18px;
  padding-left: 12px;
  cursor: default;
}

.log-level {
  width: 4px;
  border-radius: 9999px;
}

.log-level.info {
  background: var(--blue-bar);
}

.log-level.warn {
  background: var(--yellow-bar);
}

.log-level.error {
  background: var(--red-bar);
}

.log-level.debug {
  background: var(--fg-dim);
}

.logs-data {
  min-width: 0;
}

.log-msg-inner {
  padding: 0 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.logs-body.nowrap .log-msg-inner {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-msg-inner .log-message {
  display: inline-block;
  padding: 0 4px;
  white-space: pre-wrap;
}

.logs-body:not(.kind-build) .log-msg-inner {
  padding: 0;
}

.log-attr {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 4px;
  vertical-align: top;
  color: var(--fg-muted);
  border-radius: 4px;
  cursor: pointer;
}

.log-attr:hover {
  background: rgba(var(--wash), 0.05);
}

.log-attr-key {
  font-weight: 600;
}

.log-attr-val {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-size {
  margin-left: 10px;
  color: var(--fg-subtle);
}

.build-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.log-step-icon {
  display: flex;
  align-items: center;
  height: 18px;
  color: var(--green);
}

.log-step-text {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-cached {
  padding: 0 6px;
  font-size: 11px;
  color: var(--fg-subtle);
  background: var(--bg-4);
  border-radius: 4px;
}

.log-duration {
  color: var(--fg-subtle);
  margin-left: auto;
  padding-left: 12px;
}

.log-step-output {
  margin: 4px 0 2px 24px;
  padding: 8px 10px;
  color: var(--fg-muted);
  white-space: pre;
  overflow-x: auto;
  background: rgba(var(--wash), 0.02);
  border-left: 2px solid var(--border);
  border-radius: 4px;
}

.logs-marker {
  padding: 4px 0;
  font-family: var(--font-sans);
}

.logs-marker-line {
  position: relative;
  height: 33px;
}

.logs-marker-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  border-top: 1px solid var(--border);
}

.logs-marker-anchor {
  position: absolute;
  left: 32px;
  top: 5px;
  display: flex;
}

.logs-marker-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}

.logs-marker-pill time {
  font-variant-numeric: tabular-nums;
}

.logs-marker-arrow {
  display: flex;
  margin: 0 4px;
}

.logs-table {
  position: relative;
}

.logs-jump {
  position: absolute;
  right: 32px;
  bottom: 23px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.logs-jump-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--fg-subtle);
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.logs-jump-btn + .logs-jump-btn {
  background: transparent;
  border-color: var(--border-2);
}

.logs-jump-btn:hover {
  color: var(--fg);
}

.logs-empty {
  padding: 40px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-subtle);
  text-align: center;
}

/* build logs ------------------------------------------------------- */
.logs-body.kind-build .logs-row.step .logs-td.data {
  padding: 6px 8px;
}

.logs-body.kind-build .logs-row.step .log-level-btn {
  height: 22px;
}

.bl-plain {
  padding: 0 4px;
  white-space: pre-wrap;
  word-break: break-all;
}

.bl-size {
  color: var(--fg-muted);
}

.bl-flex {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 4px;
  word-break: break-all;
}

.bl-flex .bl-dur {
  margin-left: auto;
  color: var(--fg-muted);
}

.bl-icon {
  display: flex;
  align-items: center;
  height: 18px;
  color: var(--green-text);
}

.bl-step {
  display: flex;
  gap: 4px;
  width: 100%;
  text-align: left;
  word-break: break-all;
}

.bl-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 56px;
  gap: 4px 12px;
  width: 100%;
  padding: 0 4px;
  white-space: pre-wrap;
}

.bl-grid.no-stage {
  grid-template-columns: 0 minmax(0, 1fr) 56px;
}

.bl-stage {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding-right: 4px;
  color: var(--fg-muted);
}

.bl-stage-name {
  white-space: nowrap;
}

.bl-stage-empty {
  position: relative;
}

.bl-stage-empty .bl-icon {
  position: absolute;
  right: 2px;
}

.bl-text {
  color: var(--fg-2);
}

.bl-text.cached {
  color: var(--fg-muted);
}

.bl-cached {
  color: var(--fg-faint);
}

.bl-dur-cell {
  text-align: right;
  color: var(--fg-muted);
  white-space: pre;
}

/* notices and errors ------------------------------------------------ */
.logs-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-muted);
}

.logs-notice-link {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.logs-empty.logs-live {
  padding: 12px 24px;
  font-size: 12px;
}

.logs-empty.logs-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--red-text);
}

/* segmented filters (status class, deploy target) ------------------ */
.logs-class.seg,
.logs-targets.seg {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  width: fit-content;
}

.logs-class.seg button,
.logs-targets.seg button {
  position: relative;
  height: 34px;
  padding: 0 12px;
  border-radius: 0;
}

.logs-class.seg button p,
.logs-targets.seg button p {
  font-size: 13px;
}

.logs-class.seg button + button,
.logs-targets.seg button + button {
  margin-left: -1px;
}

.logs-class.seg button:first-child,
.logs-targets.seg button:first-child {
  border-radius: 6px 0 0 6px;
}

.logs-class.seg button:last-child,
.logs-targets.seg button:last-child {
  border-radius: 0 6px 6px 0;
}

.logs-class.seg button[data-state='active'],
.logs-targets.seg button[data-state='active'] {
  z-index: 1;
  background: var(--bg-4);
  border-color: var(--border-strong);
}

/* network logs ------------------------------------------------------ */
.logs-toolbar.net {
  grid-template-columns: minmax(0, 1fr) auto 34px;
}

.logs-row.net,
.logs-row.head.net {
  grid-template-columns: 196px 88px 112px 104px 104px 120px minmax(0, 1fr);
}

.logs-th.num {
  justify-content: flex-end;
}

.logs-td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.logs-td.net-code {
  font-variant-numeric: tabular-nums;
}

.logs-td.net-code.warn {
  color: var(--yellow);
}

.logs-td.net-code.error {
  color: var(--red-text);
}

.logs-td.net-code.muted {
  color: var(--fg-subtle);
}
/* ------------------------------------------------------------------
   Workspace pages (Templates / Usage / Settings)
------------------------------------------------------------------- */
.pg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
}

/* templates */
.tpl-body {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}

.tpl-sub {
  display: flex;
  align-items: center;
  height: 34px;
}

.tpl-sub p {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.tpl-sub a {
  color: var(--fg-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tpl-sub a:hover {
  color: var(--fg);
}

.tpl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  padding: 32px 24px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}

.tpl-empty .tool-icon {
  color: var(--fg);
}

.tpl-empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 448px;
  margin-top: 16px;
  text-align: center;
}

.tpl-empty-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.tpl-empty-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

.tpl-empty-sub button {
  color: var(--primary-strong);
}

.tpl-empty-sub button:hover {
  text-decoration: underline;
}

/* usage */
.usage {
  display: flex;
  flex-direction: column;
}

.usage-range {
  display: flex;
  align-items: center;
}

.usage-range span {
  padding: 0 8px;
}

.usage-arrow {
  opacity: 0.5;
}

.usage-arrow .tool-icon {
  color: var(--fg);
}

.usage-hr {
  margin: 48px 0 0;
  border: 0;
  border-top: 1px solid var(--border-2);
}

.usage-body {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.usage-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.usage-h1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 27.5px;
}

.usage-stack {
  display: flex;
  flex-direction: column;
  margin-top: 31px;
}

.usage-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  height: 141px;
}

.usage-rows {
  margin-top: -6px;
}

.usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  line-height: 20px;
}

.usage-row + .usage-row {
  border-top: 1px solid var(--border-2);
}

.usage-row p:first-child {
  color: var(--fg-muted);
}

.usage-tiles {
  display: flex;
  gap: 12px;
}

.usage-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-3);
  border-radius: 6px;
}

.usage-tile p:first-child {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.usage-tile.green p {
  color: var(--green);
}

.usage-big {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 38.5px;
}

.usage-breakdown {
  display: none;
  flex-direction: column;
  margin-top: 24px;
  cursor: default;
}

.usage-breakdown.open {
  display: flex;
}

.usage-bd-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.usage-bd-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}

.usage-bd-line {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  gap: 32px;
  font-size: 14px;
  line-height: 20px;
}

.usage-bd-line .muted {
  color: var(--fg-subtle);
}

.usage-bd-line .right {
  text-align: right;
}

.usage-bd-sum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 0 16px;
}

.usage-bd-sumrow {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  font-size: 14px;
  line-height: 20px;
}

.usage-bd-sumrow p:last-child {
  width: 80px;
  text-align: right;
}

.usage-bd-sumrow.primary {
  color: var(--primary);
}

.usage-bd-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  margin: 0 -16px;
  padding: 8px 16px;
  background: var(--bg-2);
  border-radius: 6px;
}

.usage-bd-total p:first-child {
  font-size: 14px;
  font-weight: 600;
}

.usage-bd-total p:last-child {
  width: 80px;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  text-align: right;
}

.usage-projects {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.usage-plist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.usage-proj {
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: 8px;
}

.usage-proj-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.usage-proj-name {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 18px;
  line-height: 27px;
}

.usage-ext {
  opacity: 0;
  font-size: 14px;
  transition: opacity 0.12s ease;
}

.usage-proj-name:hover .usage-ext {
  opacity: 1;
}

.usage-proj-right {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.usage-cost-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--fg-muted);
}

.usage-cost {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.usage-proj-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------
   Project-level pages (framed like the canvas)
------------------------------------------------------------------- */
.proj-page-region {
  display: grid;
  flex: 1;
  min-height: 0;
  padding: 0 8px 8px 0;
}

.proj-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* logs explorer */
.plogs {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.plogs-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px auto 34px;
  gap: 12px;
  padding: 16px 24px 0;
}

.plogs-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 40px 0 12px;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.plogs-filter:focus-within {
  border-color: var(--primary-strong);
}

.plogs-filter input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: none;
}

.plogs-filter input::placeholder {
  color: var(--fg-muted);
}

.plogs-kbd {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  color: var(--fg-muted);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: text;
}

.plogs-hist {
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--border);
}

.plogs-hist-track {
  position: relative;
  height: 30px;
  border-bottom: 2px dashed rgba(var(--wash), 0.07);
}

.plogs-hist-bar {
  position: absolute;
  bottom: -2px;
  width: 10px;
  height: 30px;
  background: var(--blue-bar);
  border-radius: 1px;
}

.plogs-hist-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  line-height: 14px;
  color: var(--fg-muted);
}

.plogs-table {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.plogs-head {
  display: grid;
  grid-template-columns: 194px 177px minmax(0, 1fr) auto;
  align-items: center;
  height: 40px;
  padding: 0 20px 0 24px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.plogs-scroll {
  min-height: 0;
  overflow-y: auto;
}

.plogs-marker {
  position: relative;
  display: flex;
  padding: 10px 0 10px 32px;
}

.plogs-marker::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--border);
}

.plogs-marker-pill {
  position: relative;
  padding: 2px 14px;
  font-size: 12px;
  line-height: 20px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.plogs-arrow {
  margin: 0 6px;
}

.plogs-row {
  display: grid;
  grid-template-columns: 194px 177px minmax(0, 1fr);
  align-items: center;
  min-height: 30px;
  padding: 4px 24px 4px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

.plogs-row:hover {
  background: rgba(var(--wash), 0.03);
}

.plogs-time {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-muted);
}

.plogs-time .log-level {
  height: 18px;
}

.plogs-svc {
  color: var(--fg-muted);
}

.plogs-msg {
  color: var(--fg);
  /* 스택 트레이스처럼 여러 줄로 묶인 행도 들여쓰기·줄바꿈을 그대로 보여준다. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 여러 줄로 묶인 행: 시각은 위에 붙이고 레벨 막대는 행 높이만큼 늘린다. */
.plogs-row.block {
  align-items: stretch;
}

.plogs-row.block .plogs-time {
  align-items: flex-start;
}

.plogs-row.block .plogs-time .log-level {
  align-self: stretch;
  height: auto;
}

.plogs-jump {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plogs-jump .btn {
  background: var(--bg-2);
  color: var(--fg-subtle);
}

/* observability */
.obs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.obs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}

.obs-bar-right {
  display: flex;
  gap: 8px;
}

.obs-board {
  margin: 16px 16px 128px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  overflow-y: auto;
}

.obs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 420px;
  padding: 24px;
  text-align: center;
}

.obs-art {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 4px;
  margin-bottom: 40px;
}

.obs-mini {
  padding: 8px 8px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.obs-mini-title {
  height: 5px;
  border-radius: 2px;
  background: var(--border);
}

.obs-mini-line {
  height: 1px;
  margin: 7px 0 10px;
  background: var(--border);
}

.obs-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
}

.obs-mini-bars span {
  flex: 1;
  background: var(--border);
  border-radius: 1px 1px 0 0;
}

.obs-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
}

.obs-desc {
  max-width: 400px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 21px;
  color: var(--fg-muted);
}

.obs-btn {
  width: 400px;
  height: 44px;
  margin-top: 12px;
  font-size: 16px;
}

.obs-btn:first-of-type {
  margin-top: 28px;
}

.obs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.obs-block .obs-mini {
  border: 0;
  padding: 8px 0 0;
}

.obs-block .obs-mini-bars {
  height: 140px;
}

.obs-block .obs-mini-bars span {
  background: var(--primary);
  opacity: 0.6;
}

/* project settings */
.psettings {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg-2);
}

.ps-head {
  padding: 32px 48px;
  border-bottom: 1px solid var(--border);
}

.ps-head p {
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
}

.ps-scroll {
  min-height: 0;
  overflow-y: auto;
}

.ps-layout {
  display: flex;
  align-items: flex-start;
}

.ps-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 196px;
  flex-shrink: 0;
  margin: 48px 0 0 48px;
}

.ps-nav-item {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0 4px 8px;
  padding: 8px 12px;
  color: var(--fg-muted);
  border-radius: 4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ps-nav-item p {
  margin-left: 16px;
  font-size: 16px;
  line-height: 24px;
}

.ps-nav-item svg {
  color: var(--fg-subtle);
}

.ps-nav-item:hover {
  color: var(--fg);
  background: rgba(var(--wash), 0.03);
}

.ps-nav-item.active {
  color: var(--fg);
}

.ps-nav-item.active p {
  font-weight: 500;
}

.ps-nav-item.active svg {
  color: var(--primary-strong);
}

.ps-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-left: 48px;
  padding: 48px 16px 48px 0;
}

.ps-section {
  display: flex;
  flex-direction: column;
  max-width: 1058px;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border-2);
}

.ps-section h4 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.5px;
}

.ps-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--fg-muted);
}

.ps-input {
  width: 100%;
  max-width: 768px;
  height: 42px;
  margin-bottom: 24px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
  background: transparent;
}

.ps-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  max-width: 768px;
  height: 52px;
  margin: 0 0 24px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 24px;
  background: var(--bg-4);
  border: 1px solid var(--bg-4);
  border-radius: 8px;
}

.ps-id .mono {
  font-size: 14px;
}

.ps-update {
  align-self: flex-start;
  height: 42px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
}

.ps-update:disabled {
  opacity: 0.5;
}

.ps-p {
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-muted);
}

.ps-p b {
  font-weight: 700;
}

.ps-btn {
  align-self: flex-start;
  height: 42px;
  margin-top: 24px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
}

/* sandboxes */
.sandboxes {
  display: grid;
  place-items: center;
}

.sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.sb-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--fg-muted);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.sb-empty .btn {
  margin-top: 20px;
}

.usage-row p:last-child,
.usage-cost,
.usage-bd-line .right,
.usage-bd-sumrow p:last-child,
.usage-bd-total p:last-child {
  font-variant-numeric: tabular-nums;
}

/* workspace settings: coming soon ------------------------------------ */
.soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  padding: 56px 24px;
  text-align: center;
  background: var(--bg-2);
  border-radius: 20px;
}

.soon-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: var(--primary-strong);
  background: var(--primary-bg);
  border-radius: 16px;
}


.soon-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.soon-desc {
  max-width: 420px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--fg-subtle);
}

/* ------------------------------------------------------------------
   AI diagnosis (deployment pane tab). Colors come from the theme tokens only.
------------------------------------------------------------------- */
.diag {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 48px 48px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 22px;
  color: var(--fg);
  background: var(--bg-2);
}

/* Korean breaks between words, not inside them (Japanese has no spaces, so it keeps the default). */
.diag:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.dp-tab-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dp-tab-ai svg {
  color: var(--primary);
}

.diag-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-h {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.diag-muted {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.diag-text {
  margin: 0;
  color: var(--fg-2);
}

.diag-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.diag-hint svg {
  margin-top: 3px;
}

.diag-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  color: var(--red-text);
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-radius: 6px;
}

.diag-alert svg {
  margin-top: 3px;
}

/* States: none / running / failed ------------------------------------ */
.diag-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.diag-card.error {
  background: var(--red-bg);
  border-color: var(--red-line);
}

.diag-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--fg-muted);
  background: var(--bg-3);
  border-radius: 9999px;
}

.diag-card-icon.accent {
  color: var(--primary-text);
  background: var(--primary-bg);
}

.diag-card.error .diag-card-icon {
  color: var(--red);
  background: transparent;
}

.diag-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.diag-card-body {
  max-width: 520px;
  margin: 4px auto 8px;
  color: var(--fg-muted);
}

.diag-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.diag-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 9999px;
  animation: diag-spin 0.9s linear infinite;
}

@keyframes diag-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .diag-spinner {
    animation-duration: 2.4s;
  }
}

/* Result ------------------------------------------------------------- */
.diag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diag-bar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.diag-spark {
  color: var(--primary);
}

.diag-summary {
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
}

.diag-summary p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--fg);
}

.diag-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  color: var(--yellow);
  background: var(--yellow-bg);
  border-radius: 6px;
}

.diag-notice svg {
  margin-top: 3px;
}

.diag-notice p {
  margin: 4px 0 0;
  color: var(--fg-muted);
}

/* Causes */
.diag-causes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-cause {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.diag-cause-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.diag-uncertainty {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-muted);
}

.diag-uncertainty b {
  margin-right: 4px;
  font-weight: 600;
  color: var(--fg-subtle);
}

.diag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 9999px;
  white-space: nowrap;
}

.diag-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}

.diag-badge.direct {
  color: var(--green-text);
  background: var(--green-bg);
}

.diag-badge.supported {
  color: var(--yellow);
  background: var(--yellow-bg);
}

.diag-badge.other {
  color: var(--fg-muted);
  background: var(--bg-3);
}

/* Evidence chips */
.diag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.diag-label {
  margin-right: 2px;
  font-size: 12px;
  color: var(--fg-subtle);
}

.diag-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--fg-muted);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

button.diag-chip:hover {
  color: var(--primary-text);
  background: var(--primary-bg);
  border-color: var(--primary-border);
}

.diag-chip.missing {
  opacity: 0.5;
  cursor: default;
}

/* Plans */
.diag-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-plan {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.diag-plan-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
}

.diag-plan-sum::-webkit-details-marker {
  display: none;
}

.diag-plan-no {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 9999px;
}

.diag-plan-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.diag-plan-chev {
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}

.diag-plan[open] .diag-plan-chev {
  transform: rotate(180deg);
}

.diag-plan-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
}

.diag-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diag-block-h {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--fg-muted);
}

.diag-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-list li {
  position: relative;
  padding-left: 14px;
  color: var(--fg-2);
}

.diag-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--fg-faint);
}

.diag-list.warn {
  padding: 10px 12px 10px 14px;
  background: var(--yellow-bg);
  border-radius: 6px;
}

.diag-list.warn li {
  color: var(--yellow);
}

.diag-list.warn li::before {
  background: var(--yellow);
}

.diag-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: step;
}

.diag-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 28px;
  counter-increment: step;
}

.diag-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-4);
  border-radius: 9999px;
}

.diag-expected {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--green-text);
}

.diag-expected b {
  margin-right: 4px;
}

/* Changes + snippet */
.diag-changes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-change {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.diag-change-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.diag-change-target {
  font-size: 14px;
  font-weight: 600;
}

.diag-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--primary-bg);
  border-radius: 4px;
}

.diag-code {
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.diag-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  background: var(--bg-4);
  border-bottom: 1px solid var(--border);
}

.diag-code-lang {
  font-size: 12px;
  color: var(--fg-subtle);
}

.diag-code-body {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg);
  tab-size: 2;
}

.diag-ph {
  padding: 0 2px;
  color: var(--primary-text);
  background: var(--primary-bg);
  border-radius: 3px;
}

.diag-fill {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diag-ph-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.diag-ph-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  line-height: 20px;
}

.diag-ph-row dt {
  flex-shrink: 0;
  color: var(--primary-text);
}

.diag-ph-row dd {
  margin: 0;
  color: var(--fg-muted);
}

/* Next checks / missing information */
.diag-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-items li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
}

.diag-items b,
.diag-muted b {
  font-weight: 600;
}

.diag-muted b {
  margin-right: 4px;
}

/* Evidence log */
.diag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  border-radius: 6px;
}

.diag-toggle-chev {
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}

.diag-toggle[aria-expanded='true'] .diag-toggle-chev {
  transform: rotate(180deg);
}

.diag-ev-list {
  max-height: 480px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.diag-ev-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-2);
  outline: none;
}

.diag-ev-row:last-child {
  border-bottom: 0;
}

.diag-ev-row[data-focus='true'] {
  background: var(--primary-bg);
  box-shadow: inset 3px 0 0 var(--primary);
}

.diag-ev-id {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  line-height: 20px;
  color: var(--fg-muted);
}

.diag-ev-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  line-height: 16px;
  color: var(--fg-subtle);
}

.diag-ev-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 12px;
  line-height: 20px;
  color: var(--fg-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Failure banner: the latest failed deployment's diagnosis, under the banner text */
.diag-brief {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--fg);
  border-top: 1px solid color-mix(in srgb, var(--yellow-bar) 40%, transparent);
}

.diag-brief:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.diag-brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.diag-brief-time {
  font-size: 13px;
  color: var(--fg-muted);
}

.diag-brief-muted {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-muted);
}

.diag-brief-running {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diag-spinner.sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.diag-brief-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--fg-2);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.diag-brief-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.diag-brief-row {
  display: flex;
  gap: 12px;
}

.diag-brief-row dt {
  flex: 0 0 52px;
  font-size: 12px;
  line-height: 24px;
  color: var(--fg-subtle);
}

.diag-brief-row dd {
  min-width: 0;
  margin: 0;
}

.diag-brief-row dd .diag-badge {
  margin-right: 8px;
  vertical-align: 1px;
}

.diag-brief-line {
  overflow-wrap: anywhere;
}

.diag-brief-more {
  margin-left: 8px;
  font-size: 12px;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.diag-brief-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* actions sit bottom-right, under the result */
  gap: 8px;
  margin-top: 2px;
}

.diag-brief-actions .btn {
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}

.diag-brief-actions .btn svg {
  width: 14px;
  height: 14px;
}

.diag-brief-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.repair-panel { margin-top: 24px; scroll-margin-top: 24px; }
.repair-panel .diag-bar b { display: flex; align-items: center; gap: 6px; }
.repair-plans { display: grid; gap: 10px; border: 0; padding: 12px 0; }
.repair-plans label { display: flex; gap: 8px; align-items: baseline; }
.repair-access { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.repair-access p { width: 100%; }
.repair-patch { max-height: 420px; overflow: auto; white-space: pre; }
.repair-panel summary { cursor: pointer; padding: 12px 0; }

.failed-repair-action { display: inline-flex; flex-direction: column; gap: 4px; }
.failed-repair-error { max-width: 300px; font-size: 12px; color: var(--red, #b42318); }
/* ------------------------------------------------------------------
   멀티 이미지 스택: 캔버스 그룹·단계 진행, 관리형 DB, 참조 변수, 검증
------------------------------------------------------------------- */

/* 캔버스 그룹 상자 ------------------------------------------------- */
.stack-group {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 20px 0;
  background: var(--bg-3);
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  pointer-events: none;
}
.stack-head,
.stack-phases,
.stack-pending {
  pointer-events: auto;
}
.stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stack-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.stack-repo {
  min-width: 0;
}
.stack-count {
  flex: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-subtle);
}
.stack-redeploy {
  flex: none;
  gap: 6px;
}
.spin {
  animation: gate-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation-duration: 2.4s;
  }
}
.stack-phases {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.stack-phase {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-subtle);
}
.stack-phase-arrow {
  flex: none;
  color: var(--fg-faint);
}
.stack-phase-no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-5);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
}
.stack-phase-names {
  max-width: 180px;
}
.stack-phase.done .stack-phase-no {
  background: var(--green-bg);
  color: var(--green-text);
}
.stack-phase.active .stack-phase-no {
  background: var(--primary-bg);
  color: var(--primary-text);
  box-shadow: 0 0 0 2px var(--primary-border);
}
.stack-phase.active {
  color: var(--fg);
}
.stack-phase.failed .stack-phase-no {
  background: var(--red-bg);
  color: var(--red-text);
}
.stack-phase.failed {
  color: var(--red-text);
}
.stack-phase.held .stack-phase-no {
  background: var(--yellow-bg);
  color: var(--yellow);
}
.stack-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 13px;
}
.stack-pending span {
  flex: 1;
  min-width: 0;
}
.stack-pending svg {
  flex: none;
}

/* 서비스 노드: 배포 순서·보류 사유 */
.svc-node-top {
  position: relative;
}
.svc-step-no {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-5);
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
}
.svc-node-held,
.svc-node-waiting {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}
.svc-node-held {
  color: var(--yellow);
}
.svc-node-waiting {
  color: var(--fg-subtle);
}
.react-flow__edge-path {
  stroke: var(--fg-subtle);
}

/* 관리형 DB 탭 ----------------------------------------------------- */
.db-tab,
.db-settings {
  display: grid;
  gap: 24px;
  padding: 8px 0 24px;
}
.db-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.db-head > :nth-child(2) {
  flex: 1;
  min-width: 0;
}
.db-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
}
.db-head p {
  margin: 0;
}
.db-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary-text);
}
.db-facts {
  display: grid;
  gap: 16px;
  margin: 0;
}
.db-facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.db-facts dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.db-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
}
.db-copy span {
  flex: 1;
  min-width: 0;
}
.db-facts .db-note {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
}
.db-connect h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.db-connect p {
  margin: 0 0 8px;
}
.db-props {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.db-props li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-warning {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--yellow-bar);
  border-radius: 10px;
  background: var(--yellow-bg);
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
}
.db-warning > svg {
  flex: none;
  margin-top: 2px;
  color: var(--yellow);
}
.db-warning h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.db-warning ul {
  margin: 0;
  padding-left: 16px;
}

/* 참조 변수 · 검증 -------------------------------------------------- */
.vars-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vars-ref svg {
  flex: none;
  color: var(--primary-text);
}
.vars-ref > .mono {
  flex: none;
  color: var(--fg);
}
.vars-ref-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-faint);
}
.vars-ref-form {
  grid-template-columns: 1.2fr 1.2fr 0.8fr auto 34px;
}
.vars-ref-form .ref-form-note {
  grid-column: 1 / -1;
  margin: 0;
}
.var-validation {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
}
.var-validation h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
}
.var-validation .vars-note {
  margin-bottom: 10px;
}
.var-validation-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--green-text);
}
.var-issues {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.var-issue {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.var-issue.error {
  border-color: var(--red-line);
  background: var(--red-bg);
}
.var-issue.warning {
  border-color: var(--yellow-bar);
  background: var(--yellow-bg);
}
.var-issue-icon {
  flex: none;
  margin-top: 1px;
}
.var-issue.error .var-issue-icon {
  color: var(--red-text);
}
.var-issue.warning .var-issue-icon {
  color: var(--yellow);
}
.var-issue-body {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
}
.var-issue-body p {
  margin: 0;
}
.var-issue-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.var-issue-key {
  font-weight: 600;
}
.var-issue-msg {
  color: var(--fg-subtle);
  overflow-wrap: anywhere;
}
.var-issue-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--primary-text);
}
.var-blocked .var-issues {
  margin-top: 10px;
}

/* 변경 감지 diff 다이얼로그 ------------------------------------------ */
.pending-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pending-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
}
.pending-changes {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
}
.pending-change {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.pending-change > svg {
  flex: none;
  margin-top: 4px;
}
.pending-change p {
  margin: 0;
}
.pending-change.add > svg {
  color: var(--green-text);
}
.pending-change.remove > svg {
  color: var(--red-text);
}
.pending-change.change > svg {
  color: var(--primary-text);
}
.pending-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.pending-diff del {
  color: var(--red-text);
}
.pending-diff ins {
  color: var(--green-text);
  text-decoration: none;
}

/* apply 단계: DB 자동 생성·환경 연결·별칭 ------------------------------- */
.gate-deps {
  display: grid;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-2);
}
.gate-deps h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}
.gate-deps svg {
  color: var(--primary-text);
}
.gate-dep-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gate-dep {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.gate-dep.on {
  border-color: var(--primary-border);
}
.gate-dep-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.create-dialog .gate-dep-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}
.gate-dep-state {
  margin: 4px 0 0 26px !important;
  font-size: 12px;
  color: var(--fg-subtle);
}
.gate-dep-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
  margin: 8px 0 0 26px;
}
.gate-dep-fields .gate-cell {
  flex: 1;
  min-width: 160px;
}
.gate-dep-spec {
  font-size: 12px;
}
.gate-map {
  display: grid;
  gap: 4px;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.gate-map li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.gate-map svg {
  flex: none;
  color: var(--fg-faint);
}
.gate-map-arrow {
  color: var(--fg-subtle);
}
.gate-code.auto {
  background: var(--green-bg);
  color: var(--green-text);
}
.gate-code.manual {
  background: var(--yellow-bg);
  color: var(--yellow);
}

@media (max-width: 640px) {
  .vars-ref-form {
    grid-template-columns: 1fr 1fr;
  }
  .vars-ref-form > input:first-child {
    grid-column: 1 / -1;
  }
}

.var-blocked-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}

.gate-init {
  display: grid;
  gap: 4px;
  margin: 6px 0 0 26px;
  font-size: 12px;
}
.gate-init p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.gate-init svg {
  flex: none;
  margin-top: 3px;
}
.gate-init .warn {
  color: var(--yellow);
}
.db-init h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.db-init p {
  margin: 0 0 8px;
}
.db-init ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.db-init li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
}
.db-init li .st-muted {
  font-size: 12px;
}
/* ------------------------------------------------------------------
   On-prem servers: workspace list, add-server dialog, target badges
------------------------------------------------------------------- */

.server-pill {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
}

.server-key {
  font-size: 12px;
  color: var(--fg-subtle);
}

.server-hint {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

.server-hint.error {
  color: var(--red-text);
}

/* 이름 규칙을 어긴 입력란. 포커스 윤곽선도 에러 색으로 바꿔 포커스 중에도 보이게 한다. */
.server-dialog input[aria-invalid='true'] {
  border-color: var(--red);
}

.server-dialog input[aria-invalid='true']:focus {
  outline-color: var(--red);
}

/* "내 서버" page */
.server-page {
  margin-top: 32px;
}

.server-list-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.server-list-card .set-muted {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-subtle);
}

.server-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.server-list-head .btn {
  flex-shrink: 0;
}

.server-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 8px;
  text-align: center;
  color: var(--fg-subtle);
}

.server-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.server-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.server-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.server-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.server-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.server-row-meta {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
  overflow-wrap: anywhere;
}

.server-row-error {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--red-text);
}

.server-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.server-row-actions .btn,
.server-command .btn,
.server-result .btn {
  gap: 6px;
}

/* add-server dialog (shares the create dialog frame) */
.server-dialog .create-review label {
  gap: 6px;
}

.server-install {
  display: grid;
  gap: 14px;
  font-size: 14px;
  line-height: 20px;
}

.server-install p {
  margin: 0;
}

.server-install-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.server-reqs {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-muted);
  background: var(--bg-3);
  border-radius: 8px;
}

.server-reqs b {
  color: var(--fg);
}

.server-reqs ul {
  margin: 4px 0;
  padding-left: 18px;
  list-style: disc;
}

.server-reqs p {
  margin: 0;
}

.server-command {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.server-command pre {
  flex: 1;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--fg);
}

.server-wait {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--primary-text);
  background: var(--primary-bg);
  border-radius: 8px;
}

.server-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--primary-border);
  border-top-color: var(--primary);
  border-radius: 9999px;
  animation: diag-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .server-spinner {
    animation-duration: 2.4s;
  }
}

.server-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
}

.server-result svg {
  flex-shrink: 0;
}

.server-result p {
  flex: 1;
}

.server-result.ok {
  color: var(--green-text);
  background: var(--green-bg);
}

.server-result.failed {
  color: var(--red-text);
  background: var(--red-bg);
}

.server-result.stalled {
  color: var(--fg-muted);
  background: var(--bg-3);
}

.server-actions {
  display: flex;
  justify-content: flex-end;
}

.deploy-blocked-note {
  font-size: 12px;
  line-height: 18px;
  color: var(--fg-subtle);
}

/* deployment actions menu: deploy-creating items blocked by a disconnected server */
.menu-note {
  white-space: normal;
}

.menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-item:disabled:hover {
  background: transparent;
}

/* deploy buttons blocked until the service's server connects */
.btn.deploy-blocked:disabled {
  opacity: 0.5;
}

.deploy-blocked-note a {
  color: var(--primary-text);
  text-decoration: underline;
}

/* service settings: more target choices wrap, the replica box keeps its width */
.st-region-row .st-replicas {
  flex-shrink: 0;
  align-self: flex-start;
}

/* target picker: kind radios + on-prem server dropdown (create dialog, service settings) */
.tp-onprem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.tp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 8px 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.tp-trigger:hover:not(:disabled) {
  background: rgba(var(--wash), 0.03);
}

.tp-trigger:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 1px;
}

.tp-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tp-trigger svg {
  flex-shrink: 0;
  color: var(--fg-subtle);
}

.tp-trigger-name,
.tp-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-menu {
  max-width: min(320px, calc(100vw - 16px));
}

.tp-option,
.tp-add {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  cursor: pointer;
}

.tp-option:focus-visible,
.tp-add:focus-visible {
  outline: none;
  background: rgba(var(--wash), 0.06);
}

.tp-option[aria-selected='true'] {
  font-weight: 600;
}

.tp-check {
  display: inline-flex;
  width: 14px;
  flex-shrink: 0;
  color: var(--primary-text);
}

.tp-option .tp-status {
  margin-left: auto;
}

.tp-add {
  color: var(--primary-text);
}

.tp-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.tp-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}

.tp-status.connected {
  color: var(--green-text);
}

.tp-status.pending,
.tp-status.registering {
  color: var(--primary-text);
}

.tp-status.failed {
  color: var(--red-text);
}

.tp-status.disconnected {
  color: var(--fg-subtle);
}

.create-dialog .tp-trigger {
  width: auto;
}
/* 레포 구성 확인: 요약 카드 + 접이식 상세 */
.gate-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.gate-card{border:1px solid var(--border);border-radius:10px;background:var(--bg);min-width:0}
.gate-card.db{background:var(--bg-2)}
.gate-card.off{background:var(--bg-2);opacity:.6}
.gate-card-label{display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0;cursor:default}
label.gate-card-label{cursor:pointer}
.create-dialog .gate-card-label input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;padding:0;accent-color:var(--primary)}
.gate-card-label>svg{flex:none;color:var(--primary-text)}
.gate-card-text{display:grid;gap:2px;min-width:0}
.gate-card-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gate-card-meta,.gate-card-dep{font-size:12px;color:var(--fg-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gate-card-dep{display:flex;align-items:center;gap:4px}
.gate-card-dep svg{flex:none}
.gate-auto,.gate-warn{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.gate-auto svg,.gate-warn svg{flex:none;margin-top:3px}
.gate-auto svg{color:var(--primary-text)}
.gate-auto b{flex:none;color:var(--fg)}
.gate-warn{color:var(--yellow)}
.gate-warn.input{color:var(--fg)}
.gate-warn.input svg{color:var(--yellow)}
.gate-actions.split{justify-content:space-between;align-items:center}
.gate-link{padding:4px 2px;border:0;background:none;color:var(--fg-subtle);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.gate-link:hover:not(:disabled){color:var(--fg)}
.gate-link:disabled{opacity:.5;cursor:not-allowed}
.gate-disclosure-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;color:var(--fg-muted);font-size:13px;cursor:pointer}
.gate-disclosure-btn:hover{color:var(--fg)}
.gate-disclosure-btn svg{transition:transform .15s}
.gate-disclosure-btn svg.open{transform:rotate(180deg)}
.gate-disclosure-body{display:grid;gap:14px;margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.gate-disclosure-body[hidden]{display:none}
.gate-code-faint{font-size:11px;color:var(--fg-faint)}
.gate-code.optional{background:none;border:1px dashed var(--border-strong);color:var(--fg-subtle)}
.gate-env{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.gate-dep-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px}
.gate-dep-toggle span{font-size:13px}
.gate-dep-state{margin-left:26px}
.create-dialog .gate-dep-fields .gate-dep-name{flex:0 1 260px}
.gate-reasons{font-size:13px}
@media (prefers-reduced-motion:reduce){.gate-disclosure-btn svg{transition:none}}
/* .create-review label{display:grid} 보다 앞서도록 한 단계 더 좁힌다 */
.create-review .gate-dep-toggle,.create-review label.gate-card-label{display:flex;align-items:center;gap:10px;font-size:13px}
.gate-info{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;margin-left:4px;border:0;border-radius:50%;background:none;color:var(--fg-faint);cursor:help;vertical-align:middle}
.gate-info:hover,.gate-info:focus-visible{color:var(--fg);background:var(--bg-4)}
.gate-banner .gate-info{margin-left:auto;margin-top:0}
.gate-tips,.gate-dep-state{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;color:var(--fg-subtle)}
.gate-tip-list{margin:0;padding-left:14px;display:grid;gap:4px;text-align:left}
.gate-init p{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.gate-unit .gate-unit-meta{display:grid;gap:6px;align-items:start}
.gate-unit-meta .gate-role{justify-self:start}
.gate-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.gate-row.top{align-items:flex-start}
.gate-row .gate-meta-label{flex:none;min-width:34px}
.gate-keyitem{display:inline-flex;align-items:center;gap:4px}
.gate-tag{padding:0 6px;border-radius:999px;background:var(--bg-3,var(--bg-4));color:var(--fg-subtle);font-size:11px;line-height:18px}
.gate-row .gate-map{flex-basis:auto}
.create-dialog{position:fixed;z-index:801;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto;background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));border-radius:12px;box-shadow:0 24px 80px #0002;padding:24px;color:var(--text,var(--fg))}.create-dialog header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.create-dialog h2{font-size:20px;margin:0}.create-icon,.create-back,.create-repo-actions button{border:0;background:none;color:inherit;cursor:pointer}.create-title{display:flex;align-items:center;gap:6px;min-width:0}.create-back{display:grid;place-items:center;width:32px;height:32px;margin-left:-6px;border-radius:8px;color:var(--fg-subtle)}.create-back:hover{background:rgba(var(--wash),.06);color:var(--fg)}.create-dialog input,.create-dialog select,.create-dialog textarea{width:100%;box-sizing:border-box;border:1px solid var(--border,var(--border));border-radius:6px;background:rgba(var(--wash), 0.016);padding:11px 12px;color:inherit;font:inherit}.create-dialog input:focus,.create-dialog textarea:focus{outline:1px solid #ffa41b}.create-options{margin-top:12px;display:flex;flex-direction:column;gap:3px}.create-options button{display:flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}.create-options button:hover,.create-options button:focus-visible{background:rgba(var(--wash), 0.043)}.create-options button:disabled{color:var(--fg-subtle);cursor:not-allowed}.create-options button:disabled:hover{background:transparent}.create-soon{margin-left:auto;padding:2px 8px;border:1px solid #ffa41b40;border-radius:999px;background:#ffa41b10;color:var(--primary-text);font-size:11px;line-height:16px}.create-search{display:flex;align-items:stretch;gap:8px}.create-search-field{position:relative;flex:1;display:flex;align-items:center}.create-search-field svg{position:absolute;left:12px;color:var(--fg-subtle);pointer-events:none}.create-search-field input{flex:1;padding-left:36px}.create-repo-actions{display:flex;justify-content:space-between;margin:14px 0;color:var(--fg-subtle);font-size:12px}.create-empty{text-align:center;padding:24px 8px;color:var(--fg-subtle)}.create-empty h3{color:var(--fg);font-size:16px}.create-empty p,.create-demo p{font-size:13px;line-height:1.5}.create-review{display:grid;gap:16px}.create-source{display:flex;gap:10px;align-items:center;color:var(--fg-subtle)}.create-review label{display:grid;gap:8px;font-size:13px}.create-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.create-review textarea{min-height:70px;resize:vertical}.create-demo{background:#ffa41b10;border:1px solid #ffa41b40;border-radius:8px;padding:12px;font-size:13px}.create-demo p{margin-bottom:0;color:var(--fg-subtle)}.create-notice{font-size:13px;color:var(--primary-text);margin-bottom:0;line-height:1.5}.create-dialog select option{background:var(--bg-2)}
.create-checks{display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;border:0;font-size:13px}.create-checks legend{padding:0;margin-bottom:8px}.create-review .create-check,.create-review .create-checks label{display:flex;align-items:center;gap:8px;cursor:pointer}.create-dialog .create-checks input,.create-dialog .create-check input{width:auto;padding:0;margin:0}.create-repo-actions{align-items:center;gap:12px}.create-repo-actions select{width:auto;padding:6px 8px}.create-options button svg:last-child:not(:first-child){margin-left:auto;opacity:.6}
.create-review select{height:48px}
.create-notice{margin-top:12px}
.create-review .create-checks label.create-unsupported{opacity:.6;cursor:not-allowed}
.create-refresh{display:grid;place-items:center;width:28px;height:28px;border-radius:8px}.create-refresh:hover:not(:disabled){background:rgba(var(--wash),.06)}.create-refresh:hover:not(:disabled){color:var(--fg)}.create-refresh:disabled{cursor:default}.create-refresh.spinning svg{animation:create-spin .8s linear infinite}@keyframes create-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.create-refresh.spinning svg{animation:none}}

/* 검토 단계 하단: 레포 구성 확인(기본) + 확인 없이 배포 */
.create-hint{margin:0;font-size:12px;line-height:1.5;color:var(--fg-subtle)}
.create-submit{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.create-submit .btn-primary{min-width:140px}
.create-back:disabled{opacity:.5;cursor:not-allowed}
.create-source-branch{margin-left:auto;font-size:12px;color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.create-dialog.wide{width:min(980px,calc(100vw - 32px))}

/* 레포 구성 확인(분석 게이트) */
.gate-pending{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2)}
.gate-pending h3{margin:0 0 4px;font-size:15px}
.gate-pending p{margin:0;font-size:13px;color:var(--fg-subtle)}
.gate-spinner{flex:none;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--border-strong);border-top-color:var(--primary);animation:gate-spin .9s linear infinite}
@keyframes gate-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gate-spinner{animation-duration:2.4s}}
.gate-result{display:grid;gap:14px}
.gate-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:10px;border:1px solid var(--border)}
.gate-banner svg{flex:none;margin-top:2px}
.gate-banner h3{margin:0 0 4px;font-size:15px;line-height:1.4}
.gate-banner p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.gate-banner.skip{background:var(--green-bg);border-color:var(--green-bg-border)}
.gate-banner.skip svg,.gate-banner.skip h3{color:var(--green-text)}
.gate-banner.analyze{background:var(--primary-bg);border-color:var(--primary-border)}
.gate-banner.analyze svg,.gate-banner.analyze h3{color:var(--primary-text)}
.gate-banner.failed{background:var(--red-bg);border-color:var(--red-line)}
.gate-banner.failed svg,.gate-banner.failed h3{color:var(--red-text)}
.gate-detail{margin-top:6px!important;font-size:12px!important;color:var(--fg-subtle)!important;word-break:break-word}
.gate-muted{margin:0;font-size:12px;color:var(--fg-subtle)}
.gate-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;font-size:13px}
.gate-facts div{display:flex;gap:8px}
.gate-facts dt{color:var(--fg-subtle)}
.gate-facts dd{margin:0}
.gate-reasons{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;line-height:1.5}
.gate-reasons li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.gate-code{display:inline-block;padding:0 7px;border-radius:999px;background:var(--bg-4);color:var(--fg-muted);font-family:var(--font-mono);font-size:11px;line-height:18px}
.gate-paths{font-size:12px;color:var(--fg-faint);word-break:break-all}
.gate-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.gate-actions .btn{height:auto;min-height:34px;white-space:normal}

/* 배포 단위 표: 넓으면 한 줄짜리 행, 좁으면 칸이 2열로 접힌다 */
.gate-units{display:grid;gap:8px}
.gate-unit-head{display:none}
.gate-unit{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"check name name" ". root builder" ". dockerfile port" ". meta meta";gap:8px 10px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.gate-unit.off{background:var(--bg-2)}
.gate-unit.off .gate-cell{opacity:.55}
.gate-unit-check{grid-area:check;align-self:center;padding-top:18px}
.create-dialog .gate-unit-check input{width:16px;height:16px;margin:0;padding:0;accent-color:var(--primary)}
.gate-cell{display:grid;gap:4px;min-width:0;font-size:12px}
.gate-cell-name{grid-area:name}
.gate-cell-root{grid-area:root}
.gate-cell-builder{grid-area:builder}
.gate-cell-dockerfile{grid-area:dockerfile}
.gate-cell-port{grid-area:port}
.gate-cell-label{color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.create-dialog .gate-unit input,.create-dialog .gate-unit select{padding:7px 9px;font-size:13px;height:34px;min-width:0}
.create-dialog .gate-unit input[aria-invalid=true]{border-color:var(--red)}
.gate-unit-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12px;color:var(--fg-muted)}
.gate-meta-label{color:var(--fg-faint)}
.gate-role{padding:0 8px;border-radius:999px;background:var(--bg-4);font-size:11px;line-height:18px;color:var(--fg-muted)}
.gate-role.role-web{background:var(--primary-bg);color:var(--primary-text)}
.gate-role.role-api{background:var(--green-bg);color:var(--green-text)}
@media (min-width:820px){
  .gate-unit-head,.gate-unit{grid-template-columns:20px minmax(130px,1.3fr) minmax(110px,1fr) 120px minmax(110px,1fr) 84px}
  .gate-unit-head{display:grid;gap:10px;padding:0 13px;font-size:12px;color:var(--fg-subtle)}
  .gate-unit{grid-template-areas:"check name root builder dockerfile port" ". meta meta meta meta meta";align-items:center}
  .gate-unit-check{padding-top:0}
  .gate-unit .gate-cell-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.gate-questions h4{margin:0 0 6px;font-size:13px}
.gate-questions ul{margin:0;padding-left:16px;display:grid;gap:4px;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.gate-questions .gate-code{margin-right:6px}

/* 데이터베이스 추가 */
.create-engines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0;font-size:13px}
.create-engines legend{padding:0;margin-bottom:8px}
.create-review .create-engines label{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--bg)}
.create-review .create-engines label.on{border-color:var(--primary);background:var(--primary-bg)}
.create-dialog .create-engines input{width:auto;padding:0;margin:0;accent-color:var(--primary)}
.auth-shell{min-height:100vh;background:var(--bg);color:var(--fg);display:flex;flex-direction:column}.auth-header{height:80px;display:flex;align-items:center;gap:12px;padding:0 44px;border-bottom:1px solid var(--border)}.auth-header>span{font-size:19px;font-weight:600}.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:65px 24px}.auth-card{width:360px;text-align:center}.auth-card>svg{display:block;margin:0 auto 20px}.auth-card h1{font-size:27px;letter-spacing:-.8px;line-height:1.3;margin:0 0 10px}.auth-card>p{font-size:14px;color:var(--fg-subtle);margin:0 0 32px}.auth-provider{width:100%;height:48px;border:1px solid var(--border-strong);border-radius:7px;background:var(--bg-2);color:var(--fg);display:flex;align-items:center;gap:13px;padding:0 16px;font-size:14px;margin-top:12px;cursor:pointer}.auth-provider:hover{background:var(--bg-3);border-color:var(--fg-dim)}.auth-provider>svg:last-child{margin-left:auto}.auth-provider:disabled{opacity:.6;cursor:default}.auth-card>.auth-error{font-size:13px;color:var(--red-text);margin:-12px 0 20px}@media(max-width:600px){.auth-header{padding:0 22px;height:65px}.auth-main{padding:40px 22px}.auth-card{width:100%;max-width:360px}}
.auth-header .auth-lang{margin-left:auto}
/* Landing page ------------------------------------------------------ */
.landing {
  height: 100vh;
  overflow-y: auto; /* body is overflow: hidden for the app shell */
  background: var(--bg);
  color: var(--fg);

  /* 터미널은 두 테마 모두 어두운 면으로 둔다 */
  --term-bg: #191f28;
  --term-bar: #222a35;
  --term-fg: #e5e8eb;
  --term-dim: #8b95a1;
  --term-ok: #4cc38a;
}

:root[data-theme='dark'] .landing {
  --term-bg: #0d0c0a;
  --term-bar: #1a1814;
}

/* 한국어는 어절 단위로 줄을 바꾼다("AI가"가 "AI / 가"로 갈라지지 않게) */
:root:lang(ko) .landing {
  word-break: keep-all;
}

.landing .mono {
  font-family: var(--font-mono);
}

.landing-code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-2);
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  padding: 0 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  margin-left: 24px;
}

.landing-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.landing-nav a:hover {
  background: var(--bg-3);
  color: var(--fg);
}

.landing-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-header-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.landing-header-link:hover {
  color: var(--fg);
}

/* hero */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 44px 88px;
}

.landing-logo-float {
  display: inline-block;
  margin-bottom: 24px;
  animation: landing-pop 600ms cubic-bezier(0.16, 1, 0.3, 1) both, landing-float 4s ease-in-out 600ms infinite;
}

.landing-hero h1 {
  min-height: 2.5em; /* two lines; translations should fit in two */
  text-wrap: balance;
  margin: 0 0 16px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.4px;
}

.landing-hero h1 em {
  font-style: normal;
  color: var(--primary-strong);
}

.landing-hero-copy > p {
  margin: 0 0 32px;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-subtle);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.landing-actions.is-center {
  justify-content: center;
}

.landing-cta,
.landing-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.landing-cta {
  background: var(--primary);
  color: var(--on-primary);
}

.landing-cta:hover {
  background: var(--primary-hover);
}

.landing-cta-ghost {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg-muted);
}

.landing-cta-ghost:hover {
  background: var(--bg-3);
  color: var(--fg);
}

.landing-cta:active,
.landing-cta-ghost:active {
  transform: scale(0.96);
}

.landing-cta:disabled {
  opacity: 0.4;
  cursor: default;
}

/* deploy mock */
.deploy-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.deploy-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deploy-name {
  font-size: 16px;
  font-weight: 600;
}

.deploy-status {
  display: grid;
}

.deploy-status .pill {
  grid-area: 1 / 1;
  justify-self: end;
}

.landing .pill {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pill-building {
  color: var(--primary-text);
  background: var(--primary-bg);
  animation: landing-fade-out 300ms ease 3.2s both;
}

.pill-active {
  color: var(--green-text);
  background: var(--green-bg);
}

.deploy-status .pill-active {
  animation: landing-fade-in 300ms ease 3.2s both;
}

.pill-failed {
  color: var(--red-text);
  background: var(--red-bg);
}

.deploy-meta {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--fg-subtle);
}

.deploy-progress {
  height: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--bg-4);
}

.deploy-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: left;
  animation: landing-progress 2.6s cubic-bezier(0.4, 0, 0.2, 1) 600ms both;
}

.deploy-log {
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  border-radius: 12px;
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 24px;
  color: var(--fg-muted);
}

.deploy-log li {
  animation: landing-line 300ms ease both;
}

.deploy-log li.ok {
  color: var(--green-text);
}

/* sections ---------------------------------------------------------- */
.landing-band {
  padding: 88px 44px;
  scroll-margin-top: 72px; /* sticky header */
}

/* full-width grey band so it reads as its own block */
.landing-band.is-grey {
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}

.landing-inner {
  max-width: 992px;
  margin-inline: auto;
}

.landing-section-title {
  margin: 0 0 24px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--primary-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-text);
}

.landing-h2 {
  margin: 0 0 14px;
  text-wrap: balance;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1px;
}

.landing-lede {
  margin: 0;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-subtle);
}

.landing-head {
  margin-bottom: 40px;
}

.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.landing-split.is-reverse > :first-child {
  order: 2;
}

.landing-points {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.landing-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
}

.landing-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 9999px;
  background: var(--green-bg);
  color: var(--green-text);
}

.landing-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 28px;
}

.landing-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-text);
}

.landing-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-note {
  font-size: 13px;
  color: var(--fg-faint);
}

/* steps */
.landing-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 24px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 15px;
  font-weight: 700;
}

.step h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-subtle);
}

/* basics */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature {
  padding: 24px;
  border-radius: 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.feature:hover {
  transform: translateY(-4px);
  border-color: var(--primary-border);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--primary-bg);
  color: var(--primary-strong);
}

.feature h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-subtle);
}

/* AI diagnosis mock */
.lai-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.lai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lai-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-text);
}

.lai-deploy {
  margin: 14px 0 4px;
  font-size: 13px;
  color: var(--fg-faint);
}

.lai-summary {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

.lai-block {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
}

.lai-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.lai-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-subtle);
}

.lai-tag {
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--green-bg);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--green-text);
}

.lai-block p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
}

.lai-evidence {
  display: block;
  margin-top: 10px;
  padding: 7px 10px;
  border-left: 3px solid var(--red-bar);
  border-radius: 4px 8px 8px 4px;
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

.lai-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.lai-flow li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--bg-3);
  text-align: center;
  color: var(--fg-faint);
}

.lai-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: var(--bg-5);
  color: transparent;
}

.lai-flow-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lai-card.in .lai-flow li {
  animation: landing-step-done 400ms ease var(--d) forwards;
}

.lai-card.in .lai-flow .lai-dot {
  animation: landing-dot-done 400ms ease var(--d) forwards;
}

.lai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin-top: 14px;
  border-radius: 12px;
  background: var(--primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--on-primary);
}

/* terminal */
.term {
  overflow: hidden;
  border-radius: 20px;
  background: var(--term-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.term-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  background: var(--term-bar);
}

.term-dots {
  display: flex;
  gap: 7px;
}

.term-dots i {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
}

.term-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--term-dim);
  pointer-events: none;
}

.term-body {
  margin: 0;
  padding: 18px 20px 22px;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 26px;
  color: var(--term-fg);
}

.term-body li {
  opacity: 0;
  overflow-wrap: anywhere;
}

.term.in .term-body li {
  animation: landing-line 300ms ease var(--d) both;
}

.term-body .prompt {
  margin-right: 10px;
  color: var(--primary);
}

.term-body .ok {
  color: var(--term-ok);
}

.term-body .dim {
  color: var(--term-dim);
}

.term-body .info {
  color: var(--primary);
}

/* CLI commands */
.cmd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.cmd-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
}

.cmd-tile:hover {
  border-color: var(--primary-border);
}

.cmd-tile code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-text);
}

.cmd-tile span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-subtle);
}

/* ops bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.bento-card.span-4 {
  grid-column: span 4;
}

.bento-card.span-2 {
  grid-column: span 2;
}

.bento-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.bento-card > p {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-subtle);
}

.bento-card > :last-child {
  margin-top: auto;
}

.mini-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  font-size: 13.5px;
}

.mini-list li.is-target {
  border-color: var(--primary-border);
}

.mini-id {
  font-size: 12.5px;
  color: var(--fg-faint);
}

.mini-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-2);
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 9px;
  background: var(--primary-bg);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-text);
  white-space: nowrap;
}

.opt-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opt-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.opt-list li.on {
  border-color: var(--primary);
  background: var(--primary-bg);
  font-weight: 600;
  color: var(--fg);
}

.opt-radio {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-radius: 9999px;
}

.opt-list li.on .opt-radio {
  border: 5px solid var(--primary);
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.target-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--fg-muted);
}

.target-tile b {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.target-tile.on {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary-text);
}

.target-tile.on b {
  color: var(--fg);
}

.env-box {
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
}

.env-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 0;
}

.env-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--bg-3);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}

.env-code {
  margin: 0;
  padding: 12px 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 24px;
  overflow-x: auto;
  color: var(--fg-2);
}

.env-code .k {
  color: var(--fg);
  font-weight: 600;
}

.env-code .eq {
  color: var(--fg-faint);
}

.env-code .v {
  color: var(--green-text);
}

/* bottom CTA */
.landing-bottom {
  width: calc(100% - 88px); /* line up with the 44px section gutters */
  max-width: 992px;
  margin: 88px auto 96px;
  padding: 56px 24px;
  border-radius: 24px;
  background: var(--primary-bg);
  text-align: center;
}

.landing-bottom h2 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.landing-bottom p {
  margin: 0 0 28px;
  font-size: 16px;
  color: var(--fg-subtle);
}

.landing-footer {
  padding: 24px 44px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg-faint);
}

/* motion */
.reveal {
  animation: landing-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* scroll-triggered: 'backwards' so the element's own transform (e.g. hover lift) applies after */
.scroll-reveal {
  opacity: 0;
}

.scroll-reveal.in {
  opacity: 1;
  animation: landing-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes landing-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

@keyframes landing-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes landing-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes landing-line {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes landing-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes landing-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes landing-step-done {
  to { background: var(--green-bg); color: var(--green-text); }
}

@keyframes landing-dot-done {
  to { background: var(--green); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
  }

  .term-body li {
    opacity: 1;
  }

  .landing *,
  .landing *::before {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

@media (max-width: 860px) {
  .landing-nav {
    display: none;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 20px 56px;
  }

  .landing-hero h1 {
    font-size: 34px;
  }

  .landing-band {
    padding: 56px 20px;
  }

  .landing-h2 {
    font-size: 28px;
  }

  .landing-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .landing-split.is-reverse > :first-child {
    order: 0;
  }

  .features-grid,
  .landing-steps ol {
    grid-template-columns: 1fr;
  }

  .cmd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
  }

  .bento-card.span-4,
  .bento-card.span-2 {
    grid-column: 1 / -1;
  }

  .landing-bottom {
    width: calc(100% - 40px);
    margin: 56px auto 64px;
  }

  .landing-header,
  .landing-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 560px) {
  .cmd-grid {
    grid-template-columns: 1fr;
  }

  .bento-card {
    padding: 22px;
  }
}