/* Spokaz 회원 위젯 (쪽지·포인트·스크랩) + 모달 셸 */

.spk-modal-open{overflow:hidden}
.spk-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px 16px}
.spk-modal[hidden]{display:none}
.spk-modal-backdrop{position:absolute;inset:0;background:rgba(4,9,26,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.spk-modal-dialog{position:relative;width:100%;max-width:760px;max-height:calc(100vh - 56px);background:var(--spk-card);border:1px solid var(--spk-line);border-radius:var(--spk-radius);box-shadow:var(--spk-shadow);display:flex;flex-direction:column;overflow:hidden;animation:spk-modal-in .18s ease-out}
@keyframes spk-modal-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.spk-modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:transparent;color:rgba(255,255,255,.75);font-size:26px;line-height:1;cursor:pointer;border-radius:8px;z-index:3;padding:0}
.spk-modal-close:hover{background:rgba(255,255,255,.15);color:#fff}
.spk-modal-body{overflow:auto;padding:0;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:var(--spk-surface) transparent}
.spk-modal-body::-webkit-scrollbar{width:8px}
.spk-modal-body::-webkit-scrollbar-thumb{background:var(--spk-surface);border-radius:4px}
.spk-modal-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--spk-card);z-index:2}
.spk-modal-loader[hidden]{display:none}

/* XP·포인트·테더 클릭 영역 */
a.spk-mm-xp,a.spk-mm-point,a.spk-mm-tether{text-decoration:none;cursor:pointer;border-radius:4px;padding:1px 3px;margin:-1px -3px;transition:background .15s}
a.spk-mm-xp:hover,a.spk-mm-point:hover,a.spk-mm-tether:hover{background:rgba(255,255,255,.08)}

/* XP 상세 카드 */
.spk-xp-card{padding:18px 22px;background:linear-gradient(135deg,var(--spk-surface-2),var(--spk-card-2));border-bottom:1px solid var(--spk-line)}
.spk-xp-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spk-xp-card-rank{display:flex;align-items:center;gap:10px;min-width:0}
.spk-xp-card-rank-txt{display:flex;flex-direction:column;min-width:0}
.spk-xp-card-rank-name{font-size:15px;font-weight:900;white-space:nowrap}
.spk-xp-card-rank-tier{font-size:10.5px;color:var(--spk-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.spk-xp-card-balance{text-align:right;flex:0 0 auto}
.spk-xp-card-balance-value{font-size:26px;font-weight:900;color:#994800;font-variant-numeric:tabular-nums;line-height:1}
.spk-xp-card-balance small{font-size:12px;color:var(--spk-muted);font-weight:800;margin-left:4px}
.spk-xp-card-progress{margin-top:14px}
.spk-xp-card-progress-bar{width:100%;height:8px;background:var(--spk-card);border-radius:6px;overflow:hidden;border:1px solid var(--spk-line)}
.spk-xp-card-progress-fill{height:100%;border-radius:5px;transition:width .5s ease-out;box-shadow:0 0 6px currentColor}
.spk-xp-card-progress-txt{margin-top:6px;font-size:11.5px;color:var(--spk-text);font-weight:700}
.spk-xp-card-progress-txt b{color:#994800;font-variant-numeric:tabular-nums}

/* XP 액션 태그 */
.spk-xp-tag{display:inline-block;padding:3px 8px;font-size:10.5px;font-weight:800;border-radius:4px;line-height:1;white-space:nowrap;letter-spacing:.2px}
.spk-xp-tag-primary{background:rgba(58,139,255,.18);color:var(--spk-primary)}
.spk-xp-tag-accent{background:rgba(255,204,51,.18);color:var(--spk-accent)}
.spk-xp-tag-green{background:rgba(10,191,83,.18);color:var(--spk-green)}
.spk-xp-tag-red{background:rgba(255,71,87,.18);color:var(--spk-red)}
.spk-xp-tag-muted{background:var(--spk-surface);color:var(--spk-muted)}

/* 쪽지 알림 배지 */
.spk-member-links a{position:relative}
.spk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;margin-left:4px;background:var(--spk-red);color:#fff;font-size:10px;font-weight:800;line-height:1;border-radius:10px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--spk-card);animation:spk-badge-pop .3s ease-out}
.spk-badge[hidden]{display:none}
@keyframes spk-badge-pop{from{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}
.spk-spinner{width:28px;height:28px;border:3px solid var(--spk-surface);border-top-color:var(--spk-primary);border-radius:50%;animation:spk-spin .8s linear infinite}
@keyframes spk-spin{to{transform:rotate(360deg)}}

/* shared member-widget (쪽지·포인트·스크랩) */
.spk-mw{color:var(--spk-text);font-size:13px}
.spk-mw-head{display:flex;align-items:center;gap:12px;padding:18px 48px 14px 22px;border-bottom:1px solid var(--spk-line);background:linear-gradient(135deg,var(--spk-primary) 0%,var(--spk-primary-deep) 100%)}
.spk-mw-title{flex:1;margin:0;font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.spk-mw-title i{color:var(--spk-accent)}
.spk-mw-sub{color:rgba(255,255,255,.78);font-size:12px;font-weight:700}
.spk-mw-sub b{color:var(--spk-accent);font-size:13px;margin:0 2px}
.spk-mw-tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--spk-line);background:var(--spk-card-2)}
.spk-mw-tab{padding:9px 16px;font-size:12px;font-weight:700;color:var(--spk-muted);border-radius:8px 8px 0 0;text-decoration:none;transition:.15s;white-space:nowrap}
.spk-mw-tab:hover{color:var(--spk-text);background:var(--spk-surface)}
.spk-mw-tab.is-active{color:#fff;background:var(--spk-surface-2);box-shadow:inset 0 -2px 0 var(--spk-accent)}
.spk-mw-tab-write{margin-left:auto;color:var(--spk-accent)}
.spk-mw-tab-write i{margin-right:4px}
.spk-mw-content{padding:0}
.spk-mw-pager{padding:12px 16px;display:flex;justify-content:center;border-top:1px solid var(--spk-line);background:var(--spk-card-2)}
.spk-mw-pager .pg_wrap,.spk-mw-pager .pg{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:center}
.spk-mw-pager a,.spk-mw-pager strong,.spk-mw-pager .pg_page,.spk-mw-pager .pg_current{display:inline-block;min-width:28px;padding:5px 8px;border:1px solid var(--spk-line);border-radius:6px;font-size:11px;color:var(--spk-muted);text-decoration:none;background:var(--spk-card);text-align:center;line-height:1.3}
.spk-mw-pager a:hover{color:#fff;border-color:var(--spk-primary)}
.spk-mw-pager strong,.spk-mw-pager .pg_current{color:#fff;background:var(--spk-primary);border-color:var(--spk-primary)}
.spk-mw-desc{padding:10px 16px;font-size:11px;color:var(--spk-muted);border-top:1px dashed var(--spk-line);background:var(--spk-card-2)}
.spk-mw-desc i{color:var(--spk-accent);margin-right:4px}
.spk-mw-empty{padding:56px 16px;text-align:center;color:var(--spk-muted);font-size:12.5px}
.spk-mw-empty i{display:block;font-size:48px;margin-bottom:12px;color:var(--spk-surface-2)}

/* memo list */
.spk-memo-list{list-style:none;margin:0;padding:0}
.spk-memo-list li{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--spk-line);transition:background .15s}
.spk-memo-list li:hover{background:var(--spk-surface)}
.spk-memo-list li.is-unread{background:linear-gradient(90deg,rgba(58,139,255,.12),transparent 60%);border-left:3px solid var(--spk-primary);padding-left:15px}
.spk-memo-ava{flex:0 0 42px;position:relative}
.spk-memo-ava img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--spk-line)}
.spk-memo-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:var(--spk-red);border-radius:50%;border:2px solid var(--spk-card);animation:spk-pulse 1.5s infinite}
@keyframes spk-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}
.spk-memo-body{flex:1;min-width:0}
.spk-memo-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.spk-memo-name{font-weight:800;color:var(--spk-text);font-size:12.5px}
.spk-memo-name a{color:inherit;text-decoration:none}
.spk-memo-time{color:var(--spk-muted);font-size:10.5px}
.spk-memo-time i{margin-right:3px}
.spk-memo-preview{display:block;color:var(--spk-muted);font-size:12px;text-decoration:none;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
li.is-unread .spk-memo-preview{color:var(--spk-text);font-weight:600}
.spk-memo-preview:hover{color:var(--spk-primary)}
.spk-memo-actions{flex:0 0 auto;display:flex;align-items:center}
.spk-mw-del{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--spk-muted);background:transparent;border:1px solid transparent;border-radius:6px;text-decoration:none;transition:.15s}
.spk-mw-del:hover{color:#fff;background:var(--spk-red);border-color:var(--spk-red)}

/* memo view */
.spk-memo-view{padding:0}
.spk-memo-view-meta{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--spk-line);background:var(--spk-card-2)}
.spk-memo-view-meta .spk-memo-ava{flex:0 0 40px}
.spk-memo-view-meta .spk-memo-ava img{width:40px;height:40px}
.spk-memo-view-info{flex:1;min-width:0}
.spk-memo-view-info .spk-memo-name{display:block;font-size:13px;margin-bottom:2px}
.spk-memo-view-info .spk-memo-time{font-size:11px}
.spk-memo-view-btns{display:flex;gap:6px}
.spk-mw-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-size:11.5px;font-weight:700;border-radius:7px;border:1px solid var(--spk-line);background:var(--spk-surface);color:var(--spk-text);text-decoration:none;cursor:pointer;transition:.15s;font-family:inherit}
.spk-mw-btn:hover{border-color:var(--spk-primary);color:#fff;background:var(--spk-surface-2)}
.spk-mw-btn.is-danger:hover{background:var(--spk-red);border-color:var(--spk-red);color:#fff}
.spk-mw-btn.is-primary{background:linear-gradient(135deg,var(--spk-primary),var(--spk-primary-deep));border-color:var(--spk-primary);color:#fff}
.spk-mw-btn.is-primary:hover{filter:brightness(1.12)}
.spk-memo-view-body{padding:22px 22px 18px;min-height:120px;line-height:1.75;font-size:13px;color:var(--spk-text);word-break:break-word;white-space:pre-wrap}
.spk-memo-view-nav{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--spk-line);background:var(--spk-card-2)}
.spk-memo-view-nav a{flex:1;padding:10px;font-size:11.5px;color:var(--spk-text);background:var(--spk-surface);border-radius:8px;text-decoration:none;text-align:center;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk-memo-view-nav a:hover{background:var(--spk-surface-2);color:var(--spk-primary)}
.spk-memo-view-nav .is-placeholder{visibility:hidden}
.spk-memo-view-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--spk-line);background:var(--spk-card-2)}

/* memo form */
.spk-memo-form{padding:20px 22px}
.spk-mw-field{margin-bottom:16px}
.spk-mw-label{display:block;font-size:11px;font-weight:700;color:var(--spk-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.spk-mw-input,.spk-mw-textarea{width:100%;padding:11px 13px;background:var(--spk-surface);border:1px solid var(--spk-line);border-radius:8px;color:var(--spk-text);font-size:13px;font-family:inherit;box-sizing:border-box;transition:.15s}
.spk-mw-input:focus,.spk-mw-textarea:focus{outline:none;border-color:var(--spk-primary);background:var(--spk-surface-2)}
.spk-mw-textarea{min-height:200px;resize:vertical;line-height:1.65}
.spk-mw-hint{margin-top:5px;font-size:11px;color:var(--spk-muted);line-height:1.5}
.spk-mw-hint em{color:var(--spk-accent);font-style:normal;font-weight:700}
.spk-mw-captcha{padding:10px;background:var(--spk-card-2);border-radius:8px;border:1px solid var(--spk-line)}
.spk-mw-captcha img,.spk-mw-captcha input{vertical-align:middle}

/* point */
.spk-point-balance{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--spk-surface-2),var(--spk-card-2));border-bottom:1px solid var(--spk-line)}
.spk-point-balance-label{font-size:11px;font-weight:700;color:var(--spk-muted);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px}
.spk-point-balance-label i{font-size:14px;color:var(--spk-accent)}
.spk-point-balance-value{font-size:26px;font-weight:900;color:var(--spk-accent);font-variant-numeric:tabular-nums;line-height:1}
.spk-point-balance-value small{font-size:13px;color:var(--spk-muted);margin-left:4px;font-weight:700}
.spk-point-list{list-style:none;margin:0;padding:0}
.spk-point-list li{padding:12px 22px;border-bottom:1px solid var(--spk-line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.spk-point-list li:hover{background:var(--spk-surface)}
.spk-point-info{flex:1;min-width:0}
.spk-point-label{display:block;font-weight:700;font-size:12.5px;color:var(--spk-text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk-point-dates{font-size:10.5px;color:var(--spk-muted);display:flex;gap:10px;flex-wrap:wrap}
.spk-point-dates i{margin-right:3px}
.spk-point-dates .is-expire{color:var(--spk-red);font-weight:700}
.spk-point-value{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.spk-point-value.is-plus{color:var(--spk-green)}
.spk-point-value.is-minus{color:var(--spk-red)}
.spk-point-sum{display:flex;justify-content:space-around;padding:12px 18px;background:var(--spk-card-2);border-top:1px solid var(--spk-line);font-size:12px}
.spk-point-sum-item{color:var(--spk-muted);font-weight:700}
.spk-point-sum-item b{margin-left:6px;font-variant-numeric:tabular-nums}
.spk-point-sum-item.is-plus b{color:var(--spk-green)}
.spk-point-sum-item.is-minus b{color:var(--spk-red)}

/* scrap 추가 폼 */
.spk-scrap-form{padding:20px 22px}
.spk-scrap-preview{margin-bottom:18px;padding:14px 16px;background:var(--spk-surface);border-left:3px solid var(--spk-primary);border-radius:0 10px 10px 0}
.spk-scrap-preview-label{font-size:11px;font-weight:700;color:var(--spk-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.spk-scrap-preview-label i{color:var(--spk-primary);margin-right:4px}
.spk-scrap-preview-title{font-size:14px;font-weight:700;color:var(--spk-text);line-height:1.5;word-break:break-word}

/* scrap list */
.spk-scrap-list{list-style:none;margin:0;padding:0}
.spk-scrap-list li{padding:12px 18px;border-bottom:1px solid var(--spk-line);display:flex;align-items:center;gap:10px;transition:background .15s}
.spk-scrap-list li:hover{background:var(--spk-surface)}
.spk-scrap-cat{flex:0 0 auto;padding:4px 10px;background:var(--spk-surface-2);border-radius:4px;font-size:10.5px;font-weight:700;color:var(--spk-accent);text-decoration:none;white-space:nowrap}
.spk-scrap-cat:hover{background:var(--spk-primary);color:#fff}
.spk-scrap-title{flex:1;min-width:0;font-size:12.5px;color:var(--spk-text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.spk-scrap-title:hover{color:var(--spk-primary)}
.spk-scrap-time{flex:0 0 auto;font-size:10.5px;color:var(--spk-muted)}
.spk-scrap-time i{margin-right:3px}

@media (max-width: 640px){
  .spk-modal{padding:12px}
  .spk-modal-dialog{max-height:calc(100vh - 24px)}
  .spk-mw-head{padding:14px 42px 12px 16px}
  .spk-mw-tab{padding:8px 12px;font-size:11.5px}
  .spk-memo-list li,.spk-point-list li,.spk-scrap-list li{padding-left:14px;padding-right:14px}
  .spk-point-balance{padding:16px 18px}
  .spk-point-balance-value{font-size:22px}
  .spk-memo-form,.spk-memo-view-body{padding-left:16px;padding-right:16px}
}