/* =====================================================================
   자산관리 - 공통 스타일
   테마 색상은 아래 :root 변수만 바꾸면 전체에 반영됩니다.
   ===================================================================== */
:root{
    /* ---- 테마 컬러 (그레이톤) ---- */
    --c-primary:      #4b5563;   /* 기본 강조(버튼/링크) */
    --c-primary-dark: #374151;   /* 강조 hover */
    --c-accent:       #6b7280;
    --c-bg:           #f3f4f6;   /* 페이지 배경 */
    --c-surface:      #ffffff;   /* 카드/패널 */
    --c-surface-alt:  #f9fafb;   /* 테이블 헤더/줄무늬 */
    --c-border:       #d1d5db;
    --c-border-soft:  #e5e7eb;
    --c-text:         #1f2937;
    --c-text-muted:   #6b7280;
    --c-text-invert:  #ffffff;
    --c-danger:       #b91c1c;
    --c-topbar:       #374151;
    --c-topbar-text:  #e5e7eb;

    /* ---- 형태 ---- */
    --radius: 6px;
    --gap: 16px;
    --maxw: 1400px;   /* 본문 최대 너비 (넓히려면 이 값만 조정) */
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font-family:"Malgun Gothic","맑은 고딕",-apple-system,"Segoe UI",sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
    font-size:14px;
    line-height:1.5;
    -webkit-text-size-adjust:100%;
}
a{ color:var(--c-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ margin:0; }

/* ---------------- 상단바 ---------------- */
.topbar{ background:var(--c-topbar); color:var(--c-topbar-text); }
.topbar-inner{
    max-width:var(--maxw); margin:0 auto; padding:0 16px;
    display:flex; align-items:center; min-height:52px; gap:16px;
}
.brand{ color:#fff; font-weight:700; font-size:17px; }
.brand:hover{ text-decoration:none; }
.gnb{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.gnb a{ color:var(--c-topbar-text); padding:6px 2px; }
.gnb a:hover{ color:#fff; text-decoration:none; }
.gnb a.on{ color:#fff; border-bottom:2px solid #fff; }
/* 외부 사이트 링크(주형PF) — 구분되게 앰버색 강조 */
.gnb a.gnb-ext{ color:#fbbf24; font-weight:700; border:1px solid rgba(251,191,36,.45);
    border-radius:999px; padding:4px 12px; }
.gnb a.gnb-ext:hover{ color:#111827; background:#fbbf24; text-decoration:none; }
.gnb-user{ color:#9ca3af; font-size:13px; }
.gnb-logout{ font-size:13px; }
.nav-toggle, .nav-burger{ display:none; }

/* ---------------- 레이아웃 ---------------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:22px 16px 60px; }
.site-footer{
    max-width:var(--maxw); margin:0 auto; padding:22px 16px 28px;
    color:var(--c-text-muted); font-size:12px; text-align:center;
    border-top:1px solid var(--c-border, #e5e7eb); margin-top:28px;
}
/* 장시간 시계 */
.market-clock{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.mk{ display:inline-flex; align-items:center; gap:8px; background:#fff;
     border:1px solid var(--c-border-soft); border-radius:999px; padding:7px 15px;
     font-size:12.5px; box-shadow:var(--shadow); color:var(--c-text); }
.mk-dot{ width:9px; height:9px; border-radius:50%; background:#cbd5e1; flex:0 0 auto; }
.mk-dot.on{ background:#22c55e; animation:mkpulse 1.6s infinite; }
@keyframes mkpulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
    70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.mk-name{ font-weight:700; }
.mk-hours{ color:var(--c-text-muted); }
.mk-status{ font-weight:700; color:#16a34a; }
.mk-status.off{ color:#94a3b8; font-weight:600; }

.site-footer .foot-brand{ font-weight:700; color:#6366f1; font-size:13px; margin-bottom:4px; }
.site-footer .foot-copy{ margin-bottom:6px; }
.site-footer .foot-legal{
    max-width:640px; margin:0 auto; line-height:1.6; font-size:11px;
    color:#9ca3af;
}

/* ---------------- 주문가능금액 배너 ---------------- */
.cashbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px;
    padding:12px 16px; margin-bottom:14px; }
.cashbar .cb-ico{ font-size:18px; }
.cashbar .cb-lbl{ font-weight:700; font-size:15px; }
.cashbar .cb-amt{ font-size:24px; font-weight:800; color:#166534; }
.cashbar .cb-won{ color:#166534; }
.cashbar .cb-sub{ color:#6b7280; font-size:12.5px; }
.cashbar .cb-btn{ margin-left:auto; }

/* ---------------- 현재 계좌 표시 ---------------- */
.acct-indicator{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 15px; border-radius:9px; margin-bottom:14px; font-size:14.5px; border:1px solid; }
.acct-indicator .ai-label{ font-size:12px; color:#6b7280; }
.acct-indicator .ai-badge{ margin-left:auto; font-weight:700; padding:3px 12px;
    border-radius:999px; font-size:12.5px; white-space:nowrap; }
.ai-prod{ background:#fef2f2; border-color:#fca5a5; }
.ai-prod b{ color:#b91c1c; }
.ai-prod .ai-badge{ background:#dc2626; color:#fff; }
.ai-vts{ background:#f0f9ff; border-color:#bae6fd; }
.ai-vts b{ color:#0369a1; }
.ai-vts .ai-badge{ background:#0284c7; color:#fff; }

/* ---------------- 페이지 헤더 ---------------- */
.page-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.page-head h2{ font-size:20px; }

/* ---------------- 검색바 ---------------- */
.searchbar{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    background:var(--c-surface); border:1px solid var(--c-border-soft);
    padding:12px; border-radius:var(--radius); margin-bottom:16px;
}
.searchbar input[type=text], .searchbar select{ min-width:160px; }

/* ---------------- 폼 요소 ---------------- */
input[type=text], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea{
    width:100%; padding:9px 11px; border:1px solid var(--c-border);
    border-radius:var(--radius); background:#fff; color:var(--c-text);
    font-size:14px; font-family:inherit;
}
input:focus, select:focus, textarea:focus{
    outline:2px solid var(--c-primary); outline-offset:-1px; border-color:var(--c-primary);
}
textarea{ resize:vertical; min-height:80px; }
label{ font-size:13px; color:var(--c-text-muted); }

/* ---------------- 버튼 ---------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 16px; border-radius:var(--radius); border:1px solid var(--c-primary);
    background:var(--c-primary); color:#fff; font-size:14px; cursor:pointer;
    white-space:nowrap; line-height:1.2;
}
.btn:hover{ background:var(--c-primary-dark); border-color:var(--c-primary-dark); text-decoration:none; color:#fff; }
.btn-ghost{ background:#fff; color:var(--c-text); border-color:var(--c-border); }
.btn-ghost:hover{ background:var(--c-surface-alt); color:var(--c-text); }
.btn-danger{ background:var(--c-danger); border-color:var(--c-danger); }
.btn-danger:hover{ background:#991b1b; border-color:#991b1b; }
.btn-sm{ padding:5px 11px; font-size:13px; }

/* ---------------- 테이블 ---------------- */
.table-wrap{ overflow-x:auto; background:var(--c-surface);
    border:1px solid var(--c-border-soft); border-radius:var(--radius); box-shadow:var(--shadow); }
table.list{ width:100%; border-collapse:collapse; min-width:560px; }
table.list th, table.list td{
    padding:11px 12px; border-bottom:1px solid var(--c-border-soft);
    text-align:left; vertical-align:middle; white-space:nowrap;
}
table.list thead th{ background:var(--c-surface-alt); color:var(--c-text-muted);
    font-weight:600; font-size:13px; border-bottom:1px solid var(--c-border); }
table.list tbody tr:hover{ background:var(--c-surface-alt); }
table.list td.wrap{ white-space:normal; }
.tag{ display:inline-block; padding:2px 8px; border-radius:999px;
    background:var(--c-surface-alt); border:1px solid var(--c-border-soft);
    font-size:12px; color:var(--c-text-muted); }
.tag.off{ color:#9ca3af; }
.empty{ text-align:center; color:var(--c-text-muted); padding:40px 0; }

/* ---------------- 카드 / 폼 패널 ---------------- */
.card{ background:var(--c-surface); border:1px solid var(--c-border-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row.full{ grid-column:1 / -1; }
.form-actions{ display:flex; gap:10px; margin-top:22px; }
.section-title{ font-size:15px; font-weight:700; margin:6px 0 4px;
    padding-bottom:8px; border-bottom:1px solid var(--c-border-soft); grid-column:1 / -1; }

/* 라벨+입력칸을 한 줄에 (1열 배치 — 각 필드가 한 줄) */
.form-inline{ display:flex; flex-direction:column; gap:12px; }
.form-inline .form-row{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }
.form-inline .form-row > label{ flex:0 0 84px; white-space:nowrap; }
.form-inline .form-row > input,
.form-inline .form-row > select{ flex:1 1 auto; width:auto; min-width:0; }
.form-inline .form-row > .help{ flex:0 0 100%; margin:-2px 0 0 94px; }
.form-inline .form-actions{ margin-top:2px; }

/* ---------------- 페이저 ---------------- */
.pager{ display:flex; gap:4px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.pager a, .pager span{
    min-width:34px; height:34px; padding:0 8px; display:inline-flex;
    align-items:center; justify-content:center; border:1px solid var(--c-border-soft);
    border-radius:var(--radius); background:#fff; color:var(--c-text); font-size:13px;
}
.pager a:hover{ background:var(--c-surface-alt); text-decoration:none; }
.pager .cur{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* ---------------- 알림 ---------------- */
.alert{ padding:10px 14px; border-radius:var(--radius); margin-bottom:14px; font-size:13px; }
.alert-error{ background:#fef2f2; color:var(--c-danger); border:1px solid #fecaca; }

/* ---------------- 로그인 ---------------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--c-bg); padding:20px; }
.login-card{ width:100%; max-width:360px; background:var(--c-surface);
    border:1px solid var(--c-border-soft); border-radius:10px; box-shadow:var(--shadow);
    padding:30px 26px; }
.login-card h1{ font-size:20px; text-align:center; margin-bottom:4px; }
.login-card .sub{ text-align:center; color:var(--c-text-muted); font-size:13px; margin-bottom:22px; }
.login-card .form-row{ margin-bottom:14px; }
.login-card .btn{ width:100%; padding:11px; }

/* ===================== 반응형 ===================== */
@media (max-width: 860px){
    .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
    .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
        width:40px; height:40px; margin-left:auto; cursor:pointer; }
    .nav-burger span{ display:block; height:2px; width:22px; background:#fff; border-radius:2px; }
    .gnb{ position:absolute; top:52px; left:0; right:0; flex-direction:column;
        align-items:stretch; gap:0; background:var(--c-topbar); margin-left:0;
        max-height:0; overflow:hidden; transition:max-height .2s ease; z-index:30; }
    .nav-toggle:checked ~ .gnb{ max-height:320px; }
    .gnb a, .gnb-user, .gnb-logout{ padding:13px 18px; border-top:1px solid #4b5563; }
    .gnb a.on{ border-bottom:none; background:#4b5563; }
    .gnb a.gnb-ext{ border:none; border-radius:0; padding:13px 18px; border-top:1px solid #4b5563; }
    .topbar-inner{ position:relative; }
    .page-head{ align-items:flex-start; }
    .searchbar input[type=text], .searchbar select{ min-width:0; flex:1 1 140px; }
}
@media (max-width: 480px){
    body{ font-size:13.5px; }
    .container{ padding:16px 12px 50px; }
    .card{ padding:16px; }
}

/* ===================== 대시보드 ===================== */
.muted{ color:var(--c-text-muted); }

.dash-stats{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:14px; margin-bottom:18px;
}
.stat-card{
    background:var(--c-surface); border:1px solid var(--c-border-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 18px 16px;
}
.stat-label{ color:var(--c-text-muted); font-size:13px; margin-bottom:6px; }
.stat-num{ font-size:30px; font-weight:700; color:var(--c-text); line-height:1.1; }

.dash-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel{
    background:var(--c-surface); border:1px solid var(--c-border-soft);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px;
}
.panel h3{ font-size:15px; margin-bottom:14px; padding-bottom:10px;
    border-bottom:1px solid var(--c-border-soft); }

.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:120px; flex:0 0 120px; font-size:13px; color:var(--c-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ flex:1; height:18px; background:var(--c-surface-alt);
    border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--c-primary); border-radius:999px; min-width:2px;
    transition:width .3s ease; }
.bar-fill.alt{ background:var(--c-accent); }
.bar-val{ width:44px; flex:0 0 44px; text-align:right; font-size:13px;
    font-weight:600; color:var(--c-text-muted); }

@media (max-width: 980px){
    .dash-stats{ grid-template-columns:repeat(3, 1fr); }
    .dash-cols{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
    .dash-stats{ grid-template-columns:repeat(2, 1fr); }
    .stat-num{ font-size:25px; }
    .bar-label{ width:90px; flex-basis:90px; }
}

/* ===================== 로고 ===================== */
.brand{ display:flex; align-items:center; gap:9px; color:#f3f4f6; }
.brand span{ color:#f3f4f6; }
/* 로고 이미지가 어두운(검은 글자) 경우 상단바에서 밝게 보이도록 처리.
   색상이 있는 로고라서 실루엣이 되는 게 싫으면 아래 filter 한 줄만 지우세요. */
.brand-logo{ height:28px; width:auto; display:block; filter:brightness(0) invert(0.92); }
.login-logo{ display:block; height:46px; width:auto; margin:0 auto 14px; }

/* ===================== 탭 ===================== */
.tabs{ display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--c-border); }
.tabs .tab{
    padding:10px 22px; font-size:14px; color:var(--c-text-muted);
    border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0;
    margin-bottom:-1px; background:transparent;
}
.tabs .tab:hover{ color:var(--c-text); text-decoration:none; background:var(--c-surface-alt); }
.tabs .tab.on{
    color:var(--c-text); font-weight:700; background:var(--c-surface);
    border-color:var(--c-border); border-bottom:1px solid var(--c-surface);
}
/* 매수=빨강 / 매도=파랑 탭 구분 */
.tabs .tab-buy.on{ color:#dc2626; box-shadow:inset 0 3px 0 #dc2626; }
.tabs .tab-sell{ color:#2563eb; }
.tabs .tab-sell.on{ color:#1d4ed8; box-shadow:inset 0 3px 0 #2563eb; }

/* ===================== 현황 수량 링크 / 필터표시 ===================== */
.qty-link{ color:var(--c-primary); text-decoration:none; border-bottom:1px dashed var(--c-border); padding-bottom:1px; }
.qty-link:hover{ color:var(--c-primary-dark); border-bottom-color:var(--c-primary); text-decoration:none; }
.filter-note{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:var(--c-surface-alt); border:1px solid var(--c-border-soft);
    border-radius:var(--radius); padding:9px 14px; margin-bottom:14px; font-size:13px;
}
.filter-note span{ color:var(--c-text-muted); }
.filter-note a{ margin-left:auto; font-size:13px; }

/* ===================== 정보 카드 (스펙시트) ===================== */
.info-card{ max-width:680px; padding:0; overflow:hidden; }
.info-title{ font-size:15px; font-weight:700; padding:16px 20px;
    border-bottom:1px solid var(--c-border); background:var(--c-surface-alt); }
.info{ margin:0; }
.info-row{ display:flex; border-bottom:1px solid var(--c-border-soft); }
.info-row:last-child{ border-bottom:none; }
.info-row dt{ width:150px; flex:0 0 150px; padding:13px 18px;
    color:var(--c-text-muted); background:var(--c-surface-alt);
    font-size:13px; border-right:1px solid var(--c-border-soft); }
.info-row dd{ margin:0; padding:13px 18px; flex:1; color:var(--c-text); word-break:break-all; }
@media (max-width: 560px){
    .info-row{ flex-direction:column; }
    .info-row dt{ width:auto; flex-basis:auto; border-right:none; padding-bottom:4px; }
    .info-row dd{ padding-top:4px; }
}