* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', Consolas, monospace;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 14px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
  }
  .header h1 { font-size: 16px; color: #58a6ff; }
  .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .account-info { display: flex; gap: 20px; font-size: 13px; }
  .account-info .label { color: #8b949e; }
  .account-info .value { color: #c9d1d9; font-weight: bold; }
  .today-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    white-space: nowrap;
  }
  .today-summary .today-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .today-summary .today-item .label {
    color: #8b949e;
    font-weight: 500;
  }
  .today-summary .today-item .value {
    font-size: 12px;
    font-weight: 700;
  }
  .theme-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8b949e;
  }
  .theme-select {
    padding: 3px 8px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
  }
  .theme-select:focus {
    outline: none;
    border-color: #58a6ff;
  }

  .status-bar {
    display: flex;
    justify-content: space-between;
    padding: 6px 20px;
    background: #0d1117;
    border-bottom: 1px solid #21262d;
    font-size: 12px;
    color: #8b949e;
  }
  .status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }
  .status-dot.connected { background: #3fb950; }
  .status-dot.disconnected { background: #f85149; }

  /* Watchlist bar */
  .watchlist-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    flex-wrap: wrap;
    min-height: 34px;
  }
  .watchlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
  }
  .watchlist-btn:hover {
    border-color: #58a6ff;
    background: #1c2536;
  }
  .watchlist-btn.active {
    border-color: #58a6ff;
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    font-weight: 600;
  }
  .watchlist-remove-btn {
    margin-left: 2px;
    font-size: 14px;
    line-height: 1;
    color: #484f58;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
  }
  .watchlist-remove-btn:hover {
    color: #f85149;
  }
  .watchlist-add-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
  }
  .watchlist-add-input {
    width: 80px;
    padding: 3px 6px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 12px;
    font-family: inherit;
  }
  .watchlist-add-input::placeholder {
    color: #484f58;
  }
  .watchlist-add-input:focus {
    outline: none;
    border-color: #58a6ff;
  }
  .watchlist-add-group {
    position: relative;
  }
  .watchlist-ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
    margin-top: 2px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .watchlist-ac-dropdown.visible {
    display: block;
  }
  .watchlist-ac-item {
    padding: 5px 10px;
    font-size: 12px;
    color: #c9d1d9;
    cursor: pointer;
    white-space: nowrap;
  }
  .watchlist-ac-item:hover,
  .watchlist-ac-item.selected {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
  }
  .watchlist-ac-item b {
    color: #58a6ff;
    font-weight: 700;
  }
  .watchlist-ac-empty {
    padding: 5px 10px;
    font-size: 12px;
    color: #8b949e;
    font-style: italic;
    cursor: default;
  }

  .container { padding: 16px 20px; }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }
  th {
    text-align: left;
    padding: 8px 12px;
    background: #161b22;
    border-bottom: 2px solid #30363d;
    color: #8b949e;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  th.right, td.right { text-align: right; }
  td {
    padding: 8px 12px;
    border-bottom: 1px solid #21262d;
  }
  td.today-cell {
    text-align: right;
    vertical-align: middle;
  }
  .close-side-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .today-cell-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 96px;
    white-space: nowrap;
    font-size: 11px;
  }
  .today-cell-line {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    line-height: 1.2;
  }
  .today-cell-line .label {
    color: #8b949e;
    font-weight: 600;
    min-width: 24px;
    text-align: right;
  }
  .today-cell-line .value {
    font-weight: 700;
  }
  .today-remove-wrap {
    display: inline-flex;
    width: 100%;
    justify-content: flex-end;
  }
  .today-remove-wrap .btn-remove {
    margin-left: 0;
  }
  tr.symbol-row {
    background: var(--row-bg, transparent);
    transition: background-color 0.15s ease;
  }
  tr.symbol-row:hover { background: var(--row-hover-bg, #161b22); }
  tr.symbol-row td:first-child {
    padding-left: 10px;
  }

  .pnl-positive { color: #3fb950; }
  .pnl-negative { color: #f85149; }
  .pnl-zero { color: #8b949e; }

  .type-buy { color: #58a6ff; }
  .type-sell { color: #f0883e; }

  .summary-bar {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 12px 20px;
    background: #161b22;
    border-top: 1px solid #30363d;
    font-size: 14px;
  }
  .summary-bar .label { color: #8b949e; margin-right: 8px; }
  .summary-bar .value { font-weight: bold; }
  .summary-today-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .summary-today-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .summary-today-item .label {
    margin-right: 0;
  }

  .tab-bar {
    display: flex;
    gap: 0;
    padding: 0 20px;
    background: #0d1117;
    border-bottom: 1px solid #30363d;
    overflow-x: auto;
  }
  .tab-bar:empty { display: none; }
  .tab {
    padding: 8px 20px;
    font-size: 13px;
    color: #8b949e;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    user-select: none;
  }
  .tab:hover { color: #c9d1d9; }
  .tab.active {
    color: #58a6ff;
    border-bottom-color: #58a6ff;
    font-weight: 600;
  }
  .tab .tab-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3fb950;
    margin-right: 6px;
    vertical-align: middle;
  }

  .no-data {
    text-align: center;
    padding: 60px 20px;
    color: #484f58;
    font-size: 16px;
  }
  .btn-action {
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .btn-action:hover { opacity: 0.8; }
  .btn-action:active { opacity: 0.6; }
  .btn-action:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-tp {
    background: #1a3a1a;
    color: #3fb950;
    border-color: #238636;
  }
  .btn-close-profit {
    background: #1a3a1a;
    color: #3fb950;
    border-color: #238636;
  }
  .btn-close-loss {
    background: #3a1a1a;
    color: #f85149;
    border-color: #da3633;
  }

  /* Toast notifications */
  .toast-container {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
  }
  .toast {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    animation: toastIn 0.25s ease-out, toastOut 0.4s ease-in forwards;
    animation-delay: 0s, 4s;
    word-break: break-word;
  }
  .toast.error {
    background: #3a1a1a;
    color: #f85149;
    border-color: #da3633;
  }
  .toast.success {
    background: #1a3a1a;
    color: #3fb950;
    border-color: #238636;
  }
  .toast.info {
    background: #1a2a3a;
    color: #58a6ff;
    border-color: #1f6feb;
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes toastOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  /* Buy/Sell buttons */
  .trade-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
  }
  .lot-input {
    width: 52px;
    padding: 2px 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 11px;
    text-align: center;
    font-family: inherit;
  }
  .lot-input:focus { outline: none; border-color: #58a6ff; }
  .lot-input::-webkit-outer-spin-button,
  .lot-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .lot-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .btn-buy {
    background: #0c2d6b;
    color: #58a6ff;
    border-color: #1f6feb;
  }
  .btn-sell {
    background: #5a1a0a;
    color: #f0883e;
    border-color: #d17e2b;
  }
  .btn-action:disabled,
  .btn-buy:disabled,
  .btn-sell:disabled,
  .btn-tp:disabled,
  .btn-close-profit:disabled,
  .btn-close-loss:disabled,
  .btn-remove:disabled {
    background: #1b2129 !important;
    color: #6e7681 !important;
    border-color: #3a434e !important;
    opacity: 1;
    cursor: not-allowed;
  }
  .btn-action:disabled:hover,
  .btn-action:disabled:active {
    opacity: 1;
  }
  tr.symbol-row.no-pos td:first-child {
    padding-left: 10px;
  }
  tr.symbol-row.no-pos .trade-group {
    width: 100%;
  }
  .close-cell-group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .close-cell-group .btn-remove {
    margin-left: auto;
  }
  .btn-remove {
    background: #1a1a1a;
    color: #6e7681;
    border-color: #30363d;
    font-size: 12px;
    padding: 3px 8px;
    margin-left: auto;
  }
  .btn-remove:hover { color: #f85149; border-color: #da3633; }

  /* Chart panel */
  .chart-panel {
    display: none;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid #30363d;
    background: #0d1117;
  }
  .chart-panel.chart-panel-maximized {
    position: fixed;
    inset: 0;
    z-index: 2500;
    width: 100vw;
    height: 100dvh;
    display: flex !important;
    flex-direction: column;
    border: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }
  body.chart-maximized {
    overflow: hidden;
  }
  tr.chart-host-row {
    width: 100%;
  }
  tr.chart-host-row td.chart-host-cell {
    width: 100%;
    padding: 0;
    border-bottom: 0;
  }
  .chart-top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .chart-top-bar::-webkit-scrollbar { display: none; }
  .chart-symbol-name {
    font-size: 12px;
    font-weight: 600;
    color: #c9d1d9;
  }
  .chart-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .chart-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    flex-wrap: nowrap;
    flex: 0 0 auto;
  }
  .chart-today-summary {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid #30363d;
    border-radius: 3px;
    background: #0d1117;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
  }
  .chart-today-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .chart-today-item .label {
    color: #8b949e;
    font-weight: 500;
  }
  .chart-today-item .value {
    font-weight: 700;
  }
  .btn-chart-maximize {
    min-height: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    padding: 2px 6px;
    min-width: 28px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
  }
  .btn-chart-maximize:hover {
    background: #161b22;
    border-color: #58a6ff;
    color: #58a6ff;
  }
  .btn-chart-more {
    min-height: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 12px;
    min-width: 48px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
  }
  .btn-chart-more:hover {
    background: #161b22;
    border-color: #58a6ff;
    color: #58a6ff;
  }
  .btn-chart-more:disabled {
    opacity: 0.5;
    background: #0d1117;
    border-color: #30363d;
    color: #8b949e;
    cursor: default;
  }
  .chart-query-status {
    width: 100%;
    font-size: 11px;
    color: #8b949e;
  }
  .chart-query-status.error { color: #f85149; }
  .chart-query-status.success { color: #3fb950; }
  .tf-select {
    padding: 2px 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
  }
  .tf-select:focus {
    outline: none;
    border-color: #58a6ff;
  }
  .ktr-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #0d1117;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .ktr-controls .btn-action {
    min-height: 24px;
    padding: 3px 8px;
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
  }
  .ktr-controls .btn-ktr-set {
    min-width: 56px;
    font-weight: 600;
  }
  .ktr-mode-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
  }
  .ktr-mode-btn {
    min-height: 24px;
    min-width: 44px;
    padding: 3px 10px;
    background: #0d1117;
    border-color: #30363d;
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  .ktr-mode-btn.is-active {
    background: rgba(242, 193, 15, 0.16);
    border-color: #f2c10f;
    color: #f2c10f;
  }
  .ktr-mode-btn:focus-visible {
    outline: 2px solid #58a6ff;
    outline-offset: 1px;
  }
  .ktr-controls .btn-action:disabled {
    background: #1b2129 !important;
    color: #6e7681 !important;
    border-color: #3a434e !important;
  }
  body.ktr-modal-open {
    overflow: hidden;
  }
  .ktr-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 8, 16, 0.72);
    backdrop-filter: blur(2px);
  }
  .ktr-modal-backdrop.is-open {
    display: flex;
  }
  .ktr-modal {
    position: relative;
    width: min(1240px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid #32465f;
    border-radius: 14px;
    background: linear-gradient(150deg, #151f30 0%, #111929 48%, #182336 100%);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5);
  }
  .ktr-modal-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(560px, 1fr);
    gap: 18px;
    padding: 18px;
  }
  .ktr-panel {
    border: 1px solid #334760;
    border-radius: 12px;
    background: rgba(20, 31, 48, 0.86);
    padding: 18px;
  }
  .ktr-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #f4f7fb;
  }
  .ktr-title-mark,
  .ktr-title-dot {
    color: #f2c21b;
    font-size: 14px;
    transform: translateY(-1px);
  }
  .ktr-panel-subtitle {
    margin: 8px 0 0;
    color: #96a7bf;
    font-size: 15px;
    font-weight: 600;
  }
  .ktr-field-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 14px;
  }
  .ktr-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ktr-field-label {
    color: #eef3fa;
    font-size: 13px;
    font-weight: 700;
  }
  .ktr-field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #4b5c76;
    border-radius: 11px;
    background: #3a4559;
    color: #f5f8fe;
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
  }
  .ktr-field input:focus {
    outline: none;
    border-color: #62abff;
    box-shadow: 0 0 0 2px rgba(98, 171, 255, 0.18);
  }
  .ktr-field input[readonly] {
    cursor: default;
    opacity: 0.92;
  }
  .ktr-field input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .ktr-field input::-webkit-outer-spin-button,
  .ktr-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ktr-group-label {
    margin-top: 22px;
    color: #eef3fa;
    font-size: 13px;
    font-weight: 700;
  }
  .ktr-symbol-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 8px;
  }
  .ktr-symbol-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    border-radius: 12px;
    background: #3a4559;
    border: 1px solid #4c5e79;
    color: #e6edf7;
    font-weight: 700;
  }
  .ktr-symbol-emoji {
    font-size: 16px;
    line-height: 1;
  }
  .ktr-symbol-text {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
  }
  .ktr-symbol-btn.active {
    background: #f2c10f;
    border-color: #f2c10f;
    color: #141d2c;
  }
  .ktr-symbol-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
  }
  .ktr-result-columns {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 16px;
  }
  .ktr-result-col-title {
    color: #f5f8fe;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 8px;
  }
  .ktr-result-list {
    display: grid;
    gap: 10px;
  }
  .ktr-confirm-wrap {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
  }
  .ktr-confirm-btn {
    min-height: 38px;
    min-width: 96px;
    padding: 7px 18px;
    border-radius: 10px;
    background: #f2c10f;
    border-color: #f2c10f;
    color: #141d2c;
    font-size: 14px;
    font-weight: 800;
  }
  .ktr-confirm-btn:hover {
    background: #ffd84f;
    border-color: #ffd84f;
    color: #101722;
  }
  .ktr-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid;
  }
  .ktr-result-row-lot {
    border-color: #7e6e1d;
    background: rgba(61, 61, 42, 0.64);
  }
  .ktr-result-row-profit {
    border-color: #0d7454;
    background: rgba(10, 63, 49, 0.56);
  }
  .ktr-row-label {
    color: #f0f4fa;
    font-size: 17px;
    font-weight: 800;
  }
  .ktr-row-value {
    font-size: 21px;
    font-weight: 900;
  }
  .ktr-result-row-lot .ktr-row-value {
    color: #f2c10f;
  }
  .ktr-result-row-profit .ktr-row-value {
    color: #36dd8e;
  }
  .ktr-result-empty {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #4a5b75;
    color: #90a2bc;
    font-size: 13px;
    font-weight: 600;
  }
  .chart-stage {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .chart-container {
    height: 400px;
    width: 100%;
    position: relative;
  }
  .chart-panel.chart-panel-maximized .chart-container {
    height: auto;
    flex: 1;
    min-height: 0;
  }
  .chart-panel.chart-panel-maximized .chart-stage {
    flex: 1;
    min-height: 0;
  }
  /* Per-slot 하단 지표 overlay — 슬롯의 chart container 위에 absolute 로 얹어
     메인 캔들의 하단 영역을 가린다. z-index 5 로 캔들/축 위에, 드로잉 라벨
     (z-index 4 이하) 보다 위.
     overlay 는 슬롯 전체 폭(right: 0). indicator 자체 우측 가격축이 메인 차트
     가격축과 같은 x 영역에 겹쳐 보이며 (overlay 가 더 앞이라 indicator 라벨이
     보임), `setRightAxisWidth(--chart-right-axis-width)` 로 폭을 메인과 강제
     일치시켜 plot area 가 정렬된다. */
  .slot-bottom-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    min-height: 120px;
    max-height: 240px;
    z-index: 5;
    background: #0d1117;
    border-top: 1px solid rgba(120, 123, 134, 0.25);
    pointer-events: auto;
  }
  .slot-bottom-indicator[data-show="0"] {
    display: none;
  }
  /* Floating draggable trade panel — FxTester replay-controls 와 동일 패턴.
     멀티차트 모드에서 사용자가 이동시키면서 포지션 진입 가능. */
  .floating-trade-panel {
    position: fixed;
    z-index: 1100;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: min(720px, calc(100vw - 24px));
    padding: 8px 12px 10px;
    border: 1px solid rgba(88, 166, 255, 0.35);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.94) 0%, rgba(14, 17, 23, 0.94) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(88, 166, 255, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .floating-trade-panel.is-hidden {
    display: none;
  }
  .floating-trade-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    padding: 2px 4px;
  }
  .floating-trade-panel.is-dragging .floating-trade-panel-header {
    cursor: grabbing;
  }
  .floating-trade-panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
  }
  .floating-trade-panel-symbol {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: #58a6ff;
    letter-spacing: 0.02em;
  }
  /* floating overlay 는 floating panel 안에 있어 chart-panel 의 매크로 (
     chart-panel:not(.chart-panel-maximized) .chart-trade-overlay { display:none })
     영향을 받지 않는다. is-visible class 로 토글되는 기본 .chart-trade-overlay
     스타일 그대로 사용. */
  /* FxTester replay-bottom 패턴: 좌측 (KTR · Sell · Lot · Buy) 만 노출.
     center (KTR controls) · right (Close/Take/CloseAll) 는 상단 #chartTradeOverlay
     에 그대로 두고 floating 에서는 숨김 — 사용자 요청 "buy, sell 버튼". */
  .floating-trade-overlay > .chart-trade-overlay-center,
  .floating-trade-overlay > .chart-trade-overlay-right,
  .floating-trade-overlay .ktr-mode-btn {
    display: none !important;
  }
  /* 사이즈를 좀 더 크게 — replay 패널처럼 손가락/마우스 hit area 충분히 확보. */
  .floating-trade-overlay .btn-action {
    min-height: 30px;
    padding: 4px 14px;
    font-weight: 600;
  }
  .floating-trade-overlay .chart-lot-input {
    height: 30px;
    width: 72px;
  }

  .chart-trade-overlay {
    display: none;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    position: relative;
    z-index: 20;
  }
  .chart-trade-overlay.is-visible {
    display: inline-flex;
  }
  .chart-panel:not(.chart-panel-maximized) .chart-trade-overlay {
    display: none;
  }
  .chart-trade-overlay-left,
  .chart-trade-overlay-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: max-content;
  }
  .chart-trade-overlay-left {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .chart-trade-overlay-center {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .chart-trade-overlay-center .chart-today-summary {
    margin-left: 0;
  }
  .chart-trade-overlay-right {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .chart-trade-overlay .btn-action {
    min-height: 24px;
    padding: 3px 10px;
    white-space: nowrap;
  }
  .chart-trade-overlay .chart-lot-input {
    height: 24px;
    width: 60px;
  }
  .drag-preview-money {
    position: absolute;
    left: 20%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 6;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(13, 17, 23, 0.9);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  .chart-footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 20px;
    background: #161b22;
    border-top: 1px solid #21262d;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  .draw-tool-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-right: auto;
  }
  .draw-tool-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .draw-tool-trigger {
    gap: 4px;
    padding-right: 6px !important;
  }
  .draw-tool-caret {
    font-size: 9px;
    line-height: 1;
    opacity: 0.8;
    margin-top: 1px;
  }
  .draw-tool-list {
    position: fixed;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #0d1117;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    z-index: 99999;
  }
  .draw-tool-menu.open .draw-tool-list {
    display: flex;
  }
  .draw-tool-list .btn-draw-tool {
    min-width: 34px;
  }
  .chart-toggle-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .btn-chart-toggle-trigger {
    min-width: 86px;
    gap: 6px;
    justify-content: center;
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 600;
  }
  .chart-toggle-list {
    position: fixed;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 170px;
    padding: 6px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background: #0d1117;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    z-index: 99999;
  }
  .chart-toggle-menu.open .chart-toggle-list {
    display: flex;
  }
  .chart-toggle-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #30363d;
    border-radius: 4px;
    background: #111722;
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .chart-toggle-item:hover {
    background: #182232;
    border-color: #3a4a63;
  }
  .chart-toggle-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #58a6ff;
    cursor: pointer;
  }
  .positions-toggle-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #30363d;
    border-radius: 3px;
    background: #0d1117;
    overflow: hidden;
  }
  .positions-toggle-group .chart-toggle-positions {
    border: none;
    border-radius: 0;
    border-right: 1px solid #30363d;
    background: transparent;
  }
  .chart-toggle-side {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 8px;
    color: #c9d1d9;
    font-size: 11px;
    font-weight: 600;
    user-select: none;
    cursor: pointer;
    border-right: 1px solid #30363d;
  }
  .chart-toggle-side:last-child {
    border-right: none;
  }
  .chart-toggle-buy span { color: #58a6ff; }
  .chart-toggle-sell span { color: #f85149; }
  .chart-toggle-side input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
  }
  .chart-toggle-buy input[type="checkbox"] { accent-color: #58a6ff; }
  .chart-toggle-sell input[type="checkbox"] { accent-color: #f85149; }
  .chart-toggle-side input[type="checkbox"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .chart-toggle-side:has(input:disabled) span {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .chart-toggle-positions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #30363d;
    border-radius: 3px;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    cursor: pointer;
  }
  .chart-toggle-positions input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #58a6ff;
    cursor: pointer;
  }
  .btn-draw-tool {
    min-width: 34px;
    min-height: 28px;
    padding: 4px 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
    line-height: 1;
  }
  .btn-draw-tool .draw-icon {
    width: 18px;
    height: 18px;
    display: block;
    overflow: visible;
  }
  .btn-draw-tool .draw-icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .btn-draw-tool .draw-icon-node {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .btn-draw-tool.active {
    background: #1c2a3a;
    border-color: #58a6ff;
    color: #58a6ff;
  }
  .btn-snap-toggle {
    margin-left: 6px;
    border-left: 1px solid #30363d;
    padding-left: 10px !important;
  }
  .btn-draw-delete {
    opacity: 0.3;
    transition: opacity 0.12s, color 0.12s;
    pointer-events: none;
  }
  .btn-draw-delete.has-selection {
    opacity: 1;
    pointer-events: auto;
    color: #ff7b72;
  }
  .btn-draw-delete.has-selection .draw-icon-stroke {
    stroke: #ff7b72;
  }
  .btn-draw-delete.has-selection:hover {
    background: rgba(255, 123, 114, 0.12);
  }
  .position-pnl-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9;
  }
  .pos-pnl-label {
    position: absolute;
    left: 4px;
    transform: translateY(-50%);
    font-size: 10px;
    font-family: 'Segoe UI', Consolas, monospace;
    font-weight: 600;
    background: rgba(13,17,23,0.82);
    padding: 1px 5px;
    border-radius: 3px;
    border-left: 2px solid;
    white-space: nowrap;
    line-height: 1.6;
  }
  .tp-sl-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
  }
  .tp-sl-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    font-size: 10px;
    font-family: 'Segoe UI', Consolas, monospace;
    font-weight: 600;
    background: rgba(13,17,23,0.88);
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid currentColor;
    white-space: nowrap;
    line-height: 1.6;
  }
  /* TP/SL 완료 라벨은 좌측 정렬 */
  .tp-sl-label.has-clear {
    left: 6px;
    transform: translateY(-50%);
  }
  .tp-sl-side {
    font-weight: 700;
    letter-spacing: 0.03em;
    opacity: 0.9;
  }
  .tp-sl-tag {
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  .tp-sl-clear-btn {
    pointer-events: auto;
    border: 1px solid #484f58;
    background: rgba(13,17,23,0.96);
    color: #8b949e;
    border-radius: 2px;
    padding: 0 4px;
    margin-left: 2px;
    font-size: 9px;
    line-height: 1.2;
    cursor: pointer;
  }
  .tp-sl-clear-btn:hover {
    color: #f0f6fc;
    border-color: #8b949e;
  }
  .tp-sl-label.be-label {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
    cursor: ns-resize;
    user-select: none;
  }
  .tp-sl-label.be-label.is-hover {
    opacity: 0.85;
    visibility: visible;
    pointer-events: auto;
  }
  .tp-sl-pnl {
    font-weight: 600;
  }
  .tp-sl-label.pending-order-label {
    left: 20%;
    border-style: dashed;
  }
  .tp-sl-lot {
    font-weight: 600;
    margin-left: 2px;
  }
  .ktr-line-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
  }
  .ktr-lot-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 10px;
    font-family: 'Segoe UI', Consolas, monospace;
    font-weight: 600;
    background: rgba(13,17,23,0.82);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid currentColor;
    white-space: nowrap;
    line-height: 1.6;
  }
  .session-overlay,
  .hgroup-overlay,
  .liqmap-overlay,
  .bb-arrow-overlay,
  .sma-arrow-overlay,
  [class^="wma-arrow-overlay"] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
  }
  .draw-underlay-fill {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .draw-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }
  .draw-overlay .shape {
    vector-effect: non-scaling-stroke;
  }
  .chart-footer .btn-action {
    padding: 5px 16px;
    font-size: 12px;
  }
  .btn-chart-vector {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
  }
  .btn-chart-vector:hover {
    background: #161b22;
    border-color: #58a6ff;
    color: #58a6ff;
  }
  .btn-chart-vector-icon {
    min-width: 28px;
    min-height: 20px;
    padding: 2px 5px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .btn-chart-vector-icon .print-icon {
    width: 14px;
    height: 14px;
    display: block;
    overflow: visible;
  }
  .btn-chart-vector-icon .print-icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .btn-chart-vector-icon .print-icon-dot {
    fill: currentColor;
  }
  tr.symbol-row.chart-selected {
    outline: 1px solid #58a6ff;
    outline-offset: -1px;
  }

  /* Drag-and-drop reordering */
  .drag-handle {
    cursor: grab;
    color: #484f58;
    font-size: 14px;
    margin-right: 6px;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
  }
  .drag-handle:hover { color: #8b949e; }
  .drag-handle:active { cursor: grabbing; }
  tr.symbol-row.dragging {
    opacity: 0.4;
  }
  tr.symbol-row.drag-over-top {
    box-shadow: 0 -2px 0 0 #58a6ff;
  }
  tr.symbol-row.drag-over-bottom {
    box-shadow: 0 2px 0 0 #58a6ff;
  }

  /* ── SelectBox 컴포넌트 ── */
  .select-box {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .select-box-trigger {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
  }
  .select-box-trigger:hover {
    border-color: #58a6ff;
  }
  .select-box-caret {
    font-size: 9px;
    color: #8b949e;
  }
  .select-box-list {
    display: none;
    position: fixed;
    z-index: 99999;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 2px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .select-box.open .select-box-list {
    display: flex;
  }
  .select-box-item {
    padding: 4px 12px;
    background: transparent;
    border: none;
    color: #c9d1d9;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
  }
  .select-box-item:hover,
  .select-box-item:focus {
    background: #21262d;
    outline: none;
  }
  .select-box-item.active {
    color: #58a6ff;
    font-weight: 600;
  }

  @media (max-width: 900px) {
    body { font-size: 13px; }
    .chart-container { height: 300px; }
    .chart-top-bar { padding: 8px 12px; gap: 8px; }
    .chart-title-group {
      width: auto;
      justify-content: flex-start;
      gap: 8px;
      flex: 0 0 auto;
    }
    .chart-controls {
      margin-left: 8px;
    }
    .ktr-controls {
      gap: 6px;
      padding: 2px 4px;
    }
    .ktr-controls .btn-action {
      min-height: 22px;
      padding: 2px 6px;
      font-size: 11px;
    }
    .ktr-controls .btn-ktr-set {
      min-width: 52px;
      padding: 2px 6px;
    }
    .ktr-mode-group {
      gap: 6px;
      margin-left: 0;
    }
    .ktr-mode-btn {
      min-height: 22px;
      min-width: 34px;
      padding: 2px 7px;
      font-size: 10px;
    }
    .ktr-modal-backdrop {
      padding: 10px;
    }
    .ktr-modal {
      width: 100%;
      max-height: 94vh;
    }
    .ktr-modal-grid {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 12px;
    }
    .ktr-panel {
      padding: 12px;
    }
    .ktr-panel-title {
      font-size: 20px;
    }
    .ktr-panel-subtitle {
      font-size: 12px;
    }
    .ktr-field-grid {
      margin-top: 12px;
      gap: 10px;
    }
    .ktr-field-label,
    .ktr-group-label {
      font-size: 12px;
    }
    .ktr-field input {
      font-size: 14px;
      padding: 8px 10px;
      border-radius: 9px;
    }
    .ktr-group-label {
      margin-top: 14px;
    }
    .ktr-symbol-grid {
      grid-template-columns: repeat(3, minmax(82px, 1fr));
      gap: 6px;
    }
    .ktr-symbol-btn {
      min-height: 54px;
      font-size: 12px;
      border-radius: 10px;
      padding: 4px 8px;
    }
    .ktr-symbol-emoji {
      font-size: 14px;
    }
    .ktr-symbol-text {
      font-size: 11px;
    }
    .ktr-result-columns {
      margin-top: 12px;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .ktr-result-col-title {
      font-size: 14px;
      margin-bottom: 6px;
    }
    .ktr-result-list {
      gap: 8px;
    }
    .ktr-confirm-wrap {
      margin-top: 10px;
    }
    .ktr-confirm-btn {
      min-height: 34px;
      min-width: 84px;
      font-size: 12px;
      padding: 6px 14px;
      border-radius: 9px;
    }
    .ktr-result-row {
      min-height: 44px;
      padding: 8px 10px;
      border-radius: 10px;
    }
    .ktr-row-label {
      font-size: 13px;
    }
    .ktr-row-value {
      font-size: 16px;
    }
    .chart-today-summary {
      flex: 0 0 auto;
      margin-left: auto;
    }
    .btn-chart-maximize {
      min-height: 32px;
    }
    .btn-chart-more {
      min-height: 32px;
    }
    .chart-footer {
      padding: 8px 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }
    .chart-trade-overlay {
      gap: 4px;
      padding: 4px 6px;
    }
    .chart-trade-overlay-right {
      justify-content: flex-end;
      margin-left: auto;
    }
    .chart-trade-overlay-right .btn-action {
      flex: 0 0 auto;
    }
    .chart-trade-overlay .chart-lot-input {
      width: 56px;
      flex: 0 0 auto;
    }
    .chart-trade-overlay .btn-action {
      min-height: 22px;
      padding: 2px 8px;
    }
    .chart-footer .btn-action { min-height: 34px; }
    .draw-tool-group {
      width: auto;
      margin-right: 0;
      flex: 0 0 auto;
      flex-wrap: nowrap;
    }
    .draw-tool-group > .btn-action,
    .draw-tool-group > .draw-tool-menu {
      flex: 0 0 auto;
    }
    .draw-tool-group > .draw-tool-menu > .btn-action {
      width: auto;
    }
    .draw-tool-group .draw-tool-list .btn-action {
      flex: 0 0 auto;
      width: auto;
    }
    .chart-toggle-menu, .positions-toggle-group {
      flex: 0 0 auto;
    }
    .header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
    }
    .header h1 { font-size: 15px; }
    .account-info {
      flex-wrap: wrap;
      gap: 6px 12px;
      font-size: 12px;
    }
    .header-right {
      width: 100%;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .today-summary {
      width: 100%;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .today-summary::-webkit-scrollbar {
      display: none;
    }
    .today-summary .today-item {
      flex: 0 0 auto;
    }
    .theme-control {
      margin-left: auto;
    }
    .tab-bar { padding: 0 12px; }
    .tab { padding: 7px 14px; font-size: 12px; }
    .status-bar {
      padding: 6px 12px;
      font-size: 11px;
    }
    .watchlist-bar { padding: 5px 12px; }
    .container { padding: 10px 12px; }
    .summary-bar {
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      font-size: 12px;
    }

    #mainTable thead { display: none; }
    #mainTable,
    #mainTable tbody {
      display: block;
      width: 100%;
    }
    /* 카드형 레이아웃: 5개 td를 2열 그리드에 배치
       td1: Symbol+Buy/Sell  (full width)
       td2: Close Side       (full width)
       td3: Take             (left col)
       td4: Close            (right col)
       td5: Today            (full width)
    */
    #mainTable tr.symbol-row {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
      row-gap: 0;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #2b3645;
      border-radius: 10px;
      background: var(--row-bg, #111924);
    }
    #mainTable tr.symbol-row td {
      display: block !important;
      border-bottom: 0;
      padding: 4px 0;
      grid-column: 1 / -1;
    }
    /* td1: Symbol */
    #mainTable tr.symbol-row td:nth-child(1) {
      padding-bottom: 6px;
      font-size: 15px;
      font-weight: 700;
    }
    .trade-group {
      margin-top: 6px;
    }
    .trade-group .btn-action {
      min-height: 30px;
      font-size: 12px;
      padding: 4px 10px;
    }
    .lot-input {
      width: 60px;
      padding: 4px 6px;
      font-size: 12px;
    }
    /* td2: Close Side — 가로 나란히 */
    #mainTable tr.symbol-row td:nth-child(2) {
      display: flex !important;
      gap: 6px;
      padding-top: 8px;
      grid-column: 1 / -1;
    }
    #mainTable tr.symbol-row td:nth-child(2) .close-side-cell {
      display: flex;
      width: 100%;
      gap: 6px;
      flex-wrap: nowrap;
    }
    #mainTable tr.symbol-row td:nth-child(2) .close-side-cell .btn-action {
      flex: 1;
      min-height: 34px;
      font-size: 12px;
    }
    /* td3: Take (left) */
    #mainTable tr.symbol-row td:nth-child(3) {
      grid-column: 1 !important;
      padding-top: 8px;
    }
    /* td4: Close (right) */
    #mainTable tr.symbol-row td:nth-child(4) {
      grid-column: 2 !important;
      padding-top: 8px;
    }
    #mainTable tr.symbol-row td:nth-child(3) .btn-action,
    #mainTable tr.symbol-row td:nth-child(4) .btn-action {
      width: 100%;
      min-height: 34px;
      font-size: 12px;
    }
    #mainTable tr.symbol-row td:nth-child(4) .close-cell-group {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    #mainTable tr.symbol-row td:nth-child(4) .close-cell-group button[data-cmd="closeall"] {
      flex: 1;
      width: auto;
      min-width: 0;
    }
    #mainTable tr.symbol-row td:nth-child(4) .close-cell-group .btn-remove {
      flex: 0 0 auto;
      width: auto;
      min-width: 34px;
      margin-left: 0;
    }
    #mainTable tr.symbol-row td:nth-child(5) {
      grid-column: 1 / -1 !important;
      padding-top: 8px;
    }
    #mainTable tr.symbol-row td:nth-child(5) .today-cell-stack {
      width: 100%;
      align-items: flex-end;
      font-size: 12px;
      gap: 3px;
    }
    /* no-pos row도 Take/Close/Close Side가 항상 보이도록 일반 카드 레이아웃 유지 */
    #mainTable tr.symbol-row.no-pos {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
      row-gap: 0;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #2b3645;
      border-radius: 10px;
      background: var(--row-bg, #111924);
    }
    #mainTable tr.symbol-row.no-pos td {
      display: block !important;
      border-bottom: 0;
      padding: 4px 0;
      grid-column: 1 / -1;
    }
    #mainTable tr.chart-host-row {
      display: block !important;
      width: 100%;
      margin: 0 0 10px;
    }
    #mainTable tr.chart-host-row td.chart-host-cell {
      display: block !important;
      width: 100%;
      padding: 0;
    }
  }

  /* ─── Multi-Chart ────────────────────────────────────────────────── */
  .split-select {
    padding: 2px 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
  }
  .split-select:focus {
    outline: none;
    border-color: #58a6ff;
  }
  .multi-chart-grid {
    flex: 1;
    min-height: 0;
    gap: 2px;
    z-index: 10;
  }
  .multi-chart-slot {
    display: flex;
    flex-direction: column;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 3px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    /* 기본 커서 default (화살표). 차트 캔버스는 LWC 가 crosshair, BE 라인 근처에선
       core-be-drag 가 ns-resize. cursor:pointer 였던 기존 동작은 슬롯 전체가 클릭
       가능하단 의미였으나 시각적 노이즈가 커서 제거 (FxTester 와 동일). */
  }
  .multi-chart-slot.focused {
    border-color: #58a6ff;
    border-width: 2px;
  }
  /* Convention: --chart-right-axis-width 는 ChartView 가 차트의 style-host
     (단일: #chartStage / 멀티: .multi-chart-slot-container) 에 실시간으로
     세팅한다. 오른쪽 가격축을 침범하면 안 되는 오버레이는 다음과 같이 opt-in:
         right: calc(var(--chart-right-axis-width, 0px) + 4px);
     좌표 기반(inset:0 + chart 좌표로 내부 배치) 오버레이는 이미 캔들 영역에
     머무르므로 대상이 아니다. */
  .multi-chart-slot-overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    right: calc(var(--chart-right-axis-width, 0px) + 4px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    padding: 0;
    pointer-events: none;
  }
  .multi-chart-slot-overlay > * {
    pointer-events: auto;
  }
  .multi-chart-slot-overlay > .candle-timer-progress {
    pointer-events: none;
  }
  .multi-chart-slot-select {
    padding: 1px 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    max-width: 120px;
  }
  .multi-chart-slot-select:focus {
    outline: none;
    border-color: #58a6ff;
  }
  .multi-chart-tf-label {
    font-size: 10px;
    font-weight: 600;
    color: #58a6ff;
    padding: 1px 6px;
    user-select: none;
    background: rgba(13, 17, 23, 0.75);
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .multi-chart-tf-label:hover {
    border-color: #58a6ff;
    background: rgba(13, 17, 23, 0.95);
  }
  .multi-chart-slot-container {
    flex: 1;
    min-height: 0;
    position: relative;
  }
  .multi-chart-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
  }
  .mc-label {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 600;
    background: rgba(13, 17, 23, 0.8);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid rgba(88, 166, 255, 0.3);
  }

  /* ── 차트 내부 심볼/TF 셀렉터 오버레이 ── */
  .chart-symbol-tf-overlay {
    position: absolute;
    top: 44px;
    left: 4px;
    /* --chart-right-axis-width 는 ChartView 가 #chartStage 에 세팅 (위 설명 참고) */
    right: calc(var(--chart-right-axis-width, 0px) + 4px);
    z-index: 21;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    padding: 0;
    pointer-events: none;
  }
  .chart-symbol-tf-overlay > * {
    pointer-events: auto;
  }
  .chart-symbol-tf-overlay > .candle-timer-progress {
    pointer-events: none;
  }
  select.chart-overlay-select {
    padding: 1px 4px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 3px;
    color: #c9d1d9;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
  }
  select.chart-overlay-select:focus {
    outline: none;
    border-color: #58a6ff;
  }
  .chart-overlay-select .select-box-trigger {
    padding: 1px 4px;
    font-size: 10px;
  }
  .chart-tf-label {
    font-size: 10px;
    font-weight: 600;
    color: #58a6ff;
    padding: 1px 6px;
    user-select: none;
    background: rgba(13, 17, 23, 0.75);
    border-radius: 3px;
  }

  /* ── 레이아웃 메뉴 (TradingView 스타일) ── */
  .layout-menu {
    position: relative;
  }
  .btn-layout-trigger {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: transparent;
    border: 1px solid transparent;
    color: #8b949e;
    cursor: pointer;
    border-radius: 4px;
  }
  .btn-layout-trigger:hover {
    color: #c9d1d9;
    background: #21262d;
  }
  .layout-menu-list {
    display: none;
    position: fixed;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 6px;
    gap: 4px;
    z-index: 1000;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .layout-menu.open .layout-menu-list {
    display: grid;
  }
  .layout-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #8b949e;
    cursor: pointer;
  }
  .layout-item:hover {
    background: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
  }
  .layout-item svg {
    pointer-events: none;
  }
  .layout-item.active {
    color: #58a6ff;
    border-color: #58a6ff;
  }

/* ── Radial TF Menu ── */
.radial-tf-menu {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.radial-tf-menu--open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}
.radial-tf-svg {
  overflow: visible;
}
.radial-tf-path {
  fill: #161b22;
  stroke: #30363d;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.1s;
}
.radial-tf-seg:hover .radial-tf-path {
  fill: #21262d;
}
.radial-tf-seg.active .radial-tf-path {
  fill: #1f6feb;
}
.radial-tf-label {
  fill: #c9d1d9;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}
.radial-tf-seg:hover .radial-tf-label {
  fill: #ffffff;
}
.radial-tf-seg.active .radial-tf-label {
  fill: #ffffff;
}
.radial-tf-seg.ref-m1:not(.active) .radial-tf-path { fill: rgba(0, 220, 220, 0.35); }
.radial-tf-seg.ref-m1:not(.active) .radial-tf-label { fill: #5ff0f0; }
.radial-tf-center-circle {
  fill: #0d1117;
  stroke: #30363d;
  stroke-width: 2;
  pointer-events: none;
}
.radial-tf-center-text {
  fill: #58a6ff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}

  /* MultiClose 버튼 — close cell 끝에 배치, 회색조로 close 버튼과 시각 구분 */
  .btn-multi-close {
    background: #21262d;
    color: #c9d1d9;
    border-color: #484f58;
    min-width: 36px;
  }

  /* MultiClose modal — 한 심볼의 buy/sell 포지션을 개별 ticket 단위로 close.
     ktr-modal 과 동일 backdrop/animate 패턴, 더 컴팩트한 사이즈. */
  .mc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 8, 16, 0.72);
    backdrop-filter: blur(2px);
  }
  .mc-modal-backdrop.is-open { display: flex; }
  .mc-modal {
    position: relative;
    width: min(420px, 96vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #32465f;
    border-radius: 12px;
    background: linear-gradient(150deg, #151f30 0%, #111929 48%, #182336 100%);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  .mc-modal-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #2a3a52;
  }
  .mc-symbol {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #f4f7fb;
    letter-spacing: 0.04em;
  }
  .mc-tabs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }
  .mc-tab {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #334760;
    border-radius: 6px;
    background: #1a2435;
    color: #96a7bf;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .mc-tab:hover {
    color: #c9d1d9;
    border-color: #58a6ff;
  }
  .mc-tab.is-active {
    background: #1f3050;
    color: #f4f7fb;
    border-color: #58a6ff;
  }
  .mc-modal-body {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 80px;
  }
  .mc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mc-list.hidden { display: none; }
  .mc-pos-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
  }
  .mc-pos-btn:hover { opacity: 0.85; }
  .mc-pos-btn:active { transform: scale(0.98); }
  .mc-pos-btn:disabled, .mc-pos-btn.is-pending {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .mc-pos-btn.is-closed {
    opacity: 0.35;
    background: #1a2435;
    color: #6e7681;
    border-color: #334760;
    cursor: not-allowed;
  }
  .mc-pos-btn .mc-pos-lot { letter-spacing: 0.02em; }
  .mc-pos-btn .mc-pos-pnl {
    margin-left: 16px;
    font-variant-numeric: tabular-nums;
  }
  .mc-empty {
    text-align: center;
    padding: 24px 8px;
    color: #6e7681;
    font-size: 13px;
  }
  .mc-modal-footer {
    padding: 12px 14px;
    border-top: 1px solid #2a3a52;
    text-align: center;
  }
  .mc-close-btn {
    padding: 7px 28px;
    border: 1px solid #484f58;
    border-radius: 6px;
    background: #21262d;
    color: #c9d1d9;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .mc-close-btn:hover {
    background: #2a3140;
    color: #f4f7fb;
  }