:root{
  --a:#6C63FF;--ah:#5a52e0;--al:#EEEEFF;--am:#9B95FF;
  --bg:#fff;--bg2:#F8F7FF;--bg3:#F0EFF8;
  --t1:#12101E;--t2:#55516E;--t3:#706B8F;
  --bd:rgba(108,99,255,.13);--bdB:rgba(108,99,255,.24);
  --r:20px;--rsm:12px;--rxs:8px;
  --sh:0 4px 24px rgba(108,99,255,.10);--shL:0 8px 40px rgba(108,99,255,.18);
  --sw:260px;--ff:'Outfit',sans-serif;--tr:all .22s cubic-bezier(.4,0,.2,1);
  /* 개발자 패널 전용 색상 — 브랜드 보라색과 의도적으로 구분되는 "특별 영역" 표시.
     하드코딩 대신 변수로 묶어서, 톤을 바꿀 때 한 곳만 고치면 되게 함 */
  --dev-a:#FFD700;--dev-a2:#FFA500;--dev-bg:rgba(255,215,0,.15);--dev-bd:rgba(255,215,0,.4);
  --dev-rgb:255,215,0;--dev-rgb2:255,165,0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══ 다크 모드 — body.dark 일 때 변수 오버라이드 (보라 브랜딩 유지) ═══ */
body.dark{
  --bg:#15131F;--bg2:#1E1B2E;--bg3:#26233A;
  --t1:#F0EFF8;--t2:#B5B0CC;--t3:#8A86A2;
  --bd:rgba(155,149,255,.16);--bdB:rgba(155,149,255,.28);
  --al:#241F3D;
  --sh:0 4px 24px rgba(0,0,0,.35);--shL:0 8px 40px rgba(0,0,0,.5);
}
body.dark .topbar{background:rgba(21,19,31,.93)}
body.dark .bnav{background:rgba(21,19,31,.97)}
body{background:var(--bg);color:var(--t1);transition:background .3s,color .3s}
html{font-size:15px}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased}
button{font-family:var(--ff);cursor:pointer;border:none;background:none}
input,textarea,select{font-family:var(--ff)}
a{text-decoration:none;color:inherit}
#auth-overlay{position:fixed;inset:0;z-index:8000;display:flex;background:var(--bg);overflow-y:auto}
#auth-overlay.hidden{display:none}
.auth-split{display:flex;width:100%;min-height:100vh}
.auth-left{flex:1;background:var(--a);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 48px;position:relative;overflow:hidden}
.auth-left::before{content:'';position:absolute;width:420px;height:420px;background:rgba(255,255,255,.07);border-radius:50%;top:-110px;right:-120px}
.auth-left::after{content:'';position:absolute;width:260px;height:260px;background:rgba(255,255,255,.05);border-radius:50%;bottom:-60px;left:-50px}
.auth-brand{position:relative;z-index:1;text-align:center;color:#fff}
.auth-logo-box{width:68px;height:68px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.28);border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.auth-brand h1{font-size:2.3rem;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.auth-brand h1 span{opacity:.65}
.auth-brand p{font-size:.95rem;opacity:.82;line-height:1.65;max-width:300px}
.auth-feats{margin-top:44px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:310px}
.auth-feat{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:13px 17px}
.af-ico{font-size:1.35rem;flex-shrink:0}
.af-txt{color:#fff;font-size:.86rem;font-weight:500;opacity:.92}
.auth-right{width:460px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:56px 48px;background:var(--bg);overflow-y:auto}
.auth-form{display:none}
.auth-form.active{display:block}
.afh{margin-bottom:28px}
.afh h2{font-size:1.65rem;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.afh p{font-size:.875rem;color:var(--t2);line-height:1.5}
.afh .lnk{color:var(--a);font-weight:700;cursor:pointer}
.afh .lnk:hover{text-decoration:underline}
.social-row{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.social-btn{display:flex;align-items:center;gap:12px;padding:11px 16px;border:1.5px solid var(--bdB);border-radius:var(--rsm);background:var(--bg);font-size:.875rem;font-weight:600;color:var(--t1);width:100%;transition:var(--tr)}
.social-btn:hover{background:var(--bg2);border-color:var(--am);box-shadow:var(--sh)}
.or-row{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.or-row::before,.or-row::after{content:'';flex:1;height:1px;background:var(--bd)}
.or-row span{font-size:.74rem;color:var(--t3);font-weight:600;white-space:nowrap}
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--t2);margin-bottom:6px}
.iw{position:relative}
.ico-l{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none;display:flex;align-items:center}
.ico-r{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--t3);cursor:pointer;background:none;border:none;display:flex;align-items:center;padding:3px;font-size:1rem}
.ico-r:hover{color:var(--t1)}
.inp{width:100%;padding:11px 40px;border:1.5px solid var(--bdB);border-radius:var(--rsm);font-size:.9rem;color:var(--t1);background:var(--bg);outline:none;transition:var(--tr)}
.inp:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.12)}
.inp.err{border-color:#e24b4a;box-shadow:0 0 0 3px rgba(226,75,74,.10)}
.err-msg{font-size:.72rem;color:#e24b4a;margin-top:4px;display:none}
.err-msg.show{display:block}
.two-col{display:flex;gap:12px}
.two-col .field{flex:1;min-width:0}
.pw-bar{margin-top:7px;display:none}
.pw-bar.show{display:block}
.pw-segs{display:flex;gap:4px;margin-bottom:3px}
.pw-seg{flex:1;height:3px;border-radius:6px;background:var(--bg3);transition:background .3s}
.pw-seg.s1{background:#e24b4a}.pw-seg.s2{background:#ef9f27}.pw-seg.s3{background:#1d9e75}.pw-seg.s4{background:var(--a)}
.pw-lbl{font-size:.72rem;font-weight:600;color:var(--t3)}
.opts-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;margin-top:-4px}
.remember{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--t2);cursor:pointer}
.remember input{accent-color:var(--a);width:14px;height:14px;cursor:pointer}
.forgot{font-size:.8rem;color:var(--a);font-weight:700;cursor:pointer}
.forgot:hover{text-decoration:underline}
.sub-btn{width:100%;padding:13px;background:var(--a);color:#fff;border:none;border-radius:var(--rsm);font-size:.95rem;font-weight:800;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px}
.sub-btn:hover:not(:disabled){background:var(--ah);box-shadow:0 6px 20px rgba(108,99,255,.38);transform:translateY(-1px)}
.sub-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.terms{margin-top:14px;font-size:.72rem;color:var(--t3);text-align:center;line-height:1.55}
.terms a{color:var(--a);font-weight:600}
.demo-hint{margin-top:18px;padding:11px 14px;background:var(--bg2);border:1px dashed var(--bdB);border-radius:var(--rxs)}
.demo-hint .dlbl{font-size:.72rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.demo-hint .dval{font-size:.8rem;color:var(--t2)}
.demo-hint .dval strong{color:var(--a)}
.verify-wrap{text-align:center;padding:10px 0}
.verify-ico{width:72px;height:72px;background:var(--al);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 20px}
.verify-wrap h3{font-size:1.3rem;font-weight:800;margin-bottom:8px}
.verify-wrap p{font-size:.875rem;color:var(--t2);line-height:1.65;margin-bottom:24px}
.verify-wrap .em{color:var(--a);font-weight:700}
.resend{display:block;margin:14px auto 0;font-size:.82rem;color:var(--a);font-weight:700;cursor:pointer;background:none;border:none}
.resend:hover{text-decoration:underline}
.back-link{display:inline-block;margin-top:14px;font-size:.8rem;color:var(--t3);cursor:pointer}
.back-link:hover{color:var(--a)}
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(16px) scale(.96);background:var(--t1);color:#fff;padding:9px 20px;border-radius:var(--r);font-size:.82rem;font-weight:600;opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:99999;pointer-events:none;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 24px rgba(0,0,0,.18)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#toast.toast-success{background:#1d9e75}
#toast.toast-error{background:#e24b4a}
#toast.toast-info{background:var(--t1)}
.modal-bg{position:fixed;inset:0;z-index:5000;background:rgba(18,16,30,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s;pointer-events:none}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg);border-radius:var(--r);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;position:relative;transform:translateY(20px);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.modal:focus{outline:2px solid var(--a);outline-offset:-2px}
.modal-bg.open .modal{transform:translateY(0)}
.modal-head{padding:20px 24px 0;display:flex;align-items:center;gap:10px}
.modal-head h3{flex:1;font-size:1.1rem;font-weight:800;letter-spacing:-.3px}
.modal-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:var(--tr);font-size:1rem;position:relative}
/* 시각적 크기(32px)는 그대로 두고, 실제 탭 가능 영역만 44px로 넓힘 (모바일 오탭 방지) */
.modal-close::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.modal-close:hover{background:var(--bg2);color:var(--t1)}
.modal-body{padding:20px 24px 24px}
#app{display:none;min-height:100vh}
#app.visible{display:flex}
.sidebar{width:var(--sw);background:var(--bg);border-right:1px solid var(--bd);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;padding:26px 18px;z-index:100}
.s-logo{display:flex;align-items:center;gap:10px;margin-bottom:32px;padding:0 4px;cursor:pointer;background:none;border:none;width:100%;font-family:var(--ff);text-align:left}
.s-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.ni{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--rsm);color:var(--t2);font-size:.92rem;font-weight:600;cursor:pointer;transition:var(--tr);border:1px solid transparent;position:relative;background:none;width:100%;text-align:left;font-family:var(--ff)}
.ni:hover{background:var(--bg2);color:var(--t1)}
.ni.active{background:var(--al);color:var(--a);border-color:var(--bdB)}
.ni-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ni-badge{margin-left:auto;background:var(--a);color:#fff;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:var(--r)}
.n-div{height:1px;background:var(--bd);margin:8px 0}
/* s-footer: margin-top:auto 로 사이드바 최하단에 항상 고정 → 로그아웃 버튼 항상 보임 */
.s-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--bd);flex-shrink:0}
.user-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--rsm);cursor:pointer;transition:var(--tr);background:none;border:none;width:100%;font-family:var(--ff);text-align:left}
.user-row:hover{background:var(--bg2)}
.u-info .unm{font-size:.84rem;font-weight:700;display:flex;align-items:center;gap:5px}
.u-info .uhdl{font-size:.74rem;color:var(--t3)}
/* 개발자 배지 — 사이드바·프로필 공용 (inline style 제거) */
.dev-badge-pill{display:none;align-items:center;gap:3px;background:linear-gradient(135deg,var(--dev-a),var(--dev-a2));color:#fff;font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:var(--r);letter-spacing:.3px}
.badge-dev{background:rgba(var(--dev-rgb),.2);color:var(--dev-a);font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:var(--r);letter-spacing:.3px}
.badge-user{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:var(--r)}
.dev-badge-pill.show{display:inline-flex}
/* logout-btn: 사이드바 footer 로그아웃 버튼 (단일 정의) */
.logout-btn{display:flex !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:10px;border-radius:var(--rsm);font-size:.84rem;font-weight:700;color:#e24b4a;border:1.5px solid rgba(226,75,74,.3);background:rgba(226,75,74,.06);transition:var(--tr);cursor:pointer;font-family:var(--ff)}
.logout-btn:hover{background:#e24b4a;color:#fff;border-color:#e24b4a;box-shadow:0 4px 14px rgba(226,75,74,.3)}
.logo-box{width:34px;height:34px;background:var(--a);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-txt{font-size:1.2rem;font-weight:800;letter-spacing:-.5px}
.logo-txt span{color:var(--a)}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--am));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.78rem;flex-shrink:0}
.av-lg{width:74px;height:74px;font-size:1.7rem;border:3px solid var(--bg);box-shadow:0 4px 16px rgba(108,99,255,.28)}
/* Profile page full logout button */
.logout-btn-full{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:var(--rsm);font-size:.95rem;font-weight:800;color:#fff;border:none;background:#e24b4a;transition:var(--tr);cursor:pointer;box-shadow:0 4px 14px rgba(226,75,74,.25)}
.logout-btn-full:hover{background:#c93c3b;box-shadow:0 6px 20px rgba(226,75,74,.4);transform:translateY(-1px)}
.main{margin-left:var(--sw);flex:1;min-height:100vh;padding-bottom:40px;max-width:calc(100% - var(--sw));box-sizing:border-box}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);z-index:90}
.topbar .s-logo{display:none}
/* topbar 리팩토링 — inline style 대체 클래스 */
.topbar-logo{margin:0;min-width:0;overflow:hidden}
.topbar-logo .logo-box{width:28px;height:28px;border-radius:var(--rxs);flex-shrink:0}
.topbar-logo .logo-txt{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-spacer{flex:1}
.tb-av-btn{width:30px;height:30px;font-size:.7rem;cursor:pointer;border:none;padding:0;position:relative}
.tb-av-btn::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.topbar-logout-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(226,75,74,.1);border:1.5px solid rgba(226,75,74,.3);border-radius:var(--r);font-size:.74rem;font-weight:700;color:#e24b4a;cursor:pointer;transition:background .2s,color .2s;font-family:var(--ff);flex-shrink:0}
.topbar-logout-btn:hover{background:#e24b4a;color:#fff}
.topbar-logout-btn svg{width:13px;height:13px;flex-shrink:0}
.topbar-right{flex-shrink:0}
/* 모바일에서 로그아웃 버튼 — 텍스트 숨기고 빨간 원형 아이콘 버튼으로 (항상 명확히 보임) */
@media(max-width:480px){
  .topbar-logout-btn span{display:none}
  .topbar-logout-btn{
    padding:0 !important;
    width:34px;height:34px;
    border-radius:50% !important;
    justify-content:center;
    background:#e24b4a !important;
    border-color:#e24b4a !important;
    color:#fff !important;
    flex-shrink:0;
  }
  .topbar-logout-btn svg{width:15px;height:15px}
  .topbar-right{gap:8px}
}
/* 모바일에서 입력창 focus 시 iOS Safari 자동 줌 방지 (16px 미만이면 줌됨) */
@media(max-width:768px){
  .inp,input,textarea,select{font-size:16px !important}
}
.topbar-right{display:flex;align-items:center;gap:10px}
.notif-btn,.topbar-settings-btn{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:var(--tr);cursor:pointer;background:none;border:none;font-size:1rem;font-family:var(--ff);touch-action:manipulation}
.notif-btn:hover,.topbar-settings-btn:hover{background:var(--bg2)}
.topbar-settings-btn{display:none}
.notif-rdot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--a);border-radius:50%;border:2px solid var(--bg)}
.page{display:none}
.page.active{display:block}
.pg-head{padding:28px 30px 18px;border-bottom:1px solid var(--bd)}
.pg-title{font-size:1.35rem;font-weight:800;letter-spacing:-.4px}
.pg-sub{font-size:.84rem;color:var(--t3);font-weight:500;margin-top:4px}

/* ═══ 설정 페이지 ═══ */
.settings-wrap{padding:22px 30px 120px;display:flex;flex-direction:column;gap:18px;max-width:680px}
.set-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px}
.set-card-title{font-size:.92rem;font-weight:800;color:var(--t1);margin-bottom:16px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.set-row+.set-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.set-row-label{font-size:.9rem;font-weight:700;color:var(--t1)}
.set-row-desc{font-size:.76rem;color:var(--t3);font-weight:500;margin-top:2px}
/* 토글 스위치 */
.toggle{position:relative;width:48px;height:28px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--bdB);cursor:pointer;transition:background .25s;flex-shrink:0;padding:0}
.toggle.on{background:var(--a);border-color:var(--a)}
.toggle-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .25s}
.toggle.on .toggle-knob{transform:translateX(20px)}
/* 설정 입력 필드 */
.set-field{margin-bottom:12px}
.set-lbl{display:block;font-size:.78rem;font-weight:700;color:var(--t2);margin-bottom:6px}
.set-inp{padding:11px 14px}
.set-textarea{width:100%;min-height:108px;resize:vertical;line-height:1.5}
.set-err{font-size:.76rem;color:#e24b4a;font-weight:600;min-height:18px;margin-bottom:6px}
.set-note{font-size:.76rem;color:#e24b4a;font-weight:600;margin-top:8px}
.set-ok{font-size:.76rem;color:#1d9e75;font-weight:700;min-height:18px;margin-top:8px}
/* 설정 버튼 */
.set-btn{width:100%;padding:12px;border-radius:var(--rsm);background:var(--a);color:#fff;border:none;font-size:.875rem;font-weight:700;font-family:var(--ff);cursor:pointer;transition:var(--tr)}
.set-btn:hover{background:var(--ah)}
.set-btn.danger{background:rgba(226,75,74,.1);color:#e24b4a;border:1.5px solid rgba(226,75,74,.3);margin-top:14px}
.set-btn.danger:hover{background:#e24b4a;color:#fff}
/* 앱 정보 */
.set-info-row{display:flex;justify-content:space-between;font-size:.84rem;padding:8px 0;border-bottom:1px solid var(--bd);color:var(--t2)}
.set-info-val{font-weight:700;color:var(--t1)}
.set-links{display:flex;gap:10px;margin:14px 0}
.set-link{flex:1;padding:10px;border-radius:var(--rsm);background:var(--bg2);border:1px solid var(--bd);font-size:.8rem;font-weight:700;color:var(--t2);cursor:pointer;font-family:var(--ff);transition:var(--tr)}
.set-link:hover{border-color:var(--a);color:var(--a)}

/* ═══ Skeleton 로딩 UI ═══ */
.skeleton-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.sk-row{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.sk-circle{width:34px;height:34px;border-radius:50%;background:var(--bg3);flex-shrink:0}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.sk-line{height:11px;border-radius:6px;background:var(--bg3)}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w90{width:90%}.sk-line.w100{width:100%}
.sk-line+.sk-line{margin-top:8px}
.sk-block{height:80px;border-radius:var(--rsm);background:var(--bg3);margin-top:14px}
.skeleton-card .sk-circle,.skeleton-card .sk-line,.skeleton-card .sk-block{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══ 최근 본 게시물 ═══ */
.recent-views{padding:14px 30px 0}
.recent-head{font-size:.78rem;font-weight:800;color:var(--t3);letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.recent-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.recent-list::-webkit-scrollbar{display:none}
.recent-item{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:8px 13px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;font-family:var(--ff);transition:var(--tr);max-width:200px}
.recent-item:hover{border-color:var(--a);background:var(--al);transform:translateY(-1px)}
.recent-emoji{font-size:1rem;flex-shrink:0}
.recent-title{font-size:.78rem;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ 무한 스크롤 sentinel ═══ */
.feed-sentinel{height:20px;width:100%}

/* ═══ 맨 위로 버튼 애니메이션 개선 ═══ */
#scroll-top-btn{opacity:0;transform:translateY(10px) scale(.9)}
#scroll-top-btn.show{opacity:1;transform:translateY(0) scale(1)}
#scroll-top-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 22px rgba(108,99,255,.5)}
#scroll-top-btn:active{transform:scale(.95)}
.home-top{padding:28px 30px 16px;border-bottom:1px solid var(--bd)}
.home-greet{font-size:.8rem;color:var(--t3);font-weight:600;letter-spacing:.5px;margin-bottom:3px}
.home-title{font-size:1.5rem;font-weight:800;letter-spacing:-.4px}
.home-title span{color:var(--a)}
.chips{display:flex;gap:7px;overflow-x:auto;padding:14px 30px;border-bottom:1px solid var(--bd);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:5px 13px;border-radius:var(--r);font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--tr);border:1px solid var(--bdB);color:var(--t2);background:var(--bg)}
.chip:hover,.chip.active{background:var(--a);border-color:var(--a);color:#fff}
.feed{padding:18px 30px;display:flex;flex-direction:column;gap:14px}
.pc{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px;cursor:pointer;transition:var(--tr);outline:none;-webkit-tap-highlight-color:transparent}
.pc:hover{box-shadow:var(--sh);border-color:var(--bdB);transform:translateY(-1px)}
.pc-hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pc-meta{flex:1}
.pc-author{font-size:.84rem;font-weight:700}
.pc-time{font-size:.74rem;color:var(--t3)}
.pc-tag{padding:3px 9px;border-radius:var(--r);font-size:.7rem;font-weight:700;background:var(--al);color:var(--a)}
.pc-title{font-size:.97rem;font-weight:800;margin-bottom:7px;letter-spacing:-.2px;line-height:1.4}
.pc-body{font-size:.84rem;color:var(--t2);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-thumb{width:100%;height:140px;background:var(--bg3);border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin-bottom:14px}
.pc-actions{display:flex;align-items:center;gap:12px}
.ac-btn{display:flex;align-items:center;gap:5px;color:var(--t3);font-size:.78rem;font-weight:600;padding:4px 9px;border-radius:7px;transition:var(--tr)}
.ac-btn:hover{background:var(--bg2);color:var(--t2)}
.ac-btn.liked{color:#e24b4a}
/* ⭐ 북마크 별 — 저장된 상태일 때 황금색 + 채워짐 */
.bm-btn svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1), fill .2s, stroke .2s}
.bm-btn:hover svg{transform:scale(1.15) rotate(-8deg)}
.bm-btn.bookmarked{color:#FFD54A}
.bm-btn.bookmarked:hover{color:#F0B400;background:rgba(255,213,74,.10)}
.bm-btn.bookmarked svg{filter:drop-shadow(0 1px 3px rgba(255,213,74,.45))}
/* 클릭 시 통통 튀는 애니메이션 */
.bm-btn.bm-pop svg{animation:bm-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes bm-pop{0%{transform:scale(1)}40%{transform:scale(1.45) rotate(8deg)}70%{transform:scale(.92)}100%{transform:scale(1)}}
/* 북마크 탭 카운트 배지 */
.bm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:4px;background:rgba(255,213,74,.2);color:#B8860B;font-size:.68rem;font-weight:800;border-radius:9px;transition:var(--tr)}
.ptab.active .bm-badge{background:rgba(108,99,255,.15);color:var(--a)}
body.dark .bm-badge{background:rgba(255,213,74,.18);color:#FFD54A}
body.dark .ptab.active .bm-badge{background:rgba(155,149,255,.2);color:var(--am)}
/* 북마크 빈 상태 — 친절한 안내 */
.bm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 20px;color:var(--t3)}
.bm-empty-icon{font-size:2.8rem;margin-bottom:14px;filter:grayscale(.3);opacity:.7}
.bm-empty-title{font-size:.95rem;font-weight:700;color:var(--t2);margin-bottom:6px}
.bm-empty-desc{font-size:.8rem;color:var(--t3);line-height:1.5}
/* 게시물 삭제 버튼 */
.del-btn{color:#e24b4a !important;margin-left:auto}
.del-btn:hover{background:rgba(226,75,74,.1) !important;color:#e24b4a !important}
.del-modal-btn{color:#e24b4a;border:1px solid rgba(226,75,74,.3);border-radius:var(--rxs);padding:6px 12px}
.del-modal-btn:hover{background:#e24b4a;color:#fff !important}
.my-posts-empty{text-align:center;padding:40px 0;color:var(--t3);font-size:.875rem}
.ac-btn svg{width:15px;height:15px}
.pc-views{margin-left:auto;font-size:.74rem;color:var(--t3)}
.pc-view-btn{width:100%;margin-top:12px;padding:10px;background:var(--al);color:var(--a);border:1.5px solid var(--a);border-radius:var(--rsm);font-size:.84rem;font-weight:800;cursor:pointer;transition:var(--tr);font-family:var(--ff)}
.pc-view-btn:hover{background:var(--a);color:#fff}
.pc-view-btn:active{transform:scale(0.98)}
.search-wrap{position:relative;display:flex;align-items:center;gap:9px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:13px;padding:10px 14px;margin-top:14px;transition:var(--tr)}
.search-wrap:focus-within{border-color:var(--a);background:var(--bg);box-shadow:0 0 0 3px rgba(108,99,255,.10)}
.search-wrap input{flex:1;border:none;background:none;font-size:.875rem;color:var(--t1);outline:none}
.search-wrap input::placeholder{color:var(--t3)}
/* 검색 자동완성 드롭다운 */
.search-suggest{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--bdB);border-radius:var(--rsm);box-shadow:var(--shL);z-index:200;overflow:hidden;max-height:280px;overflow-y:auto}
.suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;cursor:pointer;font-family:var(--ff);text-align:left;transition:background .15s;border-bottom:1px solid var(--bd)}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:var(--al)}
.suggest-ico{font-size:.95rem;flex-shrink:0;width:20px;text-align:center}
.suggest-text{font-size:.84rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:22px 30px}
.tc{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:20px;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.tc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:var(--tr)}
.tc:hover::before{transform:scaleX(1)}
.tc:hover{box-shadow:var(--sh);border-color:var(--bdB);transform:translateY(-2px)}
.tc.ac{border-color:var(--a);background:var(--al)}
.tc-em{font-size:1.9rem;margin-bottom:10px;line-height:1}
.tc-name{font-size:.95rem;font-weight:800;margin-bottom:3px}
.tc-cnt{font-size:.74rem;color:var(--t3)}
.tc-badge{position:absolute;top:14px;right:14px;background:var(--al);color:var(--a);font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:var(--r)}
.user-list{padding:0 30px 28px;display:flex;flex-direction:column;gap:9px}
.ur{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rsm);border:1px solid var(--bd);cursor:pointer;transition:var(--tr)}
.ur:hover{background:var(--bg2);box-shadow:var(--sh)}
.ur .info{flex:1}
.ur .unm2{font-size:.84rem;font-weight:700}
.ur .ubio{font-size:.74rem;color:var(--t3)}
.follow-btn{padding:5px 13px;border-radius:var(--r);font-size:.74rem;font-weight:700;border:1.5px solid var(--a);color:var(--a);cursor:pointer;transition:var(--tr);background:none;flex-shrink:0}
.follow-btn:hover,.follow-btn.on{background:var(--a);color:#fff}
.follow-btn.on:hover{background:var(--ah)}
.write-wrap{max-width:700px;margin:0 auto;padding:28px 30px}
.write-type-tabs{display:flex;gap:6px;margin-bottom:20px;background:var(--bg2);padding:4px;border-radius:var(--rsm)}
.wt-tab{flex:1;padding:7px;text-align:center;border-radius:var(--rxs);font-size:.82rem;font-weight:700;color:var(--t2);cursor:pointer;transition:var(--tr)}
.wt-tab.active{background:var(--bg);color:var(--a);box-shadow:var(--sh)}
.editor-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.ed-title{width:100%;border:none;border-bottom:1px solid var(--bd);padding:18px 22px;font-size:1.25rem;font-weight:800;color:var(--t1);outline:none;letter-spacing:-.3px}
.ed-title::placeholder{color:var(--t3)}
.toolbar{display:flex;align-items:center;gap:3px;padding:9px 14px;border-bottom:1px solid var(--bd);background:var(--bg2);flex-wrap:wrap}
.tb-btn{width:30px;height:30px;border-radius:var(--rxs);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:.82rem;font-weight:800;cursor:pointer;transition:var(--tr)}
.tb-btn:hover{background:var(--bdB);color:var(--t1)}
.tb-btn.on{background:var(--al);color:var(--a)}
.tb-sep{width:1px;height:18px;background:var(--bd);margin:0 3px}
.ai-assist-btn{margin-left:auto;display:flex;align-items:center;gap:5px;padding:5px 11px;background:var(--a);color:#fff;border-radius:var(--r);font-size:.74rem;font-weight:800;cursor:pointer;transition:var(--tr)}
.ai-assist-btn:hover{background:var(--ah)}
.ed-body{width:100%;min-height:300px;border:none;padding:18px 22px;font-size:.92rem;line-height:1.75;color:var(--t1);outline:none;resize:none}
.ed-body::placeholder{color:var(--t3)}
.ed-footer{padding:14px 22px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag-area{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap}
.tag-pill{display:flex;align-items:center;gap:4px;background:var(--al);color:var(--a);padding:3px 9px;border-radius:var(--r);font-size:.74rem;font-weight:700}
.tag-pill button{color:var(--a);font-size:.72rem;padding:0;line-height:1}
.tag-in{border:none;outline:none;font-size:.78rem;color:var(--t2);min-width:70px;background:none}
.tag-in::placeholder{color:var(--t3)}
.pub-btn{padding:9px 22px;background:var(--a);color:#fff;border-radius:11px;font-size:.875rem;font-weight:800;cursor:pointer;transition:var(--tr);flex-shrink:0;border:none}
.pub-btn:hover{background:var(--ah);box-shadow:0 4px 16px rgba(108,99,255,.35);transform:translateY(-1px)}
.ai-box{background:var(--al);border:1.5px dashed var(--am);border-radius:var(--rsm);padding:14px 18px;margin-top:16px;display:none}
.ai-box.on{display:block}
.ai-lbl{font-size:.72rem;font-weight:800;color:var(--a);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.ai-txt{font-size:.84rem;color:var(--t2);line-height:1.6;white-space:pre-line}
.apply-btn{margin-top:9px;padding:5px 12px;background:var(--a);color:#fff;border-radius:7px;font-size:.74rem;font-weight:800;cursor:pointer;border:none;transition:var(--tr)}
.apply-btn:hover{background:var(--ah)}
.img-upload-area{border:2px dashed var(--bdB);border-radius:var(--rsm);padding:32px;text-align:center;cursor:pointer;transition:var(--tr);margin:16px 22px 0;display:none}
.img-upload-area:hover,.img-upload-area.drag{border-color:var(--a);background:var(--al)}
.img-upload-area p{font-size:.84rem;color:var(--t2);margin-top:8px}
.img-preview{width:calc(100% - 44px);margin:12px 22px 0;border-radius:var(--rsm);object-fit:cover;max-height:200px;display:none}
.lab-wrap{padding:28px 30px}
.lab-head{margin-bottom:24px}
.lab-head h2{font-size:1.4rem;font-weight:800;letter-spacing:-.4px;margin-bottom:5px}
.lab-head p{font-size:.86rem;color:var(--t2)}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:28px}
.lab-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:22px;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.lab-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--al) 0%,transparent 60%);opacity:0;transition:var(--tr);pointer-events:none}
.lab-card:hover::after{opacity:1}
.lab-card:hover{box-shadow:var(--shL);border-color:var(--am);transform:translateY(-3px)}
.lab-card>*{position:relative;z-index:1}
.lab-ico{width:46px;height:46px;background:var(--al);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px}
.lab-name{font-size:.95rem;font-weight:800;margin-bottom:5px;letter-spacing:-.2px}
.lab-desc{font-size:.8rem;color:var(--t2);line-height:1.55;margin-bottom:14px}
.lab-meta{display:flex;align-items:center;gap:7px}
.lab-badge{font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:var(--r);letter-spacing:.3px}
.lb-new{background:#E1F5EE;color:#0F6E56}.lb-hot{background:#FAECE7;color:#993C1D}.lb-beta{background:var(--al);color:var(--a)}.lb-popular{background:#FAEEDA;color:#854F0B}
.lab-stat{font-size:.74rem;color:var(--t3);margin-left:auto}
.lab-card.featured{background:var(--a);border:none;color:#fff}
.lab-card.featured::after{display:none}
.lab-card.featured .lab-ico{background:rgba(255,255,255,.2)}
.lab-card.featured .lab-name{color:#fff}
.lab-card.featured .lab-desc{color:rgba(255,255,255,.85)}
.lab-card.featured .lab-stat{color:rgba(255,255,255,.6)}
.lab-card.featured .lab-badge{background:rgba(255,255,255,.2);color:#fff}
.chat-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.chat-head{padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.chat-head span{font-size:.86rem;font-weight:800;flex:1}
.model-sel{background:var(--bg);border:1px solid var(--bdB);border-radius:var(--rxs);padding:4px 9px;font-size:.74rem;font-weight:700;color:var(--a);cursor:pointer;outline:none;font-family:var(--ff)}
.chat-msgs{padding:18px;min-height:230px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.msg{padding:9px 13px;border-radius:13px;font-size:.84rem;line-height:1.55;max-width:84%}
.msg.u{background:var(--a);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.ai{background:var(--bg2);color:var(--t1);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--bd)}
.chat-in-row{padding:13px 15px;border-top:1px solid var(--bd);display:flex;gap:9px;align-items:center}
.chat-in{flex:1;border:1.5px solid var(--bd);border-radius:11px;padding:9px 13px;font-size:.84rem;outline:none;transition:var(--tr);color:var(--t1);background:var(--bg)}
.chat-in:focus{border-color:var(--a)}
.send-btn{width:36px;height:36px;background:var(--a);border:none;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);flex-shrink:0}
.send-btn:hover{background:var(--ah);transform:scale(1.07)}
.dot{display:inline-block;width:5px;height:5px;background:var(--t3);border-radius:50%;animation:bop 1.2s infinite;margin:0 2px}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes bop{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
.lab-panel{background:var(--bg2);border-radius:var(--rsm);padding:18px;margin-bottom:16px;border:1px solid var(--bd)}
.lab-panel h4{font-size:.875rem;font-weight:800;margin-bottom:12px}
.lab-panel textarea,.lab-panel input[type=text]{width:100%;border:1.5px solid var(--bd);border-radius:var(--rsm);padding:10px 13px;font-size:.875rem;color:var(--t1);outline:none;transition:var(--tr);resize:none;background:var(--bg)}
.lab-panel textarea:focus,.lab-panel input[type=text]:focus{border-color:var(--a)}
.lab-run-btn{margin-top:10px;padding:9px 18px;background:var(--a);color:#fff;border:none;border-radius:var(--rsm);font-size:.84rem;font-weight:800;cursor:pointer;transition:var(--tr)}
.lab-run-btn:hover{background:var(--ah)}
.lab-result{margin-top:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--rsm);font-size:.84rem;color:var(--t2);line-height:1.6;display:none;white-space:pre-line}
.lab-result.show{display:block}
.prof-wrap{max-width:660px;margin:0 auto;padding:28px 30px 120px}
.prof-cover{width:100%;height:130px;background:linear-gradient(135deg,var(--a) 0%,var(--am) 50%,#C4C0FF 100%);border-radius:var(--r);margin-bottom:-36px;position:relative;overflow:hidden}
.prof-cover::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E")}
.prof-info{padding:0 22px 22px;position:relative}
.prof-av-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:11px}
.edit-btn{padding:7px 16px;border:1.5px solid var(--bdB);border-radius:var(--r);font-size:.8rem;font-weight:700;color:var(--t2);cursor:pointer;background:var(--bg);transition:var(--tr)}
.edit-btn:hover{border-color:var(--a);color:var(--a)}
.prof-name{font-size:1.35rem;font-weight:800;letter-spacing:-.4px;margin-bottom:3px}
.prof-hdl{font-size:.84rem;color:var(--t3);margin-bottom:9px}
.prof-bio{font-size:.84rem;color:var(--t2);line-height:1.6;margin-bottom:12px;cursor:pointer}
.prof-bio:hover{color:var(--t1)}
.prof-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ptag{padding:3px 9px;background:var(--al);color:var(--a);border-radius:var(--r);font-size:.72rem;font-weight:700;cursor:pointer;transition:var(--tr)}
.ptag:hover{background:var(--a);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stat-box{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rsm);padding:13px;text-align:center;cursor:pointer;transition:var(--tr)}
.stat-box:hover{border-color:var(--a);background:var(--al)}
.stat-box .snum{font-size:1.35rem;font-weight:900;color:var(--a);letter-spacing:-.5px}
.stat-box .slbl{font-size:.72rem;color:var(--t3);font-weight:600}
.ptabs{display:flex;border-bottom:1px solid var(--bd);margin-bottom:18px}
.ptab{flex:1;text-align:center;padding:11px;font-size:.84rem;font-weight:700;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr)}
.ptab.active{color:var(--a);border-bottom-color:var(--a)}
.usage-card{background:var(--bg);border:1px solid var(--bd);border-radius:var(--rsm);padding:16px;margin-bottom:10px}
.usage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.usage-top .mname{font-size:.84rem;font-weight:800}
.usage-top .ucnt{font-size:.74rem;color:var(--t3)}
.pbar{height:5px;background:var(--bg3);border-radius:var(--r);overflow:hidden}
.pfill{height:100%;border-radius:var(--r);transition:width .8s cubic-bezier(.4,0,.2,1)}
.edit-field{margin-bottom:14px}
.edit-field label{display:block;font-size:.8rem;font-weight:700;color:var(--t2);margin-bottom:5px}
.edit-field input,.edit-field textarea{width:100%;border:1.5px solid var(--bdB);border-radius:var(--rsm);padding:10px 13px;font-size:.9rem;color:var(--t1);outline:none;transition:var(--tr);background:var(--bg)}
.edit-field input:focus,.edit-field textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.10)}
.edit-field textarea{resize:none;height:80px}
/* New edit inputs */
.edit-inp{width:100%;border:1.5px solid var(--bdB);border-radius:var(--rsm);padding:10px 13px;font-size:.875rem;color:var(--t1);outline:none;transition:var(--tr);background:var(--bg);font-family:var(--ff)}
.edit-inp:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.10)}
.edit-inp.err{border-color:#e24b4a;box-shadow:0 0 0 3px rgba(226,75,74,.10)}
textarea.edit-inp{resize:none;display:block}
.edit-counter{position:absolute;right:10px;bottom:8px;font-size:.68rem;color:var(--t3);font-weight:600;pointer-events:none}
.edit-err{font-size:.72rem;color:#e24b4a;margin-top:4px;display:none}
.edit-err.show{display:block}
.cover-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:var(--tr)}
.cover-swatch:hover{transform:scale(1.15);border-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cover-swatch.active{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.25);transform:scale(1.1)}
#cover-colors.open{display:block!important}
#emoji-picker.open{display:block!important}
.emo-opt{font-size:1.4rem;cursor:pointer;padding:4px;border-radius:7px;transition:var(--tr);display:inline-block;line-height:1}
.emo-opt:hover{background:var(--bg3);transform:scale(1.2)}
.emo-opt.reset-emo{font-size:.72rem;font-weight:700;color:var(--t3);vertical-align:middle;padding:5px 8px;border:1px solid var(--bd);border-radius:var(--r);font-family:var(--ff)}
.save-btn{width:100%;padding:10px;background:var(--a);color:#fff;border:none;border-radius:var(--rsm);font-size:.9rem;font-weight:800;cursor:pointer;transition:var(--tr)}
.save-btn:hover{background:var(--ah)}
.post-detail-img{width:100%;height:200px;background:var(--bg3);border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:4rem;margin-bottom:18px}
.post-detail-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--bd)}
.post-detail-body{font-size:.9rem;color:var(--t2);line-height:1.8;margin-bottom:20px;white-space:pre-line}
.post-detail-actions{display:flex;gap:10px;padding:14px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin-bottom:20px}
.post-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:var(--rxs);font-size:.82rem;font-weight:700;color:var(--t2);transition:var(--tr);border:1px solid var(--bd);cursor:pointer}
.post-action-btn:hover{background:var(--bg2);color:var(--t1)}
.post-action-btn.liked{color:#e24b4a;border-color:rgba(226,75,74,.2);background:rgba(226,75,74,.05)}
.post-action-btn svg{width:15px;height:15px}
.cmt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cmt-head h4{font-size:.9rem;font-weight:800}
.cmt{display:flex;gap:10px;margin-bottom:14px}
.cmt-body{flex:1}
.cmt-author{font-size:.8rem;font-weight:700;margin-bottom:3px}
.cmt-text{font-size:.84rem;color:var(--t2);line-height:1.55}
.cmt-time{font-size:.72rem;color:var(--t3);margin-top:3px}
.news-section{padding:14px 16px 6px;border-bottom:1px solid var(--bd);overflow:hidden}
.news-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.news-section-head h3{font-size:.86rem;font-weight:800;color:var(--t1)}
.news-section-head span{font-size:.72rem;color:var(--a);cursor:pointer;font-weight:700;white-space:nowrap}
.news-cards{display:flex;gap:8px;overflow-x:auto;overflow-y:visible;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}
.news-cards::-webkit-scrollbar{display:none}
.news-card{min-width:170px;max-width:170px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rsm);padding:10px;cursor:pointer;transition:var(--tr);flex-shrink:0;box-sizing:border-box}
.news-card:hover{border-color:var(--a)}
.news-card-tag{font-size:.64rem;font-weight:800;color:var(--a);background:var(--al);padding:2px 6px;border-radius:var(--r);display:inline-block;margin-bottom:5px}
.news-card-title{font-size:.78rem;font-weight:700;color:var(--t1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.news-card-time{font-size:.66rem;color:var(--t3);margin-top:5px}
.hot-section{padding:14px 16px 6px;overflow:hidden}
.hot-section-head{font-size:.86rem;font-weight:800;color:var(--t1);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.hot-list{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.hot-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rsm);cursor:pointer;transition:var(--tr);box-sizing:border-box}
.hot-item:hover{border-color:var(--a)}
.hot-rank{font-size:.72rem;font-weight:900;color:var(--a);min-width:16px;flex-shrink:0}
.hot-rank.top{color:#FF6B6B}
.hot-info{flex:1;min-width:0;overflow:hidden}
.hot-title{font-size:.8rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-meta{font-size:.66rem;color:var(--t3);margin-top:2px}
.tool-chips{display:flex;gap:7px;padding:10px 16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--bd);-webkit-overflow-scrolling:touch;box-sizing:border-box;width:100%}
.tool-chips::-webkit-scrollbar{display:none}
.tool-chip{flex-shrink:0;padding:4px 12px;border-radius:var(--r);font-size:.76rem;font-weight:700;border:1.5px solid var(--bd);background:var(--bg);color:var(--t2);cursor:pointer;transition:var(--tr);white-space:nowrap}
.feed-sort-btn{padding:5px 14px;border-radius:var(--r);font-size:.74rem;font-weight:700;border:1.5px solid var(--bd);background:var(--bg);color:var(--t3);cursor:pointer;transition:var(--tr)}
.feed-sort-btn.on{border-color:var(--a);background:var(--al);color:var(--a)}
.tool-chip:hover,.tool-chip.active{background:var(--a);color:#fff;border-color:var(--a)}
.cmt-like{font-size:.72rem;color:var(--t3);cursor:pointer;margin-top:3px;display:inline-block;margin-left:10px}
.cmt-like:hover{color:#e24b4a}
/* ═══ 편집 버튼 스타일 ═══ */
.edit-btn{color:var(--a) !important}
.edit-btn:hover{background:var(--al) !important;color:var(--ah) !important}
.del-btn{color:#e24b4a !important}
.del-btn:hover{background:rgba(226,75,74,.1) !important;color:#e24b4a !important}
.del-modal-btn{color:#e24b4a !important}
.del-modal-btn:hover{background:rgba(226,75,74,.1) !important}
/* 편집 모달 전용 스타일 */
.edit-post-field{margin-bottom:14px}
.edit-post-lbl{display:block;font-size:.8rem;font-weight:700;color:var(--t2);margin-bottom:6px}
.edit-post-inp{width:100%;padding:11px 14px;border:1.5px solid var(--bdB);border-radius:var(--rsm);font-size:.9rem;color:var(--t1);background:var(--bg);outline:none;transition:var(--tr)}
.edit-post-inp:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.12)}
.edit-post-ta{width:100%;min-height:180px;resize:vertical;padding:11px 14px;border:1.5px solid var(--bdB);border-radius:var(--rsm);font-size:.875rem;color:var(--t1);background:var(--bg);outline:none;transition:var(--tr);line-height:1.6;font-family:var(--ff)}
.edit-post-ta:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(108,99,255,.12)}
.edit-post-footer{display:flex;gap:10px;margin-top:6px}
.edit-save-btn{flex:1;padding:12px;background:var(--a);color:#fff;border:none;border-radius:var(--rsm);font-size:.9rem;font-weight:800;cursor:pointer;transition:var(--tr);font-family:var(--ff)}
.edit-save-btn:hover{background:var(--ah);box-shadow:0 4px 14px rgba(108,99,255,.3)}
.edit-cancel-btn{padding:12px 18px;background:var(--bg2);color:var(--t2);border:1.5px solid var(--bd);border-radius:var(--rsm);font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--tr);font-family:var(--ff)}
.edit-cancel-btn:hover{border-color:var(--a);color:var(--t1)}
.cmt-in-row{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding-top:14px;border-top:1px solid var(--bd)}
.cmt-in{flex:1;border:1.5px solid var(--bd);border-radius:var(--rsm);padding:9px 13px;font-size:.84rem;outline:none;transition:var(--tr);resize:none;min-height:60px;color:var(--t1);background:var(--bg);font-family:var(--ff)}
.cmt-in:focus{border-color:var(--a)}
.cmt-submit{padding:9px 16px;background:var(--a);color:#fff;border:none;border-radius:var(--rsm);font-size:.8rem;font-weight:800;cursor:pointer;transition:var(--tr);flex-shrink:0;align-self:flex-end}
.cmt-submit:hover{background:var(--ah)}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 10px;border:1px solid var(--bd);border-radius:var(--rsm);cursor:pointer;transition:var(--tr)}
.share-opt:hover{border-color:var(--a);background:var(--al)}
.share-opt-ico{font-size:1.6rem}
.share-opt-lbl{font-size:.74rem;font-weight:700;color:var(--t2)}
.share-url-row{display:flex;gap:8px;align-items:center;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rsm);padding:10px 14px}
.share-url-row span{flex:1;font-size:.8rem;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{padding:5px 12px;background:var(--a);color:#fff;border:none;border-radius:var(--rxs);font-size:.74rem;font-weight:700;cursor:pointer;transition:var(--tr);flex-shrink:0}
.copy-btn:hover{background:var(--ah)}
.notif-panel{position:fixed;top:60px;right:20px;width:320px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shL);z-index:4000;display:none;overflow:hidden;max-height:80vh;overflow-y:auto}
.notif-panel.open{display:block}
.notif-panel-head{padding:14px 18px 10px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg)}
.notif-panel-head h4{font-size:.9rem;font-weight:800}
.mark-all{font-size:.74rem;color:var(--a);font-weight:700;cursor:pointer}
.mark-all:hover{text-decoration:underline}
.notif-item{display:flex;gap:10px;padding:12px 18px;transition:var(--tr);cursor:pointer;border-bottom:1px solid var(--bd)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg2)}
.notif-item.unread{background:var(--al)}
.notif-item.unread:hover{background:#e8e7ff}
.notif-ico{font-size:1.3rem;flex-shrink:0;margin-top:2px}
.notif-txt{font-size:.82rem;color:var(--t1);line-height:1.45;margin-bottom:2px}
.notif-txt strong{font-weight:700}
.notif-time{font-size:.72rem;color:var(--t3)}
.notif-ndot{width:7px;height:7px;background:var(--a);border-radius:50%;margin-top:6px;flex-shrink:0}
.fl-list{display:flex;flex-direction:column;gap:8px}
.fl-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.fl-item:last-child{border-bottom:none}
.fl-info{flex:1}
.fl-nm{font-size:.84rem;font-weight:700}
.fl-hdl{font-size:.74rem;color:var(--t3)}
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--bd);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:100}
.bnav-inner{display:flex;align-items:center;justify-content:space-around}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 3px;border-radius:11px;cursor:pointer;transition:var(--tr);color:var(--t3);position:relative}
.tb.active{color:var(--a)}
.tb.active .tb-iw{background:var(--al)}
.tb-iw{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.tb.center .tb-iw{background:var(--a);color:#fff;box-shadow:0 4px 14px rgba(108,99,255,.4);width:42px;height:42px;border-radius:13px;margin-top:-7px}
.tb.center{color:var(--a)}
.tb-lbl{font-size:.6rem;font-weight:700;letter-spacing:.3px}
.tb-dot{position:absolute;top:3px;right:calc(50% - 14px);width:5px;height:5px;background:var(--a);border-radius:50%;border:1.5px solid var(--bg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.mock-acc{display:flex;align-items:center;gap:14px;padding:14px 24px;cursor:pointer;transition:background .15s}
.mock-acc:hover{background:var(--bg2)}
.mock-acc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;flex-shrink:0}
.mock-acc-info{flex:1;min-width:0}
.mock-acc-name{font-size:.875rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-acc-em{font-size:.76rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.mock-acc-add:hover .mock-acc-av{border-color:var(--a);color:var(--a)}
.page.active .pc{animation:fadeUp .32s cubic-bezier(.4,0,.2,1) both}
.page.active .pc:nth-child(1){animation-delay:0ms}
.page.active .pc:nth-child(2){animation-delay:55ms}
.page.active .pc:nth-child(3){animation-delay:110ms}
.page.active .pc:nth-child(4){animation-delay:165ms}
@media(max-width:768px){
  /* ── 레이아웃 핵심 ── */
  .sidebar{display:none !important}
  .main{margin-left:0 !important;width:100% !important;max-width:100% !important;padding-bottom:80px;box-sizing:border-box}
  .topbar .s-logo{display:flex !important}
  .bnav{display:block !important}

  /* ── 홈 ── */
  .home-top,.pg-head{padding:16px 16px 12px}
  .home-title{font-size:1.4rem}
  .chips{padding:10px 16px;gap:7px}
  .chip{font-size:.78rem;padding:5px 13px}
  .feed{padding:12px 16px}

  /* ── 뉴스/툴/인기 ── */
  .news-section,.hot-section{padding:12px 16px 6px}
  .tool-chips{padding:8px 16px}
  .news-cards{padding-bottom:4px}

  /* ── 탐색 ── */
  .topic-grid{padding:14px 16px;grid-template-columns:repeat(2,1fr);gap:10px}
  .user-list{padding:0 16px 16px}

  /* ── 글쓰기/랩/설정/프로필 ── */
  .write-wrap,.lab-wrap,.settings-wrap{padding:16px 16px 140px}
  .prof-wrap{padding:16px 16px 140px}
  .lab-grid{grid-template-columns:1fr}
  .stats-grid{gap:7px}

  /* ── 기타 ── */
  .notif-panel{right:10px;width:calc(100vw - 20px);top:56px}
  .settings-wrap{max-width:none}
  .set-card{padding:18px 16px;border-radius:14px}
  .set-row{align-items:flex-start;gap:12px}
  .topbar-settings-btn{display:flex}
  .toggle{width:52px;height:32px;min-width:52px;min-height:32px;touch-action:manipulation}
  .toggle-knob{width:26px;height:26px}
  .toggle.on .toggle-knob{transform:translateX(22px)}
}
@media(max-width:860px){.auth-left{display:none}.auth-right{width:100%;padding:40px 26px}}
@media(max-width:480px){
  .auth-right{padding:30px 18px}
  .two-col{flex-direction:column;gap:0}
  .topic-grid{grid-template-columns:1fr !important}
  .share-grid{grid-template-columns:repeat(2,1fr)}
  .main{margin-left:0 !important;width:100% !important}
  .sidebar{display:none !important}
  .home-title{font-size:1.25rem}
  .chips{gap:6px}
  .chip{font-size:.74rem;padding:4px 11px}
  .pc{padding:14px 12px}
  .pc-title{font-size:.9rem}
  .news-card{min-width:150px;max-width:150px}
}

/* ═══ 320px 초소형 모바일 대응 (iPhone SE 1세대, 갤럭시 폴드 외부 등) ═══ */
@media(max-width:360px){
  html{font-size:14px}
  .auth-right{padding:24px 14px}
  .home-top,.pg-head{padding:14px 14px 12px}
  .chips{padding:9px 14px}
  .feed{padding:12px 14px}
  .pc{padding:16px 14px}
  .pc-title{font-size:.9rem}
  .topic-grid,.user-list,.write-wrap,.lab-wrap{padding-left:14px;padding-right:14px}
  .news-section,.hot-section{padding-left:14px;padding-right:14px}
  .tool-chips{padding-left:14px;padding-right:14px}
  .news-card{min-width:155px;max-width:155px}
  .settings-wrap{padding-left:14px;padding-right:14px}
  .prof-wrap{padding:14px 14px 130px}
  /* ═══ 모바일 — 모달을 bottom sheet로 (아래에서 위로 슬라이드) ═══ */
  .modal-bg{align-items:flex-end;padding:0}
  .modal{
    margin:0;
    max-width:100%;
    width:100%;
    max-height:88vh;
    border-radius:22px 22px 0 0;       /* 상단만 둥글게 */
    transform:translateY(100%);         /* 아래에서 올라옴 */
    padding-bottom:env(safe-area-inset-bottom, 0px);  /* 홈 인디케이터 대응 */
  }
  .modal-bg.open .modal{transform:translateY(0)}
  /* 시트 핸들바 (스와이프 힌트) */
  .modal::before{
    content:'';
    display:block;
    width:40px;height:4px;
    background:var(--bd);
    border-radius:4px;
    margin:10px auto 4px;
    flex-shrink:0;
  }
}

/* ═══ 성능 최적화 — 모바일에서 backdrop-filter 비활성화 (GPU 부담 감소) ═══ */
@media(max-width:768px){
  .modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,16,30,.75)}
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}
  .bnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.99)}
}

/* ═══ iOS Safari 안전 영역(노치·홈 인디케이터) 대응 ═══ */
.bnav{padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
#auth-overlay{padding-top:env(safe-area-inset-top, 0px)}
.topbar{padding-top:max(14px, env(safe-area-inset-top, 14px))}

/* ═══ overflow 안전 처리 — 모든 길이 텍스트가 화면 안에 들어오도록 ═══ */
body{overflow-x:hidden;max-width:100vw}
.pc-title,.pc-body,.pc-author,.unm,.tc-name,.lab-name,.prof-name{word-break:break-word;overflow-wrap:break-word}
input,textarea{max-width:100%}

/* ═══ 접근성 — 키보드 포커스 표시 ═══ */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--a);
  outline-offset:2px;
  border-radius:6px;
}
/* 마우스 클릭 시는 outline 안 보임 */
button:focus:not(:focus-visible){outline:none}

/* ═══ 모션 민감성 — 사용자가 OS에서 모션 줄이기 설정 시 애니메이션 최소화 ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══ 스크롤바 ═══ */
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bdB);border-radius:var(--rxs)}