/* 스터디 도장판 — skin.css */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@font-face {
  font-family: 'DungGeunMo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/DungGeunMo.woff') format('woff');
  font-display: swap;
}

/* ══════════════════════════════════
   라이트 모드 — 연보라 & 소프트 라벤더
   ══════════════════════════════════ */
:root{
  --bg:#f2eefa;--surf:#faf8ff;--surf2:#e9e2f6;--bdr:#cdc0e8;--bdr2:#b6a6d8;
  --mint:#8060cc;--mint-lt:#ede6fa;
  --lav:#6848b0;--lav-lt:#e2d8f6;
  --pink:#d878b0;--pink-lt:#fce8f4;--peach:#c08050;
  --txt:#241c3a;--sub:#6a5880;--muted:#9a88b0;--sun:#c03860;--sat:#4a68c8;
  --today-bg:#ece0ff;--today-bdr:#8060cc;--mine-bg:#e6e8ff;--mine-bdr:#6848b0;
  --bar-h:54px;
  --font:'Pretendard Variable','Pretendard','Nanum Gothic',sans-serif;
}

/* ══════════════════════════════════
   다크 모드 — 딥 네이비 & 연핑크
   ══════════════════════════════════ */
.sp-app.sp-dark,body.sp-dark{
  --bg:#0b0c1a;--surf:#13152a;--surf2:#0d0f1e;--bdr:#1c1e38;--bdr2:#262850;
  --mint:#f08aaa;--mint-lt:#220810;
  --lav:#d07cbc;--lav-lt:#1c0618;
  --pink:#f06080;--pink-lt:#240610;--peach:#d09060;
  --txt:#eae0f4;--sub:#9080a8;--muted:#504870;--sun:#f07080;--sat:#8898e8;
  --today-bg:#180c30;--today-bdr:#f08aaa;--mine-bg:#08081e;--mine-bdr:#d07cbc;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body.sp-noscroll{overflow:hidden}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.6;transition:background .3s,color .3s}

/* ══ SPA 앱 ══ */
.sp-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.6;transition:background .3s,color .3s}

/* ══ 앱 바 ══ */
.sp-app-bar{flex-shrink:0;height:var(--bar-h);background:var(--surf);border-bottom:2px solid var(--bdr);display:flex;align-items:center;padding:0 12px;gap:10px;position:relative;z-index:10}
.sp-logo{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sp-logo-text{font-weight:900;letter-spacing:-.03em;font-size:14px;white-space:nowrap}
.sp-tabs{display:flex;align-items:stretch;justify-content:center;flex:1;height:100%;overflow-x:auto;gap:2px}
.sp-tab{display:flex;align-items:center;gap:4px;padding:0 12px;background:transparent;border:none;border-bottom:3px solid transparent;font-family:var(--font);font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.sp-tab:hover{color:var(--txt)}.sp-tab.sp-tab-on{color:var(--mint);border-bottom-color:var(--mint);font-weight:800}
.sp-tab span{font-size:12px}
.sp-bar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sp-dark-btn{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:15px;line-height:1}

/* ══ 바디 / 뷰 ══ */
/* ══ 스크롤바 완전 숨김 ══ */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}

.sp-body{flex:1;position:relative;overflow:hidden}

/* ★ 모든 뷰 공통 */
.sp-view{display:none}

/* div 뷰 (메인 탭) */
div.sp-view{position:absolute;inset:0;overflow:hidden}
div.sp-view.sp-view-on{display:flex;flex-direction:column}

/* iframe 뷰 ★ width/height 명시 필수 */
iframe.sp-view{border:none;background:var(--bg);position:absolute;top:0;left:0;width:100%;height:100%}
iframe.sp-view.sp-view-on{display:block}
.sp-scroll{position:absolute;inset:0;overflow-y:auto;padding:14px 12px 60px;max-width:860px;margin:0 auto;width:100%}

/* ══ 버튼 ══ */
.sp-btn-ok,.sp-btn-sec,.sp-btn-lav,.sp-btn-nav{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:6px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;border-style:solid;border-width:2px;white-space:nowrap;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.sp-btn-ok{background:var(--mint);color:#1a3530;border-color:#5eb8a8;box-shadow:3px 3px 0 #5eb8a8}
.sp-btn-ok:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #5eb8a8}
.sp-btn-ok:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sp-btn-sec{background:var(--surf2);color:var(--sub);border-color:var(--bdr2);box-shadow:2px 2px 0 var(--bdr2)}
.sp-btn-lav{background:var(--lav-lt);color:var(--txt);border-color:var(--lav);box-shadow:2px 2px 0 var(--lav)}
.sp-btn-lav:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--lav)}
.sp-btn-nav{background:var(--surf);color:var(--sub);border-color:var(--bdr);box-shadow:2px 2px 0 var(--bdr);font-size:12px;padding:5px 10px}
.sp-btn-nav:hover{border-color:var(--mint);color:var(--txt)}
.sp-del-btn{display:inline-flex;align-items:center;padding:5px 9px;background:var(--pink-lt);border:2px solid var(--pink);border-radius:6px;color:var(--sun);cursor:pointer;font-size:13px;font-family:var(--font)}
.sp-upload-lbl{display:inline-flex;align-items:center;padding:5px 9px;background:var(--surf2);border:2px solid var(--bdr2);border-radius:6px;color:var(--sub);cursor:pointer;font-size:13px}
.sp-close-btn{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;width:26px;height:26px;font-size:13px;cursor:pointer;color:var(--sub);display:flex;align-items:center;justify-content:center}
.sp-close-btn:hover{background:var(--pink-lt);color:var(--sun)}

/* ══ 알림 ══ */
.sp-remind{display:flex;align-items:center;gap:8px;background:var(--peach);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:13px;font-weight:600;color:#fff}
.sp-remind button{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.8}

/* ══ 달력 ══ */
.sp-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:6px}
.sp-cal-ttl{font-size:20px;font-weight:900;letter-spacing:-.04em;display:flex;align-items:baseline;gap:4px}
.sp-cy{font-size:15px;color:var(--sub)}.sp-dot{color:var(--mint)}.sp-cm{color:var(--txt)}
.sp-cal-wrap{background:var(--surf);border:2px solid var(--bdr2);border-radius:10px;box-shadow:3px 3px 0 var(--bdr);overflow:hidden;margin-bottom:12px}
.sp-dow-row{display:grid;grid-template-columns:repeat(7,1fr);background:var(--mint-lt);border-bottom:2px solid var(--bdr)}
.sp-dow{text-align:center;padding:6px 2px;font-size:10px;font-weight:800;color:var(--sub)}
.sp-dow.sp-sun{color:var(--sun)}.sp-dow.sp-sat{color:var(--sat)}
.sp-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.sp-cell{min-height:70px;border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:4px;display:flex;flex-direction:column;gap:2px;background:var(--surf);transition:background .12s;-webkit-tap-highlight-color:transparent;position:relative}
.sp-cell:nth-child(7n){border-right:none}
.sp-cell.sp-empty{background:var(--surf2);opacity:.4}
.sp-cell.sp-click{cursor:pointer}.sp-cell.sp-click:hover{background:var(--mint-lt)}.sp-cell.sp-click:active{opacity:.8}
.sp-cell.sp-today{background:var(--today-bg);border:2px solid var(--today-bdr)}
.sp-cell.sp-mine{background:var(--mine-bg);border-color:var(--mine-bdr)}
.sp-cell.sp-mine.sp-today{background:var(--today-bg);border-color:var(--today-bdr)}
.sp-cell.sp-saving{opacity:.6;pointer-events:none}
.sp-cell.sp-sun-cell .sp-dn{color:var(--sun)}.sp-cell.sp-sat-cell .sp-dn{color:var(--sat)}
.sp-ch{display:flex;align-items:center;gap:2px;min-height:14px}
.sp-dn{font-size:10px;font-weight:800;line-height:1}
.sp-tb{font-size:7px;font-weight:900;background:var(--today-bdr);color:#3d2800;padding:1px 3px;border-radius:2px}
.sp-eb{margin-left:auto;background:none;border:none;font-size:10px;cursor:pointer;opacity:.4;padding:0 1px}.sp-eb:hover{opacity:1}
.sp-stamps{flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px}
.sp-stamp-img,.sp-si{max-width:56px;max-height:56px;object-fit:contain;image-rendering:pixelated;border-radius:2px;border:1px solid var(--bdr2);background:var(--surf2);padding:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sp-se{font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
.sp-nb{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;background:var(--pink-lt);border:1px solid var(--pink);color:var(--txt)}
@keyframes spPop{0%{transform:scale(0) rotate(-8deg);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.sp-pop .sp-si,.sp-pop .sp-se,.sp-pop .sp-stamp-img,.sp-pop .sp-nb{animation:spPop .4s cubic-bezier(.175,.885,.32,1.275) forwards}
.sp-memo{font-size:8px;color:var(--sub);background:var(--surf2);padding:2px 4px;border-radius:2px;border-left:2px solid var(--peach);word-break:break-all;margin-top:auto}

/* ══ 미니 대시 ══ */
.sp-mini-dash{background:var(--surf);border:2px solid var(--lav);border-radius:10px;padding:12px 14px;margin-bottom:10px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sp-md-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sp-md-nick{font-size:14px;font-weight:900}
.sp-md-goal{font-size:11px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-md-right{display:flex;align-items:baseline;gap:4px}
.sp-md-num{font-size:28px;font-weight:900;color:var(--mint);line-height:1}
.sp-md-sep,.sp-md-goal-n,.sp-md-label{font-size:12px;color:var(--sub)}
.sp-badge-done{background:var(--mint-lt);border:1px solid var(--mint);font-size:10px;font-weight:800;padding:2px 7px;border-radius:16px;white-space:nowrap}
.sp-prog-full{width:100%;flex-basis:100%;margin-top:4px}
.sp-prog-track{height:10px;background:var(--bdr);border-radius:5px;overflow:hidden;border:2px solid var(--bdr2)}
.sp-prog-bar{height:100%;background:linear-gradient(90deg,var(--mint),var(--lav));border-radius:5px;width:0;transition:width .8s cubic-bezier(.25,.8,.25,1)}
.sp-login-hint{text-align:center;padding:12px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;font-size:13px;color:var(--sub);margin-bottom:10px}
.sp-m2-id-label{font-size:13px;font-weight:700;color:var(--sub)}
.sp-m2-id-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--mint-lt);border:2px solid var(--mint);border-radius:16px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;color:var(--txt)}

/* ══ 범례 ══ */
.sp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:8px 12px}
.sp-leg-item{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;background:var(--surf2);border:1px solid var(--bdr);padding:2px 8px;border-radius:14px}
.sp-leg-img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated;border-radius:2px}
.sp-ldot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ══ 설정 페이지 (settings.php) ══ */
.sp-pf-row{margin-bottom:10px}.sp-pf-lbl{display:block;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em;margin-bottom:4px}
.sp-pf-input{width:100%;padding:7px 10px;border:2px solid var(--bdr);border-radius:6px;background:var(--surf2);color:var(--txt);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s}.sp-pf-input:focus{border-color:var(--mint)}.sp-pf-sm{max-width:90px}
.sp-pf-msg{margin-left:8px;font-size:12px;color:var(--sub);font-weight:700}
.sp-goal-type-wrap{display:flex;gap:6px;margin-top:4px}
.sp-goal-type-btn{padding:5px 12px;background:var(--surf2);border:2px solid var(--bdr);border-radius:16px;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;color:var(--sub);transition:.12s}.sp-goal-type-btn.sp-goal-type-on{background:var(--lav-lt);border-color:var(--lav);color:var(--txt)}
.sp-atabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.sp-atab{padding:6px 12px;background:var(--surf2);border:2px solid var(--bdr);border-radius:6px;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;color:var(--sub);transition:.12s}.sp-atab:hover{border-color:var(--lav)}.sp-atab.sp-atab-on{background:var(--lav-lt);border-color:var(--lav);color:var(--txt)}
.sp-apane{padding-top:4px}
.sp-arow{margin-bottom:10px}.sp-arow2{display:flex;gap:8px;flex-wrap:wrap}.sp-arow2>div{flex:1;min-width:100px}
.sp-albl{display:block;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em;margin-bottom:4px}
.sp-ainput{width:100%;padding:7px 10px;border:2px solid var(--bdr);border-radius:6px;background:var(--surf2);color:var(--txt);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s}.sp-ainput:focus{border-color:var(--mint)}.sp-ainput-sm{max-width:140px}
.sp-ahelp{font-size:11px;color:var(--sub);line-height:1.7;margin-bottom:8px}
.sp-asep{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.06em;padding:8px 0 5px;border-top:1px dashed var(--bdr);margin-top:4px}
.sp-member-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.sp-member-row{display:flex;align-items:center;gap:5px;margin-bottom:7px;flex-wrap:wrap}
.sp-url-wrap{display:flex;align-items:center;gap:4px;min-width:0}
.sp-url-prev{width:28px;height:28px;object-fit:contain;border-radius:3px;image-rendering:pixelated;border:1px solid var(--bdr);flex-shrink:0}
.sp-url-prev-empty{display:inline-block;width:28px;height:28px;background:var(--surf2);border:1px dashed var(--bdr);border-radius:3px;flex-shrink:0}
.sp-combo-box{background:var(--surf2);border:1px solid var(--bdr);border-radius:7px;padding:12px;margin-bottom:10px}
.sp-combo-cks{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.sp-combo-ck{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px 8px;border:1px solid var(--bdr);border-radius:14px;font-size:11px;font-weight:600;transition:.12s}.sp-combo-ck:hover{border-color:var(--mint);background:var(--mint-lt)}
.sp-combo-ck input{width:12px;height:12px;accent-color:var(--mint)}
.sp-combo-row{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;margin-bottom:5px}
.sp-combo-key{flex:1;font-size:11px;font-weight:700;word-break:break-all}
.sp-combo-prev{width:24px;height:24px;object-fit:contain;border-radius:3px;image-rendering:pixelated}

/* ══ 비밀번호 오버레이 ══ */
.sp-pw-overlay{position:fixed;inset:0;background:var(--bg);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .4s}
.sp-pw-box{background:var(--surf);border:2px solid var(--bdr2);border-radius:12px;box-shadow:5px 5px 0 var(--bdr);padding:26px 22px;width:min(90vw,340px);text-align:center}
.sp-pw-lock{font-size:34px;margin-bottom:10px}.sp-pw-box h2{font-size:17px;font-weight:900;margin-bottom:5px}
.sp-pw-hint{font-size:13px;color:var(--sub);margin-bottom:14px}
.sp-pw-row{display:flex;gap:6px;margin-bottom:8px}
.sp-pw-input{flex:1;padding:9px 12px;border:2px solid var(--bdr);border-radius:6px;background:var(--surf2);color:var(--txt);font-family:var(--font);font-size:14px;outline:none}.sp-pw-input:focus{border-color:var(--mint)}
.sp-pw-err{font-size:12px;color:var(--sun);font-weight:600;min-height:16px}

/* ══ 모드2 바텀 시트 ══ */
.sp-sheet-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8000}.sp-sheet-bg.sp-open{display:block}
.sp-sheet{position:fixed;bottom:0;left:0;right:0;z-index:8100;background:var(--surf);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.15);padding:10px 14px 22px;transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.8,.25,1);max-height:78vh;overflow-y:auto}
.sp-sheet.sp-open{transform:translateY(0)}
.sp-sheet-bar{width:36px;height:4px;background:var(--bdr2);border-radius:2px;margin:0 auto 12px}
.sp-sheet-date{font-size:13px;font-weight:800;color:var(--sub);margin-bottom:10px;text-align:center}
.sp-sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-bottom:10px}
.sp-stamp-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 5px;border:2px solid var(--bdr);border-radius:8px;background:var(--surf2);cursor:pointer;font-family:var(--font);font-size:10px;font-weight:700;color:var(--txt);position:relative;transition:border-color .12s;-webkit-tap-highlight-color:transparent}
.sp-stamp-btn.sp-selected{border-color:var(--mint);background:var(--mint-lt)}
.sp-stamp-btn-img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;border-radius:3px}
.sp-stamp-btn-em{font-size:26px;line-height:1}.sp-stamp-btn-nm{font-size:12px;font-weight:800;color:var(--sub)}.sp-stamp-btn-label{font-size:10px;text-align:center}
.sp-stamp-chk{position:absolute;top:3px;right:3px;font-size:11px;color:var(--mint);opacity:0;transition:opacity .12s}.sp-stamp-btn.sp-selected .sp-stamp-chk{opacity:1}
.sp-sheet-foot{display:flex;gap:8px}

/* ══ 모달 공용 ══ */
.sp-id-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8500}.sp-id-bg.sp-open{display:block}
.sp-id-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8600;background:var(--surf);border:2px solid var(--bdr2);border-radius:10px;box-shadow:5px 5px 0 var(--bdr2);padding:18px;width:min(90vw,320px)}.sp-id-modal.sp-open{display:block}
.sp-id-modal h3{font-size:14px;font-weight:900;margin-bottom:10px}
.sp-id-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:10px}
.sp-id-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid var(--bdr);border-radius:8px;background:var(--surf2);cursor:pointer;font-family:var(--font);font-size:11px;font-weight:700;color:var(--txt);transition:border-color .12s}
.sp-id-btn:hover{border-color:var(--mint);background:var(--mint-lt)}
.sp-id-btn-img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;border-radius:3px}.sp-id-btn-em{font-size:24px;line-height:1}
.sp-edit-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8000}.sp-edit-bg.sp-open{display:block}
.sp-edit-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8100;background:var(--surf);border:2px solid var(--bdr2);border-radius:10px;box-shadow:5px 5px 0 var(--bdr2);padding:20px;width:min(90vw,360px)}
.sp-mck-item{display:flex;align-items:center;gap:7px;cursor:pointer;padding:7px 9px;border:2px solid var(--bdr);border-radius:6px;margin-bottom:5px;transition:.12s}.sp-mck-item:hover{border-color:var(--mint);background:var(--mint-lt)}
.sp-mck-item input{display:none}
.sp-mck-box{width:16px;height:16px;border:2px solid var(--bdr2);border-radius:3px;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0;color:transparent;transition:.12s}
.sp-mck-item input:checked~.sp-mck-box{background:var(--mint);border-color:#5eb8a8;color:#fff}.sp-mck-item input:checked~.sp-mck-box::after{content:'✔'}
.sp-mck-name{font-size:13px;font-weight:600}

/* ══ 회원 피커 ══ */
.sp-picker-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8500}.sp-picker-bg.sp-open{display:block}
.sp-picker-box{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8600;background:var(--surf);border:2px solid var(--bdr2);border-radius:10px;padding:16px;width:min(92vw,440px);max-height:75vh;flex-direction:column;gap:8px}
.sp-picker-box.sp-picker-open{display:flex}
.sp-picker-head{display:flex;align-items:center;justify-content:space-between}.sp-picker-head h3{font-size:14px;font-weight:900}
.sp-picker-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-picker-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;max-height:260px}
.sp-picker-foot{display:flex;align-items:center;justify-content:space-between;padding-top:6px;border-top:1px solid var(--bdr)}
.sp-picker-ck-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;transition:.12s}
.sp-picker-ck-item:hover:not(.sp-picker-added){border-color:var(--mint);background:var(--mint-lt)}
.sp-picker-ck-item.sp-picker-added{opacity:.6;cursor:default}
.sp-picker-ck-item input[type="checkbox"]{width:15px;height:15px;accent-color:var(--mint);flex-shrink:0}
.sp-picker-nick{flex:1;font-size:13px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.sp-picker-nick strong{font-weight:700}
.sp-picker-nick small{color:var(--muted);font-size:11px}
.sp-picker-tag{font-size:10px;font-weight:700;background:var(--mint-lt);border:1px solid var(--mint);color:var(--sub);padding:1px 5px;border-radius:10px;margin-left:auto}
.sp-picker-lv{font-size:10px;font-weight:800;background:var(--lav-lt);border:1px solid var(--lav);color:var(--txt);padding:1px 4px;border-radius:8px;flex-shrink:0}

/* ══ 토스트 ══ */
.sp-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--txt);color:var(--bg);padding:8px 20px;border-radius:20px;font-size:13px;font-weight:700;opacity:0;transition:opacity .2s,transform .2s;z-index:10000;pointer-events:none;white-space:nowrap}
.sp-toast.sp-on{opacity:1;transform:translateX(-50%) translateY(0)}.sp-toast.sp-err{background:#c04040;color:#fff}

/* ══ 모바일 ══ */
@media(max-width:640px){
  .sp-logo-text{display:none}
  .sp-tab{padding:0 8px}.sp-tab span{display:none}
  .sp-cal-ttl{font-size:18px}.sp-btn-nav{font-size:11px;padding:4px 8px}
  .sp-cell{min-height:56px;padding:3px}.sp-dn{font-size:9px}
  .sp-stamp-img,.sp-si{max-width:32px;max-height:32px}.sp-se{font-size:18px}
}
@media(max-width:380px){.sp-cell{min-height:46px}.sp-stamp-img,.sp-si{max-width:24px;max-height:24px}.sp-se{font-size:16px}}

/* ═══════════════════════════════════════════════════════════════
   ⚔️  RPG 도트 게임 모드  (.sp-pixel)
   클래식 JRPG 감성 — 선명한 도트 + 레트로 UI 언어
   ═══════════════════════════════════════════════════════════════ */

/* 픽셀 모드 전용 애니메이션 */
@keyframes px-blink   { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes px-cursor  { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes px-stamp   { 0%{transform:scale(0) rotate(-8deg);opacity:0} 65%{transform:scale(1.2) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes px-slide   { 0%{transform:translateY(-4px);opacity:0} 100%{transform:none;opacity:1} }

/* ── 팔레트: 레트로 JRPG 밤 ── */
/* ── 라이트 RPG: 낮의 양피지 여관 ── */
.sp-app.sp-pixel:not(.sp-dark), body.sp-pixel:not(.sp-dark) {
  --bg:      #f4e8c4;   /* 오래된 양피지 */
  --surf:    #fdf4e0;   /* 카드 — 밝은 양피지 */
  --surf2:   #e8d8a8;   /* 빈 슬롯 — 낡은 양피지 */
  --bdr:     #b89048;   /* 갈색 테두리 */
  --bdr2:    #987030;   /* 진한 갈색 */
  --mint:    #2a7830;   /* 숲 초록 */
  --mint-lt: #d4eed4;
  --lav:     #6840b0;   /* 마법사 보라 */
  --lav-lt:  #e4d4f8;
  --pink:    #b83030;   /* 위험 레드 */
  --pink-lt: #f8d4d4;
  --peach:   #c87820;   /* 퀘스트 골드 */
  --txt:     #281400;   /* 진한 세피아 */
  --sub:     #785028;
  --muted:   #b09060;
  --sun:     #b83030;
  --sat:     #284898;
  --today-bg:  #fff0a0;
  --today-bdr: #c87820;
  --mine-bg:   #d4eed4;
  --mine-bdr:  #2a7830;
  --font: 'DungGeunMo', monospace;
  background: var(--bg) !important;
  color: var(--txt) !important;
}

/* ── 다크 RPG: 밤의 미드톤 인디고 ── */
.sp-app.sp-pixel.sp-dark, body.sp-pixel.sp-dark {
  --bg:      #1a1830;   /* 미드톤 인디고 */
  --surf:    #28264a;   /* 대화창 배경 */
  --surf2:   #141228;   /* 빈 슬롯 */
  --bdr:     #38346a;
  --bdr2:    #4a4880;
  --mint:    #44d870;   /* EXP 초록 */
  --mint-lt: #0a2014;
  --lav:     #b070f8;   /* 마법 보라 */
  --lav-lt:  #22103e;
  --pink:    #e84848;   /* HP 레드 */
  --pink-lt: #340c0c;
  --peach:   #f0aa18;   /* 퀘스트 골드 */
  --txt:     #f0e8c4;   /* 양피지 */
  --sub:     #a09078;
  --muted:   #68605a;
  --sun:     #e84848;
  --sat:     #7890e8;
  --today-bg:  #2e2200;
  --today-bdr: #f0aa18;
  --mine-bg:   #0c2010;
  --mine-bdr:  #44a060;
  --font: 'DungGeunMo', monospace;
  background: var(--bg) !important;
  color: var(--txt) !important;
}

/* 폰트 전체 */
.sp-app.sp-pixel, .sp-app.sp-pixel *,
body.sp-pixel, body.sp-pixel * {
  font-family: 'DungGeunMo', monospace !important;
  letter-spacing: .01em;
}

/* 모든 둥근 모서리 제거 */
.sp-pixel * { border-radius: 0 !important; }

/* 스캔라인 오버레이 — 다크 RPG */
.sp-app.sp-pixel.sp-dark::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
  );
  pointer-events: none;
  z-index: 9998;
}
/* 스캔라인 오버레이 — 라이트 RPG */
.sp-app.sp-pixel:not(.sp-dark)::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── 앱 바 ── */
.sp-pixel .sp-app-bar {
  background: var(--surf2) !important;
  border-bottom: 4px solid var(--peach) !important;
  box-shadow: 0 4px 0 #000 !important;
}
.sp-pixel .sp-logo-text {
  color: var(--peach) !important;
  letter-spacing: .06em !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6) !important;
}
.sp-pixel .sp-tab { border-bottom: 3px solid transparent !important; font-size: 12px !important; letter-spacing: .02em !important; }
.sp-pixel .sp-tab:hover { color: var(--txt) !important; }
.sp-pixel .sp-tab.sp-tab-on {
  color: var(--peach) !important;
  border-bottom-color: var(--peach) !important;
  text-shadow: 0 0 8px rgba(240,170,24,.4) !important;
}
.sp-pixel .sp-dark-btn,
.sp-pixel .sp-pixel-btn {
  background: var(--surf) !important;
  border: 2px solid var(--bdr2) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important;
}
.sp-pixel .sp-pixel-btn {
  border-color: var(--peach) !important;
  box-shadow: 0 0 0 1px var(--peach), 2px 2px 0 rgba(0,0,0,.6) !important;
}

/* ── RPG 다이얼로그 박스 믹스인 (선명한 이중 테두리) ── */
.sp-pixel .sp-cal-wrap,
.sp-pixel .sp-mini-dash,
.sp-pixel .sp-legend,
.sp-pixel .sp-pw-box,
.sp-pixel .sp-id-modal,
.sp-pixel .sp-edit-box,
.sp-pixel .sp-picker-box {
  border: 3px solid var(--peach) !important;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.8),
    0 0 0 4px rgba(240,170,24,.12),
    8px 8px 0 rgba(0,0,0,.65) !important;
  /* 16비트 코너 장식 */
  background-image:
    radial-gradient(circle at 7px 7px, var(--peach) 2.5px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--peach) 2.5px, transparent 2.5px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--peach) 2.5px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--peach) 2.5px, transparent 2.5px) !important;
}
.sp-pixel .sp-sheet {
  border: 3px solid var(--peach) !important;
  border-bottom: none !important;
  box-shadow: 0 -4px 0 #000 !important;
  background: var(--surf) !important;
}

/* ── 달력 네비 ── */
.sp-pixel .sp-cal-ttl { letter-spacing: .02em !important; }
.sp-pixel .sp-cal-ttl::before { content: '▶ '; color: var(--peach); animation: px-blink 2.8s step-end infinite; }
.sp-pixel .sp-dot { color: var(--peach) !important; }
.sp-pixel .sp-cy  { color: var(--sub) !important; }
.sp-pixel .sp-btn-nav {
  background: var(--surf2) !important;
  border: 2px solid var(--peach) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.65) !important;
  color: var(--peach) !important;
}
.sp-pixel .sp-btn-nav:hover {
  background: var(--surf) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.7) !important;
}

/* ── 요일 행 ── */
.sp-pixel .sp-dow-row {
  background: var(--surf2) !important;
  border-bottom: 3px solid var(--peach) !important;
}
.sp-pixel .sp-dow { color: var(--sub) !important; font-size: 11px !important; letter-spacing: .05em !important; }
.sp-pixel .sp-dow.sp-sun { color: var(--sun) !important; }
.sp-pixel .sp-dow.sp-sat { color: var(--sat) !important; }

/* ── 달력 그리드 — 도트 픽셀 격자 ── */
.sp-pixel .sp-grid { gap: 2px !important; background: #000 !important; }
.sp-pixel .sp-cell {
  border: none !important;
  background: var(--surf) !important;
  transition: background .06s !important;
}

/* 빈 셀: 도트 그리드 패턴 (도드라지는 픽셀 느낌) */
.sp-pixel:not(.sp-dark) .sp-cell.sp-empty,
.sp-app.sp-pixel:not(.sp-dark) .sp-cell.sp-empty {
  background-color: var(--surf2) !important;
  background-image:
    radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;
  opacity: .85 !important;
}
.sp-pixel.sp-dark .sp-cell.sp-empty,
.sp-app.sp-pixel.sp-dark .sp-cell.sp-empty {
  background-color: var(--surf2) !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;
  opacity: .8 !important;
}

.sp-app.sp-pixel.sp-dark .sp-cell.sp-click:hover,
body.sp-pixel.sp-dark .sp-cell.sp-click:hover { background: #322e5a !important; }
.sp-app.sp-pixel:not(.sp-dark) .sp-cell.sp-click:hover,
body.sp-pixel:not(.sp-dark) .sp-cell.sp-click:hover { background: #e0c888 !important; }
.sp-pixel .sp-cell.sp-click:active { background: var(--mint-lt) !important; }

/* 오늘 날짜 */
.sp-pixel .sp-cell.sp-today {
  background: var(--today-bg) !important;
  outline: 3px solid var(--peach) !important;
  outline-offset: -3px;
}
.sp-pixel .sp-cell.sp-today .sp-dn { color: var(--peach) !important; font-weight: 900; text-shadow: 1px 1px 0 #000; }
.sp-pixel .sp-tb {
  background: var(--peach) !important;
  color: #000 !important;
  font-size: 6px !important;
  padding: 1px 3px !important;
  letter-spacing: .04em !important;
  box-shadow: 1px 1px 0 #000 !important;
}
.sp-pixel .sp-cell.sp-today .sp-tb::after {
  content: '▌';
  animation: px-blink 2.8s step-end infinite;
  margin-left: 1px;
}

/* 내 출석 셀 */
.sp-pixel .sp-cell.sp-mine {
  background: var(--mine-bg) !important;
  outline: 2px solid var(--mine-bdr) !important;
  outline-offset: -2px;
}

/* ── 도장 이미지 ── */
.sp-pixel .sp-stamp-img,
.sp-pixel .sp-si {
  image-rendering: pixelated !important;
  border: 2px solid var(--bdr2) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.3), 3px 3px 0 rgba(0,0,0,.7) !important;
  background: var(--surf2) !important;
  padding: 2px !important;
}
/* 배너/동맹 아이콘은 아이템 슬롯 스타일 제외 — 항상 투명 */
.sp-pixel .mbr-banner-img,
.sp-pixel .ally-img,
body.sp-pixel .mbr-banner-img,
body.sp-pixel .ally-img {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  image-rendering: auto !important;
}
.sp-pixel .sp-se {
  border: 2px solid var(--bdr2) !important;
  background: var(--surf2) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.3), 3px 3px 0 rgba(0,0,0,.7) !important;
}
.sp-pixel .sp-se { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.7)) !important; }
.sp-pixel .sp-pop .sp-stamp-img,
.sp-pixel .sp-pop .sp-si,
.sp-pixel .sp-pop .sp-se {
  animation: px-stamp .3s cubic-bezier(.175,.885,.32,1.275) forwards !important;
}
.sp-pixel .sp-nb {
  border: 1px solid var(--peach) !important;
  background: var(--surf2) !important;
  color: var(--peach) !important;
  box-shadow: 1px 1px 0 #000 !important;
}
.sp-pixel .sp-memo {
  border-left: 3px solid var(--peach) !important;
  background: var(--surf2) !important;
  color: var(--sub) !important;
}

/* ── EXP 바 (노치 세그먼트) ── */
.sp-pixel .sp-prog-track {
  background: #000 !important;
  border: 2px solid var(--bdr2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  height: 14px !important;
  position: relative !important;
}
.sp-pixel .sp-prog-bar {
  background: linear-gradient(90deg, var(--mint), var(--peach)) !important;
  height: 100% !important;
  box-shadow: 0 0 6px rgba(240,170,24,.4) !important;
}
/* 노치 패턴 — EXP 게이지 세그먼트 */
.sp-pixel .sp-prog-track::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent 0px, transparent 11px,
    rgba(0,0,0,.4) 11px, rgba(0,0,0,.4) 13px
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 미니 대시 (STATUS 창) ── */
.sp-pixel .sp-mini-dash {
  background: var(--surf) !important;
  padding: 10px 12px !important;
}
/* STATUS 라벨 */
.sp-pixel .sp-mini-dash::before {
  content: '── STATUS ──';
  display: block; width: 100%; flex-basis: 100%;
  text-align: center; font-size: 8px;
  color: var(--sub); letter-spacing: .18em;
  margin-bottom: 4px;
}
.sp-pixel .sp-md-nick  { color: var(--peach) !important; font-size: 13px !important; text-shadow: 1px 1px 0 #000 !important; }
.sp-pixel .sp-md-goal  { color: var(--sub) !important; font-size: 10px !important; }
.sp-pixel .sp-md-num   { color: var(--mint) !important; font-size: 22px !important; text-shadow: 0 0 8px rgba(68,216,112,.5) !important; }
.sp-pixel .sp-md-sep, .sp-pixel .sp-md-goal-n, .sp-pixel .sp-md-label { color: var(--sub) !important; }
.sp-pixel .sp-badge-done {
  border: 2px solid var(--peach) !important;
  background: var(--surf2) !important;
  color: var(--peach) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important;
  text-shadow: 1px 1px 0 #000 !important;
}
.sp-pixel .sp-login-hint { border: 2px solid var(--bdr2) !important; background: var(--surf2) !important; color: var(--sub) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }

/* ── 범례 (PARTY 창) ── */
.sp-pixel .sp-legend {
  background: var(--surf2) !important;
  border: 2px solid var(--bdr2) !important;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 rgba(0,0,0,.7) !important;
}
/* PARTY 라벨 */
.sp-pixel .sp-legend::before {
  content: '── PARTY ──';
  display: block; width: 100%; flex-basis: 100%;
  text-align: center; font-size: 8px;
  color: var(--sub); letter-spacing: .18em;
  margin-bottom: 4px;
}
.sp-pixel .sp-leg-item  { border: 1px solid var(--bdr2) !important; background: var(--surf) !important; box-shadow: 1px 1px 0 #000 !important; }

/* ── 버튼 ── */
.sp-pixel .sp-btn-ok  { background: var(--mint) !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: 3px 3px 0 rgba(0,0,0,.65) !important; text-shadow: none !important; }
.sp-pixel .sp-btn-ok:hover { transform: translate(-1px,-1px) !important; box-shadow: 4px 4px 0 rgba(0,0,0,.7) !important; }
.sp-pixel .sp-btn-sec { background: var(--surf2) !important; color: var(--sub) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-btn-lav { background: var(--lav-lt) !important; color: var(--txt) !important; border: 2px solid var(--lav) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-del-btn { background: var(--pink-lt) !important; color: var(--sun) !important; border: 2px solid var(--pink) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-close-btn { background: var(--surf2) !important; color: var(--sub) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-upload-lbl { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; color: var(--sub) !important; }

/* ── 시스템 메시지 (토스트) ── */
.sp-pixel .sp-toast {
  background: var(--surf) !important; color: var(--txt) !important;
  border: 2px solid var(--peach) !important;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 rgba(0,0,0,.7) !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5) !important;
}
.sp-pixel .sp-toast::before { content: '▶ '; color: var(--peach); }
.sp-pixel .sp-toast.sp-err { border-color: var(--pink) !important; background: var(--pink-lt) !important; }
.sp-pixel .sp-toast.sp-err::before { color: var(--pink); }

/* ── 알림 배너 ── */
.sp-pixel .sp-remind {
  background: var(--surf) !important; color: var(--txt) !important;
  border: 2px solid var(--pink) !important;
  box-shadow: 0 0 0 2px #000, 3px 3px 0 rgba(0,0,0,.65) !important;
}

/* ── 입력창 / 설정 ── */
.sp-pixel .sp-pf-input, .sp-pixel .sp-ainput {
  background: var(--surf2) !important; color: var(--txt) !important;
  border: 2px solid var(--bdr2) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6) !important;
}
.sp-pixel .sp-pf-input:focus, .sp-pixel .sp-ainput:focus { border-color: var(--peach) !important; }
.sp-pixel .sp-goal-type-btn { background: var(--surf2) !important; color: var(--sub) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-goal-type-btn.sp-goal-type-on { background: var(--lav-lt) !important; border-color: var(--lav) !important; color: var(--txt) !important; }
.sp-pixel .sp-atab { background: var(--surf2) !important; color: var(--sub) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-atab.sp-atab-on { background: var(--lav-lt) !important; border-color: var(--lav) !important; color: var(--txt) !important; }
.sp-pixel .sp-asep { border-top-color: var(--bdr2) !important; color: var(--sub) !important; }
.sp-pixel .sp-ahelp, .sp-pixel .sp-albl, .sp-pixel .sp-pf-lbl { color: var(--sub) !important; }
.sp-pixel .sp-combo-box  { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; }
.sp-pixel .sp-combo-ck   { border-color: var(--bdr2) !important; }
.sp-pixel .sp-combo-ck:hover { border-color: var(--peach) !important; background: var(--surf) !important; }
.sp-pixel .sp-combo-row  { background: var(--surf2) !important; border-color: var(--bdr2) !important; }
.sp-pixel .sp-url-prev-empty { background: var(--surf2) !important; border-color: var(--bdr2) !important; }

/* ── 체크박스 ── */
.sp-pixel .sp-mck-item { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; }
.sp-pixel .sp-mck-item:hover { border-color: var(--peach) !important; background: var(--surf) !important; }
.sp-pixel .sp-mck-box { background: var(--surf) !important; border: 2px solid var(--bdr2) !important; }
.sp-pixel .sp-mck-item input:checked~.sp-mck-box { background: var(--peach) !important; border-color: #000 !important; color: #000 !important; }

/* ── 바텀 시트 (MEMBER SELECT) ── */
.sp-pixel .sp-sheet-bar  { background: var(--bdr2) !important; }
.sp-pixel .sp-sheet-date { color: var(--peach) !important; text-shadow: 1px 1px 0 #000 !important; letter-spacing: .04em !important; }
.sp-pixel .sp-stamp-btn  { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-stamp-btn.sp-selected { border-color: var(--peach) !important; background: var(--surf) !important; box-shadow: 0 0 0 1px var(--peach), 3px 3px 0 rgba(0,0,0,.65) !important; }
.sp-pixel .sp-stamp-chk  { color: var(--peach) !important; }

/* ── ID 선택 모달 ── */
.sp-pixel .sp-id-modal h3 { color: var(--peach) !important; text-shadow: 1px 1px 0 #000 !important; letter-spacing: .06em !important; }
.sp-pixel .sp-id-btn { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; }
.sp-pixel .sp-id-btn:hover { border-color: var(--peach) !important; background: var(--surf) !important; box-shadow: 3px 3px 0 rgba(0,0,0,.65) !important; }

/* ── 비밀번호 오버레이 ── */
.sp-pixel .sp-pw-box  { border: 3px solid var(--peach) !important; box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,.75) !important; background: var(--surf) !important; }
.sp-pixel .sp-pw-input { background: var(--surf2) !important; border: 2px solid var(--bdr2) !important; box-shadow: inset 2px 2px 0 rgba(0,0,0,.6) !important; color: var(--txt) !important; }
.sp-pixel .sp-pw-input:focus { border-color: var(--peach) !important; }
.sp-pixel .sp-pw-err  { color: var(--sun) !important; }

/* ── 회원 피커 ── */
.sp-pixel .sp-picker-ck-item { background: var(--surf2) !important; border: 1px solid var(--bdr2) !important; }
.sp-pixel .sp-picker-ck-item:hover:not(.sp-picker-added) { border-color: var(--peach) !important; background: var(--surf) !important; }
.sp-pixel .sp-picker-lv  { background: var(--lav-lt) !important; border-color: var(--lav) !important; }
.sp-pixel .sp-picker-tag { background: var(--mint-lt) !important; border-color: var(--mint) !important; }
.sp-pixel .sp-picker-foot { border-top-color: var(--bdr2) !important; }

/* ── 모드2 ID 버튼 ── */
.sp-pixel .sp-m2-id-btn { background: var(--surf2) !important; border: 2px solid var(--peach) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.6) !important; color: var(--peach) !important; }


/* ── 데미지 부유 텍스트 (+1 출석!) ── */
@keyframes dmg-float {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  60%  { transform: translateX(-50%) translateY(-28px); opacity: .9; }
  100% { transform: translateX(-50%) translateY(-48px); opacity: 0; }
}
.sp-dmg-text { pointer-events: none; white-space: nowrap; }
/* ── 모바일 ── */
@media(max-width:640px){ .sp-pixel .sp-tab span { display: none; } }


/* ══════════════════════════════════════════
   스트릭 · 뱃지 · 히트맵 공통 스타일
   ══════════════════════════════════════════ */

/* ── 스트릭 배지 ── */
.streak-badge{display:inline-flex;align-items:center;gap:3px;background:var(--peach);color:#fff;font-size:10px;font-weight:900;padding:2px 7px;border-radius:12px;letter-spacing:.02em;white-space:nowrap}
.streak-badge.cold{background:var(--muted)}
.sp-dark .streak-badge{background:var(--peach);color:#000}

/* ── 뱃지 아이콘 ── */
.badge-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.badge-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--surf2);border:1px solid var(--bdr2);font-size:13px;cursor:default;position:relative;transition:.12s}
.badge-icon:hover{transform:scale(1.25);z-index:10}
/* 뱃지 툴팁 */
.badge-icon::after{content:attr(data-name);position:absolute;bottom:calc(100%+5px);left:50%;transform:translateX(-50%);background:var(--txt);color:var(--bg);font-size:9px;font-weight:700;padding:2px 6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;font-family:var(--font)}
.badge-icon:hover::after{opacity:1}
/* 신규 획득 반짝임 */
@keyframes badge-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.badge-icon.new{animation:badge-pop .5s cubic-bezier(.175,.885,.32,1.275) forwards;border-color:var(--peach)}

/* 픽셀모드 뱃지 */
.sp-pixel .badge-icon,.sp-app.sp-pixel .badge-icon,
body.sp-pixel .badge-icon{border-radius:0!important;font-family:'DungGeunMo',monospace!important}

/* ── 히트맵 ── */
.heatmap-wrap{overflow-x:auto;padding-bottom:4px}
.heatmap-svg{display:block;overflow:visible}
.hm-cell{cursor:pointer;transition:opacity .12s}
.hm-cell:hover{opacity:.7}
.hm-0{fill:var(--bdr)}
.hm-1{fill:var(--mint-lt)}
.hm-2{fill:var(--mint);opacity:.8}
.hm-3{fill:var(--accent)}
.hm-lbl{font-size:9px;fill:var(--sub);font-family:var(--font)}

/* 픽셀모드 히트맵 */
body.sp-pixel .hm-0{fill:var(--bdr2)}
body.sp-pixel .hm-1{fill:var(--mint-lt)}
body.sp-pixel .hm-2{fill:var(--mint)}
body.sp-pixel .hm-3{fill:var(--peach)}

/* ── BGM 위젯 ── */
.bgm-view{background:var(--surf);border:none}

/* ── 미니 대시 내 스트릭/뱃지 영역 ── */
.sp-md-extra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;margin-top:4px}

/* ════════════════════════════════════
   개인 일지 · EXP 바 · BGM 위젯 스타일
   ════════════════════════════════════ */

/* ── 개인 일지 버튼 (셀 우상단) ── */
.sp-memo-btn{position:absolute;top:16px;right:2px;background:none;border:none;font-size:9px;cursor:pointer;opacity:.3;padding:0;line-height:1;transition:opacity .12s;z-index:2}
.sp-memo-btn:hover,.sp-cell:hover .sp-memo-btn{opacity:.8}
.sp-cell.has-my-memo .sp-memo-btn{opacity:.8;color:var(--lav)}
.sp-my-memo-dot{position:absolute;bottom:3px;left:3px;width:5px;height:5px;background:var(--lav);border-radius:50%;display:none}
.sp-cell.has-my-memo .sp-my-memo-dot{display:block}
/* 개인 일지 모달 */
.memo-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8800}
.memo-modal-bg.open{display:block}
.memo-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8801;background:var(--surf);border:2px solid var(--lav);border-radius:10px;padding:18px;width:min(92vw,400px);box-shadow:5px 5px 0 rgba(0,0,0,.18)}
.memo-modal.open{display:block}
.memo-modal-ttl{font-size:13px;font-weight:900;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.memo-modal textarea{width:100%;height:120px;padding:8px 10px;border:2px solid var(--bdr);border-radius:6px;background:var(--surf2);color:var(--txt);font-family:var(--font);font-size:12px;resize:vertical;outline:none;line-height:1.6}
.memo-modal textarea:focus{border-color:var(--lav)}
.memo-modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* ── EXP 바 (픽셀 모드에서만 표시) ── */
.sp-exp-wrap{display:none;width:100%;flex-basis:100%;margin-top:5px}
.sp-app.sp-pixel .sp-exp-wrap,
body.sp-pixel .sp-exp-wrap{display:block}
.sp-exp-row{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--sub)}
.sp-exp-lv{font-weight:900;color:var(--peach);white-space:nowrap;font-size:11px}
.sp-exp-track{flex:1;height:8px;background:#000;border:1px solid var(--bdr2);position:relative;overflow:hidden}
.sp-exp-bar{height:100%;background:linear-gradient(90deg,var(--mint),var(--peach));transition:width 1s cubic-bezier(.25,.8,.25,1)}
.sp-exp-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,transparent 9px,rgba(0,0,0,.3) 9px,rgba(0,0,0,.3) 10px);pointer-events:none}
.sp-exp-num{font-size:9px;color:var(--muted);white-space:nowrap}

/* ── BGM 플로팅 버튼 ── */
/* BGM: 직접 삽입 방식으로 변경 — iframe 스타일 불필요 */
.bgm-hidden-frame{display:none} /* 혹시 iframe 폴백용 */
#bgm-widget-wrap{position:relative;z-index:9999}