/* stock 전용 추가 스타일 */
.pnl-up   { color:#d32f2f; font-weight:600; }   /* 이익=빨강(국내관행) */
.pnl-down { color:#1565c0; font-weight:600; }   /* 손실=파랑 */
.pnl-flat { color:#666; }

.acct-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.acct-bar select { padding:8px 10px; font-size:15px; border:1px solid #ccc; border-radius:6px; min-width:220px; }

.sum-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
.sum-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 16px; }
.sum-card .label { font-size:13px; color:#6b7280; margin-bottom:6px; }
.sum-card .num { font-size:22px; font-weight:700; }

table.grid { width:100%; border-collapse:collapse; background:#fff; font-size:14px; }
table.grid th, table.grid td { border-bottom:1px solid #eee; padding:9px 10px; text-align:right; }
table.grid th { background:#f8fafc; color:#374151; text-align:right; white-space:nowrap; }
table.grid td.l, table.grid th.l { text-align:left; }
table.grid tr:hover td { background:#fafafa; }

.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; }
.badge-wait { background:#fef3c7; color:#92400e; }
.badge-sent { background:#dbeafe; color:#1e40af; }
.badge-done { background:#dcfce7; color:#166534; }
.badge-err  { background:#fee2e2; color:#991b1b; }
.badge-buy  { background:#fee2e2; color:#b91c1c; }
.badge-sell { background:#dbeafe; color:#1d4ed8; }

.help { font-size:12px; color:#6b7280; margin-top:4px; }
.right { text-align:right; }
.chg { font-size:11px; margin-top:2px; white-space:nowrap; font-weight:600; }

/* 현금/투자 도넛 (conic-gradient) */
.donut2 { width:150px; height:150px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; }
.donut2-hole { width:98px; height:98px; border-radius:50%; background:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center; }
.d2-label { font-size:12px; color:#6b7280; }
.d2-val { font-size:22px; font-weight:800; color:#7c3aed; }

/* 종목 메모 툴팁 */
.has-memo { cursor:help; border-bottom:1px dotted #f59e0b; }
.memo-dot { color:#f59e0b; font-size:11px; margin-left:2px; }
.memo-tip {
    position:absolute; z-index:1000; display:none; max-width:260px;
    background:#1f2937; color:#f9fafb; padding:8px 11px; border-radius:7px;
    font-size:12px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
    box-shadow:0 6px 18px rgba(0,0,0,.25); pointer-events:none;
}

/* ===================== 분할매수: 종목 선택 리스트 ===================== */
/* 보유종목/검색결과 — 종목명 한 줄(넘치면 …), 수량·현재가 한 줄 */
.pick-list{ display:flex; flex-direction:column; }
.pick-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #f0f2f5; }
.pick-item:last-child{ border-bottom:none; }
.pick-main{ flex:1; min-width:0; }
.pick-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-name .code{ font-weight:400; color:#9ca3af; font-size:12px; margin-left:4px; }
.pick-sub{ font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-sub b{ color:#374151; }
.pick-item form{ flex:0 0 auto; margin:0; }
.pick-empty{ padding:16px; text-align:center; color:#6b7280; }
.pick-cond{ font-size:11px; color:#7c3aed; background:#f5f3ff; border:1px solid #ddd6fe;
    border-radius:5px; padding:1px 6px; margin-left:4px; white-space:nowrap; }
.cond-select{ font-size:12px; padding:4px 6px; width:auto; max-width:150px; }

/* ===================== 분할매수 조건 폼(압축) ===================== */
.cond-preset{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #e5e7eb; }
.cond-preset select{ flex:1 1 150px; min-width:0; }
.cond-preset-btns{ display:flex; gap:6px; flex:0 0 auto; }
.cond-sel{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.cond-form .cond-row2{ display:flex; gap:12px; }
.cond-form .cond-row2 > div{ flex:1; display:flex; flex-direction:column; gap:5px; }
.cond-form .cond-one{ display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.cond-form label{ font-size:13px; color:#6b7280; }
.cond-form input{ width:100%; }
.cond-form .form-actions{ margin-top:14px; }

/* 좁은 표(no-rwd): 모바일에서도 표 유지하되 여백 축소로 한 줄 유지 */
@media (max-width:640px){
    table.grid.no-rwd{ font-size:13px; }
    table.grid.no-rwd th, table.grid.no-rwd td{ padding:7px 8px; }
}

/* ===================== 모바일 반응형 표 ===================== */
/* 표가 넓어 화면 밖으로 밀리는 것을 막고, 각 행을 세로 카드로 재배치.
   푸터의 JS 가 각 td 에 data-th(항목명)를 넣어주면 아래 스타일이 활성화됨.
   내용을 숨기지 않고 아래로 쌓아 모두 보이도록 함. */
@media (max-width:640px){
    /* rwd 클래스가 붙은(=JS가 라벨 처리한) 표만 스택형으로 */
    .table-wrap:has(table.rwd){ border:none; box-shadow:none; background:transparent; overflow-x:visible; }
    table.grid.rwd, table.list.rwd{ min-width:0; font-size:13.5px; }
    table.rwd thead{ display:none; }
    table.rwd tbody tr{
        display:block; background:#fff; border:1px solid #e5e7eb;
        border-radius:9px; padding:4px 2px; margin-bottom:10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
    }
    table.rwd tbody td{
        display:flex; justify-content:space-between; align-items:center; gap:12px;
        text-align:right; white-space:normal; word-break:break-word;
        border:none; border-bottom:1px dashed #eef2f7; padding:8px 13px;
    }
    table.rwd tbody td:last-child{ border-bottom:none; }
    table.rwd tbody td::before{
        content:attr(data-th); flex:0 0 42%; text-align:left;
        color:#64748b; font-size:12px; font-weight:600; white-space:nowrap;
    }
    /* 라벨이 없는(colspan 등) 셀은 라벨칸 없이 전체폭 */
    table.rwd tbody td:not([data-th])::before,
    table.rwd tbody td[data-th='']::before{ content:''; flex:0; }
    table.rwd tbody td:not([data-th]),
    table.rwd tbody td[data-th='']{ justify-content:center; text-align:center; }
    /* 합계/강조 행 살짝 구분 */
    table.rwd tbody tr[style*="f1f5f9"]{ background:#f8fafc; border-color:#dbe3ea; }

    /* 계좌 선택줄 셀렉트가 좁은 화면에서 꽉 차도록 */
    .acct-bar select{ min-width:0; width:100%; flex:1 1 100%; }
    .acct-bar{ gap:8px; }
    /* 표 안 인라인 폼(키등록 등)이 세로로 자연스럽게 쌓이도록 */
    table.rwd tbody td form{ flex-wrap:wrap; justify-content:flex-end; }
    table.rwd tbody td input[type=text],
    table.rwd tbody td input[type=password],
    table.rwd tbody td input[type=number]{ width:auto; flex:1 1 120px; min-width:0; }
}