@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{--bg:#000;--surface:#0e0f11;--surface-2:#141618;--border:#212326;--border-strong:#303337;--emerald:#22de97;--emerald-on:#03211a;--text:#fff;--muted:#a6aba9;--danger:#f0716c;--warning:#d9ad62;--sidebar:248px;--sans:'Manrope',sans-serif;--display:'Syne',sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{color:inherit}a{text-decoration:none}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:30;display:flex;flex-direction:column;background:#080909;border-right:1px solid var(--border);padding:26px 18px 18px}.brand{padding:0 10px 27px;border-bottom:1px solid var(--border)}.brand-name{font:800 italic 20px/1 var(--display);letter-spacing:-.04em}.brand-admin{display:block;margin-top:8px;color:var(--emerald);font:600 10px/1 var(--mono);letter-spacing:.2em}.nav{display:grid;gap:3px;margin-top:24px}.nav-link{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;color:#b7bcba;border-radius:6px;font-size:13px;font-weight:600;transition:background .15s,color .15s}.nav-link::before{content:'';width:2px;height:14px;background:transparent;border-radius:2px}.nav-link:hover{color:#fff;background:#111315}.nav-link.active{color:var(--emerald);background:rgba(34,222,151,.055)}.nav-link.active::before{background:var(--emerald)}.sidebar-footer{margin-top:auto;padding-top:18px;border-top:1px solid var(--border)}.account{display:flex;align-items:center;gap:10px;padding:0 10px 14px}.avatar{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2d3431;border-radius:50%;background:#101412;color:var(--emerald);font:600 10px var(--mono)}.account-copy{min-width:0}.account-name{display:block;font-size:12px;font-weight:700}.account-email{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout{width:100%;border:0;background:transparent;color:var(--muted);padding:9px 12px;text-align:left;border-radius:6px;font-size:12px}.logout:hover{background:#121416;color:#fff}
.main{grid-column:2;min-width:0}.topbar{min-height:81px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 32px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.topbar-left{display:flex;align-items:center;gap:13px;min-width:0}.page-heading h1{margin:0;font:700 20px/1.2 var(--display);letter-spacing:-.025em}.page-heading p{margin:5px 0 0;color:var(--muted);font-size:11px}.topbar-right{display:flex;align-items:center;gap:12px}.admin-indicator{color:var(--muted);font:500 10px var(--mono);letter-spacing:.06em}.admin-indicator::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald);margin-right:7px;box-shadow:0 0 10px rgba(34,222,151,.25)}.menu-toggle{display:none;width:35px;height:35px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:18px}.content{padding:28px 32px 44px;max-width:1680px;margin:0 auto}.section-label{margin:0 0 13px;color:var(--muted);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}.section{margin-top:26px}.section:first-child{margin-top:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 13px;border:1px solid var(--border-strong);border-radius:6px;background:#151719;color:#fff;font-size:11px;font-weight:700}.button:hover{border-color:#48504c;background:#1a1d1f}.button.primary{border-color:var(--emerald);background:var(--emerald);color:var(--emerald-on)}.button.ghost{background:transparent}.button.danger{color:#f2a09c}.button:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);background:var(--surface)}.metric{min-width:0;padding:20px 22px;border-right:1px solid var(--border)}.metric:last-child{border-right:0}.metric-label{color:var(--muted);font-size:11px}.metric-value{display:block;margin-top:8px;font:700 27px/1 var(--display);letter-spacing:-.03em}.metric-meta{display:block;margin-top:8px;color:#828886;font:500 9px var(--mono);letter-spacing:.04em}.metric-meta.positive{color:var(--emerald)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:20px}.panel{background:var(--surface);border:1px solid var(--border);min-width:0}.panel-head{min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 17px;border-bottom:1px solid var(--border)}.panel-title{margin:0;font-size:12px;font-weight:700}.panel-sub{margin:3px 0 0;color:var(--muted);font-size:10px}.panel-link{color:var(--emerald);font-size:10px;font-weight:700}.table-wrap{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;table-layout:auto}.data-table th,.data-table td{padding:12px 15px;text-align:left;border-bottom:1px solid #1b1d1f;white-space:nowrap;vertical-align:middle}.data-table th{color:#8e9491;background:#0a0b0c;font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase}.data-table td{font-size:11px}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#121416}.cell-primary{font-weight:700}.cell-secondary{display:block;margin-top:2px;color:var(--muted);font-size:9px}.cell-mono{font-family:var(--mono);font-size:10px!important}.truncate{max-width:190px;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;gap:5px}.action-link{border:0;background:transparent;padding:3px 4px;color:#b8bdbb;font-size:10px}.action-link:hover{color:var(--emerald)}.action-link.danger:hover{color:var(--danger)}
.badge{display:inline-flex;align-items:center;gap:6px;color:#bcc2bf;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.04em}.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#747b78}.badge.active,.badge.approved,.badge.online,.badge.new{color:#7decbf}.badge.active::before,.badge.approved::before,.badge.online::before,.badge.new::before{background:var(--emerald)}.badge.pending,.badge.contacted,.badge.expiring{color:#dfc48f}.badge.pending::before,.badge.contacted::before,.badge.expiring::before{background:var(--warning)}.badge.suspended,.badge.rejected,.badge.expired,.badge.offline{color:#e39792}.badge.suspended::before,.badge.rejected::before,.badge.expired::before,.badge.offline::before{background:var(--danger)}.badge.draft{color:#a8aeab}
.system-list{padding:5px 17px}.system-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #1b1d1f}.system-row:last-child{border-bottom:0}.system-name{font-size:11px;font-weight:600}.mock-note{margin:12px 17px 16px;padding:10px 11px;border-left:2px solid #3b413e;background:#111315;color:#929895;font-size:9px;line-height:1.6}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.search{position:relative}.search input,.select{height:36px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:#fff;font-size:11px;outline:0}.search input{width:250px;padding:0 12px 0 34px}.search::before{content:'⌕';position:absolute;left:12px;top:7px;color:var(--muted);font-size:16px}.select{padding:0 31px 0 11px}.count{color:var(--muted);font:500 10px var(--mono)}.filter-tabs{display:flex;gap:2px;padding:3px;border:1px solid var(--border);background:var(--surface);border-radius:7px}.filter-tab{border:0;background:transparent;color:var(--muted);border-radius:4px;padding:7px 12px;font-size:10px;font-weight:700}.filter-tab:hover{color:#fff}.filter-tab.active{background:#202421;color:var(--emerald)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.settings-section{border:1px solid var(--border);background:var(--surface)}.settings-body{padding:18px}.form-grid{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:18px}.form-label{color:#b7bcb9;font-size:11px}.input,textarea.input{width:100%;border:1px solid var(--border-strong);border-radius:6px;background:#090a0b;color:#fff;padding:10px 11px;outline:0;font-size:11px}.input[readonly]{color:#a5aaa8}.value{font-size:11px}.value.mono{font-family:var(--mono);font-size:10px}.placeholder{color:var(--muted);font-size:10px}.settings-actions{display:flex;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--border)}
.modal-backdrop{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}.modal-backdrop.open{display:flex}.modal{width:min(540px,100%);border:1px solid var(--border-strong);background:#0b0c0d}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}.modal-head h2{margin:0;font:700 15px var(--display)}.modal-close{border:0;background:transparent;color:var(--muted);font-size:20px}.modal-body{padding:18px}.modal .form-row{grid-template-columns:1fr;gap:6px;margin-bottom:14px}.modal textarea{min-height:140px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--border)}.toast{position:fixed;right:24px;bottom:24px;z-index:80;max-width:340px;padding:12px 15px;border:1px solid #315043;background:#0c1511;color:#b8f4d9;font-size:11px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(280px,.72fr) minmax(460px,1.28fr)}.login-brand{display:flex;flex-direction:column;justify-content:space-between;padding:44px;border-right:1px solid var(--border);background:#080909}.login-brand .brand{padding:0;border:0}.login-mark{color:#68706c;font:500 9px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase}.login-main{display:flex;align-items:center;padding:44px 9vw}.login-form-wrap{width:min(390px,100%)}.login-kicker{color:var(--emerald);font:600 10px var(--mono);letter-spacing:.18em}.login-title{margin:15px 0 8px;font:700 32px/1.15 var(--display);letter-spacing:-.04em}.login-copy{margin:0 0 32px;color:var(--muted);font-size:12px}.login-field{margin-bottom:16px}.login-field label{display:block;margin-bottom:7px;color:#c0c5c2;font-size:10px;font-weight:700}.login-field .input{height:44px}.login-button{width:100%;height:44px;margin-top:7px;border:0;border-radius:6px;background:var(--emerald);color:var(--emerald-on);font-size:12px;font-weight:800}.login-status{min-height:19px;margin-top:12px;color:var(--muted);font-size:10px}.login-status.error{color:var(--danger)}.login-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--border);color:#747a77;font-size:9px;line-height:1.6}
@media(max-width:1100px){.overview{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--border)}.dashboard-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}
@media(max-width:760px){.admin-shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0);box-shadow:20px 0 50px rgba(0,0,0,.65)}.main{grid-column:auto}.topbar{padding:14px 18px}.menu-toggle{display:grid;place-items:center}.admin-indicator{display:none}.content{padding:20px 18px 36px}.toolbar{align-items:flex-start;flex-direction:column}.search input{width:min(100%,310px)}.filter-tabs{max-width:100%;overflow-x:auto}.login-page{display:block}.login-brand{min-height:130px;padding:28px;border-right:0;border-bottom:1px solid var(--border)}.login-brand .login-mark{display:none}.login-main{padding:54px 24px;align-items:flex-start}.form-row{grid-template-columns:1fr;gap:6px}}
@media(max-width:480px){.overview{grid-template-columns:1fr}.metric{border-right:0!important;border-bottom:1px solid var(--border)}.metric:last-child{border-bottom:0}.page-heading p{display:none}.topbar-right .button{padding:0 9px}.content{padding-left:12px;padding-right:12px}}
/* Empty state shown until authenticated backend data is connected. */
.empty-row:hover{background:transparent!important}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;color:var(--muted);text-align:center}.empty-state strong{color:#d4d8d6;font-size:12px}.empty-state span{margin-top:5px;font-size:10px}
/* Flex children may shrink without forcing horizontal overflow on narrow screens. */
.panel-head>div{min-width:0}.panel-link{white-space:nowrap;flex-shrink:0}.system-row .badge{flex-shrink:0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- language switcher ---- */
.lang-switcher{position:relative}
.lang-trigger{width:100%;text-align:left;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;cursor:pointer;transition:border-color .15s ease}
.lang-trigger:hover{border-color:#565c61}
.lang-panel{position:absolute;bottom:calc(100% + 6px);left:0;min-width:150px;background:#0b0c0d;border:1px solid var(--border);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:1px;box-shadow:0 20px 48px rgba(0,0,0,.5);z-index:70}
.lang-panel.open{display:flex}
.lang-option{text-align:left;font-family:var(--sans);font-size:12.5px;font-weight:550;color:#b5b9bc;background:transparent;border:none;border-radius:7px;padding:8px 9px;cursor:pointer;transition:background .15s ease,color .15s ease}
.lang-option:hover{background:#16181a;color:var(--text)}
.lang-option.active{color:var(--emerald)}
.login-form-wrap .lang-switcher{max-width:220px}
.login-form-wrap .lang-panel{bottom:auto;top:calc(100% + 6px)}

/* ---- add-member modal: account type toggle ---- */
.type-toggle{display:flex;gap:8px}
.type-option{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:650;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.type-option:hover{border-color:#565c61}
.type-option.active{border-color:var(--emerald);color:var(--emerald);background:rgba(34,222,151,.08)}
.type-option:disabled,.type-option[hidden]{display:none}

/* ---- sidebar: link back to the public site (kept separate from .logout so it
   doesn't get caught by admin.js's "any .logout element signs you out" handler) ---- */
.view-site-link{display:block;width:100%;border:0;background:transparent;color:var(--muted);padding:9px 12px;text-align:left;border-radius:6px;font-size:12px}
.view-site-link:hover{background:#121416;color:#fff}
.button.ghost.danger-text{color:var(--danger);border-color:rgba(240,113,108,.35)}
.button.ghost.danger-text:hover{background:rgba(240,113,108,.08)}

/* ---- license id 마스킹 + 눈모양 버튼 ---- */
.license-code-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.reveal-btn{border:0;background:transparent;cursor:pointer;font-size:13px;padding:2px 4px;line-height:1;opacity:.7;flex-shrink:0}
.reveal-btn:hover{opacity:1}

/* ---- data-table 정렬 가능한 헤더 ---- */
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{color:var(--text,#fff)}
.data-table .rownum{color:var(--muted,#8a8f94);font-family:var(--mono)}

/* ---- 대기 중인 요청: 연장/업그레이드/처음구매자 탭 ---- */
.request-tabs{display:flex;gap:8px;margin-bottom:14px}
.request-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer}
.request-tab:hover{border-color:#48504c;color:#fff}
.request-tab.active{border-color:var(--emerald);background:rgba(34,222,151,.1);color:#fff}
.request-tab .tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--surface-2);color:#fff;font-size:11px;font-weight:800}
.request-tab.active .tab-count{background:var(--emerald);color:var(--emerald-on)}

/* ---- 요청 패널 액션 버튼(가독성 개선: 얇은 텍스트링크 대신 버튼 칩) ---- */
.row-actions{display:flex;flex-wrap:wrap;gap:6px}
.button.small{min-height:28px;padding:0 11px;font-size:11.5px;border-radius:6px}
.button.warn-ghost{background:transparent;border-color:rgba(217,173,98,.5);color:var(--warning)}
.button.warn-ghost:hover{background:rgba(217,173,98,.1)}
.button.small:disabled{opacity:.55;cursor:default}

/* ---- 결제상태 배지: 기존 .badge보다 크게/뚜렷하게 ---- */
.pay-badge{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--sans,sans-serif);padding:4px 9px;border-radius:6px}
.pay-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pay-badge.paid{color:#7decbf;background:rgba(34,222,151,.12)}
.pay-badge.unpaid{color:#f0c98a;background:rgba(217,173,98,.14)}

/* ---- 상담신청: 이름 클릭 -> 텔레그램 이동 ---- */
.applicant-link{text-decoration:none;cursor:pointer}
.applicant-link:hover{text-decoration:underline;color:var(--emerald)}

/* ---- 상담완료 상태 배지 ---- */
.badge.completed{color:#7decbf}
.badge.completed::before{background:var(--emerald)}