/* ════════════════════════════════════════════════════════════════
   dashboard.css — PC 대시보드 모양
   ※ 이 파일은 앞부분 63,728바이트가 **통째로 두 번** 들어 있었다.
      (0..63727 과 63728..127455 가 글자 하나까지 같았다.)
      뒤 사본이 이기므로 화면은 멀쩡했지만, 같은 선택자가 두 군데 있어
      한쪽만 고치면 안 먹는 일이 생긴다. 앞 사본을 걷어냈다.
   ════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Pretendard',sans-serif;font-size:clamp(9px,1vw,11px);color:#111;height:100%;overflow:hidden}

/* ══ 테이블 공통 CSS 변수 ══ */
:root {
  /* ── 테이블 ── */
  --tbl-border:     #f3f4f6;
  --tbl-border-h:   #d1d5db;
  --tbl-head-bg:    #f0f2f5;
  --tbl-head-color: #374151;
  --tbl-head-size:  9.5px;
  --tbl-body-size:  9px;
  --tbl-body-color: #111;
  --tbl-hover:      #fff9c4;
  --tbl-sel-bg:     #eff6ff;
  --tbl-sel-border: #93c5fd;
  --tbl-even-bg:    #fafafa;
  --tbl-pad-h:      2px;
  --tbl-pad-v:      2px;
  /* ── 사이드바 ── */
  --sb-width:       250px;
  --sb-label-size:  11px;
  --sb-sec-size:    12px;
  --sb-item-size:   11px;
  --sb-all-size:    11px;
  --sb-pad-v:       5px;
  --sb-pad-h:       12px;
  /* ── 헤더 타이틀바 ── */
  --hdr-height:     42px;
  --hdr-logo-size:  18px;
  --hdr-btn-size:   10px;
  --hdr-btn-pad:    4px 9px;
  --hdr-layout-size:9.5px;
  /* ── 패널/탭 ── */
  --ptab-size:      10px;
  --ptab-pad:       5px 10px;
  --toolbar-size:   10px;
  --tbadge-size:    10px;
  --main-tab-size:  11px;
  --sub-tab-size:   9.5px;
  --sub-tab-pad:    3px 8px 0;
  /* ── 팝업(게시/자동화) ── */
  --popup-title-size: 14px;
  --popup-body-size:  11px;
  --popup-btn-size:   11px;
  --popup-btn-pad:    6px 20px;
  /* ── 게시결과 미리보기 ── */
  --preview-size:   10px;
  --preview-hd-size:11px;
}
/* 화면 좁을 때 (≤900px) */
@media (max-width: 900px){
  :root {
    --tbl-head-size:   8.5px;  --tbl-body-size:  8px;
    --tbl-pad-h:       1px;    --tbl-pad-v:      1px;
    --sb-width:        215px;  --sb-label-size:  10px;
    --sb-sec-size:     11px;   --sb-item-size:   10px;
    --sb-all-size:     10px;   --sb-pad-v:       4px;   --sb-pad-h: 10px;
    --hdr-height:      36px;   --hdr-logo-size:  15px;
    --hdr-btn-size:    9px;    --hdr-btn-pad:    3px 7px;
    --hdr-layout-size: 8.5px;
    --ptab-size:       9px;    --ptab-pad:       4px 8px;
    --toolbar-size:    9px;    --tbadge-size:    9px;
    --main-tab-size:   10px;   --sub-tab-size:   8.5px;
    --sub-tab-pad:     2px 6px 0;
    --popup-title-size:12px;   --popup-body-size:10px;
    --popup-btn-size:  10px;   --popup-btn-pad:  5px 14px;
    --preview-size:    9px;    --preview-hd-size:10px;
  }
}
/* ══════════════════════════════════════════════════════════════
   폰/터치 기기 — 이 대시보드를 손에 들고 본다
   ─────────────────────────────────────────────────────────────
   표를 좁게 접지 않는다. 칸을 줄이면 어느 표는 여덟 칸이 사라지는데,
   **안 보이는 값은 없는 값과 같다.** 칸은 PC 그대로 두고 옆으로 민다.
   대신 종목명 칸을 왼쪽에 붙박아, 오른쪽 끝까지 밀어도 `무엇의 값인지`를
   잃지 않게 한다 — 그것이 없으면 미는 순간 숫자만 남는다.

   사이드바(계좌·펀드 고르기)와 머리띠 단추(수집 실행·시세 갱신)는
   ≡ 로 여는 서랍에 넣는다. 예전에는 둘 다 `display:none` 이라,
   폰에서는 계좌를 못 바꾸고 수집도 못 돌렸다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1180px) {
  /* 폰마다 다른 폭에 딱 맞춤(고정폭 X, 화면폭 기준) — 가로 넘침 방지.
     **표를 감싼 상자에는 안 건다** — 거기까지 hidden 이면 밀 수가 없다. */
  .body-wrap, .dual-wrap, .panel, .panel-content { max-width: 100vw !important; overflow-x: hidden !important; }
  .panel-toolbar { flex-wrap: wrap !important; }   /* 툴바 버튼 줄바꿈 → 잘려서 안 눌리는 것 방지 */
  .panel-tabbar  { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }  /* 탭은 가로 스크롤 */
  .sub-tabbar    { overflow-x: auto !important; -webkit-overflow-scrolling: touch;
                   flex-wrap: nowrap !important; }
  .panel-tabbar::-webkit-scrollbar, .sub-tabbar::-webkit-scrollbar { display: none }
  .top-tab, .sub-tab { flex: 0 0 auto !important; white-space: nowrap }

  /* ── 표는 옆으로 민다 ── 손가락으로 밀리고, 관성도 살린다. */
  .bal-tbl-wrap, .gs-tbl-wrap, .tbl-wrap, .pd-tbl-wrap {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* 표 끝에서 페이지가 같이 밀리지 않게 */
  }
  /* 화면 높이에 맞춰 세로도 접는다. PC 기준 max-height 를 그대로 두면
     표 하나가 화면 두 개 길이가 되어 아래 말뜸이 안 보인다. */
  .bal-tbl-wrap, .gs-tbl-wrap { max-height: calc(100vh - 210px) !important }

  /* ── 종목명은 왼쪽에 붙박는다 ──
     밀고 나면 숫자만 남아 어느 종목 것인지 알 수 없다. 이름 칸만 세워 둔다.
     머리(thead)가 z-index 2 이므로 몸통은 1, 머리의 이름 칸은 3 —
     그래야 왼쪽 위 모서리에서 이름이 머리 위로 올라오지 않는다. */
  .bal-tbl tbody .c-nm, .so-tbl tbody .so-nm, .pd-tbl tbody .c-nm {
    position: sticky; left: 0; z-index: 1; background: #fff;
    box-shadow: 1px 0 0 #e8edf3;
  }
  .bal-tbl thead .w-nm, .so-tbl thead .w-nm, .pd-tbl thead .w-nm {
    position: sticky; left: 0; z-index: 3; background: #f1f3f7;
    box-shadow: 1px 0 0 #e8edf3;
  }
  .bal-tbl tbody tr:hover .c-nm, .so-tbl tbody tr:hover .so-nm { background: #f7f9fc }

  /* ── 사이드바는 ≡ 로 여는 서랍 ── */
  .sidebar-wrap {
    position: fixed !important; left: 0; top: var(--hdr-height); bottom: 0;
    z-index: 400; width: min(86vw, 320px);
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 2px 0 14px rgba(15,23,42,.18);
  }
  body.drawer-on .sidebar-wrap { transform: none }
  /* collapseSidebar() 가 넣어 둔 인라인 width:0 을 덮는다 — 폰에서는 서랍이
     열고 닫는 일을 맡으므로 사이드바 자체는 늘 펼쳐져 있어야 한다. */
  .sidebar { width: 100% !important; overflow: auto !important; border-right: none !important }
  .sb-backdrop {
    position: fixed; inset: var(--hdr-height) 0 0 0; z-index: 399;
    background: rgba(15,23,42,.35); opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  body.drawer-on .sb-backdrop { opacity: 1; pointer-events: auto }
  /* ≡ 는 헤더 안에 자리를 잡는다. PC 에서는 사이드바 경계에 떠 있지만
     폰에서는 그 경계가 화면 밖(−24px)이라 누를 수가 없었다. */
  .sb-toggle {
    position: static !important; left: auto !important;
    font-size: 19px; color: #002C5F; padding: 0 8px;
  }
  /* 서랍 안으로 옮겨진 머리띠 단추들 — 가로로 늘어놓으면 잘린다. */
  .sidebar .g-right {
    display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 4px;
    padding: 10px 10px 12px; border-bottom: 1px solid #e6ebf2; background: #fff;
  }
  .sidebar .g-right .nw-fx { display: none }      /* 환율은 폭을 많이 먹는다 */
  .sidebar .g-right .hbtn { font-size: 11px; padding: 6px 10px }
}
/* 화면 넓을 때 (≥1600px) */
@media (min-width: 1600px){
  :root {
    --tbl-head-size:   10.5px; --tbl-body-size:  10px;
    --tbl-pad-h:       3px;    --tbl-pad-v:      3px;
    --sb-width:        275px;  --sb-label-size:  12px;
    --sb-sec-size:     13px;   --sb-item-size:   11px;
    --sb-all-size:     12px;   --sb-pad-v:       5px;   --sb-pad-h: 12px;
    --hdr-height:      48px;   --hdr-logo-size:  20px;
    --hdr-btn-size:    11px;   --hdr-btn-pad:    5px 11px;
    --hdr-layout-size: 10.5px;
    --ptab-size:       11px;   --ptab-pad:       6px 12px;
    --toolbar-size:    11px;   --tbadge-size:    11px;
    --main-tab-size:   12px;   --sub-tab-size:   10.5px;
    --sub-tab-pad:     4px 10px 0;
    --popup-title-size:15px;   --popup-body-size:12px;
    --popup-btn-size:  12px;   --popup-btn-pad:  7px 24px;
    --preview-size:    11px;   --preview-hd-size:12px;
  }
}
body{display:flex;flex-direction:column;height:100vh;background:#f0f2f5}

/* ══ 헤더 ══ */
.g-header{flex-shrink:0;height:var(--hdr-height);background:#fff;border-bottom:3px solid #f37021;display:flex;align-items:center;padding:0 14px;gap:8px;z-index:200;position:relative}
.g-logo{font-size:var(--hdr-logo-size);font-weight:800;letter-spacing:-0.5px;cursor:pointer}
.g-logo span{color:#f37021}
.g-right{margin-left:auto;display:flex;align-items:center;gap:5px}
.hbtn{font-size:var(--hdr-btn-size);font-weight:600;padding:var(--hdr-btn-pad);border-radius:4px;border:1px solid #e5e7eb;background:#fff;color:#374151;cursor:pointer;font-family:'Pretendard';display:inline-flex;align-items:center;gap:3px;white-space:nowrap;transition:all .12s}
.hbtn:hover{background:#f3f4f6}
.hbtn.primary{background:#002C5F;color:#fff;border-color:#002C5F}.hbtn.primary:hover{background:#f37021;border-color:#f37021}
.hbtn.success{background:#065f46;color:#fff;border-color:#065f46}.hbtn.success:hover{background:#047857}
.hbtn.orange{background:#f37021;color:#fff;border-color:#f37021}.hbtn.orange:hover{background:#e05e0e}
.hbtn.amber{background:#f59e0b;color:#fff;border-color:#f59e0b}.hbtn.amber:hover{background:#d97706}
.hbtn.danger{background:#dc2626;color:#fff;border-color:#dc2626}.hbtn.danger:hover{background:#b91c1c}
.hbtn:disabled{opacity:.4;cursor:not-allowed}
.hbtn.run{background:#eff6ff;border-color:#bfdbfe;color:#1e3a5f}.hbtn.run:hover{background:#dbeafe;border-color:#93c5fd}
.hbtn.price{background:#fff7ed;border-color:#fed7aa;color:#9a3412}.hbtn.price:hover{background:#ffedd5;border-color:#fdba74}

/* ══ 레이아웃 컨트롤 ══ */
.layout-ctrl{display:flex;align-items:center;gap:3px;background:#f3f4f6;padding:2px 5px;border-radius:5px;border:1px solid #e5e7eb}
.layout-btn{border:none;background:transparent;padding:2px 5px;font-size:var(--hdr-layout-size);font-weight:600;color:#6b7280;border-radius:3px;cursor:pointer;font-family:'Pretendard';display:inline-flex;align-items:center;gap:2px;transition:all .1s}
.layout-btn:hover,.layout-btn.active{background:#fff;color:#002C5F;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ══ 바디 ══ */
.body-wrap{flex:1;display:flex;overflow:hidden;min-height:0}

/* ══ 사이드바 토글 ══ */
.sidebar{width:var(--sb-width);flex-shrink:0;background:#f8fafd;border-right:2px solid #e2e8f0;display:flex;flex-direction:column;height:100%;overflow:hidden;transition:width .2s ease}
.sidebar.collapsed{width:0;border-right:none;overflow:hidden}
.sb-toggle{position:absolute;left:calc(var(--sb-width) - 24px);top:0;bottom:0;z-index:300;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#94a3b8;padding:0 6px;transition:color .1s}
.sb-toggle:hover{color:#002C5F}
.sidebar-wrap{position:relative;display:flex;flex-shrink:0;height:100%}
.sb-body{flex:1;overflow-y:auto;overflow-x:hidden}
.sb-body::-webkit-scrollbar{width:3px}
.sb-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
.sb-label{font-size:var(--sb-label-size);font-weight:800;color:#fff;padding:7px var(--sb-pad-h) 6px;background:#1e3a5f;border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:5px;letter-spacing:.2px}
.sb-label.filter{background:#374151}
.sb-sec-hd{display:flex;align-items:center;padding:4px var(--sb-pad-h);cursor:pointer;user-select:none;border-bottom:1px solid #e2e8f0;background:#eef2f8;transition:background .1s}
.sb-sec-hd:hover{background:#dbeafe}
.sb-sec-hd .sec-title{flex:1;font-size:var(--sb-sec-size);font-weight:700;color:#111}
.sb-sec-hd .sec-arrow{color:#9ca3af;font-size:var(--sb-sec-size);transition:transform .2s}
.sb-sec-hd.open .sec-arrow{transform:rotate(180deg)}
.sb-sec-body{border-bottom:1px solid #e5e7eb;background:#fff;display:none}
.sb-sec-body.open{display:block}
.sb-all-row{display:flex;align-items:center;gap:6px;padding:2px var(--sb-pad-h);background:#f0f4f8;font-size:var(--sb-all-size);font-weight:700;color:#374151;cursor:pointer;user-select:none}
.sb-all-row input[type=checkbox]{width:13px;height:13px;accent-color:#002C5F;cursor:pointer;flex-shrink:0;pointer-events:none}
.sb-all-count{font-size:var(--sb-item-size);color:#6b7280;margin-left:auto;font-weight:400}
.sb-item{display:flex;align-items:center;gap:6px;padding:2px var(--sb-pad-h) 2px 18px;border-bottom:1px solid #eef2f8;font-size:var(--sb-item-size);font-weight:500;color:#111;cursor:pointer;user-select:none;background:#fafbfd}
.sb-item:hover{background:#dbeafe}
.sb-item input[type=checkbox]{width:13px;height:13px;accent-color:#002C5F;cursor:pointer;flex-shrink:0;pointer-events:none}
.sb-item-name{flex:1}
.sb-item-count{font-size:var(--sb-item-size);color:#9ca3af}
.sb-kw-wrap{padding:4px 8px 5px}
.sb-kw-row{display:flex;gap:3px;align-items:center}
.sb-kw-input{flex:1;min-width:0;height:24px;border:1px solid #e5e7eb;border-radius:4px;padding:2px 7px;font-size:11px;font-family:'Pretendard';color:#111;outline:none}
.sb-kw-input:focus{border-color:#002C5F}
.sb-kw-add{height:24px;padding:0 7px;border:1px solid #002C5F;border-radius:4px;background:#002C5F;color:#fff;font-size:10px;font-weight:700;cursor:pointer;font-family:'Pretendard'}
.sb-kw-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.kw-chip{display:inline-flex;align-items:center;gap:3px;background:#dbeafe;color:#1e3a5f;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}
.kw-chip .kw-x{cursor:pointer;opacity:.6}.kw-chip .kw-x:hover{opacity:1;color:#991b1b}
.kw-logic-row{display:flex;gap:3px;margin-top:5px}
.kw-logic-btn{flex:1;height:18px;border-radius:3px;border:1px solid #e5e7eb;background:#f9fafb;font-size:10px;font-weight:700;color:#6b7280;cursor:pointer;font-family:'Pretendard';transition:all .1s}
.kw-logic-btn.active{background:#002C5F;color:#fff;border-color:#002C5F}
.sb-limit-row{display:flex;align-items:center;gap:4px;padding:5px 10px}
.sb-limit-row input{width:52px;height:20px;border:1px solid #c7d2fe;border-radius:3px;padding:1px 4px;font-size:11px;font-weight:700;font-family:'Pretendard';color:#002C5F;text-align:right;outline:none}
.sb-limit-row label{font-size:10px;color:#6b7280}
.sb-sec-hd-check{display:flex;align-items:center;gap:5px;padding:6px 10px;cursor:pointer;user-select:none;border-bottom:1px solid #e2e8f0;background:#eef2f8}
.sb-sec-hd-check input[type=checkbox]{width:13px;height:13px;accent-color:#002C5F;cursor:pointer;flex-shrink:0;pointer-events:none}
.sb-sec-hd-check .sec-title{flex:1;font-size:12px;font-weight:700;color:#111}
.sb-sec-hd-check .sec-arrow{color:#9ca3af;font-size:12px;transition:transform .2s}
.sb-sec-hd-check.open .sec-arrow{transform:rotate(180deg)}
.sb-sec-hd-check:hover{background:#dbeafe}
.sb-sub-hd{display:flex;align-items:center;gap:5px;padding:3px 10px;background:#e8edf5;cursor:pointer;user-select:none;border-bottom:1px solid #dde3ed}
.sb-sub-hd:hover{background:#dbeafe}
.sb-sub-hd .sec-arrow{color:#9ca3af;font-size:11px;transition:transform .2s;margin-left:auto;flex-shrink:0}
.sb-sub-hd.open .sec-arrow{transform:rotate(180deg)}
.sb-grp-hd{display:flex;align-items:center;gap:4px;padding:3px 10px;background:#f4f6fa;cursor:pointer;user-select:none;border-bottom:1px solid #eef2f8}
.sb-grp-hd:hover{background:#e0e9f5}
.sb-grp-hd .sec-arrow{color:#b0b8c8;font-size:10px;transition:transform .2s;margin-left:auto;flex-shrink:0}
.sb-grp-hd.open .sec-arrow{transform:rotate(180deg)}
.sales-wrap{padding:7px 10px 8px}
.sales-tbl-hd{font-size:10px;font-weight:700;color:#374151;margin-bottom:3px}
.sales-minmax-row{display:flex;align-items:flex-end;gap:4px;margin-bottom:4px}
.sales-input-box{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sales-minmax-lbl{font-size:10px;font-weight:700;color:#374151}
.sales-num-input{width:100%;height:20px;border:1px solid #e5e7eb;border-radius:3px;padding:1px 4px;font-size:11px;font-weight:600;font-family:'Pretendard';color:#111;text-align:right;outline:none}
.sales-sep{font-size:10px;color:#9ca3af;flex-shrink:0;padding-bottom:2px}
.sales-unit{font-size:10px;color:#6b7280;flex-shrink:0;padding-bottom:2px}
.range-wrap{padding:7px 10px 6px}
.range-inputs{display:flex;align-items:flex-end;gap:4px}
.range-input-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.range-lbl{font-size:10px;color:#374151;font-weight:700}
.range-field{width:100%;padding:2px 4px;border:1px solid #e5e7eb;border-radius:4px;font-size:10px;font-weight:600;font-family:'Pretendard';color:#111;height:20px;text-align:right}
.range-sep{font-size:11px;color:#9ca3af;flex-shrink:0;padding-bottom:2px}
.dual-sl{position:relative;height:18px;margin:4px 2px 0}
.dual-sl input[type=range]{position:absolute;width:100%;height:4px;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none;top:6px}
.dual-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#002C5F;cursor:pointer;pointer-events:all;border:2px solid #fff;box-shadow:0 0 0 1px #d1d5db}
.sl-track{position:absolute;top:8px;left:0;right:0;height:3px;background:#e5e7eb;border-radius:2px}
.sl-range{position:absolute;top:8px;height:3px;background:#f37021;border-radius:2px}
.price-preset-wrap{padding:6px 10px 4px;display:flex;flex-wrap:wrap;gap:3px}
.price-preset{font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;cursor:pointer;font-family:'Pretendard';transition:all .1s}
.price-preset:hover{background:#e5e7eb}
.price-preset.active{background:#002C5F;color:#fff;border-color:#002C5F}
.price-custom-wrap{padding:0 10px 7px;display:none}

/* ══ 듀얼 패널 ══ */
.dual-wrap{flex:1;display:flex;overflow:hidden;min-width:0;min-height:0}
.dual-wrap.col{flex-direction:column}
.panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;background:#fff;container-type:inline-size;container-name:panel}
.panel-divider-h{width:5px;flex-shrink:0;background:#d1d5db;cursor:col-resize;transition:background .15s;position:relative}
.panel-divider-h::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:36px;background:#9ca3af;border-radius:2px}
.panel-divider-v{height:5px;flex-shrink:0;background:#d1d5db;cursor:row-resize;transition:background .15s;position:relative}
.panel-divider-v::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:2px;width:36px;background:#9ca3af;border-radius:2px}
.panel-divider-h:hover,.panel-divider-h.drag,.panel-divider-v:hover,.panel-divider-v.drag{background:#9ca3af}
.panel-divider-h:hover::after,.panel-divider-h.drag::after,.panel-divider-v:hover::after,.panel-divider-v.drag::after{background:#6b7280}

/* ══ 메인 탭바 (어두운 배경) ══ */
#maintabbarA .ptab, #maintabbarB .ptab, #maintabbarC .ptab,
#maintabbarD .ptab, #maintabbarE .ptab, #maintabbarF .ptab,
#maintabbarG .ptab, #maintabbarH .ptab, #maintabbarI .ptab {
  color:rgba(255,255,255,.65);background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.15);font-size:var(--main-tab-size)
}
[id^=subtabbar] .ptab { font-size:var(--sub-tab-size) }
#maintabbarA .ptab.active, #maintabbarB .ptab.active, #maintabbarC .ptab.active,
#maintabbarD .ptab.active, #maintabbarE .ptab.active, #maintabbarF .ptab.active,
#maintabbarG .ptab.active, #maintabbarH .ptab.active, #maintabbarI .ptab.active {
  color:#f37021;background:#fff;border-bottom-color:#fff
}

/* ══ 탭바 ══ */
.panel-tabbar{flex-shrink:0;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:flex-end;padding:4px 10px 0;gap:1px;overflow-x:auto}
.panel-tabbar::-webkit-scrollbar{display:none}
.ptab{padding:var(--ptab-pad);cursor:pointer;font-size:var(--ptab-size);font-weight:700;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-bottom:none;border-radius:4px 4px 0 0;white-space:nowrap;flex-shrink:0;transition:all .1s}
.ptab.active{color:#f37021;background:#fff;border-bottom:2px solid #fff;margin-bottom:-1px;position:relative;z-index:1}
.ptab:hover:not(.active){background:#e5e7eb}
.panel-content{flex:1;display:none;flex-direction:column;overflow:hidden;min-height:0;background:#fff}
.panel-content.active{display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#fff}

/* ══ 툴바 ══ */
.panel-toolbar{flex-shrink:0;padding:3px 7px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:32px;font-size:var(--toolbar-size)}
.tbadge{font-size:var(--tbadge-size);font-weight:600;color:#6b7280;padding:0;background:none;flex-shrink:0}
.tbadge.blue{color:#1e3a5f}.tbadge.orange{color:#92400e}.tbadge.green{color:#065f46}
.tb-sep{width:1px;height:16px;background:#e5e7eb;flex-shrink:0}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:3px;flex-shrink:0}
.date-filter-group{display:flex;gap:2px;background:#ececec;padding:2px;border-radius:5px;flex-shrink:0}
.date-btn{border:none;background:transparent;padding:2px 6px;font-size:9.5px;font-weight:600;color:#6b7280;border-radius:3px;cursor:pointer;white-space:nowrap;font-family:'Pretendard';transition:all .1s}
.date-btn:hover{color:#374151;background:rgba(255,255,255,.6)}
.date-btn.active{background:#fff;color:#f37021;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ══ 테이블 ══ */
.tbl-wrap{flex:1;overflow-y:auto;overflow-x:auto;background:#fff}
.tbl-wrap::-webkit-scrollbar{width:4px;height:4px}
.tbl-wrap::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}
/* data-table : 상품목록 메인 — sticky 헤더, 클릭 가능 */
.data-table{width:100%;border-collapse:collapse;table-layout:fixed}
.data-table thead th{position:sticky;top:0;z-index:10;background:var(--tbl-head-bg);box-shadow:inset 0 -1px 0 var(--tbl-border-h);padding:var(--tbl-pad-v) var(--tbl-pad-h);font-size:var(--tbl-head-size);font-weight:700;color:var(--tbl-head-color);text-align:center!important;white-space:nowrap;cursor:pointer;user-select:none;letter-spacing:-.3px}.data-table thead th:hover{background:#e5e7eb}
.data-table thead th.sorted-asc::after{content:' ▲';font-size:7px;color:#f37021}
.data-table thead th.sorted-desc::after{content:' ▼';font-size:7px;color:#f37021}
thead th.tc-name{text-align:center!important;padding-left:2px!important}
.data-table tbody td.tc-price,.data-table tbody td.tc-sales{text-align:right!important;padding-right:4px!important}
.data-table tbody td{padding:var(--tbl-pad-v) var(--tbl-pad-h);border-bottom:1px solid var(--tbl-border);font-size:var(--tbl-body-size);color:var(--tbl-body-color);vertical-align:middle;text-align:center;font-weight:500;letter-spacing:-.3px}
.data-table tbody td.tc-name{text-align:left!important;padding-left:4px!important}
.data-table tbody tr{cursor:pointer;transition:background .06s}
.data-table tbody tr:nth-child(even){background:var(--tbl-even-bg)}
.data-table tbody tr:hover{background:var(--tbl-hover)!important}
.data-table tbody tr.row-sel{background:var(--tbl-sel-bg)!important;outline:1px solid var(--tbl-sel-border)}
/* sub-table : 설정/모달/비교 내부 보조 — 심플, 클릭 없음 */
.sub-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--tbl-head-size)}
.sub-table thead th{background:var(--tbl-head-bg);padding:4px 8px;font-size:var(--tbl-body-size);font-weight:700;color:var(--tbl-head-color);text-align:left;border-bottom:1px solid var(--tbl-border-h);white-space:nowrap}
.sub-table tbody td{padding:4px 8px;border-bottom:1px solid var(--tbl-border);font-size:var(--tbl-head-size);color:var(--tbl-body-color);vertical-align:middle;word-break:break-word}
.sub-table tbody tr:nth-child(even){background:#fafafa}
.sub-table tbody tr:hover{background:#f0f4ff}

/* mini-table : 팝업/인라인 소형 */
.mini-table{width:100%;border-collapse:collapse;font-size:var(--tbl-body-size)}
.mini-table th{padding:3px 6px;background:#f8fafd;font-size:var(--tbl-body-size);font-weight:700;color:#6b7280;text-align:left;border:1px solid #e5e7eb}
.mini-table td{padding:3px 6px;font-size:var(--tbl-body-size);color:var(--tbl-body-color);border:1px solid #e5e7eb;vertical-align:middle}

/* 카테고리: 텍스트만, 검정 */
.tc-cat-label{font-size:8px;color:#111;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:50px;font-weight:500}
/* 상품ID: 검정, 작게 */
.tc-pid-text{font-size:7.5px;color:#222;letter-spacing:-.3px;font-family:monospace}
/* 수집/게시 일시 — 날짜·시간 2줄 */
.tc-date-cell{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.tc-date-d{font-size:8px;color:#222;letter-spacing:-.3px}
.tc-date-t{font-size:7.5px;color:#6b7280;letter-spacing:-.2px}
/* 출처 칼럼 셀 */
.tc-src-label{font-size:7.5px;color:#111;background:none;padding:1px 3px;letter-spacing:-.2px;white-space:nowrap}
/* 게시채널 셀 */
.tc-post-ch{font-size:7.5px;color:#065f46;background:#f0fdf4;padding:1px 3px;border-radius:3px;letter-spacing:-.2px;white-space:nowrap}

/* 컬럼 너비 */
.tc-cb{width:22px!important}.tc-src{width:26px!important}.tc-img{width:28px!important}.tc-cat{width:48px!important}
.tc-pid{width:60px!important}.tc-price{width:60px!important}.tc-disc{width:34px!important;text-align:center!important}
.tc-sales{width:38px!important}.tc-ship{width:38px!important}.tc-date{width:68px!important}
.tc-heart{width:24px!important;cursor:pointer}.tc-action{width:28px!important}.tc-name{min-width:100px}
/* Pick Score 평균·공급자 칼럼(2026-10-22) — 폭 정의가 없어 표가 남는 폭을 이 칼럼들에 나눠 줘 너무 넓었다. 점수(88.50)가 들어갈 만큼만. */
.tc-pickscore{width:48px!important;text-align:center!important;white-space:nowrap}
/* 국가·언어 칼럼에도 폭을 준다(2026-10-22) — 폭이 없으면 표가 남는 폭을 이 칼럼들이 나눠 가졌다. 남는 폭은 상품명이 가져간다. */
.tc-country{width:40px!important;text-align:center}.tc-lang{width:46px!important;text-align:center}
.data-table thead th.tc-name{width:100%}

/* 셀 */
.cell-name{font-weight:600;color:#002C5F;font-size:9.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;letter-spacing:-.3px}
.cell-thumb{width:26px;height:26px;border-radius:3px;object-fit:cover;border:1px solid #e5e7eb;display:block;margin:0 auto}
.cell-price{font-weight:700;color:#002C5F;font-size:9.5px;white-space:nowrap;display:block;text-align:right;letter-spacing:-.4px}
.st-badge{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700;white-space:nowrap}
.st-new{background:transparent;color:#1e3a5f;border:1px solid #bfdbfe}
.st-done{background:transparent;color:#065f46;border:1px solid #a7f3d0}

/* ══ 카드 그리드 ══ */
.card-panel{flex:1;min-height:0;overflow-y:auto;padding:10px;display:grid;gap:10px;background:#e8ecf0;align-items:start;grid-auto-rows:max-content}
.card-panel::-webkit-scrollbar{width:4px}
.card-panel::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:2px}
.ig-card{background:#fff;border-radius:10px;border:2px solid #cbd5e1;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;height:auto;break-inside:avoid}
.ig-card:hover{border-color:#002C5F;box-shadow:0 4px 14px rgba(0,44,95,.15)}
.ig-card.drag-over{border-color:#f37021;box-shadow:0 0 0 3px rgba(243,112,33,.4);transform:scale(1.02)}
.ig-card.sel{border:2px solid #f37021;box-shadow:0 0 0 3px rgba(243,112,33,.25)}
.ig-main-img{width:100%;height:160px;object-fit:cover;display:block;flex-shrink:0}
.ig-main-ph{width:100%;height:160px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ig-subs{display:flex;gap:4px;padding:5px 7px 0;flex-wrap:wrap}
.ig-sub-img{width:38px;height:38px;object-fit:cover;border-radius:4px;border:1.5px solid #cbd5e1;cursor:pointer;flex-shrink:0}
.ig-info{padding:8px 9px 9px;border-top:1px solid #e2e8f0;flex:1;display:flex;flex-direction:column;gap:3px}
.ig-name{font-size:10.5px;font-weight:700;color:#002C5F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-meta{display:flex;align-items:center;gap:5px;font-size:9px;color:#6b7280;flex-wrap:wrap}
.ig-price{font-weight:800;color:#002C5F;font-size:11px}

/* ══ 에디터 ══ */
.editor-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.field-sec{padding:8px 12px;border-bottom:1px solid #f3f4f6}
.field-lbl{font-size:9px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.field-req{color:#ef4444}
.field-inp{width:100%;border:1px solid #e5e7eb;border-radius:5px;padding:5px 7px;font-size:11px;font-family:'Pretendard';color:#111;resize:none;outline:none;line-height:1.5}
.field-inp:focus{border-color:#002C5F}
.field-sel{width:100%;border:1px solid #e5e7eb;border-radius:5px;padding:4px 7px;font-size:11px;font-family:'Pretendard';color:#111;outline:none;background:#fff}
.field-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

/* ══ 에디터 채널 탭 ══ */
.editor-ch-tabs{display:flex;gap:0;border-bottom:2px solid #e2e8f0;background:#f8fafd;flex-shrink:0;overflow-x:auto}
.editor-ch-tab{padding:6px 15px;font-size:12px;font-weight:700;letter-spacing:-.3px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;color:#111;white-space:nowrap;transition:color .12s,border-color .12s;display:flex;align-items:center;gap:4px}
.editor-ch-tab:hover:not(.active){color:#374151;background:rgba(0,0,0,.03)}
.editor-ch-tab.active{color:#f37021;border-bottom-color:#f37021;background:#fff}
.editor-ch-add{margin-left:auto;padding:5px 10px;font-size:10px;color:#9ca3af;cursor:pointer;background:none;border:none;font-family:inherit}
.editor-ch-add:hover{color:#6b7280}
/* ══ 에디터 정보 테이블 ══ */
/* ed-tbl : 상품정보등록탭 채널 편집 폼 */
.ed-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.ed-tbl th{font-size:calc(var(--tbl-head-size) + 1px);font-weight:600;color:#6b7280;padding:4px 9px;text-align:left;background:var(--tbl-head-bg);border-bottom:1px solid #e2e8f0;letter-spacing:-.35px;line-height:1.25;white-space:nowrap}
.ed-tbl td{font-size:calc(var(--tbl-head-size) + 1.5px);font-weight:600;letter-spacing:-.35px;line-height:1.25;padding:4px 9px;border-bottom:1px solid var(--tbl-border);vertical-align:middle;word-break:break-word;overflow-wrap:anywhere}
.ed-tbl td:nth-child(1){width:78px;color:#374151;white-space:normal;word-break:keep-all;vertical-align:top;padding-top:6px}
.ed-tbl td:nth-child(2){width:76px;color:#9ca3af;font-size:10px;font-weight:400;background:#fafafa;word-break:break-all}
.ed-tbl td:nth-child(3){color:#111}
.ed-tbl td:nth-child(4){width:90px;color:#9ca3af;font-size:10px;font-weight:400;letter-spacing:-.2px;line-height:1.3}
.ed-tbl .req-badge{display:inline-block;font-size:9px;font-weight:700;background:#fef3c7;color:#92400e;border-radius:3px;padding:0 4px;margin-left:3px;letter-spacing:0;line-height:1.5}
.ed-tbl .opt-badge{display:inline-block;font-size:9px;background:#f3f4f6;color:#9ca3af;border-radius:3px;padding:0 4px;margin-left:3px;letter-spacing:0;line-height:1.5}
.ed-sec-hd{font-size:10px;font-weight:700;color:#e8edf5;padding:4px 10px;background:#1e3a5f;letter-spacing:.1px;line-height:1.3}
.ed-ch-note{font-size:10px;color:#6b7280;padding:7px 10px;background:#fffbeb;border-bottom:1px solid #fde68a;font-style:italic;letter-spacing:-.2px;line-height:1.4}
/* ══ 게시탭 수직 섹션 ══ */
.post-sec{background:#fff;border-radius:7px;border:1px solid #e2e8f0;overflow:hidden}
.post-sec-hd{font-size:11px;font-weight:800;color:#1e3a5f;padding:8px 12px;background:#eef2f8;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:6px}
.post-sec-body{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.post-row{display:flex;align-items:flex-start;gap:8px;min-height:26px}
.post-lbl{font-size:10px;font-weight:700;color:#374151;width:100px;flex-shrink:0;line-height:1.3;white-space:normal;word-break:keep-all;padding-top:4px}
.post-orig{background:#f3f4f6!important;color:#9ca3af!important;font-size:10px!important;cursor:not-allowed}
.post-save-btn{margin-left:auto;font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;border:1px solid #002C5F;background:#002C5F;color:#fff;cursor:pointer;font-family:'Pretendard';display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.post-save-btn:hover{background:#f37021;border-color:#f37021}
.field-tag{font-size:9px;background:#dbeafe;color:#1e3a5f;padding:2px 8px;border-radius:10px;font-weight:600;cursor:pointer}
.img-thumb-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.img-thumb-item{width:48px;height:48px;border-radius:5px;overflow:hidden;border:1px solid #e5e7eb;cursor:pointer;position:relative}
.img-thumb-item img{width:100%;height:100%;object-fit:cover}
.img-thumb-item.main{border:2px solid #002C5F}

/* ══ 진행 상태바 ══ */
.progress-bar{position:fixed;bottom:60px;right:20px;background:#002C5F;color:#fff;padding:10px 16px;border-radius:8px;font-size:11px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:9000;display:none;min-width:220px}
.progress-bar.show{display:block}
.progress-inner{height:4px;background:#f37021;border-radius:2px;transition:width .3s;margin-top:6px}

/* ══ 다크모드 ══ */
@media (prefers-color-scheme: dark){
  :root{
    --tbl-border:     #2d3748;
    --tbl-border-h:   #4a5568;
    --tbl-head-bg:    #1a202c;
    --tbl-head-color: #e2e8f0;
    --tbl-body-color: #e2e8f0;
    --tbl-hover:      #2d3748;
    --tbl-sel-bg:     #1e3a5f;
    --tbl-sel-border: #3b82f6;
    --tbl-even-bg:    #171e2b;
  }
  html,body{color:#e2e8f0;background:#0f1623}
  .g-header{background:#161e2d;border-bottom-color:#f37021}
  .hbtn{background:#1e2a3a;border-color:#2d3a4f;color:#cbd5e1}
  .hbtn:hover{background:#2d3a4f}
  .hbtn.run{background:#1a2535;border-color:#2a3f5f;color:#93c5fd}
  .hbtn.run:hover{background:#1e3a5f;border-color:#3b82f6}
  .panel{background:#0f1623}
  .panel-tabbar{background:#161e2d;border-bottom-color:#2d3748}
  .ptab{background:#1e2a3a;border-color:#2d3748;color:#94a3b8}
  .ptab.active{background:#0f1623;color:#f37021}
  .ptab:hover:not(.active){background:#2d3a4f}
  .panel-toolbar{background:#161e2d;border-bottom-color:#2d3748}
  .tb-sep{background:#2d3748}
  .tbl-wrap{background:#0f1623}
  .data-table tbody tr:nth-child(even){background:#171e2b}
  .ig-card{background:#161e2d;border-color:#2d3748}
  .ig-card:hover{border-color:#3b82f6}
  .ig-name{color:#93c5fd}
  .ig-price{color:#93c5fd}
  .cell-name{color:#93c5fd}
  .cell-price{color:#93c5fd}
  .sidebar{background:#0f1623;border-right-color:#2d3748}
  .sb-sec-hd{background:#1a202c;border-bottom-color:#2d3748}
  .sb-sec-hd:hover{background:#1e2a3a}
  .sb-sec-body{background:#0f1623}
  .sb-item{background:#0f1623;border-bottom-color:#1a202c;color:#e2e8f0}
  .sb-item:hover{background:#1e3a5f}
  .sb-all-row{background:#161e2d;color:#cbd5e1}
  .editor-wrap{background:#0f1623}
  .field-inp{background:#161e2d;border-color:#2d3748;color:#e2e8f0}
  .field-inp:focus{border-color:#3b82f6}
  .field-sel{background:#161e2d;border-color:#2d3748;color:#e2e8f0}
  .post-sec{background:#161e2d;border-color:#2d3748}
  .post-sec-hd{background:#1a202c;color:#93c5fd;border-bottom-color:#2d3748}
  .post-lbl{color:#94a3b8}
  .sub-panel{background:#0a0f1a}
  .sub-row{background:#161e2d;border-color:#2d3748}
  .sub-row:hover{border-color:#3b82f6}
  .sub-row.sub-row-sel{border-color:#f37021;background:#1a1208}
  .card-panel{background:#0a0f1a}
  .cal-box{background:#161e2d;color:#e2e8f0}
  .progress-bar{background:#1e3a5f}
  .toast{background:#1e3a5f}
}

/* ══ 기타 ══ */
.lb-close{position:absolute;top:16px;right:20px;font-size:24px;color:#fff;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border-radius:50%}
.toast{display:none;position:fixed;bottom:20px;right:20px;background:#002C5F;color:#fff;padding:9px 14px;border-radius:8px;font-size:11px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:9999;align-items:center;gap:7px}
.toast.show{display:flex}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9ca3af;padding:30px;text-align:center}
.empty-state i{font-size:34px;color:#e5e7eb}
.cal-overlay{display:none;position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.25)}
.cal-overlay.show{display:flex;align-items:center;justify-content:center}
.cal-box{background:#fff;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:18px 20px;min-width:280px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes collect-pulse{0%,100%{box-shadow:0 0 0 0 rgba(243,112,33,.5)}50%{box-shadow:0 0 0 4px rgba(243,112,33,0)}}

/* ══ 서브이미지 행 패널 ══ */
.sub-panel{flex:1;overflow-y:auto;padding:8px 10px;background:#e8ecf0;display:flex;flex-direction:column;gap:6px}
.sub-panel::-webkit-scrollbar{width:4px}
.sub-panel::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:2px}
.sub-row{background:#fff;border-radius:8px;border:2px solid #cbd5e1;padding:6px 10px;display:flex;align-items:flex-start;gap:8px;cursor:pointer;transition:border-color .12s}
.sub-row:hover{border-color:#002C5F}
.sub-row.sub-row-sel{border-color:#f37021;background:#fff8f3}
.sub-row-check{flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:2px}
.sub-row-imgs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;flex:1;padding-bottom:2px}
.sub-row-imgs::-webkit-scrollbar{height:3px}
.sub-row-imgs::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:2px}


/* ════════════════════════════════════════════════════
   GPT 실행 팝업 v2.0 — 전체화면 모달
   (gm- 접두사로 기존 스타일과 충돌 방지)
════════════════════════════════════════════════════ */
.gm-overlay{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:10px}
.gm-modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.15);width:1100px;max-width:98vw;height:92vh;max-height:900px;display:flex;flex-direction:column;overflow:hidden;animation:gm-in .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes gm-in{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── 헤더 ── */
.gm-header{padding:13px 18px;background:linear-gradient(135deg,#0d1b2a,#1e3a5f);display:flex;align-items:center;gap:10px;flex-shrink:0}
.gm-header-title{font-size:var(--popup-title-size);font-weight:900;color:#fff;letter-spacing:-.3px}
.gm-header-badge{font-size:9px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.15);padding:2px 8px;border-radius:10px;margin-left:4px}
.gm-header-count{display:flex;align-items:center;gap:4px;background:#10a37f;color:#fff;padding:3px 10px;border-radius:20px;font-size:var(--popup-body-size);font-weight:800;margin-left:6px}
.gm-btn-close{margin-left:auto;border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.gm-btn-close:hover{background:rgba(255,255,255,.3)}

/* ── 바디 레이아웃 ── */
.gm-body{flex:1;display:flex;overflow:hidden}

/* ── 좌측 패널 ── */
.gm-left{width:310px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #e2e8f0;overflow-y:auto;background:#fff}
.gm-sec-hd{padding:6px 12px;font-size:10.5px;font-weight:800;display:flex;align-items:center;gap:5px;flex-shrink:0}
.gm-sec-hd--dark{background:#1e3a5f;color:#e8edf5}
.gm-sec-hd--gray{background:#374151;color:#e5e7eb}
.gm-sec-bd{padding:6px 12px;border-bottom:.5px solid #e2e8f0}
.gm-channel-item{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1.5px solid #10a37f;background:#f0fdf4;border-radius:6px;font-size:10.5px;font-weight:700;cursor:pointer}
.gm-channel-active{font-size:9px;color:#10a37f;margin-left:auto}
.gm-radio-group{display:flex;gap:6px}
.gm-radio-label{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 8px;border:1.5px solid #e2e8f0;background:#f9fafb;border-radius:6px;cursor:pointer;font-size:10px;font-weight:700;transition:all .15s}
.gm-radio-active{border-color:#10a37f!important;background:#f0fdf4!important;color:#065f46}
.gm-speed-badge{font-size:8.5px;color:#10a37f}
.gm-speed-badge--slow{color:#6b7280}
.gm-mini-btn{margin-left:auto;padding:1px 7px;border:1px solid rgba(255,255,255,.35);border-radius:3px;background:rgba(255,255,255,.12);color:#fff;font-size:9px;cursor:pointer}
.gm-mini-btn+.gm-mini-btn{margin-left:3px}

/* ── 상품 테이블 ── */
.gm-prod-table{width:100%;border-collapse:collapse;font-size:10.5px;table-layout:fixed}
.gm-prod-table th{padding:5px 8px;text-align:left;font-weight:500;color:#64748b;background:#f8fafc;border-bottom:.5px solid #e2e8f0}
.gm-prod-table td{padding:5px 8px;border-bottom:.5px solid #f1f5f9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 진행상황 ── */
.gm-progress-wrap{background:#f0fdf4;border-top:.5px solid #a7f3d0;padding:8px 12px}
.gm-bar-bg{background:#e5e7eb;border-radius:999px;height:6px;overflow:hidden;margin:5px 0}
.gm-bar-fill{height:100%;background:#10a37f;border-radius:999px;transition:width .4s ease}
.gm-step-log{max-height:70px;overflow-y:auto;background:#fff;border-radius:4px;border:1px solid #d1fae5;padding:4px 7px;font-size:9.5px;color:#065f46;line-height:1.6}
.gm-principle{padding:7px 12px;font-size:9.5px;color:#6b7280;background:#fffbeb;border-top:.5px solid #fde68a;line-height:1.5;flex-shrink:0;margin-top:auto}

/* ── 우측 패널 ── */
.gm-right{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f8fafc}
.gm-src-panel{flex:1;display:flex;flex-direction:column;border-bottom:1px solid #e2e8f0;min-height:0}
.gm-src-hd{padding:6px 12px;background:#1e3a5f;color:#e8edf5;display:flex;align-items:center;gap:6px;flex-shrink:0}
.gm-dst-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.gm-dst-hd{padding:6px 12px;background:#10a37f;color:#fff;display:flex;align-items:center;gap:6px;flex-shrink:0}

/* ── 탭 그룹 ── */
.gm-tab-group{display:flex;border:.5px solid rgba(255,255,255,.3);border-radius:4px;overflow:hidden;margin-left:auto}
.gm-tab-btn{padding:2px 10px;border:none;font-size:9px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.gm-tab-btn--active-blue{background:rgba(255,255,255,.92);color:#1e3a5f}
.gm-tab-btn--active-green{background:rgba(255,255,255,.92);color:#10a37f}
.gm-tab-btn--inactive{background:transparent;color:rgba(255,255,255,.75)}

/* ── 미리보기 콘텐츠 (좌우 여백 없이, 수직 스크롤) ── */
.gm-preview-content{flex:1;overflow-y:auto;padding:0}
.gm-preview-content::-webkit-scrollbar{width:4px}
.gm-preview-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}

/* ── 알리 미리보기 ── */
.gm-ali-mobile,.gm-ali-pc{width:100%;background:#fff}
.gm-ali-topbar{background:#FF6A00;color:#fff;padding:8px 12px;font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px}
.gm-ali-img-wrap{width:100%;aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* ── 스마트스토어 미리보기 ── */
.gm-ss-page,.gm-ss-mobile{width:100%;background:#fff;font-family:inherit}
.gm-ss-nav{background:#002C5F;padding:8px 14px;display:flex;align-items:center;gap:10px}
.gm-ss-logo{color:#fff;font-size:12px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
.gm-ss-search{flex:1;max-width:300px;margin-left:10px;background:rgba(255,255,255,.15);border-radius:4px;padding:4px 10px;font-size:10px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px;overflow:hidden}
.gm-ss-mob-topbar{background:#002C5F;padding:10px 14px;display:flex;align-items:center;gap:8px}

/* ── 푸터 ── */
.gm-footer{padding:9px 16px;border-top:.5px solid #e2e8f0;background:#fff;display:flex;align-items:center;gap:8px;flex-shrink:0}
.gm-footer-info{font-size:var(--popup-body-size);color:#9ca3af;flex:1}
.gm-btn-cancel{padding:var(--popup-btn-pad);border:.5px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;font-size:var(--popup-btn-size);cursor:pointer;font-family:inherit}
.gm-btn-run{padding:var(--popup-btn-pad);border:none;border-radius:6px;background:#10a37f;color:#fff;font-size:var(--popup-btn-size);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;transition:background .15s}
.gm-btn-run:hover{background:#0d8f6f}
.gm-btn-apply{padding:var(--popup-btn-pad);border:none;border-radius:6px;background:#e5e7eb;color:#9ca3af;font-size:var(--popup-btn-size);font-weight:700;cursor:not-allowed;display:flex;align-items:center;gap:5px;font-family:inherit}
.gm-btn-apply.active{background:#002C5F;color:#fff;cursor:pointer}

/* ════════════════════════════════════════════════════
   게시 확인 팝업 — 스크롤 보장
   #postConfirmModal 미리보기 탭 좌우 여백 없이 수직 스크롤
════════════════════════════════════════════════════ */
#postConfirmModal {
  align-items: center;
  justify-content: center;
}
/* 모달 내부 컨테이너 */
#postConfirmModal > div {
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* 바디 (비교 테이블 + 미리보기 영역 포함) */
#postConfirmModal > div > div[style*="flex:1"],
#postConfirmModal > div > div[style*="flex: 1"] {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
/* 미리보기 탭 패널 — 좌우 여백 없이, 수직 스크롤 */
#postPreviewPc,
#postPreviewMobile,
#postPreviewDetail {
  overflow-y: auto !important;
  padding: 0 !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}
/* 미리보기 탭 카드 컨테이너 */
#postPreviewPc::-webkit-scrollbar,
#postPreviewMobile::-webkit-scrollbar,
#postPreviewDetail::-webkit-scrollbar {
  width: 5px;
}
#postPreviewPc::-webkit-scrollbar-thumb,
#postPreviewMobile::-webkit-scrollbar-thumb,
#postPreviewDetail::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

/* ══ AI 조건 탭 ══ */
#postPreviewPc + .pcm-tab-label { content: 'PC버전'; }
/* AI 조건 탭 테이블 */
[id$="-post-ai-cond"] .panel-toolbar {
  flex-wrap: wrap;
  gap: 4px;
  min-height: 36px;
  height: auto;
}
[id$="-ai-cond-tbl"] {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 10.5px;
}
[id$="-ai-cond-tbl"] th {
  position: sticky;
  top: 0;
  z-index: 10;
  font-weight: 700;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.2);
  border-bottom: 2px solid rgba(255,255,255,.3);
}
[id$="-ai-cond-tbl"] td {
  vertical-align: middle;
  border-bottom: .5px solid #e8f0f8;
}
[id$="-ai-cond-tbl"] tr:hover td {
  background: #f0fdf9 !important;
}
/* AI 모델 드롭다운 */
[id$="-ai-model-menu"] label:hover {
  background: #f0fdf4;
}
/* PC버전 / 모바일 버전 서브탭 */

/* ══ SKU 옵션 매칭 탭 ══ */
#sku-option-standard-wrap .data-table th,
[id$="-admin-sku_option_standard"] .data-table th {
  background: #1e3a5f;
  color: #e8edf5;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
}
[id$="-admin-sku_option_standard"] .data-table td {
  padding: 5px 10px;
  font-size: 10px;
  border-bottom: .5px solid #e8f0f8;
  vertical-align: middle;
}
[id$="-admin-sku_option_standard"] .data-table tr:hover td {
  background: #eff6ff !important;
}

/* 게시 결과값 미리보기 — 테이블.필드 칼럼은 JS(_renderDetailTable hideField=true)로 처리 */

/* ── 전체현황 (overview) 전용 ── */
.ov-wrap {
  flex: 1; min-height: 0;
  padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px;
  background: #f0f2f5; overflow: hidden;
}
.ov-top-row {
  display: flex; gap: 8px; flex-shrink: 0;
}
.ov-top-row .ov-section {
  flex: 1; min-width: 0;
}
.ov-section-scroll {
  overflow-y: auto;
}
.ov-bottom-row {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.ov-section {
  background: #fff;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
}
/* 섹션 타이틀 — 배지 박스 스타일 (배경 없음, 배지만) */
.ov-section-hdr {
  padding: 8px 12px 0 12px;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
}
.ov-sec-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #065f46; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 4px;
  letter-spacing: -.2px; white-space: nowrap;
}
.ov-sec-divider {
  height: 1px; background: #e2e8f0; margin: 6px 0 0 0;
}
/* overview 공통 테이블 */
.ov-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.ov-table thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--tbl-head-bg);
  box-shadow: inset 0 -1px 0 var(--tbl-border-h);
  font-weight: 700; color: #111;
  text-align: center; white-space: nowrap;
}
.ov-table thead th.ov-th-left { text-align: left; }
.ov-table tbody td {
  border-bottom: 1px solid var(--tbl-border);
  font-weight: 600; color: #111;
  vertical-align: middle; text-align: center;
}
.ov-table tbody td.ov-td-left { text-align: left; }
.ov-table tbody tr:nth-child(even) { background: var(--tbl-even-bg); }
.ov-table tbody tr:hover { background: var(--tbl-hover) !important; }
.ov-table tbody tr.ov-row-total { font-weight: 800; background: #f0f4ff; }

/* 기간별 현황 — 14px, 가운데 정렬, 여유 패딩 */
.ov-matrix-tbl thead th {
  font-size: 14px; padding: 8px 16px; text-align: center;
}
.ov-matrix-tbl tbody td {
  font-size: 14px; padding: 8px 16px; text-align: center;
  letter-spacing: -.3px;
}
.ov-matrix-tbl tbody td.ov-td-left { text-align: center; } /* 기간열도 가운데 */

/* 주문 미매칭 — 패딩 축소, letter-spacing 강화 */
.ov-unmatched-tbl thead th {
  font-size: 11px; padding: 4px 4px; letter-spacing: -.5px;
}
.ov-unmatched-tbl tbody td {
  font-size: 11px; padding: 4px 4px; letter-spacing: -.5px;
}

/* 재고 소진 — 템플릿 폭에 맞춤 */
.ov-stock-tbl thead th {
  font-size: 11px; padding: 4px 6px; letter-spacing: -.4px;
}
.ov-stock-tbl tbody td {
  font-size: 11px; padding: 4px 6px; letter-spacing: -.4px;
}

/* ══════════════════════════════════════════════════════════════
   패널 컨테이너 쿼리 — 뷰포트가 아닌 패널 폭 기준
   분할 패널에서도 정확히 동작 (2분할·3분할 모두 대응)
   .panel { container-type/name } 은 위 191번 줄에 선언됨
   ══════════════════════════════════════════════════════════════ */

/* ── 탭바 공통 ── */
.panel-tabbar {
  -webkit-overflow-scrolling: touch;
  min-height: 28px;
}

/* ── 탭바·툴바: 패널 600px 이하 ── */
@container panel (max-width: 600px) {
  .ptab { padding: 2px 6px; }
  [id^=maintabbar] .ptab.active { padding-bottom: 3px; }
  .panel-toolbar { gap: 3px; padding: 2px 5px; min-height: 28px; }
  .tb-sep { height: 12px; }
}

/* ── 이미지카드 (수집·관심·AI·게시 공통): 패널 800px 이하 ── */
@container panel (max-width: 800px) {
  .ig-main-img, .ig-main-ph { height: 130px; }
  .ig-name { font-size: 9.5px; }
  .ig-price { font-size: 10px; }
  .ig-info { padding: 6px 7px 7px; gap: 2px; }
  .ig-sub-img { width: 32px; height: 32px; }
  .ig-subs { gap: 3px; padding: 4px 6px 0; }
}
@container panel (max-width: 480px) {
  .ig-main-img, .ig-main-ph { height: 100px; }
  .ig-name { font-size: 8.5px; }
  .ig-price { font-size: 9.5px; }
  .ig-meta { font-size: 8px; }
  .ig-sub-img { width: 26px; height: 26px; }
  .ig-info { padding: 4px 6px 6px; }
}

/* ── 상세정보 DB 행 (수집·관심 공통): 패널 600px 이하 세로 배치 ── */
@container panel (max-width: 600px) {
  [id$="-db-info"] > div { flex-wrap: wrap; }
  [id$="-db-info"] > div > span:first-child { width: auto !important; min-width: 70px; }
}

/* ══ AI탭 반응형 ══ */
/* AI 쿼리탭 — 입력행 항상 wrap 허용 */
[id$="-ai-query"] > div[style*="flex-shrink:0"] { flex-wrap: wrap; }
[id$="-ai-query"] > div[style*="flex-shrink:0"] textarea { min-width: 0; }

@container panel (max-width: 600px) {
  [id$="-ai-query"] .panel-toolbar select { max-width: 120px; font-size: 9px; }
  [id$="-aq-tbl"] td { font-size: 9px !important; padding: 4px 5px !important; }
}
/* AI 조건 탭: 패널 800px 이하 */
@container panel (max-width: 800px) {
  [id$="-post-ai-cond"] .panel-toolbar { row-gap: 3px; }
  [id$="-ai-cond-tbl"] th, [id$="-ai-cond-tbl"] td { padding: 4px 6px; font-size: 9px; }
}

/* ══ 게시탭 반응형 ══ */
/* PC버전 미리보기 — 이미지+정보 세로 배치: 패널 750px 이하 */
@container panel (max-width: 750px) {
  [id$="-post-webpage"] [style*="display:flex;gap:14px"] { flex-wrap: wrap; }
  [id$="-post-webpage"] [style*="width:200px;flex-shrink:0"] {
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto 10px;
  }
}
/* 모바일 미리보기 탭 — 패널 440px 이하에서 폰 프레임 100% */
@container panel (max-width: 440px) {
  [id$="-post-mobile"] [style*="width:390px"] { width: 100% !important; max-width: 390px; }
}
/* 게시 비교 테이블: 패널 600px 이하 */
@container panel (max-width: 600px) {
  [id$="-post-compare-tbl"] th, [id$="-map-compare-tbl"] th,
  [id$="-post-compare-tbl"] td, [id$="-map-compare-tbl"] td {
    font-size: 8px !important;
    padding: 2px 3px !important;
  }
}
/* 에디터 (채널탭·ed-tbl·post-sec): 패널 600px 이하 */
@container panel (max-width: 600px) {
  .editor-ch-tab { font-size: 10px; padding: 4px 10px; }
  .ed-tbl th, .ed-tbl td { font-size: 9px; padding: 3px 6px; }
  .ed-tbl td:nth-child(1) { width: 60px; }
  .ed-tbl td:nth-child(2) { width: 58px; }
  .ed-tbl td:nth-child(4) { width: 70px; }
  .post-sec-hd { font-size: 10px; padding: 6px 10px; }
  .post-sec-body { padding: 7px 9px; gap: 5px; }
  .post-lbl { width: 80px; font-size: 9px; }
  .post-row { gap: 5px; min-height: 22px; }
}

/* ══ 주문탭 반응형 ══ */
/* 주문매칭 툴바 다중 행 — 패널 650px 이하에서 wrap 허용 */
@container panel (max-width: 650px) {
  [id$="-om-order_match"] .panel-toolbar > div,
  [id$="-om-delivery_match"] .panel-toolbar > div { flex-wrap: wrap; }
}
/* 판매·구매 상세/배송 툴바: 패널 550px 이하 */
@container panel (max-width: 550px) {
  [id$="-sales-detail"] .panel-toolbar,
  [id$="-sales-delivery"] .panel-toolbar,
  [id$="-purchase-detail"] .panel-toolbar,
  [id$="-purchase-delivery"] .panel-toolbar { flex-wrap: wrap; row-gap: 3px; }
}

/* ══ 관리탭 반응형 ══ */
/* 전체현황 KPI 4열 → 2열 → 1열 */
@container panel (max-width: 650px) {
  [id$="-ov-kpi"] { grid-template-columns: repeat(2,1fr) !important; }
}
@container panel (max-width: 380px) {
  [id$="-ov-kpi"] { grid-template-columns: 1fr !important; }
}
/* 전체현황 구매/판매 2열 → 1열 */
@container panel (max-width: 550px) {
  [id$="-admin-overview"] [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
/* 게시현황 스탯 카드 3열 → 2열 → 1열 */
@container panel (max-width: 550px) {
  [id$="-post-status"] [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@container panel (max-width: 380px) {
  [id$="-post-status"] [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
/* 게시현황 채널탭 버튼: 패널 480px 이하 컴팩트 */
@container panel (max-width: 480px) {
  [id$="-pstab-smart"], [id$="-pstab-web"], [id$="-pstab-mobile"] {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
}
/* 시스템 설정 탭 post-row — 패널 600px 이하 세로 배치 */
@container panel (max-width: 600px) {
  [id$="-admin-settings"] .post-row { flex-wrap: wrap; }
  [id$="-admin-settings"] .post-lbl { width: 100%; padding-bottom: 2px; }
}

/* ══ 라이트박스 (쇼츠 스타일) ══ */
#lightbox{display:none;position:fixed;inset:0;z-index:20000;background:#000;align-items:center;justify-content:center}
#lightbox.show{display:flex}

#lb-card{position:relative;height:100dvh;width:100%;max-width:480px;display:flex;flex-direction:column;overflow:hidden}

/* 상단 헤더 */
#lb-header{position:absolute;top:0;left:0;right:0;z-index:10;padding:14px 14px 28px;display:flex;align-items:center;gap:8px;background:linear-gradient(to bottom,rgba(0,0,0,.75) 0%,transparent 100%);pointer-events:none}
#lb-ch-badge{font-size:9px;font-weight:800;padding:2px 8px;border-radius:4px;flex-shrink:0;pointer-events:auto}
#lb-counter{flex:1;color:rgba(255,255,255,.7);font-size:10px;font-weight:600;letter-spacing:.3px}
#lb-menu-btn{pointer-events:auto;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lb-icon-btn{pointer-events:auto;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* 점3개 드롭다운 */
#lb-menu-dropdown{display:none;position:absolute;top:54px;right:14px;z-index:20;background:rgba(30,30,30,.97);border:1px solid rgba(255,255,255,.12);border-radius:10px;min-width:160px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.lb-menu-item{padding:11px 16px;color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.lb-menu-item:last-child{border-bottom:none}
.lb-menu-item:hover{background:rgba(255,255,255,.08)}
.lb-menu-item i{font-size:14px;opacity:.7}

/* 상하 힌트 */
#lb-up-hint,#lb-down-hint{position:absolute;left:0;right:0;z-index:5;padding:6px 0 16px;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s}
#lb-up-hint{top:56px}
#lb-down-hint{bottom:160px}
.lb-hint-pill{color:rgba(255,255,255,.7);font-size:11px;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.3);padding:3px 10px;border-radius:20px}

/* 메인 이미지 */
#lbImg{width:100%;height:100%;object-fit:contain;flex-shrink:0;display:block}

/* 좌우 네비 버튼 */
#lb-prev,#lb-next{position:absolute;top:45%;transform:translateY(-50%);z-index:6;background:rgba(0,0,0,.3);color:#fff;border:none;width:32px;height:56px;font-size:18px;cursor:pointer;display:none;align-items:center;justify-content:center}
#lb-prev{left:0;border-radius:0 6px 6px 0}
#lb-next{right:0;border-radius:6px 0 0 6px}

/* 도트 인디케이터 */
#lb-dots{position:absolute;right:10px;top:45%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:5px;pointer-events:none}

/* 우측 세로 액션 버튼 */
#lb-side-actions{position:absolute;right:12px;bottom:220px;z-index:9;display:none;flex-direction:column;align-items:center;gap:14px}
.lb-action-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.lb-action-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.2);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.lb-action-btn.post{background:rgba(243,112,33,.85);border-color:rgba(243,112,33,.5);font-size:18px}
.lb-action-label{color:rgba(255,255,255,.65);font-size:9px;font-weight:600}

/* 하단 정보 오버레이 */
#lb-info{position:absolute;bottom:0;left:0;right:0;z-index:8;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 65%,transparent 100%);padding:40px 14px 0;color:#f1f5f9;display:none}
#lb-prod-name{font-size:13px;font-weight:700;color:#fff;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:56px}
#lb-price-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#lb-buy-price{font-size:11px;color:rgba(255,255,255,.5)}
#lb-ship-price{font-size:10px;color:rgba(255,255,255,.4)}
#lb-sell-price{font-size:18px;font-weight:900;color:#f87171;margin-left:auto}
#lb-sell-label{font-size:8px;color:rgba(255,255,255,.45);align-self:flex-end;padding-bottom:2px}

/* 썸네일 스트립 */
#lb-thumbs{display:flex;gap:5px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none}
#lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumb{width:48px;height:48px;object-fit:cover;border-radius:5px;cursor:pointer;border:2px solid transparent;opacity:.55;flex-shrink:0;transition:all .15s}
.lb-thumb.active{border-color:#fff;opacity:1}

/* 하단 탭바 */
#lb-tabbar{display:none;border-top:1px solid rgba(255,255,255,.1);padding:8px 0 max(8px,env(safe-area-inset-bottom));gap:0}
.lb-tab-btn{flex:1;background:none;border:none;color:rgba(255,255,255,.5);font-size:9.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;font-family:'Pretendard'}
.lb-tab-btn i{font-size:18px}
.lb-tab-btn:hover{color:rgba(255,255,255,.85)}

/* ══ AI 마스터 테이블 ══ */
.ai-wrap{flex:1;overflow-y:auto;background:#f2f2f7;border-bottom:1px solid #e5e7eb;flex-shrink:0}
.ai-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);margin:0 10px 10px}
.ai-row{display:flex;align-items:center;padding:10px 18px;border-top:1px solid #f0f0f5}
.ai-row:first-child{border-top:none}
.ai-row-img{min-height:80px}
.ai-label{width:44px;font-size:11px;font-weight:600;color:#002C5F;letter-spacing:-.4px;flex-shrink:0;text-align:center;word-break:keep-all;overflow-wrap:break-word;padding:0 2px}
.ai-cell{flex:1;font-size:13px;color:#111;letter-spacing:-.4px;text-align:center;padding:0 15px;word-break:break-all;white-space:pre-wrap}
.ai-cell-img{flex:1;text-align:center;padding:0 15px;word-break:break-all}
.ai-cell-result{font-weight:700;color:#065f46}
.ai-prompt-input{flex:1;min-height:20px;font-size:12px;color:#111;letter-spacing:-.3px;outline:none;padding:4px 8px;line-height:1.5;border-radius:4px;border:none;background:transparent;text-align:center;font-family:inherit;display:block;width:100%}
.ai-prompt-input:focus{background:#f0f4ff}
.ai-prompt-input::placeholder{text-align:center}
/* 툴바 텍스트 */
.ai-tb-label{font-size:11px;color:#111;font-weight:600}
.ai-tb-prod{font-size:11px;color:#111;font-weight:600;max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ai-tb-model{font-size:11px;color:#f37021;font-weight:600}
/* 상품/모델 정보바 */
.ai-info-bar{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;flex-shrink:0}
/* 실행 버튼 */
.ai-btn-text{width:52px;border:1px solid #0ea5e9!important;background:#f0f9ff!important;color:#0369a1!important}
.ai-btn-image{border:1px solid #7c3aed!important;background:#f5f3ff!important;color:#7c3aed!important}
.ai-btn-all{width:52px;background:#002C5F!important;color:#fff!important;border:2px solid #002C5F!important;animation:aePulse 1.5s ease-in-out infinite}
/* 공통 지시사항 영역 */
.ai-common-instr{padding:10px 18px;border-bottom:1px solid #f0f0f5}
.ai-common-instr-label{font-size:11px;font-weight:600;color:#002C5F;letter-spacing:-.4px;margin-bottom:4px}
.ai-common-instr-opt{font-weight:400;color:#8e8e93}
.ai-common-instr-input{width:100%;min-height:32px;font-size:12px;color:#111;letter-spacing:-.3px;outline:none;padding:2px 0;line-height:1.6;border:none;border-bottom:1px solid transparent;resize:vertical;background:transparent;font-family:inherit;transition:border-color .15s}
.ai-common-instr-input:focus{border-bottom-color:#002C5F}

/* AI실행/결과 항목 테이블 — 두 탭 공유 마스터 (테이블이라 컬럼·행 자동 정렬, 행높이 CSS 고정) */
.ai-field-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.ai-field-tbl col.aicol-label{width:62px}
.ai-field-tbl tr{height:52px}
.ai-field-tbl tr.air-img{height:80px}
.ai-field-tbl tr.air-imgs{height:200px}
.ai-field-tbl td{border-top:1px solid #f0f0f5;padding:6px 8px;vertical-align:middle;box-sizing:border-box}
.ai-field-tbl tr:first-child td{border-top:none}
.ai-field-tbl .aic-label{font-size:12px;font-weight:600;color:#002C5F;text-align:center;word-break:keep-all;letter-spacing:-.4px}
.ai-field-tbl .aic-base{font-size:12px;color:#111;text-align:center;white-space:normal;word-break:break-word;letter-spacing:-.4px}
.ai-field-tbl .aic-result{font-weight:700;color:#065f46}
.ai-field-tbl .aic-second{text-align:center}
.ai-field-tbl .aic-instr{width:100%;font-size:12px;color:#111;outline:none;padding:4px 8px;border:none;border-radius:4px;background:transparent;text-align:center;font-family:inherit;box-sizing:border-box;letter-spacing:-.3px;resize:none;overflow:hidden;line-height:1.4;min-height:24px;display:block}
/* 2026-10-22 — AI실행/결과탭 언어별 칸: 이 클래스들(ai-lang-hdr·ai-hdr-lang·ai-lang-cols·aic-result-cell)은
   JS 가 만들기만 하고 CSS 가 없어서 언어 칸이 세로로 쌓이고 머리글이 'KOEN' 으로 붙었다.
   · 언어 칸을 나란히(flex) · 입력/결과 칸에 안쪽 테두리(다른 탭 입력칸과 같은 #e5e7eb / 다크 #2d3748)
   · 지시문 칸은 내용 길이만큼 자란다(field-sizing:content). 구 브라우저는 기존 JS 자동높이 그대로. */
.ai-field-tbl .ai-lang-hdr{display:flex;gap:6px}
.ai-field-tbl .ai-hdr-lang{flex:1 1 0;min-width:0;text-align:center}
.ai-field-tbl .ai-lang-cols{display:flex;gap:6px;align-items:stretch}
.ai-field-tbl .ai-lang-cols>*{flex:1 1 0;min-width:0}
.ai-field-tbl .aic-instr,.ai-field-tbl .aic-result-cell{border:1px solid #e5e7eb;border-radius:5px;box-sizing:border-box}
.ai-field-tbl .aic-instr:focus{border-color:#3b82f6}
.ai-field-tbl .aic-result-cell{min-height:28px;padding:4px 8px;font-size:12px;color:#111;line-height:1.4;text-align:center;white-space:pre-wrap;word-break:break-word}
@supports (field-sizing:content){
  .ai-field-tbl .aic-instr{field-sizing:content;height:auto!important;min-height:28px}
}
@media (prefers-color-scheme: dark){
  .ai-field-tbl .aic-instr,.ai-field-tbl .aic-result-cell{border-color:#2d3748;color:#e2e8f0}
  .ai-field-tbl .aic-instr:focus{border-color:#3b82f6}
}

/* ═══════ NuriWatch: int_layout 테이블 형식 (전체/종목별 뉴스 동일) ═══════ */
#newsTableMain{width:100%;border-collapse:collapse;table-layout:fixed}
#newsTableMain thead th{position:sticky;top:0;z-index:50;background:#f0f2f5;box-shadow:inset 0 -2px 0 #ccc;padding:6px 4px;font-size:11px;color:#000;text-align:center;white-space:normal;cursor:pointer;font-weight:700}
#newsTableMain thead th:hover{background:#e5e7eb}
#newsTableMain tbody td{border-bottom:1px solid #eee;vertical-align:middle;color:#111;letter-spacing:-0.5px;text-align:center;font-size:11px;font-weight:600;padding:2px 6px;line-height:1.25}
#newsTableMain tbody tr{background:transparent}
#newsTableMain tbody tr:hover{background:#f6f9fc}
.col-check{width:25px;padding:0;text-align:center}
.col-check input{width:14px;height:14px;cursor:pointer;accent-color:#002C5F}
.col-stock{width:90px}
.col-stock-bold{font-weight:bold;color:#000;cursor:pointer;white-space:normal;word-break:keep-all;font-size:11px;line-height:1.2}
.col-stock-bold:hover{text-decoration:underline}
.col-asset-info{width:50px;font-weight:600;color:#333}
.col-title{width:auto;min-width:120px}
td.col-title{text-align:left!important;padding-left:10px;font-weight:600;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
th.col-title{word-break:keep-all}
.col-title a{color:inherit;text-decoration:none;line-height:1.25}
.col-title a:hover{color:#f37021;text-decoration:underline}
.col-channel{width:34px;font-weight:600}
.col-media{width:120px;font-weight:600}
.col-date{width:85px;font-weight:600}
.col-fund{width:220px;line-height:1.1;padding:5px 4px!important;word-break:break-all;font-size:10px!important;text-align:center;white-space:normal;font-weight:600}
/* 분할 등으로 패널이 좁아지면 저우선 열을 순서대로 접어 제목 열 폭을 확보 (제목·종목·게시일은 유지) */
@container panel (max-width: 860px){ #newsTableMain .col-fund{display:none} }
@container panel (max-width: 640px){ #newsTableMain .col-media{display:none} }
@container panel (max-width: 520px){ #newsTableMain .col-asset-info{display:none} }
@container panel (max-width: 430px){ #newsTableMain .col-channel{display:none} }
.fund-link-btn{color:#002C5F;text-decoration:none;cursor:pointer;font-size:10px}
.fund-link-btn:hover{text-decoration:underline;color:#f37021}
.asset-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px}
.asset-tag.채권{background:#eaf0fe;color:#2f6df0}.asset-tag.주식{background:#eafaf0;color:#1aa260}
.asset-tag.PE{background:#fdf2e6;color:#d9822b}.asset-tag.VC{background:#f3ecfd;color:#8a52d6}
.watch-badge{background:#002C5F;color:#fff;font-size:8px;padding:1px 5px;border-radius:3px}
.nw-riskdot2{display:inline-block;width:6px;height:6px;border-radius:50%;background:#dc2626;margin-right:4px}

/* 패널분할 레이아웃 버튼 */
.layout-btn{font-size:9.5px;font-weight:600;padding:3px 7px;border:1px solid #e5e7eb;background:#fff;border-radius:4px;cursor:pointer}
.layout-btn.active{background:#002C5F;color:#fff;border-color:#002C5F}
.tb-sep{width:1px;height:18px;background:#e5e7eb;margin:0 4px}

/* 사이드바 토글 라디오/체크 행 */
.sb-filter-row{display:block;padding:2px 0;cursor:pointer;font-size:11px;color:#374151}
.sb-filter-row:hover{color:#002C5F}
.sb-all-row{padding:3px 12px;border-bottom:1px solid #e2e8f0;font-size:11px;font-weight:600;background:#f8fafd}

/* 사이드바 선택 강조 (누리다온 톤) */
.sb-item.active{background:#dbeafe;font-weight:700;color:#002C5F}
#accountFilters .sb-item, #fundFilters .sb-item{padding-left:18px}

/* ═══════ 설정 탭 (iOS 스타일) ═══════ */
.set-wrap{padding:14px;max-width:100%;width:100%;box-sizing:border-box}
.set-group{background:#fff;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:14px;overflow:hidden}
.set-gh{background:#f6f8fb;padding:8px 14px;font-size:11px;font-weight:700;color:#6b7280;border-bottom:1px solid #eef2f8;letter-spacing:.02em}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #f2f4f7;font-size:12px}
.set-row:last-child{border-bottom:none}
.set-row small{color:#9ca3af}
/*  API 키 줄 — 넣는 칸과 `어디서 오는가` 를 한 줄에.
    출처가 `.env` 로 떠 있으면, 설정탭에 넣은 값이 안 먹고 있다는 뜻이다.  */
.set-row.set-key{gap:8px;justify-content:flex-start;flex-wrap:wrap}
.set-row.set-key>span{flex:0 0 118px;color:#374151}
.set-row.set-key .key-in{flex:1 1 160px;min-width:0;padding:5px 8px;font-size:12px;
  border:1px solid #d1d5db;border-radius:6px;background:#fff}
.set-row.set-key .key-in:focus{outline:none;border-color:#2563eb}
.set-row.set-key .key-save{flex:0 0 auto;padding:5px 11px;font-size:12px;cursor:pointer;
  border:1px solid #d1d5db;border-radius:6px;background:#f9fafb}
.set-row.set-key .key-save:hover{background:#f3f4f6}
.set-row.set-key>b{flex:0 0 auto;font-size:11px;font-weight:600}
.set-row.set-key .key-warn{flex:1 1 100%;font-style:normal;font-size:11px;color:#b45309}

.set-row b.ok{color:#1aa260;font-size:11px}
.set-row b.no{color:#dc2626;font-size:11px}
.set-field{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #f2f4f7}
.set-field:last-child{border-bottom:none}
.set-field label{font-size:12px;color:#374151;min-width:90px;flex-shrink:0}
.set-field input,.set-field select{flex:1;border:1px solid #e2e8f0;border-radius:6px;padding:6px 9px;font-size:12px;font-family:inherit;outline:none}
.set-field input:focus,.set-field select:focus{border-color:#002C5F}
.set-hint{padding:8px 14px;font-size:10.5px;color:#9ca3af;line-height:1.5}
.set-hint code{background:#f0f2f5;padding:1px 5px;border-radius:4px;color:#002C5F}
/* iOS 토글 스위치 */
.sw{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;cursor:pointer}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;background:#d1d5db;border-radius:99px;transition:.2s}
.sw i::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + i{background:#002C5F}
.sw input:checked + i::before{transform:translateX(16px)}
.set-save{width:100%;padding:12px;background:#002C5F;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.set-save:hover{background:#003a7a}
.set-save:disabled{opacity:.6}


/* ═══════ 키워드 칩 에디터 ═══════ */
.kw-block{margin-bottom:0}
.kw-label{font-size:11px;font-weight:700;color:#374151;margin-bottom:5px}
.kw-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:7px;border:1px solid #e2e8f0;border-radius:8px;background:#fbfcfe;min-height:34px}
.kw-chip{display:inline-flex;align-items:center;gap:4px;background:#eef2fb;color:#002C5F;font-size:11px;font-weight:600;padding:3px 6px 3px 9px;border-radius:99px}
.kw-chip b{cursor:pointer;color:#94a3b8;font-weight:700;font-size:12px;line-height:1}
.kw-chip b:hover{color:#dc2626}
.kw-add{border:none;outline:none;background:transparent;font-size:11px;font-family:inherit;min-width:70px;flex:1;padding:2px 4px}

/* ═══════ 관심(하트) + 출처 배지 ═══════ */
.col-scrap{width:54px;text-align:center}
.heart{cursor:pointer;font-size:15px;color:#cbd5e1;user-select:none;transition:transform .1s}
.heart.on{color:#e0245e}
.heart:hover{transform:scale(1.2)}
.src-badge{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:3px;font-size:9px;font-weight:700;color:#fff;vertical-align:middle}
.src-n{background:#03c75a}   /* 네이버 그린 */
.src-g{background:#4285f4}   /* 구글 블루 */

/* 언론사 매핑 에디터 */
.press-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.press-row input{flex:1;border:1px solid #e2e8f0;border-radius:5px;padding:5px 8px;font-size:11px;font-family:inherit;outline:none;min-width:0}
.press-row .press-dom{flex:1.2}
.press-row span{color:#94a3b8;font-size:11px}
.press-row b{cursor:pointer;color:#cbd5e1;font-weight:700;padding:0 4px}
.press-row b:hover{color:#dc2626}
.press-add-btn{background:#eef2fb;color:#002C5F;border:none;border-radius:6px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.press-add-btn:hover{background:#dde6f5}


/* 채널 태그 (네이버/구글) */
.chan-tag{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:3px;font-size:10px;font-weight:700;color:#fff}
.chan-n{background:#03c75a}
.chan-g{background:#4285f4}
/* 구 src-badge 제거됨 */

/* 종목 체크박스 (사이드바 복수선택) */
#companyList .sb-item{display:flex;align-items:center;gap:6px}
#companyList .comp-cb{flex-shrink:0;cursor:pointer;margin:0}
#companyList .sb-item-name{cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#companyList .sb-item-name:hover{color:#f37021}


/* 사이드바/인덱스 관심 종목 하트 */
.sb-heart{cursor:pointer;font-size:12px;color:#cbd5e1;flex-shrink:0;user-select:none;transition:transform .1s}
.sb-heart.on{color:#e0245e}
.sb-heart:hover{transform:scale(1.2)}

/* 스크랩 버튼 (글자 + 선택 시 반전) */
.col-scrap{width:54px;text-align:center}
.scrap-btn{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;
  border:1px solid #d5deea;background:#fff;color:#8a94a6;user-select:none;transition:all .12s;white-space:nowrap}
.scrap-btn:hover{border-color:#002C5F;color:#002C5F}
.scrap-btn.on{background:#002C5F;color:#fff;border-color:#002C5F}   /* 선택 시 반전 */
/* ═══════ 2단 탭 (누리다온 원본 방식 + 와치 컬러) ═══════ */
/* 탭바: 그레이 1px 하단보더, 탭이 flex-end 정렬로 보더에 얹힘 */
.top-tabbar{display:flex;align-items:flex-end;gap:2px;padding:6px 10px 0;background:#fff;border-bottom:1px solid #d1d5db}
.sub-tabbar{display:flex;align-items:flex-end;gap:2px;padding:5px 10px 0;background:#fff;border-bottom:1px solid #e5e7eb}
/* 상위 탭 (뉴스/설정): 누리다온 ptab + 와치 네이비 active */
.top-tab{padding:7px 20px !important;cursor:pointer;font-size:12.5px !important;font-weight:700 !important;
  color:#6b7280 !important;background:#f3f4f6 !important;border:1px solid #d1d5db !important;border-bottom:none !important;
  border-radius:5px 5px 0 0 !important;white-space:nowrap;transition:all .1s}
.top-tab.active{color:#002C5F !important;background:#fff !important;border-bottom:2px solid #fff !important;
  margin-bottom:-1px;position:relative;z-index:1}
.top-tab:hover:not(.active){background:#e5e7eb !important}
/* 하위 탭: 누리다온 ptab + 오렌지 active */
.sub-tab{padding:5px 14px !important;cursor:pointer;font-size:11px !important;font-weight:700 !important;
  color:#6b7280 !important;background:#f3f4f6 !important;border:1px solid #e5e7eb !important;border-bottom:none !important;
  border-radius:4px 4px 0 0 !important;white-space:nowrap;transition:all .1s}
.sub-tab.active{color:#f37021 !important;background:#fff !important;border-bottom:2px solid #fff !important;
  margin-bottom:-1px;position:relative;z-index:1}
.sub-tab:hover:not(.active){background:#e5e7eb !important}
/* 기간필터: 누리다온 캡슐 (그레이 배경, active=흰배경+오렌지) */
.date-filter-group{display:flex;align-items:center;gap:2px;background:#ececec;padding:2px;border-radius:6px;flex-shrink:0}
.panel-toolbar .range{border:none;background:transparent;padding:3px 11px;font-size:11px;font-weight:600;color:#6b7280;
  border-radius:4px;cursor:pointer;white-space:nowrap;font-family:'Pretendard';transition:all .1s}
.panel-toolbar .range:hover:not(.active){color:#374151;background:rgba(255,255,255,.6)}
.panel-toolbar .range.active{background:#fff;color:#f37021;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* 직접 설정 날짜 input */
.custom-date{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:10px;border-left:1px solid #d1d5db}
.date-input{border:1px solid #d5deea;border-radius:4px;padding:3px 6px;font-size:11px;font-family:'Pretendard';color:#444;outline:none}
.date-input:focus{border-color:#f37021}

/* 사이드바 텍스트 오토사이즈 (autoFitSidebar JS와 연동) */
.sb-item-name.autofit{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip;display:block;line-height:1.6}
#fundFilters .sb-item-name.autofit{cursor:pointer}

/* 언론사 탭: 미매핑 도메인 라벨 */
.press-dom-label{flex:1.2;font-size:11px;color:#374151;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.press-nm-in{flex:1;border:1px solid #d5deea;border-radius:5px;padding:5px 8px;font-size:11px;font-family:inherit;outline:none;min-width:0}
.press-nm-in:focus{border-color:#f37021}

/* 펀드 컬럼 펼침/닫힘 */
.fund-collapsed{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fund-expanded{display:block;line-height:1.5}
.fund-more{color:#8a94a6;cursor:pointer;font-size:9.5px;white-space:nowrap}
.fund-more:hover{color:#f37021}




/* 검색 키워드: [라벨][입력박스][토글] 가로 한 줄 */
.kw-row{display:flex;align-items:center;gap:10px;padding:2px 0;border-bottom:1px solid #f4f6f9}
.kw-row:last-child{border-bottom:none}
.kw-label{flex:0 0 96px;font-size:12px;font-weight:500;color:#111;margin:0;white-space:nowrap}
.kw-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:0;
  border:1px solid #e2e8f0;border-radius:6px;padding:1px 6px;min-height:20px}
.kw-chip{font-size:10.5px;padding:0 5px}
.kw-add{font-size:11px;padding:2px 4px;border:none;outline:none;flex:1;min-width:60px}
.ch-toggle{display:flex;flex:0 0 88px;width:88px;justify-content:space-around;align-items:center}
.ch-toggle > .sw{flex:0 0 32px}
.ch-head{align-items:center}
.ch-h{flex:1;text-align:center;font-size:11px;font-weight:700;color:#374151}
.set-inp{width:100%;border:1px solid #d5deea;border-radius:6px;padding:5px 9px;font-size:12px;outline:none;box-sizing:border-box}
.set-inp:focus{border-color:#f37021}
/* iOS 스위치 (컴팩트) */
.sw{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-track{position:absolute;inset:0;background:#cbd5e1;border-radius:18px;transition:.15s}
.sw-track::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.15s}
.sw input:checked + .sw-track{background:#002C5F}
.sw input:checked + .sw-track::before{transform:translateX(14px)}
/* 설정 촘촘하게 */
.set-group{margin-bottom:7px}
.set-gh{padding:5px 14px;font-size:11.5px}
.set-row{padding:3px 14px;font-size:12px}
.set-field{padding:3px 14px}
.set-hint{padding:3px 14px;font-size:10px}
/* 허용 언론사 행도 동일 정렬 */
.kw-row .set-inp{margin:0}

/* 키워드 헤더 행 (N/G 컬럼 정렬) */
.kw-colhead{display:flex;align-items:center;gap:10px;padding:1px 14px 2px}
.kw-colhead .kw-label{flex:0 0 96px}
.kw-chips-spacer{flex:1;min-width:0}

/* 검색 필터 서브 헤딩 */
.kw-sub{font-size:12.5px;font-weight:800;color:#1f2937;margin:3px 0 3px}

/* 언론사 매핑 버튼 */
.press-add-btn{font-size:10.5px;font-weight:700;color:#002C5F;background:#eef4fc;border:1px solid #cfe0f5;
  border-radius:5px;padding:3px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.press-add-btn:hover{background:#002C5F;color:#fff}
.press-del-btn{font-size:10.5px;font-weight:700;color:#dc2626;background:#fff;border:1px solid #f0c9c9;
  border-radius:5px;padding:3px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.press-del-btn:hover{background:#dc2626;color:#fff}
.press-dom-new,.press-nm-new{border:1px solid #d5deea;border-radius:5px;padding:4px 7px;font-size:11px;outline:none}
.press-dom-new{flex:1.2}.press-nm-new{flex:1}
.press-dom-new:focus,.press-nm-new:focus{border-color:#f37021}

/* 언론사 레지스트리 매트릭스 */
.preg-head{display:flex;align-items:center;gap:8px;padding:3px 14px;font-size:10.5px;font-weight:700;color:#8a94a6;border-bottom:1px solid #e5e7eb}
.preg-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid #f4f6f9}
.preg-row:last-child{border-bottom:none}
.preg-dom{flex:0 0 160px;font-size:11px;color:#8a94a6;font-weight:600;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preg-cnt{flex:0 0 40px;font-size:10px;color:#9ca3af}
.preg-arrow{flex:0 0 12px;color:#cbd5e1;font-size:11px}
.preg-nm{flex:1;min-width:0}
.preg-nm-ed,.preg-dom-new,.preg-nm-new,.preg-nm-in{border:1px solid #e2e8f0;border-radius:5px;padding:4px 8px;font-size:11.5px;outline:none;min-width:0}
.preg-nm-ed{flex:1}.preg-nm-in{flex:1}
.preg-nm-ed:focus,.preg-dom-new:focus,.preg-nm-new:focus,.preg-nm-in:focus{border-color:#f37021}
.preg-allow{flex:0 0 46px;display:flex;justify-content:center}
.preg-del-sp{flex:0 0 44px;text-align:right}

/* 레지스트리 검색·건수·미매핑 강조 */
.preg-search{width:100%;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:6px;padding:6px 9px;font-size:12px;outline:none}
.preg-search:focus{border-color:#f37021}
.preg-cnt2{flex:0 0 40px;font-size:10px;color:#9ca3af;text-align:right}
.preg-unmapped{background:#fffdf5}
.preg-unmapped .preg-nm-ed{border-color:#f3d9a0;background:#fffdf5}

/* 키워드 포함/제외 2단 배치 */
.kw-2col{display:flex;gap:18px;padding:4px 14px 6px}
.kw-col{flex:1;min-width:0}
.kw-col .kw-colhead{padding:1px 0 2px}
.kw-col .kw-label{flex:0 0 88px}
.kw-col .ch-toggle{flex:0 0 88px}

/* 사이드바 상단바 (모드 전환 + 톱니) */
.sb-topbar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #e5e7eb}
.sb-mode{display:flex;flex:1;background:#ececec;border-radius:6px;padding:2px}
.sb-mode-btn{flex:1;border:none;background:transparent;font-size:11px;font-weight:700;color:#6b7280;padding:4px 6px;border-radius:4px;cursor:pointer}
.sb-mode-btn.active{background:#fff;color:#002C5F;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.sb-gear{border:1px solid #d5deea;background:#fff;border-radius:6px;width:28px;height:26px;cursor:pointer;font-size:14px;color:#475569}
.sb-gear:hover{background:#f0f5fc;border-color:#002C5F}

/* 관심종목 모달 */
.wl-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;align-items:center;justify-content:center}
.wl-dialog{background:#fff;border-radius:10px;width:1080px;max-width:96vw;height:600px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.wl-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e5e7eb;font-weight:800;color:#002C5F}
.wl-close{border:none;background:transparent;font-size:22px;cursor:pointer;color:#9ca3af;line-height:1}
.wl-body{flex:1;display:flex;gap:10px;padding:12px;min-height:0}
.wl-col{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:8px;min-height:0}
/* 계좌/펀드 칸 — `거래내역(미래에셋, 0650)` 이 한 줄로 들어가야 한다.
   150px 이면 버튼 글자가 두 줄로 접혀 목록보다 버튼이 더 커진다. */
#fundModal .wl-groups{flex:0 0 196px}
.wl-groups{flex:0 0 150px}.wl-master{flex:1 1 0;min-width:0}.wl-items{flex:1 1 0;min-width:0}.wl-manual-panel{flex:0 0 230px}
.wl-col-hd{padding:8px 10px;font-size:11.5px;font-weight:800;color:#374151;border-bottom:1px solid #eef1f5;background:#f8fafc;border-radius:8px 8px 0 0}
.wl-cnt{color:#8a94a6;font-weight:600;font-size:10.5px}
.wl-search{margin:6px;padding:6px 8px;border:1px solid #d5deea;border-radius:6px;font-size:12px;outline:none}
.wl-search:focus{border-color:#f37021}
.wl-list{flex:1;overflow:auto;padding:4px}
.wl-row{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:11.5px;border-radius:5px;cursor:pointer;white-space:nowrap}
.wl-row:hover{background:#f6f9fc}
.wl-row.sel{background:#e0ecfb}
.wl-code{flex:0 0 54px;font-size:10.5px;color:#aab2c0;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wl-src{margin-left:auto;font-size:9.5px;color:#4285f4;background:#eef4ff;padding:0 5px;border-radius:3px}
.wl-empty{padding:14px;color:#9ca3af;font-size:11px;text-align:center}
/* 그룹 조작 버튼. `flex:1` 로 넷을 한 줄에 욱여넣으면 `유형변\n경` 처럼 글자가
   접힌다. 접히면 무슨 버튼인지 한눈에 안 들어온다.

   **격자로 칸을 똑같이 나눈다.** flex 는 남는 자리를 내용 폭에 따라 나눠서
   `유형변경` 과 `삭제` 의 크기가 제각각이 된다. 격자로 두면
   패널이 좁을 때 2칸, 넓을 때 4칸으로 접히면서도 칸 폭이 늘 같다.

   좌우 여백은 아래 엑셀 버튼(margin:6px)과 맞춘다. */
/* **2칸 아니면 4칸.** auto-fit 에 맡기면 좁을 때 3칸이 되어
   `유형변경 · 장기보유 · 이름변경 / 삭제` 로 마지막 줄이 하나만 남아 어긋난다.
   네 칸짜리 줄이므로 반씩 접히는 편이 세로선이 맞는다. */
.wl-group-btns{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px 6px 0}
@media (min-width:1500px){ .wl-group-btns{grid-template-columns:repeat(4, 1fr)} }
.wl-group-btns button{font-size:10.5px;padding:6px 4px;white-space:nowrap;width:100%;
                      border:1px solid #d5deea;background:#fff;border-radius:5px;cursor:pointer}
.wl-group-btns button:hover{background:#f0f5fc}
.wl-actions{display:flex;flex-direction:column;justify-content:center;gap:8px}
.wl-actions button{width:34px;height:30px;border:1px solid #cfe0f5;background:#eef4fc;color:#002C5F;border-radius:6px;cursor:pointer;font-size:12px}
.wl-actions button:hover{background:#002C5F;color:#fff}

/* 사이드바 관심그룹 목록 (관심종목 모드) */
.sb-watch-box{padding:6px 8px}
.sb-wl-hd{font-size:11px;font-weight:800;color:#374151;padding:6px 6px 4px}
.sb-wl-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:12px;border-radius:6px;cursor:pointer}
.sb-wl-row:hover{background:#f0f5fc}
.sb-wl-row.sel{background:#e0ecfb;font-weight:700;color:#002C5F}
.sb-wl-cnt{font-size:10px;color:#8a94a6}
.sb-wl-empty{padding:16px 10px;font-size:11px;color:#9ca3af;text-align:center;line-height:1.6}

/* 관심종목 모드 사이드바: select + 칩 + 종목 구획 나열 */
.sb-wl-select{width:100%;box-sizing:border-box;margin:2px 0 6px;padding:5px 7px;border:1px solid #d5deea;border-radius:6px;font-size:12px;outline:none}
.sb-wl-select:focus{border-color:#f37021}
.sb-wl-chips{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px}
.sb-wl-chip{font-size:10.5px;padding:2px 7px;border:1px solid #d5deea;border-radius:10px;background:#fff;color:#475569;cursor:pointer;white-space:nowrap}
.sb-wl-chip:hover{background:#f0f5fc}
.sb-wl-chip.sel{background:#002C5F;color:#fff;border-color:#002C5F}
.sb-wl-tablehd{display:flex;justify-content:space-between;padding:3px 6px;font-size:10px;font-weight:700;color:#8a94a6;border-bottom:1px solid #e5e7eb}
.sb-wl-items{max-height:calc(100vh - 320px);overflow:auto}
.sb-wl-sec{background:#eef2f7;color:#475569;font-size:10.5px;font-weight:800;padding:3px 8px;margin-top:2px}
.sb-wl-item.sel .sb-wl-nm{font-weight:700;color:#002C5F}

/* 관심종목 항목 순서/빈줄 컨트롤 */
.wl-item-ctrl{display:flex;justify-content:space-between;gap:6px;padding:6px;border-top:1px solid #eef1f5}
.wl-arrows{display:flex;gap:8px}
.wl-arr-pair{display:flex;gap:1px}
.wl-arr-pair button{width:28px}
.wl-arr-pair button:first-child{border-radius:5px 0 0 5px}
.wl-arr-pair button:last-child{border-radius:0 5px 5px 0}
.wl-linebtns{display:flex;gap:3px}
.wl-item-ctrl button{flex:1;min-width:34px;font-size:10px;padding:5px 2px;border:1px solid #d5deea;background:#fff;border-radius:5px;cursor:pointer}
.wl-item-ctrl button:hover{background:#f0f5fc;border-color:#002C5F}
.wl-label{background:#fff8ec}
.wl-label.sel{background:#ffe9c7}
.wl-label-txt{font-weight:700;color:#b45309;font-size:11px}

/* 이미 담긴 종목 (중복 방지) */
.wl-row.wl-added{opacity:.45;cursor:default}
.wl-row.wl-added:hover{background:transparent}
.wl-in{margin-left:auto;font-size:9.5px;color:#16a34a;background:#eafaf0;padding:0 5px;border-radius:3px}

/* 관심종목 선택 명확화 (체크 표시 + 뚜렷한 선택색) */
.wl-chk{flex:0 0 16px;text-align:center;color:#94a3b8;font-size:12px}
.wl-nm{flex:1;overflow:hidden;text-overflow:ellipsis;color:#1f2937;font-weight:500}
.wl-row.wl-pick{background:#d6e6fb;box-shadow:inset 2px 0 0 #002C5F}
.wl-row.wl-pick .wl-chk{color:#002C5F}

/* 언론사 레지스트리 — 투명 배경 + 촘촘 + 정렬 + 일괄토글 */
.preg-wrap, .preg-group{background:transparent!important;border:none!important;box-shadow:none!important}
.preg-toolbar{display:flex;align-items:center;gap:10px;padding:6px 14px 4px}
.preg-toolbar .preg-search{flex:1;margin:0}
.preg-bulk{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#374151;white-space:nowrap;cursor:pointer}
.preg-box{padding:0 14px 4px;max-height:480px;overflow:auto;background:transparent}
.preg-row{padding:2px 0!important}
.preg-nm-ed{flex:1;max-width:180px}       /* 언론사명 입력 너비 제한 */
.preg-head .sortable{cursor:pointer;user-select:none;display:flex;align-items:center;gap:2px}
.preg-head .sortable:hover{color:#002C5F}
.preg-head .sortable i{width:0;height:0;opacity:.5}
.preg-head .sortable.asc i{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid currentColor}
.preg-head .sortable.desc i{border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor}
.preg-head .preg-cnt2, .preg-head .preg-allow{justify-content:center}

/* 언론사 2단 레이아웃 (전체 ↔ 허용) — 네이비/블랙 톤 통일 */
.preg2{display:flex;gap:10px;align-items:stretch;padding:10px}
.preg2-col{flex:1;display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:8px;min-height:0;background:#fff}
.preg2-hd{padding:8px 12px;font-size:12px;font-weight:800;color:#002C5F;border-bottom:1px solid #eef1f5}
.preg2-cnt{color:#64748b;font-weight:600;font-size:11px}
.preg2-search{margin:8px 12px;padding:6px 9px;border:1px solid #d5deea;border-radius:6px;font-size:12px;outline:none}
.preg2-search:focus{border-color:#002C5F}
.preg2-colhd{display:flex;align-items:center;gap:8px;padding:2px 12px 5px;font-size:10px;font-weight:700;color:#94a3b8;border-bottom:1px solid #eef1f5}
.preg2-list{flex:1;overflow:auto;max-height:440px;padding:2px 6px}
.preg2-row{display:flex;align-items:center;gap:8px;padding:3px 6px;font-size:11.5px;border-radius:5px;cursor:pointer;border-bottom:1px solid #f6f8fb}
.preg2-row:hover{background:#f4f7fb}
.preg2-row.preg2-pick{background:#dbe7f6;box-shadow:inset 2px 0 0 #002C5F}
.preg2-row.preg2-in{background:#f1f4f8;opacity:.5;cursor:default}   /* 이미 허용 = 음영 */
.preg2-row.preg2-in:hover{background:#f1f4f8}
/* 컬럼 폭 (헤더/행 동일) */
.p2-chk{flex:0 0 16px;text-align:center;color:#94a3b8}
.p2-dom{flex:0 0 150px;font-size:10.5px;color:#64748b;font-weight:600;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2-nm{flex:1;color:#111827;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:16px}
.p2-cnt{flex:0 0 44px;text-align:right;font-size:10.5px;color:#94a3b8;font-variant-numeric:tabular-nums}
.p2-nm-inp{width:100%;box-sizing:border-box;border:1px solid #002C5F;border-radius:4px;padding:1px 5px;font-size:11.5px;outline:none;color:#111827}
.preg2-empty{padding:16px;color:#9ca3af;font-size:11px;text-align:center}
.preg2-foot{padding:8px 12px;border-top:1px solid #eef1f5}
.preg2-actions{display:flex;flex-direction:column;justify-content:center;gap:8px}
.preg2-actions button{width:34px;height:30px;border:1px solid #cfe0f5;background:#eef4fc;color:#002C5F;border-radius:6px;cursor:pointer;font-size:12px}
.preg2-actions button:hover{background:#002C5F;color:#fff}
/* 정렬 화살표 */
.preg2-colhd .sortable{cursor:pointer;user-select:none;display:flex;align-items:center;gap:3px}
.preg2-colhd .sortable:hover{color:#002C5F}
.preg2-colhd .p2-cnt.sortable{justify-content:flex-end}
.preg2-colhd .sortable i{width:0;height:0;opacity:.6}
.preg2-colhd .sortable.asc i{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid currentColor}
.preg2-colhd .sortable.desc i{border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor}

/* 언론사 전체선택 체크박스 */
.p2-selall{cursor:pointer;margin:0}
.preg2-colhd .p2-chk{display:flex;align-items:center;justify-content:center}

/* 전일 종가 등락 색상 */
.px-up{color:#e5484d}
.px-down{color:#2f6fed}


/* 아래에 선택자 없이 선언만 남은 줄 11개가 있었다.
   CSS 파서는 이런 무효 구문을 만나면 그 뒤 규칙을 통째로 건너뛴다.
   그래서 잔고 표 스타일이 통으로 먹히지 않고 셀이 넘쳐 보였다. 제거함. */

/* 헤더 진입 버튼 이모지 여백 */
.hbtn .pf-emo{margin-right:2px}

/* 표시 그룹 채널 우선순위 버튼 */
.dd-ord{border:1px solid #e5e7eb;background:#fff;border-radius:5px;width:26px;height:24px;cursor:pointer;color:#374151;font-size:12px}
.dd-ord:hover:not(:disabled){background:#f3f4f6}
.dd-ord:disabled{opacity:.4;cursor:default}

/* 관심종목 모달 · 수동자산 */
.wl-manual-btn{float:right;font-size:10px;font-weight:700;color:#f37021;background:#fff;border:1px solid #f37021;border-radius:5px;padding:2px 8px;cursor:pointer}
.wl-manual-btn:hover{background:#fff4ee}
.wl-manual-tag{margin-left:auto;font-size:9px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:4px;padding:1px 6px}
.wl-manual-form{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.wl-manual-form .wlm-title{font-size:13px;font-weight:800;color:#002C5F}
.wl-manual-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#374151;font-weight:600}
.wl-manual-form input,.wl-manual-form select{border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font-size:13px}
.wl-manual-form input:focus,.wl-manual-form select:focus{outline:none;border-color:#f37021}
.wlm-opt{color:#9ca3af;font-weight:400}
.wlm-hint{font-size:10px;color:#9ca3af;line-height:1.5}
.wlm-btns{display:flex;gap:8px;margin-top:4px}
.wlm-add{width:100%;background:#f37021;color:#fff;border:none;border-radius:7px;padding:10px;font-size:13px;font-weight:800;cursor:pointer;margin-top:2px}
.wlm-cancel{flex:0 0 auto;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:7px;padding:9px 14px;font-size:13px;cursor:pointer}

/* 관심종목 클릭 → 보유 입력 폼 */
.wl-hold-form{padding:12px;display:flex;flex-direction:column;gap:9px;overflow:auto}
.wl-hold-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#374151;font-weight:600}
.wl-hold-form input{border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font-size:14px;font-variant-numeric:tabular-nums}
.wl-hold-form input:focus{outline:none;border-color:#f37021}
.wlh-sel{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:10px}
.wlh-nm{font-size:15px;font-weight:800;color:#111}
.wlh-sub{font-size:11px;color:#6b7280;margin-top:2px}
.wlh-cur{font-size:11px;color:#374151;background:#eef4fc;border-radius:6px;padding:6px 10px}
.wlh-cur b{color:#002C5F}
.wlh-side{display:flex;gap:6px}
.wlh-sidebtn{flex:1;background:#fff;border:1px solid #e2e8f0;color:#6b7280;border-radius:7px;padding:8px;font-size:12px;font-weight:700;cursor:pointer}
.wlh-sidebtn.on{background:#f37021;border-color:#f37021;color:#fff}
.wlh-2{display:flex;gap:8px}.wlh-2 label{flex:1}
.wlh-back{width:100%;background:none;border:none;color:#6b7280;font-size:11px;cursor:pointer;padding:4px;text-decoration:underline}

/* 보유 입력 카드 · 거래소·현재가 표기 */
.wlh-sub .wlh-code{font-variant-numeric:tabular-nums}
.wlh-mkt{display:inline-block;margin-left:5px;font-size:9px;font-weight:700;color:#3b5b8c;background:#e8eefb;border-radius:3px;padding:1px 5px;vertical-align:middle}
.wlh-px{font-weight:700;color:#111;font-variant-numeric:tabular-nums}

/* 키워드 뉴스 탭 · 툴바 */
.kw-bar{display:flex;align-items:center;gap:6px;margin-left:auto}
.kw-bar-lb{font-size:11px;color:#6b7280;font-weight:700}
.kw-sel{border:1px solid #e2e8f0;border-radius:5px;padding:3px 6px;font-size:11px;background:#fff;max-width:160px}
.kw-manage{border:1px solid #f37021;background:#fff;color:#f37021;border-radius:5px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer}
.kw-manage:hover{background:#fff4ee}
/* 키워드 관리 모달 */
.kw-add-row{display:flex;gap:6px;padding:6px 8px}
.kw-add-row input{flex:1;border:1px solid #e2e8f0;border-radius:5px;padding:6px 8px;font-size:12px}
.kw-add-row input:focus{outline:none;border-color:#f37021}
.kw-add-row button{background:#f37021;color:#fff;border:none;border-radius:5px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.kw-item{display:flex;align-items:center}
.kw-word{flex:1;font-size:12px;font-weight:600}
.kw-del{background:none;border:none;color:#9ca3af;font-size:15px;cursor:pointer;padding:0 4px}
.kw-del:hover{color:#dc2626}
.kw-hint{font-size:10px;color:#9ca3af;padding:8px;line-height:1.5;border-top:1px solid #f0f0f0}

/* 전체 뉴스(합집합) 출처 배지 */
.src-tag{display:inline-block;font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:4px;vertical-align:middle;line-height:1.5}
/* 계좌와 펀드를 나눠 보여준다 — 016113 같은 계좌가 `펀드` 로 보이면 안 된다. */
.src-acct{background:#e8eefb;color:#2f5aa8}
.src-fund{background:#eae7fb;color:#5b47b0}
.src-hold{background:#e8eefb;color:#2f5aa8}   /* 예전 이름 */
.src-watch{background:#fdecdc;color:#c05621}
.src-kw{background:#e6f4ea;color:#1e7c3a}


/* 사이드바 3섹션 헤더 (마스터 체크 + 설정) */
.sb-axhd{display:flex;align-items:center;gap:6px}
.sb-mstr{display:flex;align-items:center;cursor:pointer}
.sb-mstr input{width:13px;height:13px;cursor:pointer}
.sb-axhd .sec-title{flex:1}
.sb-axis-gear{background:none;border:none;color:#9ca3af;font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px;line-height:1}
.sb-axis-gear:hover{background:#f1f5f9;color:#f37021}
.sb-kw-empty{padding:8px 12px;font-size:10px;color:#9ca3af}
.sb-item.sel{background:#eef4fc}
.sb-item.sel .sb-item-name{font-weight:700;color:#002C5F}

/* 툴바 펀드·종목 select (사이드바에서 이전) */
.tb-filters{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
/* 계좌·펀드·종목 셋은 같은 성격의 필터다. 내용 길이에 따라 제각각 넓어지면
   줄이 들쭉날쭉해 보인다. **셋을 늘 같은 너비로** 맞춘다.
   240px 인 이유는 `_tbFit` 주석 참고 — 이 너비부터 펀드명이 안 잘린다.
   창이 좁으면 셋이 **똑같이** 줄어든다 (flex-shrink 가 같아 폭이 안 어긋난다). */
.tb-sel{border:1px solid #e2e8f0;border-radius:5px;padding:4px 7px;font-size:11px;
        background:#fff;color:#374151;
        flex:0 1 240px;width:240px;min-width:110px;
        text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.tb-sel:focus{outline:none;border-color:#002C5F}
/* 닫힌 칸의 글씨만 `_tbFit` 이 줄인다. 펼친 목록까지 같이 작아지면
   50개를 훑기가 괴로우므로 목록은 원래 크기로 되돌린다. */
.tb-sel option{font-size:11px}




/* 관심종목 하위 종목행 — 자산군 하위항목과 동일 폰트/들여쓰기, 체크박스 없음, 클릭 선택 */
.sb-wl-item{display:flex;align-items:center;gap:6px;padding:2px var(--sb-pad-h) 2px 18px;border-bottom:1px solid #eef2f8;
  font-size:var(--sb-item-size);font-weight:500;color:#111;cursor:pointer;user-select:none;background:#fafbfd}
.sb-wl-item .sb-wl-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-wl-item .sb-wl-px{flex:0 0 58px;text-align:right;font-variant-numeric:tabular-nums}
.sb-wl-item .sb-wl-cr{flex:0 0 46px;text-align:right;font-size:9px;font-variant-numeric:tabular-nums}
.sb-wl-unlisted{font-size:10px;color:#9ca3af;font-weight:600}
.sb-wl-tablehd{display:none}

/* 관심그룹 탭바 (키움 스타일: 각진 소형 탭 + 우측 화살표 묶음) */
.wl-tabbar{display:flex;align-items:stretch;gap:3px;padding:3px 4px;background:#eef1f5;border-bottom:1px solid #d6dbe2}
.wl-tabs{flex:1;display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;min-width:0}
.wl-tabs::-webkit-scrollbar{display:none}
.wl-tab{flex:0 0 auto;border:1px solid #b8c0cc;background:#fdfdfe;color:#333;
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:2px;cursor:pointer;white-space:nowrap;line-height:1.5}
.wl-tab:hover{background:#e6ebf2}
.wl-tab.on{background:#002C5F;border-color:#002C5F;color:#fff;font-weight:700}
.wl-navs{flex:0 0 auto;display:flex;gap:1px}
.wl-arrow{width:15px;border:1px solid #b8c0cc;background:#fdfdfe;color:#5b6470;font-size:7px;
  border-radius:2px;cursor:pointer;padding:0;line-height:1}
.wl-arrow:hover{background:#e6ebf2}

/* 사이드바 섹션 헤더 카운트 */
.sb-sec-cnt{font-size:10px;color:#6b7280;margin-right:4px}

/* 자산군 = 공통 필터 (축 아님) 구분 */
.sb-filterhd{display:flex;align-items:center;gap:6px;background:#f8fafd}
.sb-filter-tag{font-size:9px;font-weight:700;color:#64748b;background:#e2e8f0;border-radius:3px;padding:1px 6px}
.sb-filterhd .sec-title{flex:1}
/* 축 섹션(펀드·관심종목·키워드)과 공통필터 구분선 */
.sb-axhd{border-top:2px solid #dbe2ea}
/* 펀드 목록 스크롤 (max-height) */
.sb-scroll{max-height:150px;overflow-y:auto}
.sb-scroll::-webkit-scrollbar{width:6px}
.sb-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* 계좌/펀드 모달 */
#fundModal .wl-dialog{width:1150px}
.fd-qty{flex:0 0 auto;font-size:10px;color:#6b7280;font-variant-numeric:tabular-nums}
.wl-row.wl-dim{opacity:.45}
.wl-tag{flex:0 0 auto;font-size:9px;color:#64748b;background:#eef2f7;border-radius:3px;padding:1px 5px}

/* ══════════════ 거래 모달 (종목 상세 레이아웃) ══════════════
   상승 빨강 / 하락 파랑 은 기존 .px-up / .px-down 을 그대로 사용한다.
   ────────────────────────────────────────────────────────── */
.td-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1100;
          display:none;align-items:center;justify-content:center}
.td-modal[style*="flex"]{display:flex !important}
.td-dialog{background:#fff;border-radius:14px;width:560px;max-width:94vw;
           max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
           box-shadow:0 18px 50px rgba(0,0,0,.28)}
.td-bar{display:flex;align-items:center;justify-content:space-between;
        padding:9px 16px;border-bottom:1px solid #e5e7eb;background:#002C5F;color:#fff;
        font-size:12px;font-weight:800;flex:0 0 auto}
.td-close{background:transparent;border:none;color:#fff;font-size:22px;line-height:1;
          cursor:pointer;padding:0 2px;opacity:.85}
.td-close:hover{opacity:1}
.td-body{overflow-y:auto;flex:1 1 auto}
.td-loading,.td-error{padding:28px 18px;text-align:center;font-size:12px;color:#9ca3af}
.td-error{color:#e5484d}

/* ── 헤더: 종목 · 평가금액 · 지표 ── */
.td-head{padding:12px 16px 11px;border-bottom:6px solid #f1f5f9}
.td-name{font-size:15px;font-weight:800;color:#111827;letter-spacing:-.4px}
.td-sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10px;color:#6b7280}
.td-code{background:#eef2f7;color:#475569;border-radius:3px;padding:1px 5px;font-weight:700}
.td-muted{color:#cbd5e1}
.td-hero{margin-top:9px;font-size:24px;font-weight:800;color:#111827;
         letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.15}
.td-hero-sub{margin-top:3px;font-size:11px;color:#6b7280;font-variant-numeric:tabular-nums}
.td-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:12px}
.td-lb{font-size:10px;color:#6b7280;margin-bottom:1px}
.td-vl{font-size:14px;font-weight:800;color:#111827;font-variant-numeric:tabular-nums;line-height:1.25}
.td-vs{font-size:10px;font-weight:700;margin-top:0;font-variant-numeric:tabular-nums;line-height:1.25}
.td-realized{display:flex;margin-top:11px;background:#f8fafc;
             border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.td-rz{flex:1;display:flex;align-items:center;justify-content:space-between;
       gap:8px;padding:8px 12px}
.td-rz + .td-rz{border-left:1px solid #e5e7eb}
.td-rz-total{background:#f1f5f9}
.td-realized .td-lb{margin:0;font-size:11px;font-weight:700;color:#374151;white-space:nowrap}
.td-realized .td-lb em{display:block;font-style:normal;font-size:9px;
                       font-weight:600;color:#9ca3af;margin-top:1px}
.td-realized .td-vl{font-size:13px;white-space:nowrap}
@media (max-width:600px){ .td-realized{flex-direction:column}
  .td-rz + .td-rz{border-left:none;border-top:1px solid #e5e7eb} }

/* ── 탭 ── */
.td-tabs{display:flex;gap:16px;padding:0 16px;border-bottom:1px solid #e5e7eb;background:#fff}
.td-tab{background:none;border:none;padding:9px 0;font-size:12px;font-weight:800;
        color:#9ca3af;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.td-tab.active{color:#002C5F;border-bottom-color:#002C5F}
.td-cnt{font-size:10px;font-weight:700;color:#9ca3af;background:#f1f5f9;
        border-radius:8px;padding:1px 6px;margin-left:3px}
.td-pane{padding:11px 16px 14px}

/* ── 거래내역 표 ── */
.td-table{width:100%;border-collapse:collapse;font-size:11px}
.td-table th{font-size:10px;color:#6b7280;font-weight:700;text-align:left;
             padding:5px 6px;border-bottom:1px solid #e5e7eb;white-space:nowrap;
             position:sticky;top:0;background:#fff;z-index:1}
.td-table td{padding:5px 6px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.td-table .td-num{text-align:right;font-variant-numeric:tabular-nums}
.td-amt{font-weight:700}
.td-date{color:#475569;white-space:nowrap}
.td-note{color:#6b7280;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-badge{font-size:10px;font-weight:800;border-radius:3px;padding:2px 6px;white-space:nowrap}
.td-badge.buy{background:#fdeaea;color:#e5484d}
.td-badge.sell{background:#e8f0fe;color:#2f6fed}
.td-act{text-align:right;white-space:nowrap}
.td-act button{background:#fff;border:1px solid #cbd5e1;border-radius:4px;
               padding:3px 7px;font-size:10px;cursor:pointer;color:#374151;margin-left:3px}
.td-act button:hover{background:#f1f5f9}
.td-act button.del{color:#e5484d;border-color:#f3c3c3}
.td-act button.del:hover{background:#fdeaea}
.td-editing td{background:#f8fafc}
.td-editing input,.td-editing select{width:100%;box-sizing:border-box;font-size:11px;
              padding:4px 6px;border:1px solid #cbd5e1;border-radius:4px;background:#fff}
.td-foot{margin-top:7px;font-size:10px;color:#9ca3af}
.td-empty{padding:22px 12px;text-align:center;font-size:12px;color:#9ca3af;line-height:1.75}
.td-empty-btn{margin-top:10px;background:#002C5F;color:#fff;border:none;border-radius:6px;
              padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer}

/* 기존 보유분 → 매수 거래 편입 안내 */
.td-seed-msg{font-size:12px;color:#475569;line-height:1.75;margin-bottom:16px}
.td-seed-msg b{color:#111827;font-weight:800}
.td-seed-row{display:flex;align-items:flex-end;justify-content:center;gap:8px;flex-wrap:wrap}
.td-seed-row label{display:flex;flex-direction:column;gap:4px;text-align:left;
                   font-size:10px;color:#6b7280;font-weight:700}
.td-seed-row input{font-size:12px;padding:7px 9px;border:1px solid #cbd5e1;
                   border-radius:6px;font-weight:600;color:#111827}
.td-seed-btn{background:#002C5F;color:#fff;border:none;border-radius:6px;
             padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.td-seed-btn:disabled{opacity:.55;cursor:default}
.td-empty-link{display:block;margin:14px auto 0;background:none;border:none;
               color:#6b7280;font-size:11px;text-decoration:underline;cursor:pointer}

/* 투자금액 · 평가금액 병기 */
.td-hero-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:10px}
.td-hero-sub b{color:#111827;font-weight:700}
.td-dot{color:#cbd5e1}

/* ── 거래 추가 폼 ── */
.td-seg{display:flex;gap:8px;margin-bottom:11px}
.td-seg-btn{flex:1;padding:7px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;
            font-size:12px;font-weight:800;color:#9ca3af;cursor:pointer;transition:.15s}
.td-seg-btn.buy.active{border-color:#e5484d;color:#e5484d;background:#fdeaea}
.td-seg-btn.sell.active{border-color:#2f6fed;color:#2f6fed;background:#e8f0fe}
.td-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
.td-fields label{display:flex;flex-direction:column;gap:2px;font-size:10px;
                 color:#6b7280;font-weight:700}
.td-fields .td-wide{grid-column:1 / -1}
.td-fields input{font-size:12px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:6px;
                 background:#fff;font-weight:600;color:#111827;width:100%;box-sizing:border-box;
                 font-variant-numeric:tabular-nums}
.td-fields input:focus{outline:2px solid #002C5F;outline-offset:-1px;border-color:#002C5F}
.td-amt-preview{margin-top:9px;padding:7px 11px;background:#f8fafc;border-radius:6px;
                font-size:11px;color:#6b7280;display:flex;justify-content:space-between;
                align-items:center}
.td-amt-preview b{font-size:13px;color:#111827;font-variant-numeric:tabular-nums}
.td-msg{min-height:14px;margin-top:6px;font-size:11px;color:#e5484d;line-height:1.3}
.td-submit{width:100%;margin-top:4px;padding:9px;border:none;border-radius:7px;
           color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.td-submit.buy{background:#e5484d}
.td-submit.sell{background:#2f6fed}
.td-submit:disabled{opacity:.55;cursor:default}

/* ── 잔고 표의 거래 버튼 ── */
.bal-trade-btn{border:1px solid #cbd5e1;border-radius:3px;background:#fff;
               width:13px;height:14px;padding:0;font-size:9px;font-weight:800;
               cursor:pointer;margin:0;line-height:1;vertical-align:middle}
.bal-trade-btn.buy{color:#e5484d}
.bal-trade-btn.sell{color:#2f6fed}
.bal-trade-btn:hover{background:#f1f5f9}
/* 처리완료 — 값은 안 건드리고 줄만 치운다. 거래 단추(붉은·푸른)와 같은 크기로
   두되 색은 빼 둔다. 기록하는 일과 치우는 일은 무게가 다르다. */
.bal-trade-btn.done{color:#64748b}
.bal-trade-btn.done:hover{background:#e8f5ee;border-color:#86c7a5;color:#0f7a47}
.bal-trade-btn[disabled]{opacity:.4;cursor:default}

@media (max-width:600px){
  .td-dialog{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0}
  .td-hero{font-size:26px}
  .td-fields{grid-template-columns:1fr}
}

/* 엑셀 등록 그리드 */
/* 글자가 접히지 않게. 칸이 좁아지면 글자를 줄이지 말고 버튼이 그대로 있게 둔다. */
.fd-excel-btn{width:calc(100% - 12px);margin:6px;background:#1d6f42;color:#fff;
              border:none;border-radius:5px;padding:7px 6px;font-size:10.5px;
              font-weight:700;cursor:pointer;white-space:nowrap;letter-spacing:-.4px;
              overflow:hidden;text-overflow:ellipsis}
.fd-excel-btn:hover{background:#185c37}
.xl-dialog{width:820px;height:600px}
.xl-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #e5e7eb;background:#f8fafc}
.xl-bulk{display:flex;align-items:center;gap:12px;padding:6px 12px;border-bottom:1px solid #e5e7eb;background:#eef4fb;flex-wrap:wrap}
.xl-bulk-lb{font-size:11px;font-weight:700;color:#002C5F}
.xl-bulk-it{display:flex;align-items:center;gap:5px;font-size:11px;color:#374151}
.xl-bulk-it select{font-size:11px;padding:3px 6px;border:1px solid #cbd5e1;border-radius:4px;background:#fff;cursor:pointer}
.xl-bulk-note{font-size:10px;color:#9ca3af;margin-left:auto}
.xl-hint{flex:1;font-size:11px;color:#6b7280}
.xl-hint b{color:#1d6f42}
.xl-file{background:#fff;border:1px solid #cbd5e1;border-radius:5px;padding:4px 10px;font-size:11px;cursor:pointer;font-weight:600}
.xl-file:hover{background:#f1f5f9}
.xl-clear{background:#fff;border:1px solid #cbd5e1;border-radius:5px;padding:4px 10px;font-size:11px;cursor:pointer}
.xl-wrap{flex:1;overflow:auto;outline:none;background:#fff}
.xl-table{border-collapse:collapse;font-size:12px;width:100%}
.xl-table th{background:#f1f5f9;border:1px solid #d6dbe2;padding:5px 6px;font-size:11px;font-weight:700;color:#374151;position:sticky;top:0;z-index:1}
.xl-table th i{color:#dc2626;font-style:normal;margin-left:2px}
.xl-table td{border:1px solid #e2e8f0;padding:0}
.xl-table td input{width:100%;border:none;padding:5px 6px;font-size:12px;background:transparent;outline:none}
.xl-table td input:focus{background:#eef6ff;box-shadow:inset 0 0 0 2px #1d6f42}
.xl-table td.xl-bad input{background:#fdeaea;color:#dc2626}
.xl-rn{background:#f8fafc;color:#9ca3af;font-size:10px;text-align:center;width:32px;user-select:none}
.xl-foot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid #e5e7eb}
.xl-stat{flex:1;font-size:11px;color:#6b7280}
.xl-stat b{color:#111}
.xl-err{color:#dc2626;font-weight:700}
.xl-submit{width:160px}

/* 계좌/펀드 유형 구분 */
.sb-sec-count{font-size:9px;font-weight:700;color:#94a3b8;margin-right:6px}
.sb-subhd{display:flex;align-items:center;gap:5px;padding:4px 10px;background:#eef2f7;font-size:10px;font-weight:800;color:#475569;border-top:1px solid #e2e8f0}
.sb-subhd span{font-weight:600;color:#94a3b8}
.fd-kind{flex:0 0 auto;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px}
.fd-kind.k-acct{background:#e0e7ff;color:#3730a3}
.fd-kind.k-fund{background:#dcfce7;color:#166534}


/* 계좌/펀드 행: 최상위 레벨로 (자산군 하위항목 들여쓰기 상쇄) */
.sb-fd-row{padding-left:8px !important;gap:4px;font-weight:600;background:#fff}
.sb-fd-row.sel{background:#eef4fc}
.sb-fd-sub{border-left:2px solid #f37021;margin-left:8px;background:#fbfcfe}
.sb-fd-sub .sb-wl-item{padding-left:10px}
/* 펀드 섹션은 스크롤 없이 전체 노출 */

.fd-dedupe-btn{width:calc(100% - 12px);margin:0 6px 6px;background:#fff;color:#475569;
               border:1px solid #cbd5e1;border-radius:5px;padding:6px;font-size:11px;
               font-weight:600;cursor:pointer;white-space:nowrap}
.fd-dedupe-btn:hover{background:#f1f5f9}
.fd-trades-clear{color:#b42318;border-color:#f3c7c3}
.fd-trades-clear:hover{background:#fdeaea}

/* 계좌/펀드 설정 — 거래내역 건수·기간 */
.fd-span{margin:0 6px 6px;padding:6px 8px;border:1px solid #e2e8f0;border-radius:5px;
         background:#f8fafc;font-size:11px;color:#374151;line-height:1.5}
.fd-span b{color:#002C5F}
.fd-span-none{color:#9ca3af}
.fd-span-up{font-size:10px;color:#9ca3af}

/* 거래내역 입력창 — 이미 들어 있는 거래 */
.xl-exist{padding:8px 12px;border-top:1px solid #e5e7eb;background:#fffbeb;font-size:11px;color:#374151}
.xe-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xe-sum b{color:#002C5F}
.xe-note{font-size:10px;color:#9ca3af}
.xe-none{color:#6b7280}
.xe-err{color:#dc2626;font-weight:600}
.xe-del{margin-left:auto;background:#fff;color:#b42318;border:1px solid #f3c7c3;border-radius:5px;
        padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.xe-del:hover{background:#fdeaea}
.xe-list{margin-top:6px;max-height:190px;overflow:auto;background:#fff;border:1px solid #f1e7c5;border-radius:4px}
.xe-tbl{border-collapse:collapse;width:100%;font-size:11px}
.xe-tbl th{position:sticky;top:0;background:#fdf6dc;text-align:left;padding:3px 8px;font-size:10px;color:#6b7280;font-weight:700}
.xe-tbl td{padding:2px 8px;border-top:1px solid #f6f0dc;white-space:nowrap}
.xe-tbl td.xe-nm{white-space:normal;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.xe-tbl td i{font-style:normal;font-size:9px;color:#9ca3af}
.xe-in td:nth-child(3){color:#c2410c}
.xe-out td:nth-child(3){color:#1d4ed8}
.xe-more{padding:4px 2px 0;font-size:10px;color:#9ca3af}
.xe-btns{margin-left:auto;display:flex;gap:6px}
.xe-btns .xe-del{margin-left:0}
.xe-del:disabled{opacity:.4;cursor:default;background:#fff}
.xe-del-all{background:#fdeaea}
.xe-ck{width:24px;text-align:center}
.xe-tbl tr.xe-on td{background:#fff1f0}

/* 계좌/펀드 펼치기·접기 (화살표 우측) */
.sb-fd-row{padding-left:8px !important;gap:4px;font-weight:600;background:#fff}
.sb-fd-row.sel{background:#eef4fc}
.sb-fd-row .sb-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-fd-arrow{flex:0 0 auto;width:12px;text-align:center;font-size:9px;color:#94a3b8;
  transition:transform .15s;display:inline-block;transform:rotate(-90deg)}
.sb-fd-arrow.open{transform:rotate(0deg);color:#f37021}
.sb-fd-sub{border-left:2px solid #f37021;margin-left:8px;background:#fbfcfe}
.sb-fd-sub .sb-wl-item{padding-left:10px}
/* 펀드 섹션 스크롤: 접힘 상태는 짧게, 펼치면 넉넉히 */
#fundFilters,#accountFilters{max-height:220px;overflow-y:auto}
#fundFilters.expanded,#accountFilters.expanded{max-height:60vh}
#fundFilters::-webkit-scrollbar,#accountFilters::-webkit-scrollbar{width:6px}
#fundFilters::-webkit-scrollbar-thumb,#accountFilters::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* 계좌/펀드 생성 버튼 · 신규(대기) 그룹 */
/* ＋계좌 · ＋펀드 도 같은 격자를 써서 아래 줄과 세로선이 맞는다. */
.fd-new-acct,.fd-new-fund{width:100%;border-radius:5px;padding:6px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid}
.fd-new-acct{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.fd-new-acct:hover{background:#e0e7ff}
.fd-new-fund{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.fd-new-fund:hover{background:#dcfce7}
.wl-row.fd-pending{background:#fffbeb;border-left:2px solid #f59e0b}
.wl-row.fd-pending .wl-cnt{color:#b45309;font-weight:700}
.xl-table td select{width:100%;border:none;padding:4px 6px;font-size:12px;background:transparent;outline:none;cursor:pointer}
.xl-table td select:focus{background:#eef6ff;box-shadow:inset 0 0 0 2px #1d6f42}
.xl-table td.xl-bad select{background:#fdeaea;color:#dc2626}
/* 매입금액(자동계산) · 비활성 셀 */
.xl-table td.xl-calc{padding:5px 8px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;background:#f8fafc;color:#111;font-weight:600}
.xl-table td.xl-off{background:#f1f5f9}

/* ══════════════════════════════════════════════════════════════
   표 헤더 정렬 (nw-sortable)
   ※ dashboard.css 에는 중복 셀렉터가 있으므로 이 블록은 파일 맨 끝에 둔다
     (같은 순위면 뒤 규칙이 이긴다)
   ══════════════════════════════════════════════════════════════ */
table.nw-sortable thead th{ cursor:pointer; user-select:none; }
table.nw-sortable thead th:hover{ background:#e5e7eb; }
table.nw-sortable thead th[data-nosort]{ cursor:default; }
table.nw-sortable thead th[data-nosort]:hover{ background:inherit; }

/* 정렬 방향 표시 (기존 .data-table 규칙과 동일한 클래스명 재사용) */
table.nw-sortable thead th.sorted-asc,
table.nw-sortable thead th.sorted-desc{ color:#002C5F; }
table.nw-sortable thead th.sorted-asc::after{
  content:'▲'; margin-left:3px; font-size:8px; color:#f37021; vertical-align:1px;
}
table.nw-sortable thead th.sorted-desc::after{
  content:'▼'; margin-left:3px; font-size:8px; color:#f37021; vertical-align:1px;
}

/* ══════════════ 일별 주가 탭 ══════════════ */
.pd-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #e5e7eb;
        background:#f8fafc;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.pd-bar-lb{font-size:11px;font-weight:700;color:#002C5F}
.pd-bar select{font-size:12px;padding:4px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff}
.pd-stat{flex:1;font-size:10px;color:#6b7280;font-variant-numeric:tabular-nums;min-width:140px}
.pd-btn{background:#fff;border:1px solid #cbd5e1;border-radius:5px;padding:5px 10px;
        font-size:11px;font-weight:700;color:#374151;cursor:pointer;white-space:nowrap}
.pd-btn:hover{background:#eef2f7}
.pd-btn:disabled{opacity:.5;cursor:default}
.pd-btn.sm{padding:3px 9px;font-size:10px}

.pd-wrap{display:flex;height:calc(100% - 40px);min-height:340px}
.pd-side{flex:0 0 232px;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;min-height:0}
.pd-search{margin:8px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:6px;font-size:11px}
.pd-search:focus{outline:2px solid #002C5F;outline-offset:-1px}
.pd-list{flex:1;overflow-y:auto;min-height:0}
.pd-item{padding:7px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer}
.pd-item:hover{background:#f8fafc}
.pd-item.on{background:#eef4fb;border-left:3px solid #002C5F;padding-left:7px}
.pd-it-top{display:flex;align-items:center;gap:6px}
.pd-code{font-size:9px;font-weight:700;color:#475569;background:#eef2f7;
         border-radius:3px;padding:1px 5px;font-variant-numeric:tabular-nums}
.pd-code.big{font-size:11px;padding:2px 7px}
.pd-nm{font-size:12px;font-weight:700;color:#111827;overflow:hidden;
       text-overflow:ellipsis;white-space:nowrap}
.pd-it-sub{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:9px;color:#9ca3af}
.pd-tag{color:#002C5F;font-weight:700}
.pd-mkt{color:#94a3b8}
.pd-days{margin-left:auto;font-variant-numeric:tabular-nums}
.pd-none{margin-left:auto;color:#e5484d}
.pd-side-ft{padding:6px 10px;border-top:1px solid #e5e7eb;font-size:10px;color:#9ca3af;background:#f8fafc}
.pd-empty-s{padding:20px 12px;text-align:center;font-size:11px;color:#9ca3af}

.pd-main{flex:1;overflow-y:auto;min-width:0;display:flex;flex-direction:column}
.pd-loading,.pd-err,.pd-empty{padding:28px 18px;text-align:center;font-size:12px;color:#9ca3af;line-height:1.9}
.pd-err{color:#dc2626}
.pd-empty b{color:#374151}
.pd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
         padding:11px 14px;border-bottom:1px solid #e5e7eb;flex-wrap:wrap}
.pd-h-nm{display:flex;align-items:center;gap:7px}
.pd-h-name{font-size:14px;font-weight:800;color:#111827}
.pd-rgs{display:flex;align-items:center;gap:4px}
.pd-rg{background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:4px 9px;
       font-size:10px;color:#6b7280;cursor:pointer;font-weight:700}
.pd-rg.on{background:#002C5F;color:#fff;border-color:#002C5F}
.pd-sum{display:flex;gap:14px;flex-wrap:wrap;padding:9px 14px;background:#f8fafc;
        border-bottom:1px solid #e5e7eb;font-size:11px;color:#6b7280}
.pd-sum b{color:#111827;font-variant-numeric:tabular-nums}
.pd-tbl-wrap{flex:1;overflow-y:auto;min-height:0}
.pd-tbl{width:100%;border-collapse:collapse;font-size:11px}
.pd-tbl th{position:sticky;top:0;background:#f1f3f7;z-index:1;padding:7px 10px;
           font-size:10px;color:#374151;text-align:left;border-bottom:1px solid #e5e7eb}
.pd-tbl td{padding:6px 10px;border-bottom:1px solid #f1f5f9}
.pd-tbl .pd-n{text-align:right;font-variant-numeric:tabular-nums}
.pd-tbl tbody tr:hover{background:#f8fafc}
.pd-d{color:#475569;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .pd-wrap{flex-direction:column;height:auto}
  .pd-side{flex:0 0 auto;border-right:none;border-bottom:1px solid #e5e7eb;max-height:210px}
}


/* 세로가 짧은 화면: 거래 모달이 스크롤 없이 한 번에 보이도록 더 촘촘하게 */
@media (max-height:700px){
  .td-dialog{max-height:96vh}
  .td-head{padding:9px 16px 8px}
  .td-hero{font-size:20px;margin-top:6px}
  .td-grid{gap:6px 12px;margin-top:9px}
  .td-realized{margin-top:8px}
  .td-rz{padding:6px 12px}
  .td-tab{padding:7px 0}
  .td-pane{padding:9px 16px 11px}
  .td-seg{margin-bottom:8px}
  .td-seg-btn{padding:6px}
  .td-fields{gap:5px 10px}
  .td-fields input{padding:5px 9px}
  .td-amt-preview{margin-top:7px;padding:6px 11px}
  .td-msg{min-height:0}
  .td-submit{padding:8px}
}

/* ══════════════ 보유종목 표 칼럼 폭 ══════════════
   칼럼이 13개라 좁은 패널(듀얼 등)에서는 폭이 모자란다.
   예전에는 종목명만 가변이라 이 종목명이 한 글자씩 접혔다.
   → 표에 min-width 를 주고 넘치면 가로 스크롤로 넘긴다. 종목명은 절대 접지 않는다. */
/* 표 자체가 세로 스크롤을 맡아야 헤더 고정(sticky)이 걸린다.
   높이 제한이 없으면 바깥 .panel-balbox 가 스크롤돼 헤더가 같이 밀려 올라간다. */
.bal-tbl-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:8px;
              max-height:calc(100vh - 268px);min-height:200px}
.bal-tbl{width:100%;min-width:1135px;border-collapse:collapse;font-size:9.5px;table-layout:fixed}
/* tr 이 아니라 th 에 걸어야 한다. table-layout:fixed + border-collapse 에서
   tr 에만 주면 브라우저에 따라 배경이 비치거나 테두리가 사라진다. */
.bal-tbl thead th{position:sticky;top:0;background:#f1f3f7;z-index:2;
                  box-shadow:inset 0 -1px 0 #cbd5e1}
.bal-tbl th{padding:4px 1px;white-space:nowrap;font-weight:700;color:#374151;
            line-height:1.2;letter-spacing:-.6px}
.bal-tbl td{padding:3px 1px;border-bottom:1px solid #eef1f5;white-space:nowrap;
            letter-spacing:-.5px}
/* 숫자 셀은 줄바꿈 금지 — 폭이 좁아져도 '648,\n050' 처럼 쪼개지지 않게 */
.bal-tbl tfoot td{white-space:nowrap;position:sticky;bottom:0;
                  background:#f8fafc;box-shadow:inset 0 1px 0 #cbd5e1;z-index:2}

/* 칼럼 폭 — 21칼럼
   금액은 '억 단위'(123,456,789)를 최장으로 잡았다. 그보다 커지면
   .w-amt / .w-pl 을 늘리고 min-width 도 함께 올릴 것.
   자산군은 별도 칼럼을 없애고 종목명 셀 안 배지(.c-at-tag)로 넣었다. */
/* 종목명만 width:auto — 이게 핵심이다.
   table-layout:fixed + width:100% 에서 화면이 넓으면 남는 폭이 **모든 칼럼에**
   비례 배분되어, 42px 로 지정한 라인 칸이 60px 넘게 부풀어 오른다.
   auto 칼럼을 하나 두면 남는 폭을 그 칸이 전부 흡수하고 나머지는 지정값을 지킨다.

   단, auto 칼럼은 min-width 가 무시된다. 그래서 표의 min-width 를
   (고정칼럼 합계 + 종목명 최소폭) 이상으로 잡아야 좁은 화면에서 0px 로 접히지 않는다.
   ★ 칼럼을 추가하면 .bal-tbl 의 min-width 도 반드시 같이 올릴 것. */
.bal-tbl .w-nm  {width:auto}
/* 소수점 주식은 `1.63` 처럼 소수 두 자리가 붙는다. 30px 로는 잘린다. */
.bal-tbl .w-qty {width:52px}
.bal-tbl .w-px  {width:42px}
.bal-tbl .w-cur {width:47px}
.bal-tbl .w-amt {width:52px}
.bal-tbl .w-pl  {width:56px}
/* `+12,345.7%` 처럼 다섯 자리에 소수까지 붙을 수 있다. 소수를 늘 한 자리로
   고정해서 위아래가 맞는 대신, 칸이 그만큼 넓어야 한다. */
.bal-tbl .w-rt  {width:62px}
.bal-tbl .w-peak{width:64px}   /* +3,334.5% 같은 값이 넘치지 않게 */
/* 최초매입일·최고수익률기준일 — 판단에 쓰는 값이 아니라 언제였나만 보면 된다.
   글자를 줄이고 그만큼 폭도 줄여 가운데 숫자 칼럼에 자리를 넘긴다. */
.bal-tbl .w-pkdt{width:44px}
.bal-tbl .w-step{width:38px}
.bal-tbl .w-done{width:42px}
.bal-tbl .w-sig {width:40px}
.bal-tbl .w-act {width:32px}

/* 헤더의 종목명은 가운데, 본문 종목명은 왼쪽 정렬 */
.bal-tbl th.w-nm{text-align:center;padding-left:4px}
.bal-tbl th.w-pkdt{line-height:1.15;letter-spacing:-.4px}

/* 수익률 헤더는 값과 맞춰 우측 정렬.
   최고 수익률은 헤더만 가운데, 값은 우측 정렬. 둘을 따로 못 박아 둔다. */
.bal-tbl th.w-rt{text-align:right;padding-right:5px}
.bal-tbl th.w-peak{text-align:center;padding-right:2px}
.bal-tbl td.c-peak{text-align:right;padding-right:2px}

/* 보조 지표(실현손익·총손익·최고수익률) — 색·굵기 없이 톤만 낮춘다.
   평가손익과 수익률만 강조해서 시선이 분산되지 않게 한다. */
.bal-tbl .c-sub{text-align:right;padding-right:2px;font-variant-numeric:tabular-nums;
                color:#64748b;font-weight:500}
.bal-tbl tfoot .c-sub{color:#475569;font-weight:600}
.kpi-sub{color:#475569 !important;font-weight:600 !important;font-size:14px !important}

/* 종목명 — 한 줄 유지, 넘치면 말줄임 (전체 이름은 title 툴팁) */
/* max-width:0 은 table-layout:auto 시절의 말줄임 트릭이었다.
   fixed 로 바꾼 뒤에는 셀을 0 으로 눌러 종목명이 통째로 사라진다. 절대 되살리지 말 것. */
.bal-tbl .c-nm{text-align:left;padding-left:4px;font-weight:700;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 자산군 배지 — 칼럼을 없애고 종목명 앞에 붙였다 */
.c-at-tag{display:inline-block;min-width:16px;margin-right:3px;padding:0 2px;
          border-radius:3px;background:#eef2f7;color:#64748b;
          font-size:8px;font-weight:700;line-height:1.5;text-align:center;
          vertical-align:1px;letter-spacing:-.5px}
/* 익절가 라인 (부분매도 1~5차 + 전량매도)
   한 칸에 두 가지가 들어갈 수 있어 라벨로 구분한다.
     목표 … 아직 도달 안 한 익절 목표가 (다음 단계 한 칸만)
     매도 … 그 단계에서 실제로 판 평균 체결가 (△ = 라인보다 낮게 체결) */
.bal-tbl .c-step{text-align:center;padding:2px 1px;white-space:nowrap;line-height:1.2;
                 font-variant-numeric:tabular-nums}
.bal-tbl th.w-step{color:#475569}
.c-step .s-tag{display:block;font-size:7px;letter-spacing:-.4px;color:#94a3b8}
.c-step .s-px{display:block;font-size:8.5px;color:#475569;letter-spacing:-.3px}
.c-step .s-rt{display:block;font-size:7px;color:#a8b3c2;letter-spacing:-.4px}

/* ── 1~5차 · 실현 칸 ──
   상태별 색·굵기를 전부 걷어냈다. 라벨(목표가/매도완료)로 이미 구분되므로
   글자 효과까지 더하면 표가 어수선해진다. 필요해지면 여기만 손보면 된다. */
.c-step .s-tag{color:#94a3b8}
.c-step .s-px {color:#475569}
.c-step .s-rt {color:#a8b3c2}
/* 다음에 도달할 단계 하나 — 검정 테두리 + 진한 글씨.
   폰트는 키우지 않는다. 키우면 칼럼을 그만큼 넓혀야 하는데,
   같은 값을 '목표가' 칼럼이 크게 보여주고 있어 중복이다. */
.bal-tbl .c-step.tg.next{box-shadow:inset 0 0 0 1px #111827}
.c-step.tg.next .s-tag{color:#111827;font-weight:800}
.c-step.tg.next .s-px {color:#111827;font-weight:800}
.c-step.tg.next .s-rt {color:#374151;font-weight:700}
/* 전량매도가보다 낮은 차수 — 그 전에 청산될 수 있다는 표시만 */
.c-step.tg.next.under .s-tag::after{content:' ↓';font-size:7px}
/* 이미 지나간 가격 · 평단보다 낮은 가격 — 값은 보여주되 흐리게 */
.bal-tbl .c-step.past .s-tag,.bal-tbl .c-step.past .s-px,.bal-tbl .c-step.past .s-rt,
.bal-tbl .c-step.loss .s-tag,.bal-tbl .c-step.loss .s-px,.bal-tbl .c-step.loss .s-rt{color:#c3cad4}

/* 최고 수익률 옆 * — 비교한 거래일이 20일 미만이라는 경고 */
.pk-thin{color:#f59e0b;margin-left:1px;cursor:help}

/* 실현 = 전량매도. 부분매도와 성격이 달라 경계선으로만 끊는다. */
.bal-tbl .c-step.c-rz,.bal-tbl th.w-step.rz{border-left:1px solid #e5e7eb}

/* ── Signal ──
   위: 익절 진행 상태 / 아래: 다음에 팔 가격 또는 사유. 색 구분 없이 한 톤. */
.bal-tbl .c-sig{text-align:center;padding:2px 1px;white-space:nowrap;line-height:1.2;
                vertical-align:middle}
.c-sig .g-lb{display:block;font-size:8.5px;color:#475569;letter-spacing:-.4px}
.c-sig .g-nx{display:block;font-size:7.5px;color:#a8b3c2;letter-spacing:-.4px;margin-top:1px;
             font-variant-numeric:tabular-nums}
/* 상태별 구분은 글자색만. 배경은 쓰지 않는다. */
.c-sig.sig-secure .g-lb{color:#e5484d}   /* 수익실현 */
.c-sig.sig-turned .g-lb{color:#2f6fed}   /* 손실전환 */
.c-sig.sig-gain   .g-lb{color:#b45309}   /* 수익달성 */

/* ── 목표가 (Signal 오른쪽) ──
   다음 부분매도 차수와 실현(전량매도) 중 먼저 닿는(더 높은) 가격 하나. */
.bal-tbl .w-goal{width:47px}
.bal-tbl .c-goal{text-align:center;padding:2px 3px;white-space:nowrap;line-height:1.2;
                 font-variant-numeric:tabular-nums}
.c-goal .g-tag{display:block;font-size:7.5px;color:#94a3b8;letter-spacing:-.4px}
/* 목표가 숫자 — 현재가와 짝을 이루는 값이라 같은 무게로 둔다.
   색은 쓰지 않는다. 크기·굵기만으로 충분하고,
   색을 더하면 평가손익·수익률의 빨강/파랑과 뒤섞여 뜻이 흐려진다. */
.c-goal .g-px {display:block;font-size:10.5px;font-weight:800;color:#111827;
               letter-spacing:-.6px}
.c-goal .g-rt {display:block;font-size:7.5px;color:#a8b3c2;letter-spacing:-.4px}
.bal-tbl .c-goal.blank{color:#e2e8f0;font-size:9px}

/* ── 잔고 툴바 (계좌 / 펀드 / Signal 필터) ──
   select 는 브라우저 기본 폰트를 쓴다. font-family 를 명시하지 않으면
   표·라벨과 글꼴이 달라 보인다. */
.bal-toolbar{display:flex;align-items:center;gap:6px;padding:7px 12px;flex-wrap:wrap;
             border-bottom:1px solid #e5e7eb;background:#f8fafc;
             position:sticky;top:0;z-index:6}
.bal-toolbar .bt-lb{font-size:11px;font-weight:700;color:#002C5F;white-space:nowrap;
                    letter-spacing:-.3px}
.bal-toolbar .bt-lb + .bt-lb{margin-left:6px}
.bal-toolbar .bt-sel{font-family:'Pretendard',sans-serif;font-size:11px;letter-spacing:-.3px;
                     padding:4px 7px;border:1px solid #cbd5e1;border-radius:5px;
                     background:#fff;color:#111827;min-width:120px;max-width:220px;
                     text-align:left;cursor:pointer}
.bal-toolbar .bt-sel:disabled{background:#f1f5f9;color:#cbd5e1;cursor:default}
.bal-toolbar .bt-sig{min-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal-toolbar .bt-cnt{font-size:10px;color:#9ca3af;margin-left:auto}

/* Signal 다중 선택 드롭다운 */
.bt-dd{position:relative;display:inline-block}
.bt-menu{display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:20;
         min-width:150px;padding:6px;background:#fff;border:1px solid #cbd5e1;
         border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.bt-dd.open .bt-menu{display:block}
.bt-ck{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;
       font-size:11px;letter-spacing:-.3px;color:#374151;cursor:pointer;white-space:nowrap}
.bt-ck:hover{background:#f1f5f9}
.bt-ck input{width:13px;height:13px;margin:0;cursor:pointer}
.bt-ck.bt-all{font-weight:700;color:#002C5F}
.bt-sep{height:1px;background:#e5e7eb;margin:4px 2px}

/* 필터가 걸렸을 때만 나오는 안내 한 줄 */
.bal-note{font-size:10px;color:#9ca3af;margin-top:6px}

/* 원화환산 체크박스 + 사용 환율 표시 */
.bal-toolbar .bt-krw{display:flex;align-items:center;gap:5px;font-size:11px;
                     letter-spacing:-.3px;color:#374151;white-space:nowrap;cursor:pointer;
                     padding:3px 7px;border:1px solid #cbd5e1;border-radius:5px;background:#fff}
.bal-toolbar .bt-krw input{width:13px;height:13px;margin:0;cursor:pointer}

/* 헤더 환율 — 어느 탭에서나 보이도록 상단바에 둔다.
   자간을 음수로 주면 라벨과 숫자가 겹쳐 보이므로 여기서는 쓰지 않는다. */
.nw-fx{display:flex;align-items:center;gap:12px;margin-right:12px;cursor:pointer;
       font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums;
       color:#334155;white-space:nowrap;overflow:hidden}
.nw-fx:hover{color:#111827}
.nw-fx .fx-i{display:inline-flex;align-items:baseline;gap:4px}
.nw-fx .fx-i b{font-size:9.5px;font-weight:600;color:#94a3b8;letter-spacing:0}
.nw-fx .fx-i i{font-style:normal;font-weight:700}
.nw-fx .fx-off{font-size:10px;color:#cbd5e1}

/* 좁은 화면에서는 뒤쪽 통화부터 감춘다. 잘려서 반쪽만 보이는 것보다 낫다. */
@media (max-width:1560px){ .nw-fx .fx-i:nth-child(n+5){display:none} }
@media (max-width:1420px){ .nw-fx .fx-i:nth-child(n+4){display:none} }
@media (max-width:1280px){ .nw-fx .fx-i:nth-child(n+3){display:none} }
@media (max-width:1140px){ .nw-fx{display:none} }

/* 보유 목록 다중 선택 — 체크박스를 왼쪽에 둔다 */
#fdItemList .wl-row input[type=checkbox]{width:13px;height:13px;margin:0 2px 0 0;
                                         flex:0 0 auto;cursor:pointer}

/* 계좌·펀드 라벨 앞 체크박스 — 끄면 그 종류 선택을 모두 푼다 */
.bal-toolbar .bt-lbck{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.bal-toolbar .bt-lbck input{width:13px;height:13px;margin:0;cursor:pointer}

/* 계좌/펀드 탭 — 한 목록에 섞으면 수십 개일 때 찾기 어렵다 */
.fd-tabs{display:flex;gap:4px;padding:6px 8px 0;border-bottom:1px solid #e5e7eb}
.fd-tab{flex:1;padding:6px 8px;font-size:12px;font-weight:700;color:#6b7280;
        background:transparent;border:none;border-bottom:2px solid transparent;
        cursor:pointer;font-family:'Pretendard',sans-serif;letter-spacing:-.3px}
.fd-tab b{font-weight:600;color:#9ca3af;margin-left:3px}
.fd-tab:hover{color:#374151;background:#f8fafc}
.fd-tab.on{color:#002C5F;border-bottom-color:#002C5F}
.fd-tab.on b{color:#5b8def}

/* 거래소별 결제 주기 입력 */
.set-fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
        gap:6px;padding:2px}
.set-fxi{display:flex;align-items:center;gap:6px;font-size:11px;color:#374151}
.set-fxi span{flex:1;letter-spacing:-.3px}
.set-fxi input{width:44px;padding:4px 6px;border:1px solid #cbd5e1;border-radius:5px;
               font-size:11px;text-align:center;font-family:'Pretendard',sans-serif}

/* 현재가 vs 목표가 부등호 — 지금 팔 수 있는지 한 글자로 보여준다.
   폭 정의가 빠지면 이 칸이 남는 폭을 다 먹어 나머지 칼럼이 눌린다. */
.bal-tbl .w-cmp{width:14px}
.bal-tbl .c-cmp{text-align:center;padding:2px 0;font-size:11px;color:#cbd5e1;
                font-weight:700;line-height:1}
.bal-tbl .c-cmp.on{color:#e5484d}   /* 목표가 도달 */

/* 현재가 — 익절가와 대조하는 기준값이라 한 단계 강조한다.
   크고 굵으면 글자 사이가 벌어져 옆 칸보다 성기게 보이므로 자간을 조인다. */
.bal-tbl .c-cur{text-align:right;padding-right:2px;font-variant-numeric:tabular-nums;
                font-size:10.5px;font-weight:800;color:#111827;letter-spacing:-.6px}

/* 최고수익률 기준일 · 최초 매입일 */
.bal-tbl .c-date{text-align:center;color:#64748b;font-variant-numeric:tabular-nums;
                 font-size:9px;letter-spacing:-.5px;white-space:nowrap}

/* 매도완료 — 총 매수수량 대비 매도수량. 두 줄로 나눠야 Signal 과 붙지 않는다. */
.bal-tbl .c-done{text-align:center;padding:2px 1px;white-space:nowrap;line-height:1.2;
                 font-variant-numeric:tabular-nums}
.c-done .d-pct{display:block;font-size:9.5px;color:#475569;letter-spacing:-.3px}
.c-done .d-qty{display:block;font-size:7.5px;color:#a8b3c2;letter-spacing:-.4px;margin-top:1px}
.bal-tbl .c-done.blank{color:#e2e8f0;font-size:9px}

/* 셀렉트 버튼 — 텍스트는 왼쪽, 화살표는 오른쪽 끝에 고정 */
.bal-toolbar .bt-sel{display:flex;align-items:center;gap:6px}
.bal-toolbar .bt-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal-toolbar .bt-caret{flex:0 0 auto;color:#94a3b8;font-size:9px;line-height:1}
.bal-toolbar .bt-sel:disabled .bt-caret{color:#e2e8f0}

/* 셀렉트 옆 설정 버튼 — 사이드바 톱니바퀴와 같은 화면을 연다 */
.bal-toolbar .bt-gear{margin-left:2px;padding:3px 5px;font-size:12px;line-height:1;
                      color:#94a3b8;background:transparent;border:1px solid transparent;
                      border-radius:5px;cursor:pointer}
.bal-toolbar .bt-gear:hover{color:#002C5F;background:#eef2f7;border-color:#cbd5e1}

/* ══════════════════════════════════════════════════════════════
   매도종목 탭 (.so-)
   ─────────────────────────────────────────────────────────────
   보유종목(.bal-tbl)와 같은 밀도·같은 규칙을 쓴다. 두 표를 오가며 읽으므로
   글자 크기나 색 규칙이 다르면 같은 값을 다르게 읽게 된다.
     · 9.5px 본문 / 8.5px 보조 라벨 / 7.5px 부가
     · 상태 구분은 **글자색만**. 배경 칩은 쓰지 않는다 (.c-sig 와 같은 원칙)
     · 강조는 한 쌍에만 — **매도평균가 ↔ 현재가**. 이 탭의 판단은 그 둘의
       대조 하나로 끝난다 (보유종목의 현재가↔목표가와 같은 자리)
   ══════════════════════════════════════════════════════════════ */

/* ── 탭 전용 툴바 (구분 / 재매수 후보만 / CSV) ──
   위의 .bal-toolbar 가 sticky top:0 이라 여기에 sticky 를 또 걸면 겹친다.
   이 줄은 같이 스크롤되게 두고, 헤더 고정은 표의 thead 가 맡는다. */
.so-bar{display:flex;align-items:center;gap:8px;padding:7px 14px;flex-wrap:wrap;
        border-bottom:1px solid #e5e7eb;background:#f8fafc}
.so-bar .so-lb{font-size:11px;font-weight:700;color:#002C5F;white-space:nowrap}
/* 셀렉트는 폭을 하나로 맞춘다. 내용에 따라 제각각이면 줄이 들쭉날쭉해
   어디까지가 한 항목인지 눈으로 잡히지 않는다. */
.so-bar select{font-family:'Pretendard',sans-serif;font-size:11px;padding:4px 7px;
               border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#111827;
               width:96px;flex:0 0 96px}
.so-ck{display:flex;align-items:center;gap:4px;font-size:11px;color:#374151;
       white-space:nowrap;cursor:pointer;letter-spacing:-.3px}
.so-ck input{margin:0;cursor:pointer}
/* 버튼을 오른쪽으로 미는 여백. 평소엔 비어 있고 못 읽은 종목이 있을 때만 알린다.
   건수는 아래 KPI 카드에 이미 있어 툴바에 또 적으면 중복이다. */
.so-stat{flex:1;font-size:10px;color:#6b7280;min-width:0}

/* 툴바가 한 줄 늘었으므로 표 높이 예산도 그만큼 줄인다.
   안 줄이면 표 아래끝이 화면 밖으로 나가 가로 스크롤바가 안 보인다. */
.so-bar + div .bal-tbl-wrap{max-height:calc(100vh - 302px)}

/* ── 표 ──
   .bal-tbl 과 같은 구조: table-layout:fixed + width:100% + min-width.
   종목명 하나만 width:auto 로 두어 남는 폭을 전부 흡수시킨다.
   ★ 칼럼을 추가하면 아래 min-width(800px)도 반드시 같이 올릴 것. */
.so-tbl{width:100%;min-width:940px;border-collapse:collapse;font-size:9.5px;
        table-layout:fixed}
.so-tbl thead th{position:sticky;top:0;background:#f1f3f7;z-index:2;
                 box-shadow:inset 0 -1px 0 #cbd5e1}
.so-tbl th{padding:4px 1px;white-space:nowrap;font-weight:700;color:#374151;
           line-height:1.2;letter-spacing:-.6px;cursor:pointer}
.so-tbl th[data-nosort]{cursor:default}
.so-tbl td{padding:3px 1px;border-bottom:1px solid #eef1f5;white-space:nowrap;
           letter-spacing:-.5px;vertical-align:middle}
.so-tbl tbody tr:hover{background:#fafbfc}

/* 칼럼 폭 — 18칼럼. 고정 합계 792px + 종목명 최소 130px = min-width 930px */
.so-tbl .w-grp {width:46px}
.so-tbl .w-ctry{width:34px}
.so-tbl .w-mkt {width:52px}
.so-tbl .w-code{width:56px}
.so-tbl .w-nm  {width:auto}      /* ★ 유일한 가변 칼럼 */
.so-tbl .w-kind{width:42px}
.so-tbl .w-dt  {width:52px}
.so-tbl .w-done{width:46px}
.so-tbl .w-px  {width:42px}
.so-tbl .w-sell{width:47px}
.so-tbl .w-cur {width:47px}
.so-tbl .w-gap {width:58px}   /* +8,641% 처럼 네 자리 퍼센트가 흔하다 */
.so-tbl .w-qty {width:34px}
.so-tbl .w-pl  {width:56px}
.so-tbl .w-gap2{width:54px}
.so-tbl .w-act {width:32px}

/* 헤더는 전부 가운데. 값은 오른쪽으로 흘러도 제목은 칸 가운데가 읽기 좋다. */
.so-tbl thead th{text-align:center;padding-left:2px;padding-right:2px}
.so-tbl th.w-dt,.so-tbl th.w-done,.so-tbl th.w-gap{
  line-height:1.15;letter-spacing:-.4px}
.so-tbl th.w-gap2{line-height:1.15;letter-spacing:-.6px}

/* ── 셀 ── */
/* 종목명은 절대 접지 않는다. max-width:0 은 fixed 레이아웃에서 셀을 통째로
   눌러 버리므로 쓰지 말 것 (.c-nm 주석과 같은 이유). */
.so-tbl .so-nm{text-align:left;padding-left:4px;font-weight:700;color:#111827;
               overflow:hidden;text-overflow:ellipsis}
.so-tbl .so-grp{text-align:left;padding-left:4px;color:#94a3b8;
                overflow:hidden;text-overflow:ellipsis}
.so-tbl .so-dt{text-align:center;color:#475569;font-variant-numeric:tabular-nums;
               font-size:9.5px;letter-spacing:-.2px}
.so-tbl .so-px,.so-tbl .so-sub,.so-tbl .so-qty1,.so-tbl .so-pl{
  text-align:right;padding-right:3px;font-variant-numeric:tabular-nums}
.so-tbl .so-px.sub,.so-tbl .so-sub{color:#64748b;font-weight:500}   /* 참고값 — 톤만 낮춘다 */
.so-tbl .so-qty1{color:#475569}
.so-tbl .so-pl{color:#64748b;font-weight:500}                       /* 보조 지표 */
.so-tbl .so-pl.px-up,.so-tbl .so-pl.px-down{font-weight:600}

/* 판단의 기준이 되는 세 칸 — 매도평균가 · 현재가 · 매도가대비.
   하나로 묶여 읽히도록 좌우를 실선으로 끊는다 (.c-step.c-rz 와 같은 장치). */
.so-tbl .so-px.sell{border-left:1px solid #e5e7eb}
.so-tbl .so-gap{border-right:1px solid #e5e7eb}
.so-tbl th.w-sell{border-left:1px solid #e5e7eb}
.so-tbl th.w-gap {border-right:1px solid #e5e7eb}
/* 매도평균가와 현재가는 같은 무게로 둔다. 색은 쓰지 않는다 —
   옆의 매도가대비가 이미 빨강/파랑으로 방향을 말하고 있다. */
.so-tbl .so-px.sell,.so-tbl .so-px.cur{
  font-size:10.5px;font-weight:800;color:#111827;letter-spacing:-.6px}
.so-tbl .so-gap{text-align:right;padding-right:3px;font-variant-numeric:tabular-nums;
                font-weight:700;letter-spacing:-.4px;color:#64748b}

/* 매도완료 — 총 매수수량 대비 매도수량.
   같은 퍼센트를 보여주는 칸이므로 .so-gap / .so-gap2 와 서식을 맞춘다.
   자릿수가 어긋나면 같은 종류의 값이 아닌 것처럼 보인다. */
.so-tbl .so-qty{text-align:right;padding-right:3px;font-variant-numeric:tabular-nums;
                font-weight:700;letter-spacing:-.4px;color:#64748b}
.so-qty .q-pct{letter-spacing:-.4px}
/* 매도 횟수 — 몇 번에 나눠 팔았는지. 한 번에 턴 것과 열 번에 나눈 것은
   같은 100% 라도 뜻이 다르다. 값이 아니라 맥락이라 톤을 낮춘다. */
.so-qty .q-cnt{display:block;font-size:7.5px;color:#a8b3c2;letter-spacing:-.3px;margin-top:1px}

/* ── 구분 ──
   원금회수는 보유종목의 '수익실현' 과 같은 판정이므로 **같은 색**을 쓴다.
   두 화면에서 색이 다르면 다른 상태로 읽힌다. */
.so-tbl .so-kind{text-align:center}
.so-tag{font-size:8.5px;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.so-tag.clear {color:#64748b}   /* 전량매도 — 끝난 포지션 */
.so-tag.secure{color:#e5484d}   /* 원금회수 — .c-sig.sig-secure 와 같은 색 */

/* ── 재매수 ──
   이 표에서 유일하게 색으로 강조하는 칸이다. 단계가 올라갈수록 진해지고,
   3차만 테두리를 둘러 '지금 볼 값'을 못 박는다 (.c-step.tg.next 와 같은 장치).
   '관망'·'매도가 위'는 무채색으로 눌러 시선이 후보 쪽으로만 가게 한다. */
.so-tbl .so-ent{text-align:center;padding:2px 1px;line-height:1.2}
.e-tag{font-size:8.5px;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.e-tag.na   {color:#e2e8f0}
.e-tag.over {color:#c3cad4}
.e-tag.watch{color:#64748b}
.e-tag.buy1 {color:#e5484d}
.e-tag.buy2 {color:#e5484d;font-weight:800}
.e-tag.buy3 {color:#e5484d;font-weight:800}
.so-tbl .so-ent.buy3{box-shadow:inset 0 0 0 1px #e5484d}

.so-tbl .so-act{text-align:center;white-space:nowrap}

/* 진행률 — 종목마다 거래내역을 받으므로 수십 초가 걸릴 수 있다.
   '읽는 중…' 만 띄워 두면 멈춘 것과 구분이 안 된다. */
.so-prog{padding:20px 14px;font-size:12px;color:#94a3b8;font-variant-numeric:tabular-nums}
.so-prog b{color:#002C5F;font-weight:800}

/* ── 재매수 근거 두 칸 (최초매입 대비 · 전량매도 대비) ──
   판정의 재료라 재매수 칸 바로 왼쪽에 붙였다. 왼쪽을 실선으로 끊어
   '여기부터 판정'임을 표시한다.
   매도평균 대비(.so-gap)보다 한 단계 낮춘다. 그쪽이 주된 기준이고
   이 둘은 참고선이다. 셋 다 크게 하면 어느 것을 볼지 알 수 없다. */
.so-tbl .so-gap2{text-align:right;padding-right:3px;font-variant-numeric:tabular-nums;
                 font-weight:700;letter-spacing:-.4px;color:#64748b}
.so-tbl .so-gap2.lead,.so-tbl th.w-gap2:first-of-type{border-left:1px solid #e5e7eb}

/* 고른 기준 칸만 강조한다. 셋 다 크게 하면 어느 것을 보는지 알 수 없고,
   기준이 바뀌면 강조도 따라가야 표와 셀렉트가 어긋나지 않는다. */
.so-tbl td.so-gap.on,.so-tbl td.so-gap2.on{
  font-size:10.5px;font-weight:800;letter-spacing:-.6px;
  box-shadow:inset 0 0 0 1px #cbd5e1}
.so-tbl th.w-gap.on,.so-tbl th.w-gap2.on{color:#111827;background:#e8ecf3}
/* 재매수 헤더 아래 작은 글씨 — 지금 어느 기준으로 매긴 판정인지 */
.so-tbl .w-ent-sub{display:block;font-size:7.5px;font-weight:600;color:#94a3b8;
                   letter-spacing:-.4px}

/* 조용히 빠진 종목을 드러낸다. 목록이 말없이 줄어드는 것이 가장 나쁘다. */
.bal-note.so-fail{color:#b45309;cursor:help}
.so-stat .so-warn{color:#e5484d;font-weight:700}

/* 국가·거래소·종목번호 — 판단에 쓰는 값이 아니라 식별용이다.
   톤을 낮춰 매도평균가·현재가 쪽으로 시선이 가게 둔다. */
.so-tbl .so-ctry{text-align:center;color:#64748b}
.so-tbl .so-mkt {text-align:center;color:#94a3b8;font-size:8.5px;letter-spacing:-.3px}
.so-tbl .so-code{text-align:center;color:#94a3b8;font-variant-numeric:tabular-nums;
                 overflow:hidden;text-overflow:ellipsis}
.so-tbl th.w-ctry,.so-tbl th.w-mkt,.so-tbl th.w-code{letter-spacing:-.5px}

/* ══════════════════════════════════════════════════════════════
   설정 ▸ 일반설정 (.gs-)
   ══════════════════════════════════════════════════════════════ */
.gs-wrap{padding:14px}
.gs-head h3{margin:0 0 6px;font-size:13px;font-weight:800;color:#002C5F;letter-spacing:-.4px}
.gs-head p{margin:0 0 4px;font-size:11px;color:#475569;line-height:1.55;letter-spacing:-.3px}
.gs-head p.gs-sub{color:#64748b}
.gs-head code{background:#f1f3f7;padding:1px 4px;border-radius:3px;font-size:10px}

.gs-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
        margin:12px 0;padding:8px 10px;background:#f8fafc;
        border:1px solid #e5e7eb;border-radius:6px}
.gs-bar input{font-family:'Pretendard',sans-serif;font-size:11px;padding:4px 7px;
              border:1px solid #cbd5e1;border-radius:5px;background:#fff;width:210px}
.gs-stat{flex:1;font-size:11px;color:#64748b;min-width:90px}
.gs-stat b{color:#e5484d}
.gs-bar .gs-save{background:#002C5F;color:#fff;border-color:#002C5F;font-weight:700}

.gs-tbl-wrap{max-height:calc(100vh - 320px);overflow:auto;border:1px solid #e5e7eb;border-radius:6px}
.gs-tbl{width:100%;min-width:460px;border-collapse:collapse;font-size:11px;table-layout:fixed}
.gs-tbl thead th{position:sticky;top:0;background:#f1f3f7;z-index:2;
                 box-shadow:inset 0 -1px 0 #cbd5e1;
                 padding:6px 8px;text-align:left;font-weight:700;color:#4b5563;
                 font-size:10.5px;white-space:nowrap;cursor:pointer}
.gs-tbl thead th[data-nosort]{cursor:default}
.gs-tbl .w-mk {width:170px}
.gs-tbl .w-in {width:auto}
.gs-tbl .w-df {width:120px}
.gs-tbl .w-act{width:58px}
.gs-tbl td{padding:4px 8px;border-bottom:1px solid #eef1f5;vertical-align:middle}
.gs-tbl tbody tr:hover{background:#fafbfc}

.gs-mk{font-weight:700;color:#111827;font-variant-numeric:tabular-nums}
.gs-tag{display:inline-block;margin-left:4px;font-size:8.5px;font-weight:700;color:#047857}
.gs-in input{width:100%;font-family:'Pretendard',sans-serif;font-size:11px;
             padding:3px 6px;border:1px solid #e2e8f0;border-radius:4px;background:#fff}
.gs-in input:focus{border-color:#002C5F;outline:none}
.gs-df{font-size:10px;color:#94a3b8;white-space:nowrap}
.gs-chg{color:#b45309}          /* 기본값과 다르게 고친 줄 */
.gs-act{text-align:right}
.gs-act .pd-btn{font-size:10px;padding:2px 6px}

/* 일반설정 — 구역 구분 */
.gs-sec{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #e5e7eb}
.gs-sec h3{margin:0 0 6px;font-size:13px;font-weight:800;color:#002C5F;letter-spacing:-.4px}
.gs-sec p{margin:0 0 4px;font-size:11px;color:#475569;line-height:1.55;letter-spacing:-.3px}
.gs-cnt{font-size:11px;font-weight:600;color:#64748b;margin-left:5px}
.gs-warn{color:#b45309!important;font-size:11px;margin-top:6px!important}
.gs-bar select,.gs-bar input[type=time]{
  font-family:'Pretendard',sans-serif;font-size:11px;padding:4px 7px;
  border:1px solid #cbd5e1;border-radius:5px;background:#fff;width:auto}

/* 아직 매핑 안 된 ISIN — 잘린 코드 대신 상태를 보여준다 */
.so-tbl .so-code.isin{color:#b45309;font-size:8.5px;font-weight:700;letter-spacing:-.3px}

/* 퍼센트가 칸을 넘지 않게. 넘칠 때는 자간을 좁혀 담는다. */
.so-tbl .so-gap,.so-tbl .so-gap2,.so-tbl .so-sub,.so-tbl .so-qty{
  overflow:hidden;text-overflow:clip;white-space:nowrap}
.so-tbl td.so-gap.on,.so-tbl td.so-gap2.on{letter-spacing:-.7px}

/* 기간 칩 — 일별 주가의 .pd-rg 를 그대로 쓴다. 두 화면이 같은 말을 해야 한다. */
.so-rg{display:inline-flex;gap:2px}

/* 하락폭 필터 — 체크박스와 그 기준의 하락폭을 한 덩어리로 묶는다.
   따로 떨어져 있으면 어느 셀렉트가 어느 체크에 걸린 것인지 알 수 없다. */
.so-drop{display:inline-flex;align-items:center;gap:3px;
         padding:2px 5px 2px 3px;border:1px solid #e5e7eb;border-radius:5px;background:#fff}
.so-drop select{font-size:10px;padding:2px 4px;border:1px solid #e2e8f0;border-radius:4px;
                width:88px;flex:0 0 88px}
.so-drop select:disabled{color:#cbd5e1;background:#f8fafc}

/* 툴바 셀렉트 — 값이 가운데 오게. 폭이 제각각이라 왼쪽 정렬이면 들쭉날쭉하다. */
.so-bar select{text-align:center;text-align-last:center}
.so-bar select option{text-align:center}

/* ══════════════════════════════════════════════════════════════
   Signal 탭 (.sg-)
   보유 신호와 재매수 후보를 한 표에. 판정은 각 탭의 함수를 그대로 쓴다.
   ══════════════════════════════════════════════════════════════ */
.sg-wrap{padding:12px 14px}
.sg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.sg-card{border:1px solid #e5e7eb;border-radius:7px;overflow:hidden;background:#fff}
.sg-card.secure{border-top:2px solid #059669}
.sg-card.turned{border-top:2px solid #e5484d}
.sg-card.gain  {border-top:2px solid #002C5F}
.sg-hd{display:flex;align-items:center;gap:6px;padding:7px 9px;
       background:#f8fafc;border-bottom:1px solid #eef1f5}
.sg-hd2{display:flex;align-items:center;gap:8px;padding:7px 9px;
        background:#f1f3f7;border:1px solid #e5e7eb;border-bottom:none;border-radius:7px 7px 0 0}
.sg-ttl{font-size:12px;font-weight:800;color:#002C5F;letter-spacing:-.4px}
.sg-cnt{font-size:11px;font-weight:700;color:#fff;background:#94a3b8;
        border-radius:9px;padding:1px 7px;min-width:20px;text-align:center}
.sg-card.secure .sg-cnt{background:#059669}
.sg-card.turned .sg-cnt{background:#e5484d}
.sg-card.gain   .sg-cnt{background:#002C5F}
.sg-cond{flex:1;font-size:11px;color:#64748b;letter-spacing:-.3px}

.sg-sec{margin-bottom:12px}
.sg-tbl{width:100%;border-collapse:collapse;font-size:11px}
.sg-tbl.wide{border:1px solid #e5e7eb;border-radius:0 0 7px 7px}
.sg-tbl thead th{padding:5px 6px;background:#f8fafc;border-bottom:1px solid #e5e7eb;
                 font-size:10px;font-weight:700;color:#4b5563;text-align:center;white-space:nowrap}
.sg-tbl td{padding:4px 7px;border-bottom:1px solid #f1f3f7;white-space:nowrap}
.sg-tbl tbody tr:last-child td{border-bottom:none}
.sg-tbl tbody tr:hover{background:#fafbfc}
.sg-nm{font-weight:700;color:#111827;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.sg-sub{font-size:10px;color:#94a3b8;text-align:center}
.sg-px{text-align:right;font-variant-numeric:tabular-nums;color:#374151}
.sg-rt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
       letter-spacing:-.4px;color:#64748b}
.sg-empty{padding:14px;text-align:center;font-size:11px;color:#9ca3af;
          border:1px solid #e5e7eb;border-top:none;border-radius:0 0 7px 7px}
.sg-card .sg-empty{border:none}

/* Signal — 살 것 / 팔 것 (.pk-) */
.pk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pk-col{border:1px solid #e5e7eb;border-radius:7px;overflow:hidden;background:#fff}
.pk-col.buy {border-top:2px solid #e5484d}   /* 사는 쪽은 붉은 계열 (국내 관행) */
.pk-col.sell{border-top:2px solid #1d4ed8}
.pk-hd{display:flex;align-items:center;gap:7px;padding:8px 10px;
       background:#f8fafc;border-bottom:1px solid #eef1f5}
.pk-ttl{font-size:12.5px;font-weight:800;color:#002C5F;letter-spacing:-.4px}
.pk-col.buy  .sg-cnt{background:#e5484d}
.pk-col.sell .sg-cnt{background:#1d4ed8}
.pk-sub{display:flex;align-items:center;gap:6px;padding:5px 10px;
        background:#fcfdfe;border-bottom:1px solid #f1f3f7;
        font-size:10.5px;color:#64748b;letter-spacing:-.3px}
.pk-sub b{color:#111827}
.sg-why{font-size:10px;color:#64748b;letter-spacing:-.3px;white-space:nowrap}
.sg-why.add {color:#e5484d}
.sg-why.take{color:#1d4ed8;font-weight:700}
.sg-why.turn{color:#b45309}
.sg-why.back{color:#7c3aed}

/* 기간손익 — 구간마다 상자를 따로. 셀렉트로 하나씩 바꿔 보면
   오늘과 이번달을 나란히 못 놓는다. 견주어 봐야 뜻이 산다. */
/* 손익 요약과 한 줄에 놓이도록 최소폭을 낮춘다. 진짜 좁아지면 그때 접힌다. */
.kpi-pd-wrap{flex:1 1 420px;min-width:420px;border:1px solid #e5e7eb;
             border-radius:8px;padding:8px 10px;background:#fff}
.kpi-pd-hd{font-size:10px;color:#6b7280;margin-bottom:5px}
/* 제목줄의 셈법 설명 — 값이 아니라 읽는 법이라 아주 작게. */
.kpi-pd-hd span{color:#c3cad6;margin-left:5px;font-size:9px;letter-spacing:-.3px}
.kpi-pd-row{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.kpi-pd{flex:1;min-width:62px;border:1px solid #eef1f5;border-radius:6px;
        padding:6px 10px;background:#fafbfc;display:flex;flex-direction:column}
.kpi-pd.custom{flex:1;min-width:88px}
.kpi-pd-lb{display:flex;align-items:center;justify-content:center;gap:3px;
           font-size:9.5px;font-weight:700;color:#64748b;margin-bottom:3px;
           white-space:nowrap;padding-bottom:3px;border-bottom:1px solid #eef1f5}
/* 기간을 펴는 버튼. 다른 다섯 칸과 높이를 맞추려면 제목줄 안에 있어야 한다. */
.kpi-pd-cal{border:none;background:none;padding:0 1px;font-size:9.5px;
            line-height:1;cursor:pointer;opacity:.55}
.kpi-pd-cal:hover{opacity:1}
/* 실현·평가·합계 세 줄. 이름은 왼쪽, 값은 오른쪽으로 붙여 자릿수를 맞춘다. */
/* 라벨과 값 사이. 칸이 내용 폭(max-content)에 딱 맞아서
   간격이 좁으면 글자가 서로 붙어 읽기 힘들다. */
.kpi-pd-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
          font-size:9px;color:#94a3b8;line-height:1.6;white-space:nowrap}
.kpi-pd-l b{font-size:10px;font-weight:700;color:#475569;
            font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.kpi-pd-l.st{margin-top:2px;padding-top:2px;border-top:1px solid #eef1f5}
.kpi-pd-l.st b{font-size:11px;font-weight:800}
/* 날짜칸은 가로로. 세로로 쌓으면 이 상자만 길어져 KPI 줄 전체가 늘어난다. */
.kpi-pd-dt{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:4px}
.kpi-pd-dt input[type=date]{flex:1;min-width:0;font-family:'Pretendard',sans-serif;
                            font-size:8.5px;padding:1px 2px;border:1px solid #e2e8f0;
                            border-radius:3px}
.kpi-warn{margin-top:4px;font-size:9.5px;color:#b45309}

/* 한 상자에 두 값 (매입금액 / 평가금액) */
/* 평가손익 상자 안의 수익률 */
.kpi-rt{font-size:11px;font-weight:800;margin-top:2px}

/* 매입·매도 횟수 — 몇 번에 나눠 샀나/팔았나.
   전량매도한 적이 있으면 그 이후 구간만 센다(서버가 청산 때 리셋). */
.bal-tbl .w-cnt{width:38px}
.bal-tbl .c-cnt{text-align:right;padding-right:4px;font-size:10px;color:#94a3b8;
                font-variant-numeric:tabular-nums;white-space:nowrap}

/* 구분 — 종목명 왼쪽. 툴바 Signal 셀렉트와 같은 값이다.
   Signal 칸은 '다음에 팔 단계와 가격'만 맡고, 상태는 여기서 본다. */
.bal-tbl .w-kind{width:52px}
.bal-tbl .c-kind{text-align:center;font-size:10px;font-weight:700;
                 letter-spacing:-.4px;white-space:nowrap;color:#94a3b8}
.bal-tbl .c-kind.secure{color:#059669}
.bal-tbl .c-kind.turned{color:#e5484d}
.bal-tbl .c-kind.gain  {color:#002C5F}
.bal-tbl .c-kind.none  {color:#b8c0cc}

/* To-do 의 구분 칸은 **상태가 아니라 할 일**이다 — 매도 · 손실전환 · 매수.
   색은 하는 일의 방향을 따른다: 파는 쪽 붉게, 사는 쪽 푸르게, 꺾인 것은 경고색.
   보유종목 탭의 상태 색(.secure/.gain …)과 이름을 나눠 둔다 — 같은 칸을 쓰지만
   뜻이 다르므로, 한쪽 색을 고치다 다른 쪽이 같이 바뀌면 안 된다. */
.bal-tbl .c-kind.td-sell{color:#e5484d}
.bal-tbl .c-kind.td-turn{color:#b45309}
.bal-tbl .c-kind.td-buy {color:#1d4ed8}
.bal-tbl .c-sig.td-buy  {color:#1d4ed8;font-weight:700}
/* 기준(%) — 할 일 셈 옆에 작게. 어느 잣대로 고른 줄인지 여기서 바로 읽힌다. */
.sg-rule{font-style:normal;color:#94a3b8;font-size:10px;letter-spacing:-.2px}

/* ══════════════════════════════════════════════════════════════
   결과 창 (showResult) — 시세 갱신·마스터 적재 결과를 보여준다.
   규칙이 없어 브라우저 기본값으로 그려지고 있었다. 화면 왼쪽 아래에
   잘린 채 표에 겹쳐 보이던 것이 그 때문이다.
   ══════════════════════════════════════════════════════════════ */
.rs-back{position:fixed;inset:0;z-index:9000;display:none;
         align-items:center;justify-content:center;
         background:rgba(15,23,42,.45);padding:24px}
.rs-box{width:min(1080px,94vw);max-height:92vh;display:flex;flex-direction:column;
        background:#fff;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);
        overflow:hidden}
.rs-head{display:flex;align-items:center;gap:8px;padding:11px 14px;
         background:#f8fafc;border-bottom:1px solid #e5e7eb;
         font-size:13px;font-weight:800;color:#002C5F;letter-spacing:-.4px}
.rs-head #rsTitle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-act{display:flex;gap:6px;flex:0 0 auto}
.rs-act button{font-family:'Pretendard',sans-serif;font-size:11px;font-weight:700;
               padding:4px 11px;border:1px solid #cbd5e1;border-radius:5px;
               background:#fff;color:#374151;cursor:pointer}
.rs-act button:hover{background:#f1f3f7}
.rs-act button:first-child{background:#002C5F;border-color:#002C5F;color:#fff}
.rs-act button:first-child:hover{background:#003d80}
#rsBody{flex:1;min-height:min(74vh,760px);margin:0;padding:12px 14px;border:none;resize:none;
        font-family:'D2Coding','Consolas',monospace;font-size:11.5px;line-height:1.65;
        color:#374151;background:#fff;white-space:pre;overflow:auto}
#rsBody:focus{outline:none}

/* KPI 금액이 '189,190,996 / 원' 으로 줄바꿈되던 것을 막는다.
   좁아지면 글자를 줄이지 말고 상자가 늘어나게 둔다. */
.bal-kpi-row > div{white-space:nowrap}
.kpi-rt{font-size:11px;font-weight:800;margin-top:2px}

/* 기간손익을 못 불러왔을 때 — 이유를 그 자리에 적는다. */
.kpi-pd-none{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
             padding:10px 4px;font-size:11px;color:#94a3b8}
.kpi-pd-none b{color:#b45309;font-weight:700}
.kpi-pd-none span{flex:1;min-width:120px;font-size:10px;letter-spacing:-.3px}

/* KPI 금액이 상자를 넘던 문제 — 상자가 내용만큼은 넓어지게 둔다.
   flex-basis 0 에 nowrap 이면 글자가 테두리 밖으로 삐져나온다. */
/* 상자가 제 폭만 차지하게 둔다. 예전 카드 시절의 max-content 는
   지금 구조에서 손익 상자를 화면 끝까지 늘려 기간손익을 아래로 밀었다. */
.bal-kpi-row{align-items:stretch}

/* 목록 헤더의 전체 선택 */
.wl-col-hd .wl-all{display:inline-flex;align-items:center;gap:3px;margin-left:6px;
                   font-size:10.5px;font-weight:600;color:#64748b;cursor:pointer}
.wl-col-hd .wl-all input{margin:0;cursor:pointer}

/* 손익 요약 — 기간손익과 **같은 짜임**을 쓴다(.kpi-pd*).
   여기서는 폭만 다르게 준다. 표현을 따로 두면 나란히 섰을 때
   같은 종류의 값이 아닌 것처럼 보인다. */
.kpi-sum{flex:0 1 auto;min-width:0}
/* 줄이 nowrap 이라 칸이 좁으면 글자가 옆 칸으로 넘친다.
   내용만큼은 넓어지게 두고, 좁아지면 상자째 접히게 한다. */
.kpi-sum .kpi-pd{min-width:max-content;flex:0 0 auto}
/* 손익 요약은 값이 길어 조금 더 벌린다. */
.kpi-sum .kpi-pd-l{gap:20px}
.kpi-sum .kpi-pd-l{line-height:1.55}
.kpi-sum .kpi-pd-l b{font-size:11.5px}
/* 총손익은 결론이라 한 단계 키운다. */
.kpi-sum .kpi-pd-l.st b{font-size:13.5px;color:#002C5F}

/* 같은 줄에 붙는 덧값(수익률). 금액보다 작게 둬서 층이 갈리게 한다. */
.kpi-pd-x{font-style:normal;font-size:9.5px;font-weight:700;margin-left:7px;
          font-variant-numeric:tabular-nums;flex:0 0 auto}

/* 수익분석 — 평가손익을 주가·환율로 쪼갠 칸.
   **카드와 같은 뼈대(.kpi-pd)** 를 쓰되 테두리와 바탕만 없앤다.
   그래야 줄이 옆 카드와 한 눈금에 맞고, 값의 성격이 다르다는 것도 드러난다. */
.kpi-sum .kpi-pd.kpi-side{border:none;background:none;padding-left:2px}
.kpi-sum .kpi-side .kpi-pd-lb{color:#b8c0cc;border-bottom-color:#f1f3f7}
.kpi-sum .kpi-side .kpi-pd-l{color:#b8c0cc}
.kpi-sum .kpi-side .kpi-pd-l b{color:#8a94a6;font-size:10.5px}
.kpi-sum .kpi-side .kpi-pd-l.st b{color:#64748b;font-size:11px}

/* 주가·환율 — 평가손익을 쪼갠 값이라 그 아래에 붙인다.
   라벨 자리를 비우고 값 자리부터 시작해 어디에 딸린 줄인지 보이게 한다. */

/* ══════════════════════════════════════════════════════════════
   차트 탭 (.ch-) — 봉차트 + 거래량 + 내 매매 시점
   캔버스가 아니라 SVG 다. 눈금·툴팁을 DOM 으로 붙일 수 있고
   화면 배율이 달라져도 안 뭉개진다.
   ══════════════════════════════════════════════════════════════ */
.ch-wrap{padding:10px 14px}
.ch-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;
        padding:7px 10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px}
.ch-bar select{font-family:'Pretendard',sans-serif;font-size:11px;padding:4px 7px;
               border:1px solid #cbd5e1;border-radius:5px;background:#fff;
               max-width:240px;text-align:center;text-align-last:center}
.ch-rg{display:inline-flex;gap:2px}
.ch-info{font-size:10px;color:#94a3b8;letter-spacing:-.3px}
.ch-sp{flex:1}
.ch-warn{font-size:10px;color:#b45309}

.ch-svg-wrap{border:1px solid #e5e7eb;border-radius:7px;background:#fff;padding:4px}
.ch-svg{width:100%;height:min(56vh,420px);display:block}
.ch-msg{padding:40px;text-align:center;font-size:12px;color:#9ca3af;
        border:1px solid #e5e7eb;border-radius:7px;background:#fff}
.ch-msg.err{color:#e5484d}

/* 국내 관행대로 오르면 빨강, 내리면 파랑 */
.ch-body.up,.ch-wick.up{fill:#e5484d;stroke:#e5484d}
.ch-body.dn,.ch-wick.dn{fill:#1d4ed8;stroke:#1d4ed8}
.ch-wick{stroke-width:1}
.ch-dot{fill:#94a3b8}
.ch-grid{stroke:#eef1f5;stroke-width:1}
.ch-ax{font-size:9px;fill:#94a3b8;font-variant-numeric:tabular-nums}
.ch-ax.mid{text-anchor:middle}
/* 매매 시점 — 봉과 겹치므로 테두리를 둘러 떠 보이게 한다 */
.ch-mk{stroke:#fff;stroke-width:1}
.ch-mk.buy{fill:#e5484d}
.ch-mk.sell{fill:#1d4ed8}

/* 신호선 — 보유종목과 같은 판정을 봉 위에 얹는다.
   붉은 계열은 살 자리, 푸른 계열은 팔 자리 (국내 관행). */
.ch-line{stroke-width:1;stroke-dasharray:4 3;opacity:.75}
.ch-line.avg {stroke:#94a3b8;stroke-dasharray:none;opacity:.9}
.ch-line.buy {stroke:#e5484d}
.ch-line.sell{stroke:#1d4ed8}
.ch-line.rz  {stroke:#1d4ed8;stroke-width:1.4;stroke-dasharray:none}
.ch-line.done{opacity:.28}                 /* 이미 판 익절 칸 */
.ch-lb{font-size:8px;font-weight:700;letter-spacing:-.3px}
.ch-lb.avg {fill:#8a94a6}
.ch-lb.buy {fill:#e5484d}
.ch-lb.sell,.ch-lb.rz{fill:#1d4ed8}
.ch-lb.done{opacity:.35}

/* 현황판 — 보유종목 표(.bal-tbl)를 **그대로** 쓴다.
   칼럼만 열 개로 추리므로 최소폭만 그에 맞춰 줄인다.
   폭 규칙(w-kind·w-px·w-rt…)과 셀 서식(c-nm·c-px·c-rt…)은 손대지 않는다 —
   한 곳만 고치면 두 화면이 같이 따라와야 한다.
   여러 계좌를 한 화면에서 훑는 표라 `계좌/펀드` 칸이 필요하다
   (보유종목은 툴바에서 계좌를 고르므로 그 칸이 없다).
   국가·거래소는 종목명 왼쪽에 둔다 — 어느 시장 종목인지 먼저 알고 이름을 읽는다.
   단계(1~5차·실현) · Signal(목표가) · 매도시 손익·수익률을 나눠 둔다.
   `매도시` 는 **전량 기준**이다 — 사다리의 각 차수가 몇 주씩인지는 정해져 있지 않다.
   고정 칸 합계 881px + 종목명 최소 190px = 1070px */
.sg-tbl2{min-width:1300px}
/* 단계 칸 — 목표가에 닿았으면 진하게. */
.sg-tbl2 .c-sig{text-align:center;font-size:9.5px;font-weight:700;color:#94a3b8;
                letter-spacing:-.3px;white-space:nowrap}
.sg-tbl2 .c-sig.on{color:#1d4ed8}
.sg-tbl2 .c-sig.blank{color:#d5dbe4}
/* 계좌 번호(016113·016113-1)는 다 들어가고, 긴 펀드 이름은 잘린다.
   `2017KIF-한국투자 지능정보 투자조합` 을 다 담으면 160px 이 필요한데
   그 하나 때문에 표가 길어진다 — 잘린 이름은 툴팁에 그대로 나온다. */
.sg-tbl2 .w-fund{width:104px}
.sg-tbl2 .w-ctry2{width:34px}
.sg-tbl2 .w-mkt2{width:52px}
/* 국가·거래소는 맥락이라 톤을 낮춘다 (매도종목 탭의 .so-ctry·.so-mkt 와 같은 결). */
.bal-tbl .c-ctry{text-align:center;font-size:9.5px;color:#8a94a6;white-space:nowrap}
.bal-tbl .c-mkt{text-align:center;font-size:9.5px;color:#a8b3c2;
                letter-spacing:-.4px;white-space:nowrap}
/* 계좌명은 판단에 쓰는 값이 아니라 어디 것인지만 보면 된다 — 톤을 낮춘다. */
.bal-tbl .c-fund{text-align:center;font-size:9.5px;color:#8a94a6;
                 letter-spacing:-.4px;white-space:nowrap;
                 overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.sg-tbl2 .w-nm{min-width:190px}
/* 현황판·잔고현황은 폭에 여유가 있으니 조금 더 넓게. */
.sg-tbl2 .w-qty{width:64px}
.sg-empty2{text-align:center;color:#9ca3af;padding:18px;font-size:11px}
.bal-tbl .c-kind.back{color:#7c3aed}

/* 원금 회수 — 그 목표가에 몇 주를 팔면 들인 돈을 다 빼는가.
   그만큼 팔고 나면 남은 물량은 통째로 이익 구간이 된다. */
/* 표의 마지막 칸이라 스크롤바에 붙는다. 오른쪽에 숨 쉴 자리를 준다. */
.sg-tbl2 .w-need{width:74px}
.sg-tbl2 .c-need{color:#059669;font-weight:700;padding-right:10px}
/* 손보기 — 표의 맨 끝. 단추 둘이 나란히 서는 폭만 준다. */
.sg-tbl2 .w-act{width:46px}
.sg-tbl2 .c-act{text-align:center;white-space:nowrap;padding-right:8px}
.sg-tbl2 .c-act .bal-trade-btn + .bal-trade-btn{margin-left:2px}
/* 치움 — 몇 줄을 치워 뒀는지. 눌러서 다 되돌린다.
   셈만 적어 두면 어디서 되돌리는지 알 수 없어, 셈 자체를 단추로 만든다. */
.sg-hid{border:1px solid #d7dee8;border-radius:9px;background:#f6f8fb;color:#64748b;
        font-size:10px;font-weight:700;letter-spacing:-.3px;padding:1px 7px;
        margin-left:6px;cursor:pointer;font-family:inherit}
.sg-hid:hover{background:#eef2f7;color:#334155}
.sg-tbl2 th.w-need{padding-right:10px}
/* 보유수량은 견주는 값이라 톤을 낮춘다 — 앞의 숫자가 답이다. */
.c-need-of{color:#a8b3c2;font-weight:600;font-size:9px}
.c-need-no{color:#b45309;font-weight:700}

/* 재매수 후보 — 같은 표 안에서 구분되게 바탕을 살짝 눕힌다. */
.sg-tbl2 tr.sg-back td{background:#fcfbff}
.sg-tbl2 .c-sig.back{color:#7c3aed}
/* 두 덩어리를 가르는 줄. 어디부터 판 종목인지 알려 준다. */
.sg-tbl2 tr.sg-sep td{background:#f4f2fb;color:#7c3aed;font-size:10px;font-weight:700;
                      padding:5px 10px;border-top:1px solid #e5e0f5;letter-spacing:-.3px}

/* 계좌/펀드 설정 — 종목 목록의 등록일.
   엑셀을 잘못 올리면 수십 개가 한꺼번에 들어온다. 그 날짜를 눌러
   그날 들어온 것을 통째로 고르고 지울 수 있게 한다. */
.wl-row .fd-dt{flex:0 0 46px;text-align:right;font-size:9px;color:#b8c0cc;
               font-variant-numeric:tabular-nums;letter-spacing:-.3px;cursor:pointer}
.wl-row .fd-dt:hover{color:#1d4ed8;text-decoration:underline}
.wl-col-hd .fd-sort{margin-left:auto;font-family:'Pretendard',sans-serif;font-size:10px;
                    padding:2px 5px;border:1px solid #cbd5e1;border-radius:4px;background:#fff}

/* 잔고현황 — 계좌 하나가 한 줄. 보유종목 표(.bal-tbl)를 그대로 쓰되
   금액 칸이 넓어야 한다 (1억 단위가 흔하다).
   고정 칸 합계 666px + 계좌명 최소 160px = 826px */
.ba-tbl{min-width:826px}
.ba-tbl .w-nm{min-width:160px}
.ba-tbl .w-amt{width:96px}
.ba-tbl .c-sub,.ba-tbl .c-cur{font-size:10.5px}
/* 합계 줄 — 위를 더한 값이라 선을 긋고 진하게. */
.ba-tbl tfoot .ba-sum td{background:#f8fafc;border-top:2px solid #e5e7eb;
                         font-weight:800;padding-top:6px}
.bal-tbl .c-kind.acct{color:#1d4ed8}
.bal-tbl .c-kind.fund{color:#7c3aed}
/* 시세를 못 받은 종목이 있다는 표시 */
.c-nopx{color:#b45309;font-weight:800;margin-left:1px}
.ba-tbl .c-wt{color:#8a94a6}

/* 현황판의 Signal 칸 — 목표가는 **숫자**라 오른쪽에 붙여야 위아래 자릿수가 맞는다.
   보유종목 탭은 사다리 다섯 칸이 나란히 서서 가운데가 맞지만,
   여기는 한 칸뿐이라 옆의 금액들과 끝을 맞추는 편이 읽기 좋다.
   머리글은 가운데 그대로 둔다 — 다른 머리글과 줄을 맞춘다. */
.sg-tbl2 td.c-goal{text-align:right;padding-right:6px}
.sg-tbl2 td.c-goal .g-px{display:inline}

/* 수익률·최고수익률 — 값은 오른쪽에 붙여 자릿수를 맞추고,
   머리글은 다른 머리글과 줄이 맞게 가운데 그대로 둔다. */
.bal-tbl td.c-sub{text-align:right}
.bal-tbl th.w-rt, .bal-tbl th.w-peak{text-align:center}

/* 현황판·잔고현황의 가격 칸 — 보유종목 탭보다 칼럼이 적어 여유가 있다.
   `295,238` 은 47px 에서 넘치고 `1,214,120` 은 60px 이 필요하다.
   보유종목 탭(30칼럼)은 좁혀야 하니 여기서만 넓힌다. */
.sg-tbl2 .w-cur {width:76px}
.sg-tbl2 .w-px  {width:72px}
.sg-tbl2 .w-goal{width:76px}
/* 금액·수익률 칸도 같이 넓힌다 — `매도시손익 -5,351,310` 과
   `매도시수익률 +12,345.7%` 가 좁은 칸에서 잘렸다. */
.sg-tbl2 .w-pl  {width:84px}
.sg-tbl2 .w-rt  {width:74px}
.sg-tbl2 .w-peak{width:70px}
.sg-tbl2 td.c-cur,.sg-tbl2 td.c-goal,.sg-tbl2 td.c-sub{padding-right:6px}
/* 머리글은 다른 것과 줄이 맞게 가운데 그대로. */
.sg-tbl2 th.w-rt,.sg-tbl2 th.w-peak,.sg-tbl2 th.w-pl{text-align:center}

/* 계좌 성격 셀렉트 — 유형변경 옆. */
/* 성격 버튼. 격자의 한 칸을 차지하며 다른 버튼과 같은 모양이다.
   장기보유일 때만 초록으로 물들여 지금 상태가 보이게 한다. */
.fd-mode{font-family:'Pretendard',sans-serif;font-size:10.5px;padding:6px 4px;
         border:1px solid #d5deea;border-radius:5px;background:#fff;color:#334155;
         white-space:nowrap;width:100%;cursor:pointer}
.fd-mode:hover{background:#f0f5fc}
.fd-mode.on{background:#e7f6ef;border-color:#bfe6d5;color:#047857;font-weight:700}
.fd-mode.on:hover{background:#d7efe3}

/* 엑셀 등록 — **어디에 넣는지** 크게 보여준다.
   제목 줄의 작은 글씨만으로는 놓쳐서 엉뚱한 계좌에 저장하는 일이 있었다. */
.xl-target{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
           padding:9px 14px;background:#eef4fc;border-bottom:1px solid #cfe0f5}
.xl-tg-lb{font-size:10.5px;color:#5b7fa8}
.xl-tg-kind{font-size:10px;font-weight:800;color:#fff;background:#1d4ed8;
            padding:2px 7px;border-radius:10px}
.xl-tg-nm{font-size:15px;font-weight:800;color:#002C5F;letter-spacing:-.3px}
.xl-tg-note{font-size:10px;color:#8a9db5;margin-left:auto}
/* 고른 것이 없으면 붉게 — 지금 넣으면 아무 데도 안 들어간다. */
.xl-target.none{background:#fdeeee;border-bottom-color:#f5c9c9}
.xl-target.none .xl-tg-nm{color:#b42318}
.xl-target.none .xl-tg-note{color:#c2857f}

/* ＋계좌 · ＋펀드 는 둘뿐이라 **늘 반씩**. 아래 줄이 4칸이 되어도
   좌우 끝은 같으므로 세로선이 맞는다. */
.wl-group-btns.fd-newbtns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
@media (min-width:1500px){ .wl-group-btns.fd-newbtns{grid-template-columns:1fr 1fr} }

/* 계좌 목록의 성격 배지. 셀렉트만 보면 **고른 계좌 하나**만 알 수 있어
   어느 계좌가 장기보유인지 목록에서 바로 보이게 한다. */
.wl-row .fd-badge{flex:0 0 auto;font-size:9px;font-weight:800;color:#059669;
                  background:#e7f6ef;border:1px solid #bfe6d5;border-radius:9px;
                  padding:1px 6px;margin-left:6px;letter-spacing:-.3px}

/* 잔고현황의 `유형` 칸 — 일반·장기를 따로 세운다.
   구분 칸에 작게 덧붙이면 놓치기 쉽고 그 칸으로 정렬도 안 된다. */
.ba-tbl .w-mode{width:46px}
.bal-tbl .c-mode{color:#a8b3c2;font-weight:600}
.bal-tbl .c-mode.on{color:#059669;font-weight:800}

/* 설정 ▸ 일반설정 — 거래소별 국가 셀렉트.
   자유 입력이면 `미국`·`美國`·`USA` 로 갈려 같은 나라가 여러 이름이 된다.
   그러면 표의 국가 필터가 나뉘어 한 나라가 두 줄로 뜬다. */
.gs-in select{width:100%;font-family:'Pretendard',sans-serif;font-size:11px;
              padding:4px 6px;border:1px solid #cbd5e1;border-radius:5px;background:#fff}

/* 잔고 대사 버튼 — 저장하는 초록 버튼과 구분한다. 견주기만 하는 자리다. */
.fd-check-btn{background:#374151}
.fd-check-btn:hover{background:#1f2937}

/* 결과 창 — 대사 표는 가로 60자쯤 된다. 좁으면 줄이 접혀 칸이 어긋난다.
   화면을 거의 다 쓰되 글자는 작게 두어 한 번에 많이 보이게 한다. */
.rs-box{max-width:94vw}
#rsBody{font-size:11.5px;line-height:1.5;white-space:pre;overflow:auto;tab-size:2}

/* 종목별 실현손익 — 종목·계좌 하나가 한 줄.
   같은 종목이 여러 계좌에 있으면 계좌 수만큼 줄이 나온다.
   고정 칸 합계 700px + 종목명 최소 200px = 900px */
.pi-tbl{min-width:960px}
.pi-tbl .w-nm{min-width:200px}
.pi-tbl .w-pin{width:38px}
.pi-tbl .w-fund{width:104px}
.pi-tbl .w-pl{width:92px}
/* 같은 종목의 둘째 줄부터는 이름을 흐리게 — 눈이 덩어리를 알아본다. */
.pi-tbl .c-nm.pi-dim{color:#c8d0da;text-align:center}
/* 종목이 바뀌는 자리에 옅은 선을 그어 무리를 가른다. */
.pi-tbl tr.pi-first td{border-top:1px solid #eef2f7}
.pi-tbl tr.pi-first:first-child td{border-top:none}
/* 몇 계좌에 걸쳐 있나 */
.pi-badge{display:inline-block;min-width:14px;font-size:9px;font-weight:800;color:#fff;
          background:#7c3aed;border-radius:8px;padding:1px 5px;letter-spacing:-.3px}
.pi-tbl .pi-n{text-align:center}
/* 찾기 칸과 체크 */
.pi-find{font-family:'Pretendard',sans-serif;font-size:10.5px;padding:4px 8px;width:130px;
         border:1px solid #cbd5e1;border-radius:5px;margin-left:auto}
.pi-chk{display:flex;align-items:center;gap:4px;font-size:10.5px;color:#5b7fa8;white-space:nowrap}
/* 매매일지 버튼 — 표 끝 칸. */
.pi-tbl .w-log{width:52px}
.pi-tbl .c-log{text-align:center;padding-right:6px}
.pi-log{font-family:'Pretendard',sans-serif;font-size:9.5px;font-weight:700;
        color:#1d4ed8;background:#eef4fc;border:1px solid #cfe0f5;border-radius:4px;
        padding:2px 7px;cursor:pointer;white-space:nowrap}
.pi-log:hover{background:#1d4ed8;color:#fff}

/* ── 잔고설정 · 주식이관 ──────────────────────────────────────
   마스터 스위치를 끄면 하위 세 개는 잠긴다. 그런데 잠겨도 파랗게
   켜진 채로 보여서 "지금 켜져 있다" 로 읽혔다. 잠긴 것은 잠겨 보이게 한다. */
.bs-tr-sec .sw input:disabled + i{background:#e5e7eb}
.bs-tr-sec .sw input:disabled:checked + i{background:#c7d2de}
.bs-tr-sec .sw input:disabled + i::before{box-shadow:none;background:#f9fafb}
.bs-tr-sec .sw:has(input:disabled){cursor:default}
.bs-tr-sec .set-row:has(input:disabled) span{color:#9ca3af}
.bs-tr-sec .set-row:has(input:disabled) small{color:#b6bcc6 !important}
/* 하위 세 항목은 마스터에 딸린 것이라 한 칸 들여 놓는다 */
.bs-tr-sec .set-row + .set-row{padding-left:18px}
.bs-tr-sec .set-field{gap:10px}
.bs-tr-sec #bsStat{color:#6b7280}

/* ── 일반설정 · 모바일 접속 ─────────────────────────────────
   잠금이 없는 상태는 눈에 띄어야 한다 — 켜진 것과 같은 회색으로 두면
   "설정해 뒀다" 고 착각한다. */
.gs-cnt-off{background:#fef3c7!important;color:#92400e!important;border-color:#f59e0b!important}
.gs-warn-in{color:#b45309;font-weight:800}

/* 칸과 칸 사이 — 줄(gs-sec)은 제목 밑에만 있어서, 앞 칸의 설명글과 다음 칸의
   제목이 맞붙어 한 덩어리로 읽힌다. 칸이 끝나는 자리에 숨을 준다. */
.gs-wrap .gs-bar + .gs-head,
.gs-wrap .bal-note + .gs-head,
.gs-wrap .gs-tbl-wrap + .gs-head{margin-top:22px}
.gs-wrap .bal-note{margin-top:8px}

/* 2단계 인증 — 인증 앱에 손으로 넣을 키. 눈으로 옮겨 적을 것이므로
   고정폭에 띄엄띄엄 둔다. 잘못 읽으면 코드가 안 맞는다. */
.mb-seed{line-height:1.7}
.mb-key{margin:6px 0;padding:7px 10px;background:#0f172a;color:#e2e8f0;border-radius:6px;
        font-family:'D2Coding','Consolas',monospace;font-size:13px;font-weight:700;
        letter-spacing:.12em;word-break:break-all;user-select:all;cursor:text}

/* 식구 계정 — 막힌 줄은 한눈에 죽어 보여야 한다 */
.mb-off{background:#fafafa}
.mb-off .gs-mk{color:#9ca3af;text-decoration:line-through}
.gs-tag.mb-me{color:#1d4ed8}
.gs-tbl .gs-act{white-space:nowrap;text-align:right}
.gs-tbl .gs-act .pd-btn{padding:2px 6px;font-size:10px}
.gs-tbl .gs-act .pd-btn + .pd-btn{margin-left:3px}

/* ── 계정 목록 ──────────────────────────────────────────────
   표(`<table>`)가 아니라 줄로 둔다. 칸이 다섯이나 되는데 정작 눈이 가는 것은
   **아이디와 누구인가** 둘뿐이고, 나머지(보유·마지막 로그인)는 곁들이다.
   표로 두면 그 곁들이가 아이디와 같은 무게로 선다. 두 줄로 쌓으면
   윗줄은 이름표, 아랫줄은 딸린 사실이 되어 훑기가 쉬워진다. */
.mb-list{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff}
.mb-row{display:flex;align-items:center;gap:10px;padding:9px 12px}
.mb-row + .mb-row{border-top:1px solid #eef1f5}
.mb-row.mb-on{background:#f8fafc}
.mb-who{flex:1;min-width:0}
.mb-id{font-size:13px;font-weight:800;color:#0f172a;letter-spacing:-.3px}
.mb-sub{font-size:10.5px;color:#94a3b8;margin-top:2px;letter-spacing:-.2px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-ops{display:flex;align-items:center;gap:4px;flex-shrink:0}
.mb-ops .pd-btn{font-size:10px;padding:3px 8px}
/* 권한 배지 — 관리자만 색을 준다. 사용자가 대부분이라, 둘 다 칠하면
   눈에 띄어야 할 쪽이 안 띈다. */
.mb-pill{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:9px;
         font-size:9px;font-weight:800;letter-spacing:-.2px;vertical-align:1px}
.mb-pill.adm{background:#fff1e6;color:#c2410c}
.mb-pill.usr{background:#eef2ff;color:#4338ca}
.mb-pill.me {background:#e0f2fe;color:#0369a1}
.mb-row.mb-off .mb-id{color:#9ca3af;text-decoration:line-through}
.mb-row.mb-off{background:#fafafa}
.mb-del{color:#b91c1c;border-color:#fecaca!important}
.mb-del:hover{background:#fef2f2}

/* 편집창 — 목록 **아래**에 편다. 뜨는 창(모달)으로 두면 뒤의 목록이 가려져,
   권한을 바꾸면서 다른 관리자가 몇인지 못 본다. 지우기 직전에 그게 중요하다. */
.mb-edit{margin-top:10px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;
         padding:10px 12px}
.mb-edit-t{font-size:12px;font-weight:800;color:#002C5F;margin-bottom:8px;
           display:flex;align-items:center;gap:8px}
.mb-edit-t .pd-btn{margin-left:auto;font-size:10px;padding:2px 8px}
.mb-f{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mb-f > label{width:76px;flex-shrink:0;font-size:11px;color:#475569;font-weight:600}
.mb-f input,.mb-f select{flex:1;min-width:0;font-family:'Pretendard',sans-serif;
    font-size:11.5px;padding:4px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff}
.mb-f input:disabled{background:#eef1f5;color:#64748b}
.mb-f .mb-hint{font-size:10px;color:#94a3b8;flex:0 0 auto}

/* ── 거래내역(원장) 탭 ── */
.lg-bar{display:flex;align-items:center;gap:6px;padding:6px 12px;flex-wrap:wrap;border-bottom:1px solid #e5eaf1;background:#fafbfd}
.lg-chip{font-family:'Pretendard',sans-serif;font-size:11px;border:1px solid #d5dce6;background:#fff;color:#475569;border-radius:12px;padding:2px 10px;cursor:pointer}
.lg-chip b{font-weight:700;margin-left:2px;color:#64748b}
.lg-chip.on{color:#fff;border-color:transparent}
.lg-chip.lg-매수.on{background:#d92d20}.lg-chip.lg-매도.on{background:#1d4ed8}
.lg-chip.lg-입고.on{background:#b45309}.lg-chip.lg-출고.on{background:#475569}
.lg-chip.on b{color:#fff}
.lg-sel,.lg-in,.lg-q{font-family:'Pretendard',sans-serif;font-size:11px;border:1px solid #d5dce6;border-radius:4px;padding:2px 6px;background:#fff;color:#334155}
.lg-q{width:170px}.lg-sep{color:#9ca3af;font-size:11px}
.lg-cnt{font-size:10px;color:#9ca3af;margin-left:auto}
.lg-wrap{overflow:auto}
.lg-tbl{border-collapse:collapse;width:100%;font-size:11px;letter-spacing:-.2px}
.lg-tbl th{position:sticky;top:0;background:#f1f5f9;color:#334155;font-weight:700;padding:5px 8px;text-align:center;border-bottom:1px solid #d5dce6;white-space:nowrap}
.lg-tbl td{padding:3px 8px;border-bottom:1px solid #eef1f5;white-space:nowrap;color:#334155}
.lg-tbl tbody tr:hover{background:#f7f9fc}
.lg-d{font-variant-numeric:tabular-nums;color:#475569}
.lg-nm{max-width:230px;overflow:hidden;text-overflow:ellipsis;color:#1e293b;font-weight:600}
.lg-tbl td.lg-cd{font-size:10px;color:#64748b;font-variant-numeric:tabular-nums}
.lg-f{color:#64748b;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.lg-t{font-weight:700;text-align:center}
.lg-t.lg-매수{color:#d92d20}.lg-t.lg-매도{color:#1d4ed8}.lg-t.lg-입고{color:#b45309}.lg-t.lg-출고{color:#475569}
.lg-tag{font-style:normal;font-size:9px;font-weight:600;margin-left:4px;padding:0 4px;border-radius:3px;border:1px solid #cbd5e1;color:#64748b}
.lg-tag-기타{border-color:#f59e0b;color:#b45309;background:#fffbeb}
.lg-n{text-align:right;font-variant-numeric:tabular-nums}
.lg-c{text-align:center;color:#94a3b8}
.lg-k{color:#94a3b8;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.lg-empty{text-align:center;color:#9ca3af;padding:24px}
.lg-tbl th{text-align:center}
.lg-tbl td.lg-ctr{text-align:center}
.lg-tbl td.lg-n{font-variant-numeric:tabular-nums}
.lg-ip{display:inline-block}
.lg-fp{display:inline-block;text-align:left;color:#64748b}

/* 계좌 선택 — 드롭다운 대신 목록을 펼쳐 둔다 (잔고 모든 하위탭 공통 툴바) */
.bal-toolbar .bt-inl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 4px;
                     padding:2px 6px;background:#fff;border:1px solid #cbd5e1;border-radius:5px}
.bal-toolbar .bt-inl .bt-ck{padding:2px 6px}
.bal-toolbar .bt-none{font-size:11px;color:#cbd5e1;padding:0 6px}

/* 거래내역 — 표 영역에 높이 상한을 두고 그 안에서 스크롤한다.
   상자(.panel-balbox)가 인라인으로 overflow:auto 를 갖고 있어 !important 로 덮는다.
   헤더(툴바·필터줄)는 고정, 표만 스크롤. 분할 화면에서도 패널 높이를 따른다. */
.panel-balbox.lg-host{display:flex!important;flex-direction:column;overflow:hidden!important}
.lg-host .bal-toolbar,.lg-host .lg-bar{flex:0 0 auto}
.lg-host .lg-wrap{flex:1 1 auto;min-height:0;max-height:calc(100vh - 160px);overflow:auto}
.lg-tbl thead th{z-index:2}

/* 거래내역 탭: 종목 선택 · 종목 히스토리 */
.lg-link{cursor:pointer}.lg-link:hover{color:#002C5F;text-decoration:underline}
.lg-pickbtn.on{background:#002C5F;color:#fff;border-color:transparent}.lg-pickbtn.on b{color:#fff}
.lg-selchip{display:inline-flex;align-items:center;gap:3px;font-size:11px;background:#e8f0fe;color:#002C5F;border-radius:10px;padding:1px 4px 1px 8px}
.lg-selchip a{cursor:pointer;color:#6b7280;font-size:13px;line-height:1;padding:0 3px}.lg-selchip a:hover{color:#b42318}
.lg-selclr{cursor:pointer;font-size:10px;color:#6b7280;text-decoration:underline}
.lg-note{font-size:10px;color:#9ca3af}
.lg-pick{position:fixed;z-index:1100;width:290px;background:#fff;border:1px solid #d5dce6;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.2);padding:8px;font-size:11px}
.lg-pick-q{width:100%;box-sizing:border-box;font-size:12px;border:1px solid #d5dce6;border-radius:5px;padding:5px 8px;margin-bottom:6px}
.lg-pick-list{max-height:260px;overflow:auto}
.lg-pick-it{display:flex;align-items:center;gap:6px;padding:3px 4px;cursor:pointer;border-radius:4px}.lg-pick-it:hover{background:#f1f5f9}
.lg-pick-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;font-weight:600}
.lg-pick-cd{color:#94a3b8;font-size:10px}.lg-pick-it b{color:#64748b;min-width:22px;text-align:right}
.lg-pick-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #eef1f5}
.lg-pick-foot a{cursor:pointer;color:#6b7280;text-decoration:underline}
.lgh-dialog{width:760px;height:560px}
.lgh-dialog .wl-head small{font-weight:500;color:#9ca3af;margin-left:4px}
.lgh-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 14px;gap:6px;overflow:hidden}
.lgh-sum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#475569}.lgh-sum b{color:#002C5F}
.lgh-fund{font-size:11px;color:#64748b}.lgh-fund b{color:#1e293b}
.lgh-list{flex:1;min-height:0;overflow:auto;border:1px solid #e5eaf1;border-radius:6px}
.lg-tbl td.lg-r{text-align:right;font-variant-numeric:tabular-nums}

.stk-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 12px;border-bottom:1px solid #e5eaf1;background:#fafbfd}
td.stk-link{cursor:pointer}td.stk-link:hover{color:#002C5F;text-decoration:underline}

.lg-map{flex:0 0 auto;border-top:2px solid #d5dce6;background:#fafbfd;padding:4px 12px 6px}
.lg-map-h{font-size:11px;font-weight:700;color:#334155;padding:2px 0 3px}
.lg-map-l{max-height:150px;overflow:auto;border:1px solid #e5eaf1;border-radius:5px;background:#fff}
.lg-map .lg-tbl{width:auto;min-width:420px}

.xe-rawlink{cursor:pointer;font-size:10px;color:#1d4ed8;text-decoration:underline}

.lgh-s{cursor:pointer;user-select:none;white-space:nowrap}.lgh-s:hover{background:#e5edf7}
.lgh-list .lg-k{max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:#64748b}

.lg-v-매수{color:#d92d20}.lg-v-매도{color:#1d4ed8}.lg-v-입고{color:#b45309}.lg-v-출고{color:#475569}
.lg-ret.lg-up{color:#d92d20;font-weight:600}.lg-ret.lg-dn{color:#1d4ed8;font-weight:600}

/* 히스토리 창 — 이동·최소화·최대화 */
.lgh-dialog{resize:both;overflow:hidden;min-width:420px;min-height:200px}
.lgh-drag{cursor:move;user-select:none}.lgh-drag.lgh-dragging{cursor:grabbing}
.lgh-wb{display:flex;gap:2px}
.lgh-wb button{border:none;background:transparent;width:30px;height:26px;border-radius:5px;font-size:16px;line-height:1;color:#64748b;cursor:pointer}
.lgh-wb button:hover{background:#e5edf7;color:#002C5F}.lgh-wb .lgh-x:hover{background:#e5484d;color:#fff}
.lgh-tools{display:flex;gap:6px;flex-wrap:wrap}
.lgh-tools button{border:1px solid #d5dde8;background:#fff;border-radius:6px;padding:3px 10px;font-size:11px;color:#334155;cursor:pointer}
.lgh-tools button:hover{background:#eef3fa;border-color:#9db4d4}
#lgHist.lgh-max .lgh-dialog{position:fixed!important;left:0!important;top:0!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0;margin:0!important;resize:none}
#lgHist.lgh-min{background:transparent;pointer-events:none}
#lgHist.lgh-min .lgh-dialog{position:fixed!important;pointer-events:auto;height:auto!important;min-height:0;width:340px!important;min-width:0;resize:none;left:16px;bottom:16px;top:auto}
#lgHist.lgh-min .lgh-body{display:none}
.lgh-sum b.lg-up{color:#d92d20}.lgh-sum b.lg-dn{color:#1d4ed8}
.bal-tbl .w-code{width:62px}.bal-tbl td.c-code{text-align:center;font-size:11px;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 보유종목 표: 글씨를 키운다 (종목코드는 검정). 폭도 같이 늘려 숫자가 잘리지 않게 한다. ── */
.bal-tbl[data-sort-key="bal-holdings"]{font-size:12px;min-width:1340px}
.bal-tbl[data-sort-key="bal-holdings"] th{font-size:11.5px;letter-spacing:-.4px}
.bal-tbl[data-sort-key="bal-holdings"] td{letter-spacing:-.3px;padding-top:5px;padding-bottom:5px}
.bal-tbl[data-sort-key="bal-holdings"] td.c-code{font-size:12px;color:#111827;font-weight:600}
.bal-tbl[data-sort-key="bal-holdings"] .w-code{width:74px}
.bal-tbl[data-sort-key="bal-holdings"] .w-qty{width:60px}
.bal-tbl[data-sort-key="bal-holdings"] .w-px{width:60px}
.bal-tbl[data-sort-key="bal-holdings"] .w-cur{width:68px}
.bal-tbl[data-sort-key="bal-holdings"] .w-amt{width:76px}
.bal-tbl[data-sort-key="bal-holdings"] .w-pl{width:76px}
.bal-tbl[data-sort-key="bal-holdings"] .w-rt{width:72px}
.bal-tbl[data-sort-key="bal-holdings"] .w-step{width:50px}
.bal-tbl[data-sort-key="bal-holdings"] .w-done{width:54px}
.bal-tbl[data-sort-key="bal-holdings"] .w-sig{width:58px}
.bal-tbl[data-sort-key="bal-holdings"] .w-goal{width:60px}
.bal-tbl[data-sort-key="bal-holdings"] .w-kind{width:58px}
.bal-tbl[data-sort-key="bal-holdings"] .c-nm{font-size:12.5px}
.bal-tbl[data-sort-key="bal-holdings"] .c-cur,
.bal-tbl[data-sort-key="bal-holdings"] .c-goal .g-px{font-size:13px}
.bal-tbl[data-sort-key="bal-holdings"] .c-kind{font-size:11.5px}
.bal-tbl[data-sort-key="bal-holdings"] .c-step .s-tag,
.bal-tbl[data-sort-key="bal-holdings"] .c-step .s-rt,
.bal-tbl[data-sort-key="bal-holdings"] .c-goal .g-tag,
.bal-tbl[data-sort-key="bal-holdings"] .c-goal .g-rt,
.bal-tbl[data-sort-key="bal-holdings"] .c-done .d-qty,
.bal-tbl[data-sort-key="bal-holdings"] .c-sig .g-nx{font-size:9.5px}
.bal-tbl[data-sort-key="bal-holdings"] .c-step .s-px,
.bal-tbl[data-sort-key="bal-holdings"] .c-sig .g-lb,
.bal-tbl[data-sort-key="bal-holdings"] .c-done .d-pct{font-size:11px}

/* 종목명은 잘리지 않게 — 길면 줄을 바꾼다(말줄임 없음). 이름 칸은 최소 폭을 보장한다. */
.bal-tbl[data-sort-key="bal-holdings"] .c-nm{white-space:normal;overflow:visible;text-overflow:clip;
  word-break:keep-all;overflow-wrap:anywhere;line-height:1.25;padding-right:6px}
.bal-tbl[data-sort-key="bal-holdings"] .w-nm{min-width:200px;width:200px}
.bal-tbl[data-sort-key="bal-holdings"]{min-width:1480px}

.lgh-info{display:flex;flex-wrap:wrap;gap:6px}
.lgh-info:empty{display:none}
.lgh-ic{display:flex;flex-direction:column;gap:1px;min-width:96px;padding:6px 10px;border:1px solid #e5eaf1;border-radius:8px;background:#f8fafc}
.lgh-ic span{font-size:10.5px;color:#64748b}.lgh-ic b{font-size:14px;color:#111827;font-variant-numeric:tabular-nums}
.lgh-ic small{font-size:10.5px;font-weight:600}
.lgh-ic .lg-up,.lgh-ic .lg-dn,.lgh-foot .lg-up,.lgh-foot .lg-dn{font-weight:700}
.lgh-ic .lg-up,.lgh-foot .lg-up{color:#d92d20}.lgh-ic .lg-dn,.lgh-foot .lg-dn{color:#1d4ed8}
.lgh-list tfoot td{position:sticky;background:#f1f5fb;border-top:1px solid #cbd5e1;font-weight:700;font-size:12px;padding:4px 6px;z-index:1;height:22px;box-sizing:border-box}
.lgh-list tfoot tr.lgh-fb td{bottom:44px}.lgh-list tfoot tr.lgh-fs td{bottom:22px}.lgh-list tfoot tr.lgh-fn td{bottom:0}
.lgh-foot.lgh-fb td:nth-child(1){color:#d92d20}.lgh-foot.lgh-fs td:nth-child(1){color:#1d4ed8}

/* ── 보유종목 표를 한 화면 가로에 맞춘다 ──
   종목명 칸만 남는 폭을 먹게(auto) 하고, 나머지 칸 폭을 줄여 합이 1210px 안팎이 되게 했다.
   표 최소 폭을 없애, 화면이 그보다 넓으면 가로 스크롤이 생기지 않는다. */
.bal-tbl[data-sort-key="bal-holdings"]{min-width:0;width:100%}
.bal-tbl[data-sort-key="bal-holdings"] .w-nm{width:auto;min-width:150px}
.bal-tbl[data-sort-key="bal-holdings"] .w-code{width:64px}
.bal-tbl[data-sort-key="bal-holdings"] .w-amt,
.bal-tbl[data-sort-key="bal-holdings"] .w-pl{width:70px}
.bal-tbl[data-sort-key="bal-holdings"] .w-rt{width:64px}
.bal-tbl[data-sort-key="bal-holdings"] .w-qty{width:54px}
.bal-tbl[data-sort-key="bal-holdings"] .w-px{width:56px}
.bal-tbl[data-sort-key="bal-holdings"] .w-cur{width:62px}
.bal-tbl[data-sort-key="bal-holdings"] .w-goal{width:56px}
.bal-tbl[data-sort-key="bal-holdings"] .w-sig{width:54px}
.bal-tbl[data-sort-key="bal-holdings"] .w-step{width:46px}
.bal-tbl[data-sort-key="bal-holdings"] .w-done{width:48px}
.bal-tbl[data-sort-key="bal-holdings"] .w-kind{width:54px}