:root { --navy:#111c2f; --green:#168a57; --red:#dc3f3f; --bg:#f3f5f7; --line:#e3e8ed; --text:#253044; --muted:#748093; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",Arial,sans-serif; }
button,input { font:inherit; }
.point-header { position:relative; min-height:350px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--navy); color:#fff; text-align:center; }
.header-inner { padding:28px 20px 24px; }
.header-inner h1 { margin:17px 0 7px; font-size:28px; }
.header-inner p { margin:0; color:#c9d1dd; font-size:13px; }
.point-page { width:min(100%,920px); margin:auto; padding:22px 20px 55px; }
.balance-card { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:30px; border-radius:20px; background:linear-gradient(135deg,#143d31,#168a57); color:#fff; box-shadow:0 12px 28px #16392c2e; }
.balance-card small { color:#bfe7d2; font-size:12px; font-weight:800; }
.balance-card h2 { margin:8px 0 6px; font-size:28px; }
.balance-card h2 strong { color:#ffe27b; font-size:34px; }
.balance-card h2 em { color:#ffe27b; font-style:normal; }
.balance-card p { margin:0; color:#cae6d8; font-size:11px; }
.balance-actions { min-width:150px; display:flex; flex-direction:column; gap:8px; }
.balance-actions button { min-width:150px; min-height:52px; padding:0 18px; border:1px solid #ffffff77; border-radius:12px; background:#fff; color:var(--green); font-weight:900; cursor:pointer; box-shadow:0 7px 16px #0a35265c; }
.balance-actions #logoutPointAdmin { min-height:40px; background:#ffffff17; color:#fff; font-size:12px; box-shadow:none; }
.balance-actions button[hidden] { display:none!important; }
.log-panel { margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 5px 18px #2734490a; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.panel-head>div { display:flex; align-items:center; gap:12px; }
.panel-head>div>span { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#eaf7f0; font-size:22px; }
.panel-head h2 { margin:0; font-size:20px; }
.panel-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.panel-head>button { padding:8px 11px; border:1px solid #b9d7c7; border-radius:8px; background:#fff; color:var(--green); font-size:11px; font-weight:800; cursor:pointer; }
.point-log { display:grid; grid-template-columns:1fr auto; gap:7px 15px; padding:19px 24px; border-bottom:1px solid #edf0f2; }
.point-log:last-child { border-bottom:0; }
.point-log .memo { overflow-wrap:anywhere; color:#303a4b; font-size:15px; font-weight:850; }
.point-log .amount { grid-row:1/3; grid-column:2; align-self:center; font-size:18px; font-weight:950; white-space:nowrap; }
.point-log .amount.plus { color:#168a57; }
.point-log .amount.minus { color:var(--red); }
.point-log time { color:#929ba7; font-size:11px; }
.loading,.empty { padding:58px 20px; color:#8d97a4; text-align:center; line-height:1.7; }
.pagination { display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:17px 15px; border-top:1px solid var(--line); background:#fafbfb; }
.pagination.show { display:flex; }
.pagination button { min-width:38px; height:38px; padding:0 10px; border:1px solid #d6dee4; border-radius:8px; background:#fff; color:#5f6a79; font-size:12px; font-weight:850; cursor:pointer; }
.pagination button:hover { border-color:#8bc9ab; color:var(--green); }
.pagination button.active { border-color:var(--green); background:var(--green); color:#fff; }
.pagination button:disabled { opacity:.38; cursor:default; }
.modal { position:fixed; z-index:100; inset:0; display:none; align-items:center; justify-content:center; padding:15px; background:#07101db8; }
.modal.open { display:flex; }
.modal-box { width:100%; overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 22px 60px #0005; }
.small-box { max-width:450px; }
.modal-head { display:flex; justify-content:space-between; padding:21px 22px 17px; border-bottom:1px solid var(--line); }
.modal-head h3 { margin:0; }
.modal-head p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.modal-head>button { border:0; background:none; color:#77818e; font-size:28px; cursor:pointer; }
.modal-body { padding:21px 22px 24px; }
.modal-body label { display:block; margin:15px 0 7px; font-size:12px; font-weight:850; }
.modal-body label:first-of-type { margin-top:0; }
.modal-body input { width:100%; height:54px; padding:0 14px; border:2px solid #d6dee4; border-radius:10px; outline:none; color:var(--text); font-size:16px; font-weight:700; }
.modal-body input:focus { border-color:var(--green); box-shadow:0 0 0 3px #168a5717; }
.amount-input { position:relative; }
.amount-input input { padding-right:46px; }
.amount-input span { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--green); font-weight:900; }
.type-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:19px; }
.type-buttons button { min-height:50px; border:2px solid #dce3e8; border-radius:10px; background:#fff; color:#6b7685; font-weight:850; cursor:pointer; }
.type-buttons button.add.active { border-color:var(--green); background:#eaf7f0; color:var(--green); }
.type-buttons button.subtract.active { border-color:#e67777; background:#fff0f0; color:var(--red); }
.primary-button { width:100%; min-height:52px; margin-top:12px; border:0; border-radius:10px; background:var(--green); color:#fff; font-weight:900; cursor:pointer; }
.form-error { min-height:18px; margin:8px 0 0; color:var(--red); font-size:12px; line-height:1.5; }
.alert-box { max-width:360px; padding:28px; text-align:center; }
.alert-icon { width:54px; height:54px; margin:auto; display:grid; place-items:center; border-radius:50%; background:#eaf7f0; color:var(--green); font-size:25px; font-weight:950; }
.alert-box h3 { margin:13px 0 7px; }
.alert-box p { color:#667184; font-size:13px; line-height:1.7; white-space:pre-line; }
@media(max-width:700px) {
    .point-header { min-height:315px; }
    .header-inner h1 { font-size:23px; }
    .point-page { padding:14px 12px 40px; }
    .balance-card { align-items:stretch; flex-direction:column; padding:23px 20px; }
    .balance-card h2 { font-size:20px; }
    .balance-card h2 strong { font-size:30px; }
    .balance-actions,.balance-actions button { width:100%; }
    .panel-head { padding:18px 16px; }
    .point-log { padding:17px 16px; }
    .point-log .amount { font-size:16px; }
    .pagination { gap:5px; padding:14px 8px; }
    .pagination button { min-width:36px; height:38px; padding:0 8px; }
    .modal { padding:10px; }
}