/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}


:root {

    --bg: #f5f5f7;

    --panel: #ffffff;

    --panel-soft: #fafafa;

    --text: #1d1d1f;

    --text-secondary: #6e6e73;

    --text-muted: #86868b;

    --border: #d2d2d7;

    --border-soft: #e5e5e7;

    --accent: #007aff;

    --accent-soft: #e8f2ff;

    --success: #34c759;

    --danger: #ff3b30;

    /* Template Action Buttons */
    --template-save-button-bg: #e8f7ee;
    --template-save-button-border: #9ed7b2;
    --template-save-button-text: #18794e;

    --template-edit-button-bg: #e8f2ff;
    --template-edit-button-border: #9fc5f8;
    --template-edit-button-text: #1d64c8;

    --shadow:
        0 2px 10px rgba(0, 0, 0, 0.045);

    --shadow-hover:
        0 4px 16px rgba(0, 0, 0, 0.075);

    /* 기본 글자 크기 */
    --font-size: 14px;


    /* =====================================================
       컬럼 색상
       카드 색상과 겹치지 않도록 별도 계열 사용
       ===================================================== */

    /* Start Column - 민트/청록 */
    --start-bg: #dcf6f1;
    --start-border: #a7e2d5;
    --start-accent: #0d9488;

    /* Group Column - 앰버/골드 */
    --group-bg: #fef2c8;
    --group-border: #fbdf8f;
    --group-accent: #b8790a;

    /* Next Column - 로즈/핑크 */
    --next-bg: #fce7f3;
    --next-border: #f5b8d5;
    --next-accent: #be185d;

    /* Template - Purple */
    --template-bg: #f1ecff;
    --template-border: #c4b5fd;
    --template-accent: #7c3aed;


    /* =====================================================
       카드 색상
       ===================================================== */

    --card-blue-bg: #d9e9ff;
    --card-blue-border: #aecdfa;
    --card-blue-accent: #2563eb;

    --card-green-bg: #d3f5e3;
    --card-green-border: #a3e6c1;
    --card-green-accent: #059669;

    --card-orange-bg: #ffe7cc;
    --card-orange-border: #fcc98c;
    --card-orange-accent: #ea580c;

    --card-purple-bg: #eae0ff;
    --card-purple-border: #d0bdf7;
    --card-purple-accent: #7c3aed;

    --card-red-bg: #ffe0e2;
    --card-red-border: #f7b9bd;
    --card-red-accent: #dc2626;

    --card-gray-bg: #e8e9ee;
    --card-gray-border: #cdcfd8;
    --card-gray-accent: #52525b;
}


body.dark {

    --bg: #0d0c13;

    --panel: #1b1926;

    --panel-soft: #272434;

    --text: #f5f5f7;

    --text-secondary: #bfbcca;

    --text-muted: #9f9bad;

    --border: #5c566e;

    --border-soft: #403b52;

    /* 포인트 보라색 */
    --accent: #b4a8ff;

    --accent-soft: #312a52;

    /* Template Action Buttons - Dark */
    --template-save-button-bg: #17382a;
    --template-save-button-border: #2f7a56;
    --template-save-button-text: #6fe0a8;

    --template-edit-button-bg: #183452;
    --template-edit-button-border: #3470b3;
    --template-edit-button-text: #7dbbff;
    

    --shadow:
        0 2px 10px rgba(0, 0, 0, 0.55);

    --shadow-hover:
        0 6px 22px rgba(0, 0, 0, 0.65);


    /* =====================================================
       Dark 컬럼
       ===================================================== */

    /* Start Column - Dark 민트 */
    --start-bg: #11342e;
    --start-border: #2a8a78;
    --start-accent: #2dd4bf;

    /* Group Column - Dark 앰버/골드 */
    --group-bg: #362a0b;
    --group-border: #9a7119;
    --group-accent: #fbbf24;

    /* Next Column - Dark 로즈/핑크 */
    --next-bg: #40182f;
    --next-border: #a8467a;
    --next-accent: #f472b6;

    /* Template - Dark Purple */
    --template-bg: #251c3a;
    --template-border: #6b4fa3;
    --template-accent: #b79cff;


    /* =====================================================
       Dark 카드
       ===================================================== */

    --card-blue-bg: #1a3358;
    --card-blue-border: #3b6fb8;
    --card-blue-accent: #6aaeff;

    --card-green-bg: #134330;
    --card-green-border: #2f9468;
    --card-green-accent: #3ddba0;

    --card-orange-bg: #4d2f0f;
    --card-orange-border: #b0691f;
    --card-orange-accent: #ff9a4d;

    --card-purple-bg: #35264f;
    --card-purple-border: #7a58b8;
    --card-purple-accent: #b99cff;

    --card-red-bg: #4d1c20;
    --card-red-border: #b04048;
    --card-red-accent: #ff7b7b;

    --card-gray-bg: #33323b;
    --card-gray-border: #6c6a78;
    --card-gray-accent: #c8c8d2;
}

body.dark .owned-template-edit-info,
body.dark .owned-template-visibility {
    background:
        rgba(255, 255, 255, 0.07);
}


body.dark .owned-template-edit-info:hover,
body.dark .owned-template-visibility:hover {
    background:
        var(--panel);
}


/* =========================================================
   실행 설정 패널 - DARK MODE 분리감
   ========================================================= */

   body.dark .execution-settings-panel {

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        /* 패널 바로 주변의 얇은 밝은 경계 */
        0 0 0 1px rgba(159, 149, 221, 0.06),

        /* 아래쪽 입체 그림자 */
        0 13px 35px rgba(41, 41, 41, 0.55),

        /* 아주 약한 보라색 외곽광 */
        0 0 18px rgba(169, 156, 255, 0.08);
}

/* =========================================================
   BODY
   ========================================================= */

html,
body {

    width: 100%;
    height: 100%;

    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans KR",
        sans-serif;

    font-size: var(--font-size);

    color: var(--text);

    background: var(--bg);
}


body {
    overflow: hidden;
}

body.dark {

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(91, 63, 160, 0.13) 0%,
            rgba(50, 35, 85, 0.06) 28%,
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #0d0c13 0%,
            #110f19 50%,
            #0c0c11 100%
        );
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}


button {
    cursor: pointer;
}


#pageContent {
    height: calc(100vh - 60px);
    overflow-y: auto;
}

/* =========================================================
   APP
   ========================================================= */

.app {

    display: flex;

    width: 100%;
    height: 100vh;

    font-size: var(--font-size);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

    width: 360px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    background: var(--panel);

    border-right:
        1px solid var(--border-soft);

    overflow: hidden;

    font-size: var(--font-size);
}


.sidebar-header {

    padding:
        22px 20px 16px;

    border-bottom:
        1px solid var(--border-soft);
}


.sidebar-title {

    font-size: calc(var(--font-size) * 1.43);

    font-weight: 700;

    letter-spacing: -0.5px;
}


.sidebar-subtitle {

    margin-top: 5px;

    font-size: var(--font-size);

    color: var(--text-secondary);
}


.sidebar-content {

    flex: 1;

    overflow-y: auto;

    padding: 14px;
}


/* =========================================================
   SECTION
   ========================================================= */

.sidebar-section {

    margin-bottom: 14px;
}


.section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 9px 7px;

    color: var(--text-secondary);

    font-size: var(--font-size);

    font-weight: 600;

    cursor: pointer;

    user-select: none;
}


.section-title .arrow {

    transition:
        transform 0.15s ease;
}


.section-title.collapsed .arrow {

    transform:
        rotate(-90deg);
}


.section-body.collapsed {

    display: none;
}


/* =========================================================
   COLUMN TEMPLATES
   ========================================================= */

.template-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}


.template {

    min-height: 58px;

    padding: 10px;

    border-radius: 12px;

    cursor: grab;

    user-select: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

    font-size: var(--font-size);
}


.template:active {

    cursor: grabbing;

    transform: scale(0.98);
}


.start-template {

    background:
        var(--start-bg);

    border:
        1px solid var(--start-border);

    color:
        var(--start-accent);
}


.group-template {

    background:
        var(--group-bg);

    border:
        1px solid var(--group-border);

    color:
        var(--group-accent);
}

.next-template {

    background:
        var(--next-bg);

    border:
        1px solid var(--next-border);

    color:
        var(--next-accent);
}


.template-icon {

    font-size: calc(var(--font-size) * 1.08);

    margin-bottom: 4px;
}


.template-name {

    font-size: var(--font-size);

    font-weight: 600;

    color: var(--text);
}


.template-description {

    margin-top: 2px;

    font-size: calc(var(--font-size) * 0.86);

    color: var(--text-muted);
}


/* =========================================================
   CONDITION TEMPLATES
   ========================================================= */

.condition-list {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.condition-template {

    padding:
        11px 12px;

    border-radius: 10px;

    background:
        var(--panel-soft);

    border:
        1px solid var(--border-soft);

    cursor: grab;

    user-select: none;

    transition:
        background 0.15s ease,
        transform 0.15s ease;

    font-size: var(--font-size);
}


.condition-template:hover {

    background:
        var(--accent-soft);
}


.condition-template:active {

    cursor: grabbing;

    transform:
        scale(0.985);
}


.condition-template-title {

    font-size: var(--font-size);

    font-weight: 600;
}


.condition-template-description {

    margin-top: 3px;

    color: var(--text-muted);

    font-size: calc(var(--font-size) * 0.86);
}


/* =========================================================
   MAIN
   ========================================================= */

.main {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;
}


.toolbar {

    height: 64px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 22px;

    background:
        var(--panel);

    border-bottom:
        1px solid var(--border-soft);
}


.toolbar-title {

    font-size: calc(var(--font-size) * 1.29);

    font-weight: 700;
}


.toolbar-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}


.toolbar select,
.toolbar button {

    height: 36px;

    border-radius: 9px;

    border:
        1px solid var(--border);

    background:
        var(--panel-soft);

    color:
        var(--text);

    padding:
        0 11px;

    font-size: var(--font-size);
}


.strategy-area {
    flex: 1;

    min-height: 0;

    overflow: auto;

    padding: 28px;

    font-size: var(--font-size);
}


/* =========================================================
   ROOT
   ========================================================= */

.root-drop {
    min-height: 100%;

    padding: 4px 4px 80px 4px;

    font-size: var(--font-size);
}


.root-empty {

    min-height: 220px;

    border:
        1px dashed var(--border);

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    background:
        #f3f3f5;

    font-size: var(--font-size);
}


body.dark .root-empty {

    background:
        #151320;
}


.root-empty.drag-over {

    border-color:
        var(--accent);

    background:
        var(--accent-soft);
}


/* =========================================================
   COLUMN
   ========================================================= */

.column {

    position: relative;

    margin-bottom: 14px;

    padding: 15px;

    border-radius: 15px;

    box-shadow:
        var(--shadow);

    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;

    font-size: var(--font-size);
}


.column:hover {

    box-shadow:
        var(--shadow-hover);
}


.column-start {

    background:
        var(--start-bg);

    border:
        1px solid var(--start-border);
}


.column-group {

    background:
        var(--group-bg);

    border:
        1px solid var(--group-border);
}

.column-next {

    background:
        var(--next-bg);

    border:
        1px solid var(--next-border);
}

.column.dragging {

    opacity: 0.45;
}


.column.drag-over {

    transform:
        translateY(-1px);

    box-shadow:
        0 0 0 2px var(--accent-soft);
}


.column.disabled {

    opacity: 0.48;
}


/* =========================================================
   COLUMN HEADER
   ========================================================= */

.column-header {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 34px;

    font-size: var(--font-size);
}


.drag-handle {

    color:
        var(--text-muted);

    cursor: grab;

    user-select: none;

    font-size: calc(var(--font-size) * 1.08);
}


.column-title {

    flex: 1;

    min-width: 0;

    font-size: var(--font-size);

    font-weight: 700;
}


.column-type {

    color:
        var(--text-muted);

    font-size: var(--font-size);

    font-weight: 500;
}


.column-actions {

    display: flex;

    align-items: center;

    gap: 4px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.small-button {

    height: 30px;

    min-width: 30px;

    padding: 0 8px;

    border: 0;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size: var(--font-size);
}


.small-button:hover {

    background:
        var(--accent-soft);

    color:
        var(--text);
}


/* =========================================================
   TOGGLE
   ========================================================= */

.toggle {

    position: relative;

    width: 34px;

    height: 20px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background:
        #8e8e93;
}


.toggle::after {

    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    top: 2px;
    left: 2px;

    border-radius: 50%;

    background: white;

    transition:
        transform 0.15s ease;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.18);
}


.toggle.on {

    background:
        var(--success);
}


.toggle.on::after {

    transform:
        translateX(14px);
}


/* =========================================================
   START SETTINGS
   ========================================================= */

.start-settings {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

    padding:
        10px 12px;

    border-radius: 10px;

    font-size: var(--font-size);
}


/* START 설정 영역 */
.column-start>.start-settings {
    background:
        var(--start-border);
}

/* START 설정 영역인데 템플릿 수정 상황일 때 */
.column-start.template-editing > .start-settings {
    background:
        var(--template-border);
}


/* GROUP 설정 영역 */
.column-group>.start-settings {
    background:
        var(--group-border);
}


/* NEXT 설정 영역 */
.column-next>.start-settings {
    background:
        var(--next-border);
}


.setting-label {

    color:
        var(--text-secondary);

    font-size: var(--font-size);
}


.number-input {

    width: 64px;

    height: 31px;

    padding:
        0 8px;

    border-radius: 8px;

    border:
        1px solid var(--border);

    background:
        var(--panel);

    color:
        var(--text);

    text-align: center;

    font-size: var(--font-size);
}


.operator-select {

    height: 31px;

    padding:
        0 8px;

    border-radius: 8px;

    border:
        1px solid var(--border);

    background:
        var(--panel);

    color:
        var(--text);

    font-size: var(--font-size);
}


/* =========================================================
   CHILDREN
   ========================================================= */

.column-children {

    margin-top: 12px;

    padding-left: 12px;

    border-left:
        1px solid #bfc0c5;

    font-size: var(--font-size);
}


body.dark .column-children {

    border-left-color:
        #8a879a;
}


/* =========================================================
   CONDITION CARD
   ========================================================= */

.condition-card {

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 48px;

    margin-bottom: 7px;

    padding:
        9px 11px;

    border-radius: 11px;

    transition:
        opacity 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;

    font-size: var(--font-size);
}


.condition-card:hover {

    box-shadow:
        var(--shadow);
}


.condition-card.dragging {

    opacity: 0.4;
}


.condition-card.disabled {

    opacity: 0.42;
}


/* =========================================================
   CARD COLORS
   ========================================================= */

.condition-blue {

    background:
        var(--card-blue-bg);

    border:
        1px solid var(--card-blue-border);

    border-left:
        3px solid var(--card-blue-accent);
}


.condition-green {

    background:
        var(--card-green-bg);

    border:
        1px solid var(--card-green-border);

    border-left:
        3px solid var(--card-green-accent);
}


.condition-orange {

    background:
        var(--card-orange-bg);

    border:
        1px solid var(--card-orange-border);

    border-left:
        3px solid var(--card-orange-accent);
}


.condition-purple {

    background:
        var(--card-purple-bg);

    border:
        1px solid var(--card-purple-border);

    border-left:
        3px solid var(--card-purple-accent);
}


.condition-red {

    background:
        var(--card-red-bg);

    border:
        1px solid var(--card-red-border);

    border-left:
        3px solid var(--card-red-accent);
}


.condition-gray {

    background:
        var(--card-gray-bg);

    border:
        1px solid var(--card-gray-border);

    border-left:
        3px solid var(--card-gray-accent);
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.condition-card-text {

    flex: 1;

    min-width: 0;

    line-height: 1.45;

    font-size: var(--font-size);
}


.condition-meta {

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: calc(var(--font-size) * 0.86);
}


/* =========================================================
   DROP ZONE
   ========================================================= */

.drop-zone {

    min-height: 58px;

    margin-top: 10px;

    border:
        1px dashed var(--border);

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        10px 14px;

    color:
        var(--text-muted);

    background:
        #f3f3f5;

    font-size: var(--font-size);

    text-align: center;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}


body.dark .drop-zone {

    background:
        rgba(0, 0, 0, 0.28);
}


.drop-zone:hover,
.drop-zone.drag-over {

    border-color:
        var(--accent);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-backdrop {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.42);

    z-index: 1000;
}


.modal-backdrop.show {

    display: flex;
}


.modal {

    width:
        min(600px, 100%);

    max-height: 90vh;

    overflow: auto;

    border-radius: 18px;

    background:
        var(--panel);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.28);

    font-size: var(--font-size);
}


.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 20px;

    border-bottom:
        1px solid var(--border-soft);
}


.modal-title {

    font-size: calc(var(--font-size) * 1.21);

    font-weight: 700;
}


.modal-body {

    padding: 20px;
}


.modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding:
        14px 20px;

    border-top:
        1px solid var(--border-soft);
}


.form-group {

    margin-bottom: 0;
}


.form-label {

    display: block;

    margin-bottom: 6px;

    color:
        var(--text-secondary);

    font-size: var(--font-size);

    font-weight: 600;
}


.form-input,
.form-select {

    width: 100%;

    min-height: 38px;

    padding:
        7px 10px;

    border-radius: 9px;

    border:
        1px solid var(--border);

    background:
        var(--panel-soft);

    color:
        var(--text);

    outline: none;

    font-size: var(--font-size);
}


.form-input:focus,
.form-select:focus {

    border-color:
        var(--accent);
}


.button {

    min-height: 38px;

    padding:
        0 15px;

    border-radius: 9px;

    border:
        1px solid var(--border);

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size: var(--font-size);
}


.button.primary {

    border-color:
        var(--accent);

    background:
        var(--accent);

    color: white;
}


/* =========================================================
   JSON
   ========================================================= */

.json-viewer {

    display: none;

    position: fixed;

    inset: 8%;

    z-index: 1100;

    padding: 20px;

    border-radius: 16px;

    background:
        var(--panel);

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.35);

    overflow: auto;
}


.json-viewer.show {

    display: block;
}


.json-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}


.json-viewer pre {

    margin: 0;

    white-space: pre-wrap;

    word-break: break-word;

    font-family:
        Consolas,
        monospace;

    font-size: calc(var(--font-size) * 0.86);

    line-height: 1.5;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

    position: fixed;

    left: 50%;

    bottom: 28px;

    transform:
        translateX(-50%) translateY(15px);

    padding:
        10px 16px;

    border-radius: 10px;

    background:
        rgba(30, 30, 30, 0.92);

    color: white;

    font-size: var(--font-size);

    opacity: 0;

    pointer-events: none;

    transition:
        all 0.2s ease;

    z-index: 2000;
}


.toast.show {

    opacity: 1;

    transform:
        translateX(-50%) translateY(0);
}


/* =========================================================
   ERROR
   ========================================================= */

.condition-load-error {

    padding: 12px;

    border-radius: 10px;

    background:
        #fff0ef;

    color:
        var(--danger);

    font-size: var(--font-size);
}


body.dark .condition-load-error {

    background:
        #4a2523;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-track {

    background:
        transparent;
}


::-webkit-scrollbar-thumb {

    background:
        #b8b8bd;

    border-radius:
        10px;
}


body.dark ::-webkit-scrollbar-thumb {

    background:
        #7a7886;
}




/* =========================================================
   전략 불러오기 모달
   ========================================================= */



.strategy-type-tab {
    padding: 10px 12px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        var(--font-size);

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}


.strategy-type-tab:hover {

    background:
        var(--accent-soft);

    border-color:
        var(--accent);
}


.strategy-type-tab.active {

    background:
        var(--accent);

    border-color:
        var(--accent);

    color: white;
}





/* =========================================================
   전략 목록
   ========================================================= */

.strategy-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    max-height: 400px;
    overflow-y: auto;
}


.strategy-list-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--panel-soft);
    color: var(--text);

    cursor: pointer;
    user-select: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}


.strategy-list-item:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}


.strategy-list-item:active {
    transform: scale(0.99);
}


.strategy-list-item-name {
    font-size: 15px;
    font-weight: 700;

    color: var(--text);

    cursor: pointer;
}


.strategy-list-item-date {
    margin-top: 5px;

    font-size: 12px;

    color: var(--text-muted);

    cursor: pointer;
}


.strategy-list-empty {
    padding: 40px 20px;

    text-align: center;

    opacity: 0.6;
}







/* ==========================================
   드래그 막기
   ========================================== */

.drag-handle {
    cursor: grab;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}





/* ==========================================
   전략 액션 버튼
   ========================================== */

   .strategy-action {
    display: flex;
    align-items: center;
    gap: 8px;

    /* 기존 여백/밑줄 제거 */
    padding: 0;
    margin: 0;
    border-bottom: 0;
}


/* 저장 / 불러오기 / 복구 / 초기화 공통 */
.strategy-action button {
    flex: none;

    height: 30px;
    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--panel-soft);
    color: var(--text);

    font-size: var(--font-size);
    font-weight: 400;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}


.strategy-action button:hover {
    background: var(--accent-soft);
}


.strategy-action button:active {
    transform: scale(0.97);
}





/* ==========================================
   전략 액션 버튼 색상
   카드와 동일한 파스텔 계열
   ========================================== */








/* =========================================================
   수정 중인 전략 탭
   ========================================================= */

.working-strategy-tabs {
    display: flex;
    gap: 8px;

    padding: 0;

    border-bottom: 1px solid var(--border);
}


.working-strategy-tab {
    padding: 7px 18px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--panel);
    color: var(--text);

    font-size: var(--font-size);
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}


.working-strategy-tab:hover {
    transform: translateY(-1px);
}


.working-strategy-tab.active {

    border-color:
        var(--accent);

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-weight: 700;
}



/* =========================================================
   상단 전략 4개 버튼 / 복구 버튼
   ========================================================= */
.strategy-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 6px 28px;

    border-bottom:
        1px solid var(--border-soft);

    background:
        var(--panel);
}



/* =========================================================
   CONDITION MODAL - COLOR SWATCH
   ========================================================= */

   .condition-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}


.condition-color-swatches {
    display: flex;
    align-items: center;
    gap: 5px;
}


.condition-color-swatch {
    width: 18px;
    height: 18px;

    flex: none;

    padding: 0;

    border:
        2px solid transparent;

    border-radius: 5px;

    cursor: pointer;

    transition:
        transform 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}


.condition-color-swatch:hover {
    transform:
        scale(1.12);
}


.condition-color-swatch.active {
    border-color:
        var(--text);

    box-shadow:
        0 0 0 2px var(--panel);
}


/* 기존 카드 accent 색상 그대로 사용 */

.condition-color-swatch.blue {
    background: var(--card-blue-bg);
    border-color: var(--card-blue-border);
}

.condition-color-swatch.green {
    background: var(--card-green-bg);
    border-color: var(--card-green-border);
}

.condition-color-swatch.orange {
    background: var(--card-orange-bg);
    border-color: var(--card-orange-border);
}

.condition-color-swatch.purple {
    background: var(--card-purple-bg);
    border-color: var(--card-purple-border);
}

.condition-color-swatch.red {
    background: var(--card-red-bg);
    border-color: var(--card-red-border);
}

.condition-color-swatch.gray {
    background: var(--card-gray-bg);
    border-color: var(--card-gray-border);
}


/* =========================================================
   CONDITION MODAL 2 COLUMN GRID
   ========================================================= */

.condition-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px 16px;

    width: 100%;
}


/*
 * Grid 내부 form-group은
 * 기존 여백 제거
 */
.condition-form-grid>.form-group {
    margin-bottom: 0;
}


/*
 * 모바일
 */
@media (max-width: 600px) {

    .condition-form-grid {
        grid-template-columns:
            1fr;
    }
}




/* =========================================================
   카드 모달 창 조건식 미리보기
   ========================================================= */
.condition-preview {
    margin-top: 18px;

    padding:
        14px 16px;

    border:
        1px solid var(--border-soft);

    border-radius: 10px;

    background:
        var(--panel-soft);
}


.condition-preview-label {
    margin-bottom: 6px;

    font-size:
        calc(var(--font-size) * 0.86);

    color:
        var(--text-muted);
}


.condition-preview-text {
    line-height: 1.6;

    font-weight: 600;

    color:
        var(--text);
}



/* =========================================================
   전략 빌더 페이지 - 스크롤 관리
   ========================================================= */

/*
 * 전략 빌더에서는 전체 페이지 스크롤을 사용하지 않는다.
 *
 * 왼쪽 사이드바와 오른쪽 전략 영역이
 * 각각 독립적으로 스크롤된다.
 */

#pageContent:has(.strategy-builder-page) {
    overflow: hidden;
}


/*
 * pageContent 높이 안에서만 전략 빌더를 사용한다.
 */

.strategy-builder-page {
    height: 100%;
    min-height: 0;

    overflow: hidden;
}


.strategy-builder-page .app {
    height: 100%;
    min-height: 0;
}


/*
 * 왼쪽 사이드바
 */

.strategy-builder-page .sidebar {
    min-height: 0;
}


.strategy-builder-page .sidebar-content {
    min-height: 0;

    overflow-y: auto;
}


/*
 * 오른쪽 전략 영역
 */

.strategy-builder-page .main {
    min-height: 0;
}


.strategy-builder-page .strategy-area {
    min-height: 0;

    overflow: auto;
}





/* ======================================================================================
   STRATEGY BUILDER - MOBILE
   ====================================================================================== */


/* PC에서는 모바일 전용 UI 숨김 */

.mobile-builder-overlay,
.mobile-builder-close,
.mobile-builder-add-button,
.mobile-insert-target {
    display: none;
}


.mobile-panel-overlay {
    display: none;
}

@media (max-width: 768px) {



    .mobile-panel-overlay {
        position: fixed;

        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 90;

        display: block;

        background:
            rgba(0, 0, 0, 0.52);

        opacity: 0;

        pointer-events: none;

        transition:
            opacity 0.2s ease;
    }

    .mobile-panel-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* =====================================================
       전체 레이아웃
       ===================================================== */

    .strategy-builder-page .app {
        position: relative;

        display: block;

        width: 100%;
        height: 100%;
    }


    .strategy-builder-page .main {
        width: 100%;
        height: 100%;

        min-width: 0;
    }

    .strategy-builder-page .strategy-template-card {
        padding: 10px;
    }

    /* =====================================================
       전략 상단 탭
       ===================================================== */

       .strategy-topbar {
        flex-shrink: 0;
    
        display: flex;
        flex-direction: column;
    
        padding: 8px;
    
        overflow: hidden;
    }
    .strategy-action {
        order: 1;
    
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    
        width: 100%;
        gap: 5px;
    
        margin-bottom: 6px;
    }
    .strategy-action button {
        width: 100%;
        min-width: 0;
    
        height: 30px;
        padding: 0 3px;
    
        font-size: 11px;
    }
    
    /* =====================================================
   모바일 - 전략 종류 탭
   ===================================================== */

.working-strategy-tabs {
    order: 2;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    width: 100%;

    gap: 0;
    padding: 0;

    border-bottom:
        1px solid var(--border);

    background:
        transparent;
}


.working-strategy-tab {
    position: relative;

    min-width: 0;
    height: 34px;

    padding: 0 3px;

    border: 0;
    border-radius: 0;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    transform: none;
}


/* 모바일에서는 버튼처럼 떠오르는 효과 제거 */
.working-strategy-tab:hover {
    transform: none;

    background:
        transparent;
}


/* 선택된 탭 */
.working-strategy-tab.active {
    border: 0;

    background:
        transparent;

    color:
        var(--accent);

    font-weight: 700;
}


/* 선택된 탭 하단 표시선 */
.working-strategy-tab.active::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: -1px;

    height: 2px;

    border-radius:
        2px 2px 0 0;

    background:
        var(--accent);
}




    /* =====================================================
       전략 작업 영역

       좌우 공간 최대 확보
       ===================================================== */

    .strategy-builder-page .strategy-area {
        padding:
            8px 7px calc(90px + env(safe-area-inset-bottom));

        overflow-x: hidden;
        overflow-y: auto;
    }


    .strategy-builder-page .root-drop {
        min-height: 100%;

        padding: 0;
    }


    .strategy-builder-page .root-empty {
        min-height: 180px;

        padding: 18px;

        border-radius: 12px;

        text-align: center;
    }


    /* =====================================================
       컬럼

       중첩되어도 폭을 최대한 유지
       ===================================================== */

    .strategy-builder-page .column {
        margin-bottom: 8px;

        padding: 8px;

        border-radius: 11px;

        box-shadow:
            0 0 2px rgba(0, 0, 0, 0.35);

        border: 1px solid rgba(0, 0, 0, 0.10);
    }


    .strategy-builder-page .column-header {
        gap: 5px;

        min-height: 32px;
    }


    .strategy-builder-page .column-children {
        margin-top: 7px;

        /*
         * PC의 12px → 모바일 3px
         *
         * 중첩될수록 카드가 좁아지는 현상 최소화
         */
        padding-left: 3px;

        border-left-width: 1px;
    }


    /* =====================================================
       START / NEXT 설정
       ===================================================== */

    .strategy-builder-page .start-settings {
        gap: 5px;

        margin-top: 7px;

        padding:
            7px 8px;

        border-radius: 8px;

        line-height: 1.4;
    }


    .strategy-builder-page .number-input {
        width: 52px;
        height: 29px;

        padding:
            0 4px;
    }


    .strategy-builder-page .operator-select {
        height: 29px;

        padding:
            0 5px;
    }


    /* =====================================================
       조건 카드
       ===================================================== */

    .strategy-builder-page .condition-card {
        gap: 5px;

        min-height: 46px;

        margin-bottom: 5px;

        padding:
            7px 7px;

        border-radius: 9px;
    }


    .strategy-builder-page .condition-card-text {
        line-height: 1.35;
    }


    /*
     * 모바일에서는 드래그 핸들 불필요
     */

    /*
 * 모바일
 *
 * 카드의 드래그 핸들은 숨기고,
 * 컬럼의 드래그 핸들만 표시한다.
 */

.strategy-builder-page .drag-handle {
    display: none;
}

.strategy-builder-page .column-drag-handle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    cursor: grab;

    touch-action: none;
}


/* =====================================================
   MOBILE TOUCH DRAG
   ===================================================== */

   .strategy-builder-page .mobile-dragging {
    opacity: 0.35;
}

.mobile-drag-ghost {
    position: fixed;

    z-index: 3000;

    pointer-events: none;

    opacity: 0.92;

    transform: scale(0.96);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.strategy-builder-page .mobile-drag-target {
    outline:
        2px solid var(--accent);

    outline-offset: 2px;
}


    .strategy-builder-page .small-button {
        min-width: 28px;
        height: 28px;

        padding:
            0 5px;
    }


    /*
     * PC용 드롭 안내 영역도 모바일에서는 숨긴다.
     *
     * 모바일은 컬럼 선택 → + 버튼 방식을 사용.
     */

    .strategy-builder-page .drop-zone {
        display: none;
    }


    /* =====================================================
       선택된 모바일 컬럼
       ===================================================== */

    .strategy-builder-page .column.mobile-selected {
        outline:
            2px solid var(--accent);

        outline-offset:
            2px;
    }


    /* =====================================================
       FLOATING + BUTTON
       ===================================================== */

    .mobile-builder-add-button {
        position: fixed;

        right: 18px;

        z-index: 150;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 52px;
        height: 52px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background:
            var(--accent);

        color: #ffffff;

        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.22);

        font-size: 30px;
        font-weight: 300;

        line-height: 1;

        cursor: pointer;
    }

    /* 일반 모바일 웹 */
.mobile-builder-add-button {
    bottom: calc(
        18px + env(safe-area-inset-bottom)
    );
}




    .mobile-builder-add-button:active {
        transform:
            scale(0.94);
    }


    /* =====================================================
       SIDEBAR → BOTTOM SHEET
       ===================================================== */

    .strategy-builder-page .sidebar {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1200;

        width: 100%;

        /*
         * 화면 대부분을 사용할 수 있지만
         * 전략 필드가 뒤에 조금 보이게 함
         */
        height: min(78vh, 720px);

        border-right: 0;

        border-top:
            1px solid var(--border-soft);

        border-radius:
            18px 18px 0 0;

        box-shadow:
            0 -10px 35px rgba(0, 0, 0, 0.18);

        transform:
            translateY(105%);

        transition:
            transform 0.22s ease;

        overflow: hidden;
    }


    .strategy-builder-page .sidebar.mobile-open {
        transform:
            translateY(0);
    }


    /* =====================================================
       SIDEBAR OVERLAY
       ===================================================== */

    .mobile-builder-overlay {
        position: fixed;

        inset: 0;

        z-index: 1190;

        display: block;

        background:
            rgba(0, 0, 0, 0.34);

        opacity: 0;

        pointer-events: none;

        transition:
            opacity 0.2s ease;
    }


    .mobile-builder-overlay.show {
        opacity: 1;

        pointer-events: auto;
    }


    /* =====================================================
       BOTTOM SHEET HEADER
       ===================================================== */

    .strategy-builder-page .sidebar-header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        flex-shrink: 0;

        padding:
            14px 16px 11px;
    }


    .sidebar-header-text {
        min-width: 0;
    }


    .strategy-builder-page .sidebar-title {
        font-size: 16px;
    }


    .strategy-builder-page .sidebar-subtitle {
        margin-top: 2px;

        font-size: 11px;
    }


    .mobile-builder-close {
        display: flex;

        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        width: 34px;
        height: 34px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background:
            var(--panel-soft);

        color:
            var(--text-secondary);

        font-size: 15px;
    }


    /* =====================================================
       BOTTOM SHEET CONTENT
       ===================================================== */

    .strategy-builder-page .sidebar-content {
        padding:
            10px 12px calc(24px + env(safe-area-inset-bottom));

        overflow-y: auto;

        overscroll-behavior:
            contain;
    }


    /* =====================================================
       현재 추가 위치
       ===================================================== */

    .mobile-insert-target {
        display: block;

        margin-bottom: 10px;

        padding:
            9px 10px;

        border:
            1px solid var(--border-soft);

        border-radius: 10px;

        background:
            var(--panel-soft);
    }


    .mobile-insert-target-label {
        margin-bottom: 5px;

        color:
            var(--text-muted);

        font-size: 10px;
        font-weight: 600;
    }


    .mobile-insert-target-row {
        display: flex;

        align-items: center;

        gap: 8px;
    }


    .mobile-insert-target-text {
        flex: 1;

        min-width: 0;

        overflow: hidden;

        color:
            var(--text);

        font-size: 12px;
        font-weight: 700;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    .mobile-root-select-button {
        flex-shrink: 0;

        height: 28px;

        padding:
            0 9px;

        border:
            1px solid var(--border);

        border-radius: 7px;

        background:
            var(--panel);

        color:
            var(--text);

        font-size: 11px;
        font-weight: 600;
    }


    /* =====================================================
       저장 / 불러오기 / 초기화
       ===================================================== */

    .strategy-builder-page .strategy-action {
        margin-top: 0;

        padding:
            0 0 10px;
    }


    /* =====================================================
       모바일 템플릿

       이제 drag가 아니라 tap이 주 동작
       ===================================================== */

    .strategy-builder-page .template,
    .strategy-builder-page .condition-template {
        cursor: pointer;
    }


    .strategy-builder-page .template-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;
    }


    .strategy-builder-page .template {
        min-height: 54px;

        padding: 8px;
    }


    .strategy-builder-page .template-description {
        display: none;
    }


    /* =====================================================
       MODAL
       ===================================================== */

    .strategy-builder-page .modal-backdrop {
        padding: 10px;
    }


    .strategy-builder-page .modal {
        width: 100%;

        max-height:
            calc(100dvh - 20px);

        border-radius: 14px;
    }



}





/* =========================================================
   공통 Toast
   ========================================================= */

#toastContainer {
    position: fixed;
    top: 24px;
    right: 24px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 99999;

    pointer-events: none;
}


.app-toast {
    min-width: 280px;
    max-width: 420px;

    padding: 14px 18px;

    background: rgba(20, 20, 23, 0.94);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    opacity: 0;
    transform: translateX(20px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.app-toast.show {
    opacity: 1;
    transform: translateX(0);
}




/* =========================================================
   STRATEGY TEMPLATE
   ========================================================= */


.strategy-template-header {

    display: flex;

    align-items: center;

    gap: 10px;
}


.strategy-template-badge {

    flex-shrink: 0;

    padding:
        4px 7px;

    border-radius: 6px;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-size:
        calc(var(--font-size) * 0.72);

    font-weight: 700;

    letter-spacing: 0.5px;
}


.strategy-template-name {

    min-width: 0;

    font-size:
        calc(var(--font-size) * 1.08);

    font-weight: 700;

    color:
        var(--text);
}


.strategy-template-description {

    margin-top: 12px;

    color:
        var(--text-secondary);

    line-height: 1.55;
}


.strategy-template-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 18px;

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid var(--border-soft);

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.86);
}


.strategy-template-meta span {

    display: flex;

    gap: 5px;
}


.strategy-template-meta strong {

    color:
        var(--text-secondary);

    font-weight: 600;
}


.strategy-template-actions {

    display: flex;

    justify-content: flex-end;

    margin-top: 14px;
}


/* 보관함에 저장 */
.strategy-template-save-button {
    background:
        var(--template-save-button-bg);

    border-color:
        var(--template-save-button-border);

    color:
        var(--template-save-button-text);
}

.strategy-template-save-button:hover {
    border-color:
        var(--template-save-button-text);
}


/*
 * 저장된 템플릿을 열어서 수정 중인
 * 최상위 START 컬럼
 */
 .column-start.template-editing {
    background:
        var(--template-bg);

    border-color:
        var(--template-border);
}

/* 열어서 수정하기 */
.strategy-template-edit-button {
    background:
        var(--template-edit-button-bg);

    border-color:
        var(--template-edit-button-border);

    color:
        var(--template-edit-button-text);
}

.strategy-template-edit-button:hover {
    border-color:
        var(--template-edit-button-text);
}


.template-wrap-button {
    width: auto;

    padding: 6px 10px;

    border:
        1px solid var(--template-border);

    border-radius: 7px;

    background:
        var(--template-bg);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.82);

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.1s ease;
}


.template-wrap-button:hover {
    border-color:
        var(--template-accent);
}


.template-wrap-button:active {
    transform:
        scale(0.97);
}



.template-description-input {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}



.strategy-template-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.strategy-template-name {
    flex: 1;
}

.strategy-template-delete {
    color: var(--text-secondary);
    background: transparent;
    border: none;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.strategy-template-delete:hover {
    background: var(--accent-soft);
    color: var(--text);

    border-radius: 8px;

    transform: scale(1.1);
}




/* =========================================================
   보유 템플릿 통계
   ========================================================= */

   .owned-template-stats {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 8px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.79);
}


.owned-template-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    white-space: nowrap;
}


/* =========================================================
   보유 템플릿 관리 버튼
   ========================================================= */

.owned-template-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid var(--template-border);
}


.owned-template-edit-info,
.owned-template-visibility {
    flex: 1;

    min-width: 0;
    height: 30px;

    padding:
        0 8px;

    border:
        1px solid var(--template-border);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.38);

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.79);

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}


.owned-template-edit-info:hover {
    border-color:
        var(--template-accent);

    color:
        var(--template-accent);

    background:
        var(--panel);
}


.owned-template-visibility:hover {
    border-color:
        var(--template-accent);

    color:
        var(--template-accent);

    background:
        var(--panel);
}


.owned-template-edit-info:active,
.owned-template-visibility:active {
    transform:
        scale(0.97);
}

.owned-template-delete {
    border: none;
    background: transparent;
    cursor: pointer;

    font-size: 12px;
    font-weight: 600;

    color: #dc2626;

    padding: 4px 6px;
    border-radius: 5px;
}

.owned-template-delete:hover {
    background: rgba(220, 38, 38, 0.08);
}



/* =========================================================
   BUILDER LIBRARY TABS
   ========================================================= */

.builder-library-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 5px;

    margin:
        12px 0 14px;

    padding: 4px;

    border-radius: 11px;

    background:
        var(--panel-soft);

    border:
        1px solid var(--border-soft);
}


.builder-library-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    min-width: 0;

    height: 34px;

    padding:
        0 6px;

    border: 0;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.86);

    font-weight: 600;
}

.builder-library-tab svg.lucide {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.builder-library-tab:hover {
    color:
        var(--text);

    background:
        var(--panel);
}


.builder-library-tab.active {
    color:
        var(--accent);

    background:
        var(--panel);

    box-shadow:
        var(--shadow);
}


#ownedTemplateCount {
    margin-left: 3px;

    font-size:
        calc(var(--font-size) * 0.82);

    color:
        var(--text-muted);
}


.builder-library-tab.active #ownedTemplateCount {
    color:
        var(--accent);
}


.builder-library-panel {
    display: none;
}


.builder-library-panel.active {
    display: block;
}


.basic-template-empty,
.public-template-empty {
    padding:
        18px 10px;

    color:
        var(--text-muted);

    text-align: center;

    font-size:
        calc(var(--font-size) * 0.9);
}




/* =========================================================
   보유 템플릿 카드
   ========================================================= */

#ownedTemplateList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.owned-template-card {
    position: relative;

    padding: 11px 12px;

    border:
        1px solid var(--template-border);

    border-left:
        3px solid var(--template-accent);

    border-radius: 9px;

    background:
        var(--template-bg);

    color:
        var(--text);

    cursor: grab;

    user-select: none;

    box-shadow:
        var(--shadow);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.owned-template-card:hover {
    border-color:
        var(--template-accent);

    box-shadow:
        var(--shadow-hover);
}


.owned-template-card:active {
    cursor: grabbing;
}


.owned-template-card.dragging {
    opacity: 0.5;

    transform:
        scale(0.98);
}

.strategy-template-card.disabled {
    opacity: 0.48;
}


/* =========================================================
   보유 템플릿 HEADER
   ========================================================= */

.owned-template-header {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;
}


.owned-template-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--text);

    font-size:
        var(--font-size);

    font-weight: 700;
}


.owned-template-version {
    flex-shrink: 0;

    padding:
        2px 6px;

    border-radius: 999px;

    background:
        var(--card-purple-border);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.72);

    font-weight: 700;
}


.owned-template-delete {
    flex-shrink: 0;

    margin-left: auto;

    padding:
        3px 4px;

    border: 0;

    background:
        transparent;

    color:
        var(--danger);

    font-size:
        calc(var(--font-size) * 0.79);

    cursor: pointer;
}


.owned-template-delete:hover {
    text-decoration: underline;
}


/* =========================================================
   보유 템플릿 내용
   ========================================================= */

.owned-template-description {
    margin-top: 8px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.86);

    line-height: 1.5;

    word-break: keep-all;
}


.owned-template-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.owned-template-meta-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.owned-template-stats {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
}


.owned-template-meta-label {
    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.72);
}


.owned-template-author {
    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.79);

    font-weight: 700;
}


/* =========================================================
   작업 필드 TEMPLATE
   ========================================================= */

.strategy-template-card {
    position: relative;
    padding: 14px 16px;
    /* ← 추가 */
    margin-bottom: 7px;
    /* ← 추가 */

    border:
        1px solid var(--template-border);

    border-left:
        4px solid var(--template-accent);

    border-radius: 10px;

    /*
     * 불투명 색상 사용.
     * 부모 START / GROUP / NEXT 컬럼 색상이
     * 뒤에서 비치지 않도록 한다.
     */
    background:
        var(--template-bg);

    color:
        var(--text);

    box-shadow:
        var(--shadow);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.strategy-template-card:hover {
    border-color:
        var(--template-accent);

    box-shadow:
        var(--shadow-hover);
}


.strategy-template-card.dragging {
    opacity: 0.55;

    transform:
        scale(0.99);
}


/* =========================================================
   작업 필드 TEMPLATE HEADER
   ========================================================= */

.strategy-template-header {
    display: flex;
    align-items: center;
    gap: 8px;
}


.strategy-template-drag-handle {
    flex-shrink: 0;

    color:
        var(--template-accent);

    cursor: grab;

    user-select: none;
}


.strategy-template-drag-handle:active {
    cursor: grabbing;
}


.strategy-template-badge {
    flex-shrink: 0;

    padding:
        4px 7px;

    border:
        1px solid var(--template-border);

    border-radius: 6px;

    background:
        var(--card-purple-border);

    color:
        var(--template-accent);

    font-size:
        calc(var(--font-size) * 0.72);

    font-weight: 700;

    letter-spacing: 0.5px;
}


.strategy-template-name {
    flex: 1;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 1.08);

    font-weight: 700;
}


/* =========================================================
   작업 필드 TEMPLATE 내용
   ========================================================= */

.strategy-template-description {
    margin-top: 12px;

    color:
        var(--text-secondary);

    line-height: 1.55;
}


.strategy-template-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px 18px;

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid var(--template-border);

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.86);
}


.strategy-template-meta span {
    display: flex;
    gap: 5px;
}


.strategy-template-meta strong {
    color:
        var(--text-secondary);

    font-weight: 600;
}


/* =========================================================
   작업 필드 TEMPLATE 버튼
   ========================================================= */

.strategy-template-actions {
    display: flex;

    justify-content:
        flex-end;

    margin-top: 14px;
    gap: 10px;
}




.template-wrap-button {
    width: auto;

    white-space: nowrap;
}


.template-description-input {
    min-height: 110px;

    resize: vertical;

    line-height: 1.5;
}



/* =========================================================
   공개 템플릿 - 고밀도 리스트
   ========================================================= */

   #publicTemplateList {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


/* =========================================================
   카드
   ========================================================= */

.public-template-card {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 8px 8px;

    border: 1px solid var(--template-border);
    border-radius: 7px;

    background: var(--template-bg);

    transition:
        border-color .15s ease,
        background .15s ease;
}


.public-template-card:hover {
    border-color: var(--template-accent);
}


/* =========================================================
   프로필
   ========================================================= */

.public-template-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--panel);

    color: var(--text-muted);

    font-size: calc(var(--font-size) * 0.78);
    font-weight: 700;
}


.public-template-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   본문
   ========================================================= */

.public-template-content {
    flex: 1;

    min-width: 0;
    text-align: left;
}


/* 템플릿 이름 */

.public-template-name {
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: calc(var(--font-size) * 0.86);
    font-weight: 700;
    text-align: left;
}



/* =========================================================
   왼쪽 작성자 영역
   ========================================================= */

   .public-template-creator {
    width: 48px;
    flex: 0 0 48px;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
}


/* 프로필 */

.public-template-avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--panel);

    color: var(--text-muted);

    font-size: calc(var(--font-size) * 0.78);
    font-weight: 700;
}


.public-template-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* 작성자 이름 */

.public-template-author {
    width: 100%;

    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-align: center;

    color: var(--text-muted);

    font-size: calc(var(--font-size) * 0.62);
}


/* 관리자 배지 */

.public-template-admin-badge {
    margin-bottom: 3px;

    padding: 1px 4px;

    border-radius: 4px;

    background: var(--template-accent);
    color: #fff;

    font-size: calc(var(--font-size) * 0.56);
    font-weight: 700;

    white-space: nowrap;
}

/* =========================================================
   설명
   ========================================================= */

.public-template-description {
    margin-top: 3px;

    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-secondary);

    font-size: calc(var(--font-size) * 0.74);
    text-align: left;
}


/* =========================================================
   하단
   ========================================================= */

   .public-template-bottom {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;

    margin-top: 5px;

    min-height: 25px;
}


/* 좋아요 / 다운로드 */

.public-template-stats {
    display: flex;
    align-items: center;

    gap: 9px;

    /*
     * 버튼 바로 왼쪽에 위치
     */
    margin-left: auto;

    color: var(--text-secondary);

    font-size: calc(var(--font-size) * 0.76);
    font-weight: 500;
}


.public-template-stat {
    white-space: nowrap;
}


/* =========================================================
   추가 버튼
   ========================================================= */

.public-template-add {

    height: 23px;

    padding: 0 8px;

    flex-shrink: 0;

    border: 1px solid var(--template-accent);
    border-radius: 5px;

    background: transparent;

    color: var(--template-accent);

    font-size: calc(var(--font-size) * 0.68);
    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        transform .1s ease;
}


.public-template-add:hover:not(:disabled) {
    background: var(--template-accent);
    color: #fff;
}


.public-template-add:active:not(:disabled) {
    transform: scale(0.96);
}


.public-template-add:disabled {
    border-color: var(--template-border);

    color: var(--text-muted);

    cursor: default;
}


/* =========================================================
   빈 목록
   ========================================================= */

.public-template-empty {
    padding: 20px 6px;

    color: var(--text-muted);

    font-size: calc(var(--font-size) * 0.78);

    text-align: center;
}

/* =========================================================
   DARK MODE
   ========================================================= */

body.dark .public-template-card:hover {
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.24);
}


body.dark .public-template-add:disabled {
    background: rgba(255, 255, 255, 0.06);
}



.public-template-like {
    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    color: var(--text-secondary);

    font: inherit;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color .15s ease,
        transform .1s ease;
}


.public-template-like:hover:not(:disabled) {
    color: var(--template-accent);
}


.public-template-like:active:not(:disabled) {
    transform: scale(0.92);
}


.public-template-like.liked {
    color: #ef4444;
}


.public-template-like:disabled {
    cursor: default;
}




/* =========================================================
   카드에 삽입되는 이미지
   ========================================================= */
   .condition-template-image {
    float: right;

    width: 52px;
    height: 52px;

    margin-left: 10px;
    margin-bottom: 4px;

    object-fit: contain;
    border-radius: 5px;
}

.condition-template-title {
    font-weight: 600;
}

.condition-template-description {
    margin-top: 4px;
    line-height: 1.4;

    white-space: normal;
    overflow-wrap: break-word;
}


.condition-card-image {
    float: left;

    width: 40px;
    height: 40px;

    margin-left: 8px;
    margin-bottom: 3px;

    object-fit: contain;
    border-radius: 4px;
}


.condition-card-image {
    cursor: pointer;
}


.condition-highlight {
    animation: conditionHighlight 1s ease;
}


@keyframes conditionHighlight {

    0% {
        box-shadow:
            0 0 0 2px rgba(59, 130, 246, 0);
    }

    25% {
        box-shadow:
            0 0 0 3px rgba(59, 130, 246, 0.9),
            0 0 14px rgba(59, 130, 246, 0.55);

        transform: scale(1.02);
    }

    100% {
        box-shadow:
            0 0 0 2px rgba(59, 130, 246, 0);

        transform: scale(1);
    }
}


.strategy-builder-page .condition-card {
    display: block;
}

.strategy-builder-page .condition-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.strategy-builder-page .condition-card-name {
    min-width: 0;
    max-width: 45%;

    font-weight: 700;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.strategy-builder-page .condition-card-top .condition-meta {
    flex-shrink: 0;
}

.strategy-builder-page .condition-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    margin-top: 7px;
}

.strategy-builder-page .condition-card-bottom .condition-card-text {
    flex: 1;
    min-width: 0;
}

.strategy-builder-page .condition-card-top .toggle {
    margin-left: auto;
    flex-shrink: 0;
}

.strategy-builder-page .condition-card-top .small-button {
    flex-shrink: 0;
}

.strategy-builder-page .condition-edit-button {
    flex-shrink: 0;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--panel);
    color: var(--text);

    font-weight: 600;
    cursor: pointer;
}



.strategy-load-type {
    color: var(--accent);
    margin-right: 4px;
}


/* =========================================================
   현재 편집 중인 전략
   ========================================================= */

   .working-strategy-status {
    position: relative;

    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 28px;

    background:
        linear-gradient(
            90deg,
            var(--accent-soft) 0%,
            var(--panel) 70%
        );

    border-bottom:
        1px solid var(--border-soft);
}


/* 왼쪽 강조선 */
.working-strategy-status::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 4px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--accent);
}

.working-strategy-status-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--accent);

    box-shadow:
        0 0 0 4px var(--accent-soft);
}

/* 현재 전략명 */
#workingStrategyStatusName {
    font-size:
        calc(var(--font-size) * 1.21);

    font-weight: 700;

    color:
        var(--text);

    letter-spacing:
        -0.2px;
}


.strategy-list-item {
    position: relative;
}

.strategy-list-item-content {
    min-width: 0;
    flex: 1;
}

.strategy-list-delete {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0;

    border: none;
    border-radius: 6px;

    background: transparent;
    color: var(--text-secondary);

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.strategy-list-delete:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}


/*
 * 작업필드가 비어 있을 때
 * 시작 컬럼 추가 안내
 */
 .start-template-highlight {
    animation:
        conditionHighlight 2s ease infinite;
}




.indicator-param-toggle {
    display: block;

    margin-top: 7px;
    padding: 3px 0;

    border: 0;
    background: transparent;

    color: var(--text-secondary);
    font-size: calc(var(--font-size) * 0.82);
    font-weight: 600;

    cursor: pointer;
}

.indicator-param-toggle:hover {
    color: var(--accent);
}


.indicator-param-area {
    display: none;

    margin-top: 8px;
    padding: 10px 10px 3px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--panel-soft);
}



.app-footer {
    width: 100%;
    padding: 20px;

    box-sizing: border-box;

    background: var(--panel);
    border-top: 1px solid var(--border-soft);

    color: var(--text-secondary);
    text-align: center;
}

.app-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.app-footer-copyright {
    font-size: 12px;
}

.strategy-save.changed {
    background:
        var(--accent);

    border-color:
        var(--accent);

    color:
        #fff;
}


/*
 * 백테스트 / 차트에서
 * 진입 전략이 없을 때 전략 설정 버튼 강조
 */
 .execution-settings-highlight {
    animation:
        conditionHighlight 2s ease infinite;
}


@media (max-width: 1100px) and (min-width: 769px) {

    .working-strategy-tabs {
        gap: 5px;
        padding:
            12px 8px;
    }

    .working-strategy-tab {
        padding:
            9px 10px;

        white-space: nowrap;
    }

    .strategy-action {
        gap: 5px;
    }

    .strategy-action button {
        padding:
            0 8px;

        white-space: nowrap;
    }

    .strategy-topbar {
        padding:
            12px 14px;
    }

}




/* Capacitor 앱 */
body.capacitor-app .mobile-builder-add-button {
    bottom: 18px;
}
/* =========================================================
body.capacitor-app .nav-item[data-page="chart"] {
    display: none;
}



   DARK MODE - 대비 / 경계선 보강 (색상만 조정)
   ========================================================= */

/* START / GROUP / NEXT 설정 영역
   테두리색을 배경으로 쓰면 다크에서 너무 밝아져서
   어두운 면 + 안쪽 테두리선으로 분리 */
body.dark .column-start > .start-settings {
    background: rgba(0, 0, 0, 0.30);
    box-shadow: inset 0 0 0 1px var(--start-border);
}

body.dark .column-group > .start-settings {
    background: rgba(0, 0, 0, 0.30);
    box-shadow: inset 0 0 0 1px var(--group-border);
}

body.dark .column-next > .start-settings {
    background: rgba(0, 0, 0, 0.30);
    box-shadow: inset 0 0 0 1px var(--next-border);
}

body.dark .column-start.template-editing > .start-settings {
    background: rgba(0, 0, 0, 0.30);
    box-shadow: inset 0 0 0 1px var(--template-border);
}

/* 컬럼 위에 올라간 입력창 */
body.dark .number-input,
body.dark .operator-select {
    background: var(--bg);
    border-color: var(--border);
}

/* 모달 / JSON 뷰어: 배경과 구분되는 얇은 외곽선 */
body.dark .modal,
body.dark .json-viewer {
    box-shadow:
        0 0 0 1px var(--border),
        0 20px 60px rgba(0, 0, 0, 0.7);
}

body.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.62);
}

/* 입력 필드 */
body.dark .form-input,
body.dark .form-select {
    background: var(--bg);
}

/* 사이드바 조건 템플릿 / 목록 아이템 */
body.dark .condition-template,
body.dark .strategy-list-item {
    border-color: var(--border);
}

/* 헤더 드롭다운 / 실행 설정 패널 */
body.dark .account-dropdown {
    border-color: var(--border);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.65);
}

body.dark .execution-settings-panel {
    border-color: var(--border);
}

body.dark .app-header {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}





/* 전략 제목 + 가이드 영상 */

.strategy-status-guide-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.strategy-guide-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 20px; /* 전략 제목과 유튜브 버튼 사이 간격 */
}

.strategy-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 6px 11px;

    border: 1px solid rgba(255, 0, 51, 0.25);
    border-radius: 7px;

    background: rgba(255, 0, 51, 0.07);
    color: var(--text);

    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;

    transition: background 0.15s ease,
                border-color 0.15s ease,
                transform 0.15s ease;
}

.strategy-guide-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.strategy-guide-link:hover {
    background: rgba(255, 0, 51, 0.14);
    border-color: rgba(255, 0, 51, 0.55);
    transform: translateY(-1px);
}

.strategy-guide-external {
    font-size: 14px;
    opacity: 0.6;
}

/* 기본적으로 PC 텍스트 표시 */
.guide-text-desktop {
    display: inline;
}

.guide-text-mobile {
    display: none;
}

/* =====================================================
   모바일 - 현재 편집 중인 전략명
   ===================================================== */

   @media (max-width: 768px) {

    .working-strategy-status {
        min-height: 34px;

        gap: 7px;

        padding:
            5px 10px;

        background:
            linear-gradient(
                90deg,
                var(--accent-soft) 0%,
                var(--panel) 75%
            );
    }


    .working-strategy-status::before {
        top: 5px;
        bottom: 5px;

        width: 3px;
    }


    .working-strategy-status-dot {
        width: 6px;
        height: 6px;

        box-shadow:
            0 0 0 3px var(--accent-soft);
    }


    #workingStrategyStatusName {
        font-size:
            calc(var(--font-size) * 1.05);

        font-weight: 700;
    }




    .guide-text-desktop {
        display: none;
    }

    .guide-text-mobile {
        display: inline;
    }

    .strategy-guide-link {
        white-space: nowrap;
    }
}
/* PACKAGE UI - Stage 1 */
.package-workspace[hidden], .package-modal-backdrop[hidden], #rootDrop[hidden], #mobileBuilderAddButton[hidden] { display:none !important; }
.package-workspace { min-height:100%; max-width:980px; margin:0 auto; color:var(--text); }
.package-workspace h2 { font-size:24px; margin:0 0 14px; }
.package-workspace h3 { margin-top:28px; }
.package-muted { color:var(--text-secondary); font-size:13px; }
.package-eyebrow { color:var(--accent); font-size:12px; font-weight:700; margin-bottom:12px; }
.package-description { white-space:pre-wrap; line-height:1.8; margin:20px 0; }
.package-item-preview { padding:16px; border:1px solid var(--border-soft); border-radius:10px; margin:8px 0; background:var(--panel); }
.package-sidebar-note { font-weight:700; padding:6px 8px; }
.package-sidebar-entry { display:flex; flex-direction:column; align-items:flex-start; width:100%; gap:5px; text-align:left; padding:12px; margin:6px 0; border:1px solid var(--border-soft); border-radius:10px; background:var(--panel); color:var(--text); cursor:pointer; }
.package-sidebar-entry:hover { border-color:var(--accent); background:var(--panel-soft); }
.package-modal-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.58); display:flex; justify-content:center; align-items:center; padding:16px; }
.package-modal { width:min(880px,100%); max-height:90dvh; display:flex; flex-direction:column; border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 20px 70px rgba(0,0,0,.3); overflow:hidden; }
.package-modal-header,.package-modal-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; gap:10px; }
.package-modal-header { border-bottom:1px solid var(--border-soft); }
.package-modal-header h2 { font-size:19px; margin:0; }
.package-modal-header button,.package-modal-footer button { border:1px solid var(--border); border-radius:8px; padding:9px 14px; background:var(--panel-soft); color:var(--text); cursor:pointer; }
.package-modal-footer { border-top:1px solid var(--border-soft); justify-content:flex-end; flex-wrap:wrap; }
.package-modal-footer button:disabled { opacity:.45; cursor:not-allowed; }
.package-modal-scroll { overflow:auto; padding:20px 22px; display:flex; flex-direction:column; gap:10px; }
.package-modal-scroll > label,.package-select-heading { font-weight:650; }
.package-modal-scroll input:not([type=checkbox]),.package-modal-scroll textarea { width:100%; border:1px solid var(--border); border-radius:9px; background:var(--panel-soft); color:var(--text); padding:12px; font:inherit; }
.package-modal-scroll textarea { resize:vertical; min-height:160px; }
.package-select-heading { display:flex; justify-content:space-between; margin-top:12px; }
.package-template-choices { display:flex; flex-direction:column; gap:8px; }
.package-choice { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border-soft); border-radius:9px; }
@media(max-width:768px) { .package-modal { max-height:94dvh; } .package-modal-header,.package-modal-footer,.package-modal-scroll { padding:14px; } .package-workspace h2 { font-size:20px; } }

/* Package UI Stage 3: 긴 목록만 독립 스크롤 */
.package-template-choices { max-height:min(300px, 35dvh); overflow-y:auto; overscroll-behavior:contain; padding-right:5px; min-height:0; }
.package-modal-scroll { min-height:0; }

/* PACKAGE UI - Stage 7: compact Public sidebar */
#builderLibraryPublic .public-template-empty { padding: 4px 6px 8px; }
#publicTemplateList { gap: 4px; }
#publicTemplateList .package-sidebar-entry { margin: 2px 0; }

/* Package downloads */
.package-download-controls {display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px;}
.package-download-item {display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-color, #aaa4);border-radius:8px;margin:6px 0;cursor:pointer;}
.package-download-item input {flex:none;accent-color:var(--accent-color,#548bde);}

/* Stage 9: compact structured package editor and pagination */
.package-modal { width:min(920px,100%); }
.package-form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
.package-field {display:flex;flex-direction:column;gap:6px;min-width:0;}
.package-field-wide {grid-column:1/-1;}
.package-field label {font-weight:650;font-size:13px;}
.package-required {color:var(--accent);font-weight:600;}
.package-modal-scroll .package-field input,.package-modal-scroll .package-field select,.package-modal-scroll .package-field textarea {box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--panel-soft);color:var(--text);padding:9px 10px;font:inherit;}
.package-modal-scroll .package-field textarea {min-height:96px;resize:vertical;}
.package-disclaimer {margin:0;line-height:1.5;}
.package-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;}
.package-metric {padding:12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--panel);}
.package-metric strong {display:block;font-size:17px;margin-top:5px;}
.package-pager {display:flex;justify-content:center;align-items:center;gap:10px;padding:12px 4px;}
.package-pager button {border:1px solid var(--border-soft);border-radius:7px;padding:6px 10px;background:var(--panel);color:var(--text);cursor:pointer;}
.package-pager button:disabled {opacity:.4;cursor:default;}
@media(max-width:600px){.package-form-grid{grid-template-columns:1fr;}.package-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Stage 10: package list and actions share the lower row (2:1) */
.package-modal-bottom {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;padding:12px 22px 16px;border-top:1px solid var(--border-soft);min-height:0;flex-shrink:0;}
.package-modal-template-area {min-width:0;display:flex;flex-direction:column;min-height:0;}
.package-modal-bottom .package-select-heading {margin:0 0 8px;gap:10px;}
.package-modal-bottom .package-template-choices {height:180px;max-height:22dvh;min-height:0;overflow-y:auto;}
.package-modal-bottom .package-choice {padding:8px 10px;}
.package-modal-bottom .package-modal-footer {border:0;padding:0;justify-content:flex-end;align-items:flex-end;align-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0;}
@media(max-width:600px) {
 .package-modal-bottom {grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px;padding:10px 12px;}
 .package-modal-bottom .package-modal-footer {flex-direction:column;align-items:stretch;justify-content:flex-end;}
 .package-modal-bottom .package-modal-footer button {padding:8px 5px;}
 .package-modal-bottom .package-template-choices {height:150px;max-height:22dvh;}
}

/* Stage 12: package catalog sort and search */
.package-catalog-toolbar {display:flex;flex-direction:column;gap:8px;margin:0 0 10px;position:relative;}
.package-sort-wrap {position:relative;align-self:flex-start;}
.package-sort-trigger,.package-sort-option,.package-search-button,.package-search-clear {border:1px solid var(--border-soft);background:var(--panel);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer;font:inherit;font-size:12px;}
.package-sort-panel {position:absolute;top:calc(100% + 5px);left:0;z-index:50;min-width:155px;padding:5px;display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--border-soft);border-radius:9px;box-shadow:0 8px 25px rgba(0,0,0,.2);}
.package-sort-panel[hidden] {display:none!important;}
.package-sort-option {width:100%;text-align:left;border:0;}
.package-sort-option:hover,.package-sort-option.active {background:var(--panel-soft);color:var(--accent);}
.package-search-form {display:flex;align-items:stretch;gap:5px;min-width:0;flex-wrap:wrap;}
.package-search-form input {flex:1 1 110px;min-width:0;width:100px;border:1px solid var(--border-soft);border-radius:8px;background:var(--panel);color:var(--text);padding:7px 8px;font:inherit;font-size:12px;}
.package-search-button {background:var(--accent);color:#fff;border-color:var(--accent);}
.package-detail-disclaimer {margin:10px 0 12px;line-height:1.6;}
/* Stage 13: sidebar sort + search in one row */
.package-catalog-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
}
.package-sort-wrap {
    flex: 0 0 auto;
    align-self: center;
}
.package-sort-trigger {
    white-space: nowrap;
    padding: 7px 6px;
}
.package-search-form {
    flex: 1 1 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    gap: 4px;
}
.package-search-form input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    padding: 7px 5px;
}
.package-search-button,
.package-search-clear {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 6px;
}

/* Library template compact description + author */
.owned-template-description {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}
.owned-template-description-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.owned-template-description-author {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: calc(var(--font-size) * 0.79);
    font-weight: 600;
}
.owned-template-delete {
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
}
.owned-template-delete:hover {
    text-decoration: none;
    background: rgba(220, 38, 38, 0.08);
}

/* Compact library author and description in a single two-line text */
.owned-template-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-width: 0;
    line-height: 1.5;
}
.owned-template-edit-info:disabled {
    opacity: .38;
    cursor: not-allowed;
    filter: grayscale(1);
}
.owned-template-edit-info:disabled:hover {
    transform: none;
}
#templateEditPasswordField[hidden] { display: none !important; }

/* 템플릿 카드: 조건 카드와 같은 6색 팔레트 */
.owned-template-card[data-template-color],
.strategy-template-card[data-template-color] {
    background: var(--template-selected-bg, var(--template-bg));
    border-left-color: var(--template-selected-border, var(--template-accent));
}

.owned-template-card[data-template-color="blue"],
.strategy-template-card[data-template-color="blue"] {
    --template-selected-bg: var(--card-blue-bg);
    --template-selected-border: var(--card-blue-border);
}

.owned-template-card[data-template-color="green"],
.strategy-template-card[data-template-color="green"] {
    --template-selected-bg: var(--card-green-bg);
    --template-selected-border: var(--card-green-border);
}

.owned-template-card[data-template-color="orange"],
.strategy-template-card[data-template-color="orange"] {
    --template-selected-bg: var(--card-orange-bg);
    --template-selected-border: var(--card-orange-border);
}

.owned-template-card[data-template-color="purple"],
.strategy-template-card[data-template-color="purple"] {
    --template-selected-bg: var(--card-purple-bg);
    --template-selected-border: var(--card-purple-border);
}

.owned-template-card[data-template-color="red"],
.strategy-template-card[data-template-color="red"] {
    --template-selected-bg: var(--card-red-bg);
    --template-selected-border: var(--card-red-border);
}

.owned-template-card[data-template-color="gray"],
.strategy-template-card[data-template-color="gray"] {
    --template-selected-bg: var(--card-gray-bg);
    --template-selected-border: var(--card-gray-border);
}

#templateColorSwatches .condition-color-swatch.active {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* =========================================================
   QNTSTACK Package catalog & detail redesign
   ========================================================= */
.strategy-builder-page {
    --pkg-violet:#7057e8;
    --pkg-violet-soft:#f0ecff;
    --pkg-teal:#087f79;
    --pkg-teal-soft:#e1f6f2;
    --pkg-amber:#a76808;
    --pkg-amber-soft:#fff2d9;
}
body.dark .strategy-builder-page {
    --pkg-violet:#b6a5ff;
    --pkg-violet-soft:#322747;
    --pkg-teal:#5bdfc9;
    --pkg-teal-soft:#143c3a;
    --pkg-amber:#f4c270;
    --pkg-amber-soft:#49361f;
}
#builderLibraryPublic .public-template-empty { padding: 8px 5px 18px; }
#publicTemplateList .package-scope-bar {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
    padding:4px;margin-bottom:12px;border-radius:13px;
    background:var(--panel-soft);border:1px solid var(--border-soft);
}
#publicTemplateList .package-scope-bar button {
    border:0;border-radius:9px;padding:10px 3px;
    background:transparent;color:var(--text-secondary);
    font-weight:650;font-size:11px;white-space:nowrap;
    transition:background .18s,color .18s,box-shadow .18s;
}
#publicTemplateList .package-scope-bar button.active {
    color:var(--pkg-violet);background:var(--panel);
    box-shadow:0 2px 10px rgba(20,15,55,.09);
}
#publicTemplateList .package-catalog-toolbar {margin-bottom:13px;gap:6px;}
#publicTemplateList .package-sort-trigger,
#publicTemplateList .package-search-form input {
    min-height:36px;border-radius:10px;background:var(--panel);
    border:1px solid var(--border-soft);
}
#publicTemplateList .package-search-button {border-radius:10px;min-height:36px;font-weight:700;}
#publicTemplateList .package-sidebar-entry {
    position:relative;overflow:hidden;margin:0 0 9px;padding:13px 14px 13px 16px;
    gap:8px;border:1px solid var(--border-soft);border-radius:14px;
    background:var(--panel);box-shadow:0 2px 9px rgba(23,19,54,.035);
    transition:transform .16s,box-shadow .16s,border-color .16s;
}
#publicTemplateList .package-sidebar-entry::before {
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--pkg-violet);
}
#publicTemplateList .package-sidebar-entry.package-visibility-shared::before {background:var(--pkg-teal);}
#publicTemplateList .package-sidebar-entry.package-visibility-private::before {background:var(--pkg-amber);}
#publicTemplateList .package-sidebar-entry:hover,
#publicTemplateList .package-sidebar-entry:focus-visible {
    transform:translateY(-1px);border-color:var(--pkg-violet);
    box-shadow:0 8px 20px rgba(30,25,90,.11);outline:none;
}
.package-sidebar-entry-top {display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;}
.package-sidebar-visibility {font-size:10px;letter-spacing:.055em;font-weight:800;color:var(--pkg-violet);}
.package-visibility-shared .package-sidebar-visibility {color:var(--pkg-teal);}
.package-visibility-private .package-sidebar-visibility {color:var(--pkg-amber);}
.package-sidebar-downloads {font-size:11px;color:var(--text-muted);}
.package-sidebar-title {font-size:14px;line-height:1.4;overflow-wrap:anywhere;color:var(--text);}
.package-sidebar-subtitle {font-size:12px;color:var(--text-secondary);line-height:1.35;}
.package-workspace {max-width:1050px;padding:0 2px 28px;}
.package-detail-header {
    display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
    padding:22px 24px;border-radius:20px;
    background:linear-gradient(120deg,var(--pkg-violet-soft),var(--panel) 75%);
    border:1px solid var(--border-soft);box-shadow:var(--shadow);
}
.package-detail-heading {min-width:0;flex:1;}
.package-visibility-pill {
    display:inline-flex;align-items:center;border-radius:100px;padding:5px 11px;
    font-size:10px;letter-spacing:.07em;font-weight:800;
    color:var(--pkg-violet);background:var(--pkg-violet-soft);
}
.package-visibility-pill.package-visibility-shared {color:var(--pkg-teal);background:var(--pkg-teal-soft);}
.package-visibility-pill.package-visibility-private {color:var(--pkg-amber);background:var(--pkg-amber-soft);}
.package-workspace .package-detail-title {margin:8px 0 10px;font-size:clamp(20px,2.5vw,29px);letter-spacing:-.035em;line-height:1.3;overflow-wrap:anywhere;}
.package-detail-byline {display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:12px;color:var(--text-secondary);}
.package-author-chip {display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--text);}
.package-author-avatar {
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;
    color:#fff;background:linear-gradient(135deg,#6b66d9,#2696b4);
}
.package-byline-separator {color:var(--text-muted);}
.package-owner-actions {display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;flex:0 1 auto;}
.package-owner-actions .button {
    min-height:36px;border-radius:10px;padding:8px 13px;font-weight:650;
    background:var(--panel);border:1px solid var(--border);white-space:nowrap;
    transition:background .15s,transform .15s,border-color .15s;
}
.package-owner-actions .button:hover {transform:translateY(-1px);border-color:var(--pkg-violet);}
.package-owner-actions .package-share-button {background:var(--pkg-violet);border-color:var(--pkg-violet);color:#fff;}
.package-owner-actions .package-share-button:hover {filter:brightness(1.07);}
.package-owner-actions .package-delete-button {color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.package-owner-actions .package-delete-button:hover {background:color-mix(in srgb,var(--danger) 9%,var(--panel));border-color:var(--danger);}
.package-workspace .package-metrics {gap:12px;margin:16px 0 10px;}
.package-workspace .package-metric {padding:15px 16px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);}
.package-workspace .package-metric strong {font-size:19px;letter-spacing:-.025em;}
.package-workspace .package-metric:nth-child(3n+1) {border-top:3px solid var(--pkg-violet);}
.package-workspace .package-metric:nth-child(3n+2) {border-top:3px solid var(--pkg-teal);}
.package-workspace .package-metric:nth-child(3n) {border-top:3px solid var(--pkg-amber);}
.package-workspace h3 {font-size:17px;margin:23px 0 10px;letter-spacing:-.02em;}
.package-workspace .package-description {margin:0;padding:19px 21px;border:1px solid var(--border-soft);border-radius:15px;background:var(--panel);line-height:1.75;}
.package-workspace .package-download-controls {gap:9px;margin:14px 0;}
.package-workspace .package-download-controls .button {border-radius:10px;}
.package-workspace .package-download-controls .button:last-child {background:var(--pkg-violet);color:#fff;border-color:var(--pkg-violet);font-weight:700;}
.package-workspace .package-download-item {margin:8px 0;padding:13px 15px;border:1px solid var(--border-soft);border-radius:12px;background:var(--panel);transition:border-color .15s,background .15s;}
.package-workspace .package-download-item:hover {border-color:var(--pkg-violet);background:var(--panel-soft);}
.package-sharing-overlay {position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,8,25,.6);backdrop-filter:blur(4px);}
.package-sharing-dialog {width:min(510px,100%);max-height:min(680px,90dvh);display:flex;flex-direction:column;gap:14px;padding:23px;border-radius:20px;background:var(--panel);color:var(--text);box-shadow:0 24px 75px rgba(0,0,0,.3);}
.package-sharing-header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.package-sharing-header h2 {margin:0;font-size:20px;}
.package-sharing-close {border:0;background:var(--panel-soft);color:var(--text);width:32px;height:32px;border-radius:50%;font-size:23px;}
.package-sharing-add {display:flex;gap:8px;}
.package-sharing-add input,.package-sharing-search {width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-soft);color:var(--text);outline:none;}
.package-sharing-add input:focus,.package-sharing-search:focus {border-color:var(--pkg-violet);}
.package-sharing-add-button {flex:none;border:0;border-radius:10px;padding:0 15px;color:#fff;background:var(--pkg-violet);font-weight:700;}
.package-sharing-count {font-size:13px;font-weight:750;color:var(--text-secondary);}
.package-sharing-list {overflow-y:auto;min-height:70px;max-height:270px;}
.package-sharing-person {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border-soft);}
.package-sharing-identity {display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere;font-weight:650;}
.package-sharing-revoke {border:1px solid var(--border-soft);border-radius:8px;padding:7px 10px;background:var(--panel-soft);color:var(--danger);}
.package-sharing-revoke:hover {border-color:var(--danger);}
.package-sharing-empty,.package-sharing-error {font-size:13px;color:var(--text-secondary);}
.package-sharing-error:not(:empty) {color:var(--danger);}
@media(max-width:900px) {.package-detail-header {flex-direction:column;padding:18px;}.package-owner-actions {justify-content:flex-start;width:100%;}}
@media(max-width:600px) {.package-detail-header {padding:16px;border-radius:15px;}.package-owner-actions {gap:7px;}.package-owner-actions .button {font-size:12px;padding:8px 10px;}.package-workspace .package-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}.package-sharing-dialog {padding:17px;}}


/* ==========================================
   전략 검증 페이지 공통 헤더
   ========================================== */

   .strategy-verify-title {
    margin: 0;

    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.04em;

    color: var(--text);
}

/* 라이트 모드 */
.strategy-verify-gradient {
    background: linear-gradient(
        110deg,
        #2563eb 0%,
        #7c3aed 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 다크 모드 */
body.dark .strategy-verify-gradient {
    background-image: linear-gradient(
        110deg,
        #60a5fa 0%,
        #c4b5fd 100%
    );
}

/* 모바일 */
@media (max-width: 700px) {
    .strategy-verify-title {
        font-size: 20px;
        line-height: 1.45;
    }
}
/* Maker 저장된 템플릿 Edit 버튼 - 토글 오른쪽 */
.strategy-builder-page .strategy-template-header > .strategy-template-header-edit {
 display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
 min-height:28px; padding:4px 10px; margin:0; width:auto;
 border:1px solid var(--template-edit-button-border); border-radius:8px;
 background:var(--template-edit-button-bg); color:var(--template-edit-button-text);
 font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer;
}
.strategy-builder-page .strategy-template-header > .strategy-template-header-edit:hover {border-color:var(--template-edit-button-text)}

/* Maker template footer: desktop one line, mobile two lines */
.strategy-builder-page .strategy-template-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--template-border);
    min-width: 0;
}
.strategy-builder-page .strategy-template-footer .strategy-template-meta {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin: 0;
    padding: 0;
    border: 0;
}
.strategy-builder-page .strategy-template-footer .strategy-template-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}
.strategy-builder-page .strategy-template-footer .strategy-template-actions > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .strategy-builder-page .strategy-template-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }
    .strategy-builder-page .strategy-template-footer .strategy-template-meta {
        flex: 0 0 auto;
        width: 100%;
    }
    .strategy-builder-page .strategy-template-footer .strategy-template-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
    }
    .strategy-builder-page .strategy-template-footer .strategy-template-actions > .button {
        min-height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
}