:root{ --ink:#0F1B2D; --ink-soft:#16263C; --teal:#1F6F63; --teal-bg:#E4EFEC; --amber:#B9791F; --amber-bg:#FBEFDC; --coral:#C4453A; --coral-bg:#FBE6E3; /* 중요 금액 시그니처 (UI amber와 별개) */ --amount-primary:#e0a94a; --amount-primary-strong:#f0bc5e; --amount-primary-muted:#c4923a; /* 의미 토큰 — 팔레트(teal/coral/amber) 위 한 층. 화면에서는 팔레트를 직접 쓰지 말고 이 토큰이나 아래 클래스를 쓴다. 손익·흐름·상태 세 축을 섞지 않는다. 브랜드 테마가 팔레트를 바꾸면 같은 블록에서 이 토큰도 다시 지정해야 한다. docs/AMOUNT_DISPLAY_RULES.md */ --amt-gain:var(--teal); --amt-loss:var(--coral); --flow-in:var(--teal); --flow-out:var(--coral); --state-ok:var(--teal); --state-warn:var(--amber); --state-danger:var(--coral); } body[data-theme="light"]{ --bg:#F7F5F0; --panel:#FFFFFF; --line:#E4E1D8; --text:#1B2430; --muted:#6B7480; --sidebar-bg:#0F1B2D; --sidebar-text:#CBD3DB; --sidebar-active:#233650; --input-bg:#F7F5F0; } body[data-theme="dark"]{ --bg:#0B1420; --panel:#131F30; --line:#233247; --text:#E7EAEE; --muted:#8B96A3; --sidebar-bg:#080F19; --sidebar-text:#9AA6B2; --sidebar-active:#1B2A3E; --input-bg:#0B1420; } *{box-sizing:border-box; margin:0; padding:0;} body{ font-family:'Inter','Noto Sans KR',sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; transition:background .2s, color .2s; } /* 언어별 대표 글꼴. html lang 은 setAdminLang 이 정규화값으로 맞춘다(zh → zh-Hans). * 속성 선택자(html[lang=…]) + 요소(body) 는 body 단독(요소 0,0,0,1)보다 특이도가 높다. */ html[lang="ja"] body{ font-family:'Inter','Noto Sans JP',sans-serif; } html[lang^="zh"] body{ font-family:'Inter','Noto Sans SC',sans-serif; } .mono{ font-family:'IBM Plex Mono', monospace; } a{ color:inherit; } /* 중요 금액 — 인라인 color 금지, 이 클래스만 사용 */ .amount-primary{ color:var(--amount-primary); } .amount-primary-strong{ color:var(--amount-primary-strong); font-weight:700; } .amount-primary-muted{ color:var(--amount-primary-muted); } /* 손익축 — 음수 금액이 이익색을 물려받지 않게 한다 */ .amt-gain{ color:var(--amt-gain); } .amt-loss{ color:var(--amt-loss); } .amount-loss{ color:var(--amt-loss); } /* 구 이름 · ③단계에서 .amt-loss 로 흡수 */ /* 흐름축 — 들어옴/나감 */ .flow-in{ color:var(--flow-in); } .flow-out{ color:var(--flow-out); } /* 달력 예외 — 색을 이미 흐름축에 쓴 자리는 손익을 부호와 굵기로만 구분한다 (규칙 §3) */ .amt-neg-strong{ font-weight:800; } .amount-pair{ display:inline-flex; min-width:128px; flex-direction:column; gap:2px; } .amount-pair .amount-line{ display:flex; justify-content:space-between; gap:8px; white-space:nowrap; } .amount-pair .amount-line.slot, .amount-pair .amount-line.live{ color:var(--amount-primary-muted); } .amount-pair .amount-line.total{ color:var(--amount-primary-strong); font-weight:700; padding-top:2px; border-top:1px solid var(--line); } .amount-pair .amount-line small{ font-size:10px; color:inherit; opacity:.9; } .sidebar{ width:252px; background:var(--sidebar-bg); color:var(--sidebar-text); flex-shrink:0; display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; } .sb-logo{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:#fff; display:flex; align-items:center; gap:8px; padding:6px 10px 20px; } .sb-logo .mark{ width:18px; height:18px; border-radius:50%; background:conic-gradient(from 180deg, #E8A23D, #1F6F63, #E8A23D); } /* 공급사 알 잔액 — 로고 바로 아래. 값은 app.js 가 textContent 로만 넣는다. */ /* 색은 var(--line)·var(--muted) 를 쓰지 않는다 — 사이드바는 두 테마 모두 어두운데 그 토큰은 테마를 따라가서, 밝은 테마에서 흰 테두리와 흐린 글자가 된다. .sb-label·.sb-footer 와 같은 값. */ /* 좌우 margin 0 — 바로 아래 .sb-fav-item 은 margin 이 없어 사이드바 안쪽 폭(252-14-14=224)을 꽉 채운다. 좌우를 주면 테두리 끝이 어긋난다. */ .sb-provbal{ margin:4px 0 14px; padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:10px; } .sb-provbal-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; } .sb-provbal-title{ font-size:11px; color:#66707C; } /* 누를 자리를 넓히되 음수 margin 으로 흐름 높이를 되돌린다 — 상자가 커지지 않는다. margin-right 는 padding-right 와 같은 -6px — 아래 금액(.sb-provbal-amt 은 여백이 없어 콘텐츠 오른쪽 끝에 붙는다)과 ↻ 글자 오른쪽 끝을 같은 세로선에 맞춘다. 누를 면적은 그대로. */ .sb-provbal-btn{ background:none; border:0; padding:4px 6px; margin:-4px -6px -4px 0; border-radius:6px; font-size:15px; line-height:1; color:#66707C; cursor:pointer; } .sb-provbal-btn:hover:not(:disabled){ color:var(--sidebar-text); background:rgba(255,255,255,.06); } .sb-provbal-btn:disabled{ opacity:.4; cursor:default; } .sb-provbal-rows{ display:flex; flex-direction:column; gap:3px; margin-top:6px; } .sb-provbal-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--sidebar-text); } .sb-provbal-name{ white-space:nowrap; } .sb-provbal-amt{ font-family:'IBM Plex Mono', monospace; white-space:nowrap; } .sb-provbal-amt.is-below{ color:var(--coral); } .sb-provbal-amt.is-fail{ color:#66707C; } /* 공급사 조회가 실패해 마지막 성공 값을 보여 주는 중. 정확한 시각은 title 에 있다. */ .sb-provbal-amt.is-stale{ opacity:.6; } .sb-label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#66707C; padding:14px 10px 6px; } .sb-favorites{ display:flex; flex-direction:column; gap:2px; margin:0 0 6px; } .sb-fav-empty{ font-size:11px; color:#66707C; padding:4px 10px 10px; line-height:1.4; } .sb-fav-item{ display:flex; align-items:center; gap:6px; padding:8px 10px 8px 6px; border-radius:8px; font-size:12.5px; cursor:pointer; color:var(--sidebar-text); background:rgba(232,162,61,.06); border:1px solid rgba(232,162,61,.12); transition: background .12s, opacity .12s, border-color .12s; } .sb-fav-item:hover{ background:rgba(232,162,61,.12); } .sb-fav-item.active{ background:var(--sidebar-active); color:#fff; border-color:transparent; } .sb-favorites.is-sorting{ cursor:grabbing; } .sb-favorites.is-sorting > .sb-fav-item:not(.is-drag-origin){ opacity:.5; filter:saturate(.7) brightness(.9); transition:opacity .16s ease, filter .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .sb-favorites.is-sorting > .sb-fav-item.is-drop-over{ opacity:1; filter:none; border-color:rgba(232,162,61,.9); box-shadow:0 0 0 1px rgba(232,162,61,.4), 0 6px 16px rgba(0,0,0,.28); transform:scale(1.02); } .sb-fav-item.is-drag-origin{ pointer-events:none; opacity:1 !important; filter:none !important; background:rgba(232,162,61,.1) !important; border:1.5px dashed rgba(232,162,61,.8) !important; box-shadow:inset 0 0 0 1px rgba(232,162,61,.15); position:relative; min-height:36px; } .sb-fav-item.is-drag-origin > *{ visibility:hidden; } .sb-fav-item.is-drag-origin::after{ content:'놓기'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:.06em; color:rgba(232,162,61,.95); visibility:visible; } .sb-fav-handle{ flex-shrink:0; width:18px; height:22px; display:inline-flex; align-items:center; justify-content:center; cursor:grab; color:#8B96A3; border-radius:4px; user-select:none; font-size:11px; letter-spacing:-1px; line-height:1; opacity:.55; touch-action:none; } .sb-fav-handle:hover{ opacity:1; color:#E8A23D; background:rgba(255,255,255,.06); } .sb-fav-handle:active, .sb-favorites.is-sorting .sb-fav-handle{ cursor:grabbing; } .sb-fav-drag-ghost{ position:fixed; left:0; top:0; z-index:10050; margin:0; pointer-events:none; display:flex; align-items:center; gap:6px; padding:8px 10px 8px 6px; border-radius:8px; font-size:12.5px; color:var(--sidebar-text); background:linear-gradient(160deg, #1a2838, #121c2a); border:1px solid rgba(232,162,61,.9); box-shadow: 0 22px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(232,162,61,.35), 0 0 22px rgba(232,162,61,.28); transform-origin:top left; will-change:transform, opacity; opacity:.98; } .sb-fav-drag-ghost .sb-fav{ display:none; } .sb-fav-item .ic{ width:16px; text-align:center; font-size:12px; opacity:.9; flex-shrink:0; } .sb-fav-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .sb-fav-label{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-fav-group{ font-size:10px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-fav-badge{ margin-left:4px; flex-shrink:0; background:var(--coral); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; } .sb-fav{ margin-left:auto; flex-shrink:0; font-size:12px; line-height:1; opacity:.28; cursor:pointer; padding:2px 3px; border-radius:4px; user-select:none; } .sb-fav-item .sb-fav-badge + .sb-fav{ margin-left:4px; } .sb-fav:hover{ opacity:.7; color:#E8A23D; } .sb-fav.on{ opacity:1; color:#E8A23D; } .sb-parent-label, .sb-child-label{ flex:1; min-width:0; } .sb-child .sb-fav{ margin-left:4px; } .sb-parent .sb-fav{ margin-left:4px; } .sb-parent .badge{ margin-left:auto; background:var(--coral); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; } .sb-parent .sb-fav + .badge{ margin-left:4px; } .sb-parent .chevron{ margin-left:auto; font-size:9px; opacity:.55; transition:transform .15s; } .sb-parent .badge + .chevron, .sb-parent .sb-fav + .chevron{ margin-left:6px; } .sb-child .badge{ background:var(--coral); color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px; margin-left:4px; } .sb-parent{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:500; cursor:pointer; } .sb-parent:hover{ background:rgba(255,255,255,0.06); } .sb-parent.active{ background:var(--sidebar-active); color:#fff; } .sb-parent .ic{ width:16px; text-align:center; font-size:13px; opacity:.85; } .sb-parent.open .chevron{ transform:rotate(90deg); } .sb-children{ display:none; flex-direction:column; padding-left:30px; gap:1px; margin:2px 0 8px; } .sb-children.open{ display:flex; } .sb-child{ padding:7px 10px; border-radius:6px; font-size:12.5px; cursor:pointer; opacity:.82; display:flex; align-items:center; gap:6px; } .sb-child:hover{ background:rgba(255,255,255,0.05); opacity:1; } .sb-child.active{ background:var(--sidebar-active); color:#fff; opacity:1; } .sb-footer{ margin-top:auto; padding:14px 10px; font-size:11px; color:#5A6470; border-top:1px solid rgba(255,255,255,.08); } .main{ flex:1; min-width:0; } .topbar{ display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:6; } .region-tabs{ display:flex; gap:6px; } .region-tab{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; } .region-tab.active{ background:var(--ink); color:#fff; } .topbar-right{ display:flex; align-items:center; gap:14px; } /* Unimplemented global header search (placeholder div) — hidden until real input/API exists */ .search-box{ display:none; } /* * Meridian Ops 기본 텍스트 필드 (= 전체회원「아이디 · 닉네임 · 이메일」) * 클래스: .ops-search-input / .ops-field * form-row · panel · modal 기본 input/select/textarea에도 동일 적용 */ .ops-search-input, .ops-field{ box-sizing:border-box; height:36px; background:var(--input-bg); border:1px solid var(--line); border-radius:8px; padding:0 12px; font-family:inherit; font-size:13px; font-weight:400; line-height:1.2; color:var(--text); min-width:0; outline:none; transition:border-color .12s, box-shadow .12s; } .ops-search-input::placeholder, .ops-field::placeholder{ color:var(--muted); font-size:13px; } .ops-search-input:hover, .ops-field:hover{ border-color:color-mix(in srgb, var(--line) 70%, var(--muted)); } .ops-search-input:focus, .ops-field:focus{ border-color:color-mix(in srgb, var(--teal) 55%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); } input.ops-search-input[type="date"], input.ops-field[type="date"]{ color-scheme:dark; padding:0 10px; } body[data-theme="light"] input.ops-search-input[type="date"], body[data-theme="light"] input.ops-field[type="date"]{ color-scheme:light; } /* Dark theme: calendar icon is otherwise near-black on dark inputs */ body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.85; filter:invert(1) brightness(1.15); } body[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.7; filter:none; } .dash-custom-box input[type="date"], .rev-range input[type="date"]{ color-scheme:dark; } body[data-theme="light"] .dash-custom-box input[type="date"], body[data-theme="light"] .rev-range input[type="date"]{ color-scheme:light; } /* Apply default Ops field to form / panel / modal controls */ .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="image"]):not(.mini-input):not(.no-ops-field), .form-row select:not(.no-ops-field), .form-row textarea:not(.no-ops-field), .panel input[type="text"]:not(.mini-input):not(.no-ops-field), .panel input[type="search"]:not(.no-ops-field), .panel input[type="email"]:not(.no-ops-field), .panel input[type="password"]:not(.no-ops-field), .panel input[type="number"]:not(.mini-input):not(.no-ops-field), .panel input[type="tel"]:not(.no-ops-field), .panel input[type="url"]:not(.no-ops-field), .panel input[type="date"]:not(.no-ops-field), .panel input:not([type]):not(.mini-input):not(.no-ops-field), .panel select:not(.no-ops-field), .panel textarea:not(.no-ops-field), .modal-box input[type="text"]:not(.mini-input):not(.no-ops-field), .modal-box input[type="search"]:not(.no-ops-field), .modal-box input[type="email"]:not(.no-ops-field), .modal-box input[type="password"]:not(.no-ops-field), .modal-box input[type="number"]:not(.mini-input):not(.no-ops-field), .modal-box input[type="tel"]:not(.no-ops-field), .modal-box input[type="url"]:not(.no-ops-field), .modal-box input[type="date"]:not(.no-ops-field), .modal-box input:not([type]):not(.mini-input):not(.no-ops-field), .modal-box select:not(.no-ops-field), .modal-box textarea:not(.no-ops-field), .pager-size select{ box-sizing:border-box; height:36px; background:var(--input-bg); border:1px solid var(--line); border-radius:8px; padding:0 12px; font-family:inherit; font-size:13px; font-weight:400; line-height:1.2; color:var(--text); min-width:0; outline:none; transition:border-color .12s, box-shadow .12s; } .form-row textarea:not(.no-ops-field), .panel textarea:not(.no-ops-field), .modal-box textarea:not(.no-ops-field){ height:auto; min-height:110px; padding:10px 12px; line-height:1.55; resize:vertical; display:block; } .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.mini-input):not(.no-ops-field):hover, .form-row select:not(.no-ops-field):hover, .form-row textarea:not(.no-ops-field):hover, .panel input[type="text"]:not(.mini-input):not(.no-ops-field):hover, .panel input[type="search"]:not(.no-ops-field):hover, .panel input[type="email"]:not(.no-ops-field):hover, .panel input[type="password"]:not(.no-ops-field):hover, .panel input[type="number"]:not(.mini-input):not(.no-ops-field):hover, .panel input[type="tel"]:not(.no-ops-field):hover, .panel input[type="url"]:not(.no-ops-field):hover, .panel input[type="date"]:not(.no-ops-field):hover, .panel input:not([type]):not(.mini-input):not(.no-ops-field):hover, .panel select:not(.no-ops-field):hover, .panel textarea:not(.no-ops-field):hover, .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not(.mini-input):not(.no-ops-field):hover, .modal-box select:not(.no-ops-field):hover, .modal-box textarea:not(.no-ops-field):hover{ border-color:color-mix(in srgb, var(--line) 70%, var(--muted)); } .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.mini-input):not(.no-ops-field):focus, .form-row select:not(.no-ops-field):focus, .form-row textarea:not(.no-ops-field):focus, .panel input[type="text"]:not(.mini-input):not(.no-ops-field):focus, .panel input[type="search"]:not(.no-ops-field):focus, .panel input[type="email"]:not(.no-ops-field):focus, .panel input[type="password"]:not(.no-ops-field):focus, .panel input[type="number"]:not(.mini-input):not(.no-ops-field):focus, .panel input[type="tel"]:not(.no-ops-field):focus, .panel input[type="url"]:not(.no-ops-field):focus, .panel input[type="date"]:not(.no-ops-field):focus, .panel input:not([type]):not(.mini-input):not(.no-ops-field):focus, .panel select:not(.no-ops-field):focus, .panel textarea:not(.no-ops-field):focus, .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not(.mini-input):not(.no-ops-field):focus, .modal-box select:not(.no-ops-field):focus, .modal-box textarea:not(.no-ops-field):focus, .pager-size select:focus{ border-color:color-mix(in srgb, var(--teal) 55%, var(--line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); } .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.mini-input):not(.no-ops-field), .form-row select:not(.no-ops-field), .form-row textarea:not(.no-ops-field){ width:100%; } .form-row label{ font-size:11px; margin-bottom:4px; } .form-row textarea.reply-lg{ min-height:160px; } .theme-toggle{ display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; } .theme-toggle button{ border:none; background:transparent; color:var(--muted); font-size:12px; padding:6px 12px; cursor:pointer; font-weight:600; } .theme-toggle button.active{ background:var(--ink); color:#fff; } .alert-icon{ position:relative; font-size:16px; cursor:pointer; } .alert-icon .dot{ position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:var(--coral); } .admin-chip{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; } .avatar{ width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .lang-dropdown{ position:relative; } .lang-current{ display:flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; background:var(--panel); user-select:none; } .lang-current .caret{ font-size:9px; opacity:.6; margin-left:2px; } .lang-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:170px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.25); padding:6px; display:none; flex-direction:column; gap:2px; z-index:20; } .lang-dropdown:hover .lang-menu, .lang-dropdown.open .lang-menu{ display:flex; } .lang-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; } .lang-item:hover{ background:var(--bg); } .lang-item.active{ color:var(--amber); font-weight:700; } .content{ padding:26px 28px 70px; } .page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; flex-wrap:wrap; gap:10px; } .page-head h1{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; } .page-head p{ font-size:13px; color:var(--muted); margin-top:4px; } .breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:8px; } .btn{ padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--text); } .btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink); } .btn-sm{ padding:5px 11px; font-size:12px; } .btn-danger{ color:var(--coral); border-color:var(--coral-bg); } .btn-ok{ color:var(--teal); border-color:var(--teal-bg); } .kpi-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-bottom:20px; } .kpi-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; } .kpi-card .label{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .kpi-card .value{ font-family:'IBM Plex Mono', monospace; font-size:23px; font-weight:600; margin-top:8px; } .kpi-card .delta{ font-size:12px; margin-top:6px; font-weight:600; } .delta.up{ color:var(--teal); } .delta.down{ color:var(--coral); } /* Dashboard KPI — 5 across; stepped responsive (other pages keep .kpi-grid) */ .dash-kpi-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-bottom:16px; } .grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; } .dash-sales-alerts{ align-items:start; } .dash-alerts-panel{ display:flex; flex-direction:column; overflow:hidden; margin-bottom:16px; } .dash-alerts-panel .panel-head{ flex-shrink:0; } .dash-alerts-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 2px; scrollbar-width:thin; } .dash-alerts-body .alert-row{ padding:8px 0; } .dash-alerts-body .alert-row .t{ font-size:12.5px; } .dash-alerts-body .alert-row .d{ font-size:11px; } .dash-alerts-body .btn.btn-sm{ padding:3px 8px; font-size:11px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; } .panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; } .panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; } .panel-head h3{ font-size:15px; font-weight:600; } .panel-head span{ font-size:12px; color:var(--muted); } .panel-head-actions{ display:flex; align-items:center; gap:10px; } .panel.is-collapsed .panel-head{ margin-bottom:0; } .panel.is-collapsed .panel-collapse-body{ display:none; } .chart-area{ height:200px; display:flex; align-items:flex-end; gap:4px; border-bottom:1px solid var(--line); } .chart-bar{ flex:1; min-width:0; background:var(--coral); border-radius:2px 2px 0 0; position:relative; cursor:default; transform-origin: bottom center; transform: scaleY(0); opacity: .35; transition: transform .55s cubic-bezier(.22,.9,.32,1), opacity .4s ease, box-shadow .2s ease; } .chart-area.is-animated .chart-bar{ transform: scaleY(1); opacity: 1; } .chart-labels-row{ display:flex; gap:4px; margin-top:8px; } .chart-label{ flex:1; min-width:0; text-align:center; font-size:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.02em; } .chart-bar:hover{ box-shadow:0 0 16px rgba(196,69,58,0.55); } .chart-bar.is-neg{ background:var(--teal, #2a9d8f); } .chart-bar .chart-tip{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px; background:var(--ink); color:#fff; font-size:10.5px; padding:4px 7px; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; } .chart-bar:hover .chart-tip{ opacity:1; } .live-board{ position:sticky; top:65px; z-index:4; background:var(--panel); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4, 1fr); } .lb-col{ padding:12px 20px; border-right:1px solid var(--line); position:relative; overflow:hidden; } .lb-col:last-child{ border-right:none; } .lb-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; } .lb-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:6px; } .lb-pulse{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.6s infinite; } .lb-count{ font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:700; color:var(--amber); } .lb-latest{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-latest .t{ color:var(--muted); font-size:11px; margin-left:6px; } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} } @keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} } .lb-fresh{ animation:fadeIn .35s ease; } .alert-row{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; transition:background .12s ease; } .alert-row:hover{ background:var(--bg); } .alert-row:last-child{ border-bottom:none; } .alert-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; } .alert-dot.high{ background:var(--coral); } .alert-dot.mid{ background:var(--amber); } .alert-dot.low{ background:var(--teal); } .alert-row .t{ font-weight:600; } .alert-row .d{ color:var(--muted); font-size:12px; margin-top:2px; } /* 대시보드 최근 가입/입금/출금 — 한 줄 · 양끝 정렬 */ .dash-mini-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12.5px; white-space:nowrap; min-width:0; min-height:42px; } .dash-mini-row:last-child{ border-bottom:none; } .dash-mini-left{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; overflow:hidden; } .dash-mini-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; } .dash-mini-row .alert-dot{ flex-shrink:0; width:7px; height:7px; } .dash-mini-main{ min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--text); } .dash-mini-muted{ color:var(--muted); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; max-width:8em; } .dash-mini-time{ color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; font-size:11px; } .dash-mini-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; } .dash-mini-actions .btn{ padding:2px 8px; font-size:10.5px; min-height:22px; line-height:1.2; } /* 대시보드 최근 라운드 — 한 줄 읽기 */ .dash-rd-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); } .dash-rd-row:last-child{ border-bottom:none; } .dash-rd-thumb{ width:32px; height:32px; border-radius:7px; object-fit:cover; flex-shrink:0; background:var(--line); } .dash-rd-thumb--empty{ display:block; } .dash-rd-line{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; font-size:12.5px; line-height:1.35; } .dash-rd-game{ font-weight:650; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; max-width:42%; } .dash-rd-sep{ color:var(--line); flex-shrink:0; user-select:none; } .dash-rd-user{ color:var(--muted); flex-shrink:0; } .dash-rd-amt{ flex-shrink:0; color:var(--muted); letter-spacing:-.01em; } .dash-rd-arrow{ opacity:.45; margin:0 1px; } .dash-rd-win{ color:var(--muted); font-weight:600; } .dash-rd-win.is-win{ color:var(--teal); } .dash-rd-time{ color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; margin-left:auto; padding-left:8px; font-size:11px; } .dash-rd-status{ flex-shrink:0; transform:scale(.92); transform-origin:right center; } .tag-pill{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:auto; height:fit-content; white-space:nowrap; } .tag-pill.high{ background:var(--coral-bg); color:var(--coral); } .tag-pill.mid{ background:var(--amber-bg); color:var(--amber); } .tag-pill.low{ background:var(--teal-bg); color:var(--teal); } table{ width:100%; border-collapse:collapse; font-size:13px; } th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; } td{ padding:12px 8px; border-bottom:1px solid var(--line); } tr:last-child td{ border-bottom:none; } tbody tr{ transition:background .12s ease; } tbody tr:hover{ background:var(--bg); } .status-pill{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; } .status-pill.approved{ background:var(--teal-bg); color:var(--teal); } .status-pill.pending{ background:var(--amber-bg); color:var(--amber); } .status-pill.flagged{ background:var(--coral-bg); color:var(--coral); } .status-pill.rejected{ background:var(--coral-bg); color:var(--coral); } th.col-status, td.col-status{ text-align:center !important; vertical-align:middle; } .filter-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; } .filter-tab{ padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); cursor:pointer; } /* ===== 입출금 프로세스 스테퍼 & 칸반 ===== */ .stepper{ display:flex; align-items:flex-start; margin:18px 0 22px; } .step{ flex:1; text-align:center; position:relative; min-width:0; } .step:not(:first-child)::before{ content:''; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; } .step.done:not(:first-child)::before{ background:var(--teal); } .step-circle{ width:30px; height:30px; border-radius:50%; background:var(--panel); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin:0 auto 7px; position:relative; z-index:1; color:var(--muted); } .step.done .step-circle{ background:var(--teal); border-color:var(--teal); color:#fff; } .step.current .step-circle{ background:var(--amber); border-color:var(--amber); color:#1B2430; box-shadow:0 0 0 4px var(--amber-bg); } .step.rejected .step-circle{ background:var(--coral); border-color:var(--coral); color:#fff; } .step-label{ font-size:10px; color:var(--muted); line-height:1.3; padding:0 2px; } .step.done .step-label, .step.current .step-label, .step.rejected .step-label{ color:var(--text); font-weight:600; } .kanban-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:20px; } .kanban-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center; } .kanban-card .n{ font-family:'IBM Plex Mono', monospace; font-size:22px; font-weight:700; color:var(--amber); } .kanban-card .l{ font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.3; } .bank-info-box{ background:var(--bg); border:1px dashed var(--teal); border-radius:10px; padding:14px 16px; margin:12px 0; } .bank-info-box .row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; } .filter-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .dash-range-bar{ display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; } .dash-range-tab{ padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); cursor:pointer; background:var(--panel); } .dash-range-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .dash-custom-box{ display:none; align-items:center; gap:8px; font-size:12.5px; } .dash-custom-box input[type="date"]{ padding:6px 10px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:12px; } /* ===== 매출 리포트 기간 바 (전체 회원 필터 패널과 동일 컨셉) ===== */ .rev-range.members-filter-panel{ display:block; } .rev-range-main{ display:flex; gap:12px; row-gap:14px; flex-wrap:wrap; align-items:end; justify-content:space-between; padding:0 0 4px; } .rev-range-presets{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .rev-range-dates{ display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-left:auto; } .rev-range-dates.is-active .ops-search-input{ border-color:color-mix(in srgb, var(--amber) 55%, var(--line)); box-shadow:0 0 0 2px var(--amber-bg); } .rev-range-sub{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:14px 0 0; margin-top:10px; border-top:1px solid var(--line); } .rev-range-label{ font-size:11px; font-weight:700; color:var(--muted); margin-right:4px; } .rev-range-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .rev-range-hint{ margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; } @media (max-width:720px){ .rev-range-dates{ margin-left:0; width:100%; } .rev-range-hint{ margin-left:0; width:100%; } } /* ===== World map (country connections) ===== */ .world-map-container{ width:100%; height:280px; overflow:hidden; border-radius:8px; } .world-map-container .svgMap-map-wrapper{ padding-top:56% !important; } .world-map-legend{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); } .world-map-top{ display:flex; flex-direction:column; gap:6px; min-width:180px; } .wm-rank-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--line); } .wm-rank-row:last-child{ border-bottom:none; } /* svgMap dark theme override */ body[data-theme="dark"] .svgMap-map-wrapper{ background:#0B1420 !important; } body[data-theme="dark"] .svgMap-country{ fill:#1B2A3E !important; stroke:#0B1420 !important; } body[data-theme="dark"] .svgMap-country:hover, body[data-theme="dark"] .svgMap-country.svgMap-active{ stroke:#E8A23D !important; } body[data-theme="dark"] .svgMap-control-button{ background-color:#131F30 !important; } body[data-theme="dark"] .svgMap-control-button::before, body[data-theme="dark"] .svgMap-control-button::after{ background:#8B96A3 !important; } body[data-theme="dark"] .svgMap-tooltip{ background:#131F30 !important; border-color:#233247 !important; } body[data-theme="dark"] .svgMap-tooltip-title{ color:#E7EAEE !important; } body[data-theme="dark"] .svgMap-tooltip-content{ color:#8B96A3 !important; } body[data-theme="dark"] .svgMap-tooltip-content table td span{ color:#E7EAEE !important; } body[data-theme="dark"] .svgMap-tooltip-pointer::after{ background:#131F30 !important; border-color:#233247 !important; } .switch{ width:36px; height:20px; border-radius:20px; background:var(--line); position:relative; cursor:pointer; flex-shrink:0; } .switch.on{ background:var(--teal); } .switch::after{ content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; transition:left .15s; } .switch.on::after{ left:18px; } .mini-input{ width:90px; padding:6px 8px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-family:'IBM Plex Mono', monospace; font-size:12px; } .mini-input.wide{ width:110px; } .role-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .role-card{ border:1px solid var(--line); border-radius:10px; padding:16px; } .role-card h4{ font-size:14px; margin-bottom:4px; } .role-card .count{ font-size:12px; color:var(--muted); margin-bottom:12px; } .perm-row{ display:flex; justify-content:space-between; font-size:12px; padding:4px 0; color:var(--muted); } .perm-row b{ color:var(--text); font-weight:500; } .form-row{ margin-bottom:14px; } .form-row label{ display:block; font-size:11px; font-weight:600; margin-bottom:4px; color:var(--muted); } /* form-row input/select/textarea → ops-search-input 토큰 (상단 공통 규칙) */ .form-row textarea.reply-lg{ min-height:160px; } .members-filter-panel{ background:color-mix(in srgb, var(--panel) 82%, var(--bg)); } .members-list-panel{ background:var(--panel); } /* Partner hierarchy — outline tree */ .aff-tree{ display:flex; flex-direction:column; gap:0; padding:4px 0 12px; } .aff-tree-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:0 12px 10px; } .aff-oline{ display:block; } .aff-orow{ display:grid; grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 1fr) auto auto; gap:10px 14px; align-items:center; padding:8px 10px; border-radius:8px; border:1px solid transparent; min-height:40px; } .aff-orow:hover{ background:rgba(255,255,255,.03); border-color:var(--line); } .aff-orow.is-brand{ background:rgba(15,27,45,.55); border:1px solid var(--line); margin:10px 0 4px; font-weight:600; } .aff-orow.is-brand:first-child{ margin-top:0; } .aff-orow.is-match{ box-shadow: inset 0 0 0 1px var(--amber); } .aff-orow.is-collapsed-hide{ display:none; } .aff-oleft{ display:flex; align-items:center; gap:6px; min-width:0; } .aff-indent{ display:inline-flex; align-items:stretch; flex-shrink:0; position:relative; height:28px; } .aff-indent-seg{ width:18px; position:relative; flex-shrink:0; } .aff-indent-seg::before{ content:''; position:absolute; left:8px; top:0; bottom:0; border-left:1px solid var(--line); } .aff-indent-seg.is-last::before{ bottom:50%; } .aff-indent-seg.is-leaf::after{ content:''; position:absolute; left:8px; top:50%; width:8px; border-top:1px solid var(--line); } .aff-indent-seg.is-empty::before, .aff-indent-seg.is-empty::after{ display:none; } .aff-tw{ width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:var(--input-bg); color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; padding:0; line-height:1; } .aff-tw:hover{ color:var(--text); border-color:var(--muted); } .aff-tw.is-leaf{ border-color:transparent; background:transparent; cursor:default; width:22px; visibility:hidden; } .aff-oname{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .aff-oname b{ font-weight:650; } .aff-ocode{ color:var(--muted); font-size:11.5px; margin-left:4px; } .aff-badge{ display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; letter-spacing:.02em; flex-shrink:0; } .aff-badge.role-brand{ background:rgba(184,148,74,.2); color:var(--amber); } .aff-badge.role-master{ background:rgba(184,148,74,.18); color:var(--amber); } .aff-badge.role-distributor{ background:rgba(31,111,99,.22); color:var(--teal); } .aff-badge.role-partner{ background:rgba(56,120,180,.2); color:#7eb6e8; } .aff-badge.role-store{ background:rgba(139,150,163,.18); color:var(--muted); } .aff-meta{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .aff-status{ font-size:11px; white-space:nowrap; } .aff-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .aff-empty{ padding:20px 12px; color:var(--muted); font-size:13px; } .aff-list-wrap{ display:none; margin-top:8px; } .aff-list-wrap.is-open{ display:block; } @media (max-width: 900px){ .aff-orow{ grid-template-columns: 1fr; gap:6px; } .aff-actions{ justify-content:flex-start; } .aff-meta{ white-space:normal; } } /* legacy card nodes (unused by new outline, keep harmless) */ .aff-node{ border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:flex; align-items:center; gap:12px; background:var(--panel); } .aff-node.lvl-hq{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700; } .aff-node.lvl-group{ border-left:3px solid var(--amber); } .aff-node.lvl-partner{ border-left:3px solid var(--teal); font-size:13px; } .aff-node.lvl-channel{ border-left:3px solid #8B96A3; font-size:12.5px; color:var(--muted); background:transparent; } .aff-tag{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--teal-bg); color:var(--teal); } .aff-metric{ margin-left:auto; display:flex; gap:18px; font-family:'IBM Plex Mono', monospace; font-size:12px; } .aff-metric b{ display:block; font-size:10px; font-weight:400; color:var(--muted); font-family:inherit; } .aff-rate-parent-box{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:16px; background:var(--panel); } .aff-rate-parent-box.aff-rate-parent-warn{ border-color:var(--amber); background:rgba(245,166,35,.08); } .aff-rate-parent-box.aff-rate-parent-top{ border-style:dashed; } .aff-rate-parent-title{ font-size:13px; font-weight:700; margin-bottom:4px; } .aff-rate-parent-note{ font-size:11px; color:var(--muted); line-height:1.45; margin-bottom:10px; } .aff-rate-parent-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; } .aff-rate-parent-cell{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--input-bg); } .aff-rate-parent-cell span{ display:block; font-size:10px; color:var(--muted); margin-bottom:2px; } .aff-rate-parent-cell b{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--amber); } .aff-rate-row label{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .aff-rate-cap{ font-size:11px; font-weight:500; color:var(--amber); } .aff-rate-cap-free{ color:var(--muted); } .aff-rate-cap-hint{ font-size:11px; color:var(--muted); margin-top:4px; } .pending-member-detail{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:13px; } .pending-member-detail th, .pending-member-detail td{ padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; } .pending-member-detail tr:last-child th, .pending-member-detail tr:last-child td{ border-bottom:none; } .pending-member-detail th{ width:120px; color:var(--muted); font-weight:600; background:rgba(255,255,255,.03); white-space:nowrap; } .pending-member-detail td{ color:var(--text); line-height:1.45; } .pending-member-detail thead th{ text-align:left; font-size:11px; width:auto; } .cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .cal-nav{ display:flex; align-items:center; gap:14px; } .cal-nav button{ background:none; border:1px solid var(--line); color:var(--text); border-radius:6px; width:28px; height:28px; cursor:pointer; } .cal-title{ font-size:15px; font-weight:600; } .cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; } .cal-dow{ font-size:11px; color:var(--muted); text-align:center; padding-bottom:4px; text-transform:uppercase; letter-spacing:.04em; } .cal-cell{ border:1px solid var(--line); border-radius:8px; padding:8px; min-height:96px; display:flex; flex-direction:column; gap:3px; } .cal-cell.empty{ border:none; } .cal-cell.today{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; } .cal-daynum{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted); margin-bottom:2px; } .cal-stat{ font-size:10.5px; display:flex; justify-content:space-between; gap:4px; } .cal-stat .k{ color:var(--muted); } .cal-stat .v{ font-family:'IBM Plex Mono', monospace; font-weight:600; } .cal-stat.ggr .v{ color:var(--amber); } .cal-stat.dep .v{ color:var(--teal); } .cal-stat.wd .v{ color:var(--coral); } .cal-legend{ display:flex; gap:18px; margin-top:14px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; } .cal-legend span{ display:inline-flex; align-items:center; gap:6px; } .cal-legend .dotc{ width:8px; height:8px; border-radius:50%; } /* ===== Live betting P&L ===== */ .pnl-panel{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .pnl-value{ font-family:'IBM Plex Mono', monospace; font-size:34px; font-weight:700; } .pnl-value.win{ color:var(--teal); } .pnl-value.lose{ color:var(--coral); } .pnl-sub{ font-size:12px; color:var(--muted); margin-top:4px; } .pnl-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--coral); display:inline-block; animation:pulse 1.4s infinite; margin-right:6px; } .bet-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; transition:background .12s ease; } .bet-row:hover{ background:var(--bg); } .bet-row:last-child{ border-bottom:none; } .bet-result{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:5px; letter-spacing:.03em; } .bet-result.win{ background:var(--teal-bg); color:var(--teal); } .bet-result.lose{ background:var(--coral-bg); color:var(--coral); } .bet-amt{ margin-left:auto; font-family:'IBM Plex Mono', monospace; font-weight:700; } .bet-amt.win{ color:var(--teal); } .bet-amt.lose{ color:var(--coral); } /* ===== Pagination ===== */ .pager{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted); } .pager-size select{ padding:5px 8px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:12px; margin-left:6px; } .pager-pages{ display:flex; gap:4px; align-items:center; } .pager-btn{ min-width:28px; height:28px; padding:0 6px; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; font-size:12px; } .pager-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); } .pager-btn:disabled{ opacity:.35; cursor:not-allowed; } /* ===== Modal & Toast ===== */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; } .modal-overlay.show{ display:flex; } .modal-box{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.4); max-height:min(90vh, 720px); display:flex; flex-direction:column; } .modal-box.wide{ max-width:640px; } .modal-scroll-body{ margin-bottom:18px; overflow-y:auto; overflow-x:hidden; max-height:min(62vh, 480px); padding-right:4px; -webkit-overflow-scrolling:touch; } .modal-scroll-body::-webkit-scrollbar{ width:6px; } .modal-scroll-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; } .modal-actions{ flex-shrink:0; } .modal-box.game-play{ max-width:min(1280px,96vw); width:96vw; height:min(86vh,900px); padding:0; display:flex; flex-direction:column; overflow:hidden; } .game-play-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg); } .game-play-bar strong{ font-size:14px; } .game-play-actions{ display:flex; gap:8px; } .game-play-frame{ flex:1; width:100%; border:0; background:#000; min-height:0; } .modal-title{ font-size:16px; font-weight:700; margin-bottom:10px; } .modal-body{ font-size:13.5px; color:var(--muted); margin-bottom:22px; line-height:1.6; } .modal-actions{ display:flex; justify-content:flex-end; gap:10px; } .detail-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; } .detail-row:last-child{ border-bottom:none; } .detail-row .k{ color:var(--muted); flex-shrink:0; } .toast{ position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff; padding:13px 20px; border-radius:8px; font-size:13px; font-weight:600; z-index:60; opacity:0; transform:translateY(10px); transition:all .25s ease; box-shadow:0 10px 30px rgba(0,0,0,0.35); pointer-events:none; } .toast.show{ opacity:1; transform:translateY(0); } /* 토스트 톤 — 상태축(--state-*)만 쓴다. 톤 클래스가 없으면 위 중립 모양 그대로다. 좌측 보더 4px + padding-left 16px 로 총 여백을 20px 로 맞춰 폭이 변하지 않게 한다. 배경이 --ink 고정(다크/라이트 동일)이라 상태색 원본은 대비가 부족하다(teal 2.89:1) → 같은 토큰에서 흰색을 섞어 밝은 파생색을 만든다(6.6~8.4:1). 팔레트가 바뀌면 파생색도 따라간다. 규칙: docs/UI_FEEDBACK_RULES.md */ .toast.tone-ok, .toast.tone-warn, .toast.tone-danger{ border-left:4px solid transparent; padding-left:16px; } .toast.tone-ok{ border-left-color:color-mix(in srgb, var(--state-ok) 60%, #fff); background:color-mix(in srgb, var(--state-ok) 14%, var(--ink)); } .toast.tone-warn{ border-left-color:color-mix(in srgb, var(--state-warn) 60%, #fff); background:color-mix(in srgb, var(--state-warn) 14%, var(--ink)); } .toast.tone-danger{ border-left-color:color-mix(in srgb, var(--state-danger) 60%, #fff); background:color-mix(in srgb, var(--state-danger) 14%, var(--ink)); } /* ===== 결과 안내 패널 — 토스트가 사라진 뒤에도 남아야 하는 안내 (docs/UI_FEEDBACK_RULES.md) ===== */ .result-note{ border:1px solid var(--line); border-left:4px solid var(--line); border-radius:10px; padding:14px 16px; font-size:13px; line-height:1.65; } .result-note .rn-title{ font-weight:700; margin-bottom:6px; } .result-note ul{ margin:8px 0 0; padding-left:18px; } .result-note li{ margin-bottom:4px; } .result-note li:last-child{ margin-bottom:0; } .result-note.tone-ok{ border-left-color:var(--state-ok); background:color-mix(in srgb, var(--state-ok) 8%, transparent); } .result-note.tone-warn{ border-left-color:var(--state-warn); background:color-mix(in srgb, var(--state-warn) 8%, transparent); } /* ===== Catalog sync progress ===== */ .sync-panel{ margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg, rgba(45,140,120,.06), transparent 70%); display:none; } .sync-panel.show{ display:block; animation:syncFade .25s ease; } .sync-panel.is-running{ border-color:rgba(45,140,120,.45); } .sync-panel.is-done{ border-color:rgba(45,140,120,.35); } .sync-panel.is-error{ border-color:rgba(220,90,80,.45); background:linear-gradient(180deg, rgba(220,90,80,.06), transparent 70%); } @keyframes syncFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} } .sync-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13.5px; } .sync-panel-head strong{ font-weight:700; } .sync-panel-head .sync-meta{ margin-left:auto; font-size:12px; color:var(--muted); } .sync-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(45,140,120,.25); border-top-color:var(--teal, #2d8c78); animation:syncSpin .7s linear infinite; flex-shrink:0; } .sync-panel.is-done .sync-spinner, .sync-panel.is-error .sync-spinner{ animation:none; border-color:transparent; } .sync-panel.is-done .sync-spinner{ background:var(--teal, #2d8c78); box-shadow:inset 0 0 0 3px var(--panel); } .sync-panel.is-error .sync-spinner{ background:var(--coral, #dc5a50); box-shadow:inset 0 0 0 3px var(--panel); } @keyframes syncSpin{ to{ transform:rotate(360deg) } } .sync-bar{ height:6px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; margin-bottom:12px; } .sync-bar-fill{ height:100%; width:8%; border-radius:inherit; background:linear-gradient(90deg, #2d8c78, #4cb8a0); transition:width .35s ease; } .sync-panel.is-running .sync-bar-fill{ animation:syncPulse 1.1s ease-in-out infinite; } @keyframes syncPulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.25) } } .sync-steps{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .sync-steps li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:4px 0; } .sync-steps li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; } .sync-steps li.active{ color:var(--text); font-weight:600; } .sync-steps li.active::before{ background:var(--teal, #2d8c78); box-shadow:0 0 0 3px rgba(45,140,120,.2); } .sync-steps li.done{ color:var(--text); } .sync-steps li.done::before{ background:var(--teal, #2d8c78); } .sync-steps li.error{ color:var(--coral, #dc5a50); } .sync-steps li.error::before{ background:var(--coral, #dc5a50); } .sync-summary{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); display:none; font-size:12.5px; line-height:1.55; } .sync-panel.is-done .sync-summary, .sync-panel.is-error .sync-summary{ display:block; } .sync-summary-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:8px 0 4px; } .sync-stat{ padding:8px 10px; border-radius:8px; background:rgba(0,0,0,.04); border:1px solid var(--line); } .sync-stat .k{ display:block; font-size:11px; color:var(--muted); margin-bottom:2px; } .sync-stat .v{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; } .sync-stat .d{ font-size:11px; color:var(--muted); } .sync-stat .d.up{ color:var(--teal, #2d8c78); } .btn.is-busy{ opacity:.65; pointer-events:none; } .btn.is-busy .btn-busy-label{ display:inline; } @media(max-width:700px){ .sync-summary-grid{ grid-template-columns:1fr; } } @media(max-width:1200px){ .dash-kpi-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } } @media(max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } .grid-2, .grid-3, .role-grid{ grid-template-columns:1fr; } } @media(max-width:980px){ .dash-kpi-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } /* ===== Mobile responsive ===== */ .hamburger{ display:none; flex-direction:column; gap:4px; width:22px; cursor:pointer; margin-right:4px; } .hamburger span{ display:block; height:2px; background:var(--text); border-radius:2px; } .sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9; } .sidebar-overlay.show{ display:block; } @media(max-width:900px){ .hamburger{ display:flex; } .sidebar{ position:fixed; left:0; top:0; z-index:10; transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 30px rgba(0,0,0,0.4); } .sidebar.mobile-open{ transform:translateX(0); } .region-tabs{ display:none; } .search-box{ display:none; } .topbar{ padding:14px 16px; gap:10px; } .topbar-right{ gap:8px; } .admin-chip span{ display:none; } .content{ padding:16px 14px 60px; } .live-board{ grid-template-columns:repeat(2,1fr); position:static; } .lb-col{ padding:10px 12px; } .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; } .dash-kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px; } .page-head{ flex-direction:column; align-items:flex-start; } table{ font-size:12px; } .panel{ padding:14px; overflow-x:auto; } .panel table{ min-width:520px; } .lang-current span:not(.caret){ } } @media(max-width:520px){ .kpi-grid{ grid-template-columns:1fr !important; } .dash-kpi-grid{ grid-template-columns:1fr !important; } .live-board{ grid-template-columns:1fr; } .lb-col{ border-right:none; border-bottom:1px solid var(--line); } .role-grid{ grid-template-columns:1fr; } .theme-toggle button{ padding:6px 8px; font-size:11px; } .search-box{ display:none; } } /* Game thumbnails (titles management) — square by default */ .game-thumb{ display:inline-block;width:48px;height:48px;aspect-ratio:1/1;border-radius:8px;object-fit:cover; background:#122033;border:1px solid var(--line);vertical-align:middle; } .game-thumb--list{width:48px;height:48px} .game-thumb--feat{width:48px;height:48px;flex-shrink:0} .feat-drag-handle{cursor:grab;user-select:none;color:var(--muted);font-size:14px;padding:4px 6px;border-radius:6px;line-height:1;flex-shrink:0} .feat-drag-handle:active{cursor:grabbing} .feat-sortable-ghost{opacity:.45;background:color-mix(in srgb, var(--amber) 12%, transparent)} .feat-sortable-chosen{background:color-mix(in srgb, var(--teal) 10%, transparent)} .feat-sortable-drag{opacity:.95} .game-thumb--edit{width:96px;height:96px;flex-shrink:0} .game-thumb--empty{ display:inline-flex;align-items:center;justify-content:center; color:var(--muted);font-size:11px;font-weight:600;background:rgba(18,32,51,.8); } /* ===== 회원 상세 테이블 · 색상 팔레트 ===== */ .md-kv{ width:100%; border-collapse:collapse; font-size:13px; } .md-kv th, .md-kv td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } .md-kv th{ width:28%; max-width:160px; font-size:12px; font-weight:600; color:var(--muted); background:color-mix(in srgb, var(--bg) 70%, transparent); white-space:nowrap; } .md-kv td{ color:var(--text); } .md-kv tr:last-child th, .md-kv tr:last-child td{ border-bottom:0; } .md-kv-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media(max-width:900px){ .md-kv-2col{ grid-template-columns:1fr; } } /* 입·출금 신청 상세 요약 — 2~3열 압축 (빈 칸도 자리 유지) */ .tx-detail-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 14px; margin:0 0 10px; } .tx-detail-grid.cols-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .tx-detail-field{ min-width:0; padding:6px 0 8px; border-bottom:1px solid var(--line); } .tx-detail-field .k{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:3px; letter-spacing:.01em; } .tx-detail-field .v{ font-size:13px; color:var(--text); word-break:break-word; line-height:1.35; } .tx-detail-field.is-empty .v{ color:var(--muted); opacity:.55; font-weight:400; } @media(max-width:720px){ .tx-detail-grid, .tx-detail-grid.cols-2{ grid-template-columns:1fr; } } .md-swatch-row{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; } .md-swatch{ width:26px; height:26px; border-radius:7px; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); } .md-swatch:hover{ transform:scale(1.06); } .md-swatch.is-on{ border-color:#fff; box-shadow:0 0 0 2px var(--ink); } .md-swatch.is-reset{ background:var(--bg) !important; border:1px dashed var(--line); color:var(--muted); font-size:10px; font-weight:700; width:auto; padding:0 8px; } .md-color-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .md-color-row input[type="color"]{ width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer; } .md-color-row input[type="text"]{ width:110px; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12.5px; } .md-preview-box{ margin-top:12px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); font-size:14px; } /* ── 조회용 파트너 트리 필터 (_partnerTreeFilter) ────────────── */ .pt-tree{ border:1px solid var(--line); border-radius:10px; padding:6px; max-height:560px; overflow-y:auto; } .pt-tree-node{ display:flex; align-items:flex-start; gap:6px; cursor:pointer; padding:6px; border-radius:8px; margin-bottom:2px; } .pt-tree-node:hover{ background:rgba(255,255,255,.04); } .pt-tree-node.on{ background:#05080c; box-shadow:inset 3px 0 0 var(--teal); } .pt-tree-node.on .pt-tree-name{ font-weight:700; color:var(--teal); } .pt-tree-tog{ flex:0 0 16px; width:16px; height:16px; line-height:14px; text-align:center; border:1px solid var(--line); border-radius:4px; font-size:11px; color:var(--muted); margin-top:2px; -webkit-user-select:none; user-select:none; } .pt-tree-tog.none{ border-color:transparent; } .pt-tree-body{ flex:1; min-width:0; } .pt-tree-name{ display:block; font-size:13px; } .pt-tree-meta{ display:block; font-size:11.5px; color:var(--muted); } .pt-tree-empty{ padding:12px; font-size:12px; color:var(--muted); } .pt-tree-layout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:12px; align-items:start; } @media (max-width:900px){ .pt-tree-layout{ grid-template-columns:1fr; } } /* 다열 리포트 표 세로 구분선 (트리 레이아웃 내부) */ #aff-report-partners-scroll table th, #aff-report-partners-scroll table td{ border-right:1px solid var(--line); vertical-align:top; } #aff-report-partners-scroll table th:last-child, #aff-report-partners-scroll table td:last-child{ border-right:none; } #aff-report-partners-scroll table thead th{ background:var(--panel-2); } /* ═══════════════════════════════════════════════════════════════════════════ * 보안 정책 (security.authpolicy · SUPER 전용) * * 승인 시안 console/public/pages/preview_security_policy.html 의 인라인