:root{
        --bg:#070f24;--bg-1:#040a18;--surface:#0e1c3a;--surface-2:#15284d;
        --line:rgba(150,180,230,.12);--line-2:rgba(150,180,230,.2);--line-hot:rgba(255,200,70,.42);
        --text:#e7edff;--muted:#aebdd8;--dim:#8494b4;--red:#cf982e;--red-2:#ffe487;--red-soft:#ffe487;--blue:#aac7fe;--gold:#ffe487;
        --display:"Space Grotesk","Noto Sans KR",system-ui,sans-serif;--mono:"JetBrains Mono",monospace;--body:"Noto Sans KR","Noto Sans JP","Noto Sans TC","Noto Sans Thai","Noto Sans",system-ui,sans-serif;
        --r:14px;color-scheme:dark;
      }
      *{box-sizing:border-box;}
      html{font-size:calc(17px * var(--ui-scale, 1));overflow-x:clip;}
      body{margin:0;min-width: 240px;background:var(--bg);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;}
      .backdrop{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(1000px 600px at 78% -10%,rgba(255,200,70,.13),transparent 60%),radial-gradient(800px 500px at 8% 6%,rgba(80,130,240,.10),transparent 55%),var(--bg);}
      a{color:inherit;text-decoration:none;}
      .muted{color:var(--dim);}
      .wrap{width:min(100% - clamp(1.5rem,6vw,6rem),1100px);margin-inline:auto;}
      img{max-width:100%;}

      /* utility + header */
      .utility{border-bottom:1px solid var(--line);background:var(--bg-1);}
      .utility-inner{display:flex;align-items:center;gap:1rem;height:36px;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
      .utility a{color:var(--muted);}.utility a:hover{color:var(--red);}.utility .sp{margin-left:auto;}
      /* 헤더 레이아웃(header.site/.site-inner/.brand/.site-nav/.hdr-right)은 nav.js 공통 스타일이 전담.
         여기서 중복 정의하면 헤더 정렬이 어긋나므로 제거. */
      #authbox{display:flex;align-items:center;gap:.6rem;}
      #notifybox{position:relative;}
      .notif-btn{position:relative;background:none;border:0;color:var(--text);font-size:1.2rem;cursor:pointer;line-height:1;padding:.2rem;}
      .notif-badge{position:absolute;top:-2px;right:-4px;background:#ff5b5b;color:#fff;font-family:var(--mono);font-size:.58rem;font-weight:700;border-radius:999px;padding:.05rem .3rem;min-width:1.1em;text-align:center;}
      .notif-pop{position:absolute;right:0;top:140%;width:min(22rem,calc(100vw - 2rem));max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line-hot);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:60;}
      .notif-item{display:grid;gap:.2rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);}
      .notif-item:hover{background:rgba(255,255,255,.04);}
      .notif-item.unread{background:rgba(255,200,70,.08);}
      .ni-line{font-size:.86rem;color:var(--text);}
      .ni-sub{font-size:.78rem;color:var(--dim);}
      .notif-empty{padding:1.2rem;color:var(--dim);font-size:.86rem;text-align:center;}
      .who{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text);}

      /* buttons */
      .btn{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:.7rem 1.2rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;transition:border-color .15s,box-shadow .2s,transform .1s,background .15s;}
      .btn.sm{padding:.5rem .9rem;font-size:.78rem;}
      .btn.primary{background:linear-gradient(180deg,var(--red-2),var(--red));border-color:var(--red);color:#1a1400;box-shadow:0 8px 30px rgba(255,200,70,.35);}
      .btn.primary:hover{box-shadow:0 12px 40px rgba(255,200,70,.5);transform:translateY(-1px);}
      .btn.ghost:hover{border-color:var(--red-soft);background:rgba(255,255,255,.06);}
      .btn:disabled{opacity:.5;cursor:not-allowed;}

      .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:700;color:#1a1400;background:linear-gradient(145deg,var(--red-2),var(--red));font-size:1rem;}
      .avatar.sm{width:26px;height:26px;font-size:.78rem;}
      .avatar.lg{width:84px;height:84px;font-size:2rem;}
      .avatar.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent;}
      .who{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text);background:none;border:0;cursor:pointer;font-family:inherit;padding:.2rem;border-radius:999px;}
      .opname{color:#ff5b5b!important;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;}
      .opname *{color:#ff5b5b!important;}
      .opbadge{font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.06em;background:#ff5b5b;color:#fff!important;border-radius:999px;padding:.1rem .42rem;font-weight:700;}
      .who:hover{color:var(--red-soft);}
      .pf-row{display:flex;align-items:center;gap:1rem;}
      .pf-row .pf-actions{display:flex;flex-direction:column;gap:.4rem;}
      #profileDialog{width:min(34rem,calc(100vw - 2rem));}
      .pf-email{font-size:.85rem;color:var(--muted);margin:0;}
      .pf-email b{color:var(--blue);}
      .pf-activity{border-top:1px solid var(--line);padding-top:1rem;margin-top:.4rem;}
      .pf-tabs{display:flex;gap:.4rem;margin-bottom:.6rem;}
      .pf-tabs button{font-family:var(--mono);font-size:.78rem;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer;}
      .pf-tabs button.on{background:rgba(255,200,70,.14);border-color:var(--line-hot);color:var(--gold);font-weight:700;}
      .pf-list{max-height:16rem;overflow:auto;display:grid;gap:.3rem;}
      .pf-list a{display:grid;gap:.15rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;}
      .pf-list a:hover{border-color:var(--line-hot);background:rgba(255,255,255,.03);}
      .pf-list .t{font-size:.86rem;color:var(--text);}
      .pf-list .s{font-size:.78rem;color:var(--dim);}

      main{padding:clamp(1.4rem,4vw,2.6rem) 0 4rem;}
      .card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);}
      .empty{padding:2rem;text-align:center;color:var(--dim);}
      .loading-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:3.2rem 2rem;color:var(--dim);}
      .loading-block .spinner{width:2rem;height:2rem;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin .7s linear infinite;}
      @keyframes spin{to{transform:rotate(360deg);}}

      /* category bar */
      .catbar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);}
      .catbar a{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);}
      .catbar a:hover{color:var(--text);border-color:var(--line-hot);}
      .catbar a.on{background:var(--red);border-color:var(--red);color:#1a1400;font-weight:700;}
      .catbar{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line);}
      .catbar a{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted);padding:.55rem .9rem;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;margin-bottom:-1px;transition:color .15s,background .15s,border-color .15s;}
      .catbar a:hover{color:var(--text);background:rgba(255,200,70,.06);}
      .catbar a.on{color:var(--gold);background:rgba(255,200,70,.12);border-color:var(--line-hot);}
      .subcatbar{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.6rem 0 1.2rem;}
      .subcatbar button{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;cursor:pointer;}
      .subcatbar button:hover{color:var(--text);border-color:var(--line-hot);}
      .subcatbar button.on{background:rgba(255,200,70,.14);border-color:var(--line-hot);color:var(--gold);font-weight:700;}
      .subtag{display:inline-block;font-family:var(--mono);font-size:.78rem;color:var(--gold);background:rgba(255,200,70,.12);border-radius:5px;padding:.05rem .35rem;margin-right:.15rem;vertical-align:middle;}

      /* list head */
      .list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap;}
      .list-head h1{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.3rem);letter-spacing:-.02em;margin:0 0 .25rem;}
      .list-head p{margin:0;font-size:.92rem;}
      .toolbar{display:flex;gap:.8rem;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;}
      .search{display:flex;align-items:center;gap:.5rem;flex:1;min-width:14rem;border:1px solid var(--line);border-radius:999px;background:var(--bg-1);padding:.1rem .9rem;}
      .search span{color:var(--dim);font-size:1.1rem;}
      .search input{flex:1;border:0;background:transparent;color:var(--text);font:inherit;padding:.7rem 0;outline:none;}
      .sort{display:flex;gap:.3rem;}
      .sort button{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.6rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;}
      .sort button.on{color:var(--text);border-color:var(--line-hot);background:rgba(255,200,70,.08);}
      .page-size-sel{font-family:var(--mono);font-size:.78rem;color:var(--muted);background:var(--bg-1);border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem;cursor:pointer;outline:none;}
      .page-size-sel option{background:var(--surface);color:var(--text);}

      .more-wrap{display:flex;justify-content:center;margin-top:1.3rem;}

      /* composer */
      .composer{padding:clamp(1.3rem,3vw,2rem);}
      .composer h1{font-family:var(--display);font-weight:700;font-size:1.7rem;margin:0 0 1.3rem;letter-spacing:-.02em;}
      .fld{display:grid;gap:.45rem;margin-bottom:1rem;color:var(--muted);font-size:.85rem;}
      .fld input,.fld select{border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text);padding:.8rem .9rem;font:inherit;outline:none;}
      .fld input:focus,.fld select:focus{border-color:var(--red);}
      .editor{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-1);}
      .etoolbar{display:flex;align-items:center;gap:.2rem;padding:.4rem;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;}
      .etoolbar button{min-width:2.2rem;height:2.2rem;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:.85rem;}
      .etoolbar button:hover{color:var(--text);background:rgba(255,255,255,.06);}
      .etoolbar #previewToggle{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:0 .7rem;min-width:auto;}
      .etoolbar #previewToggle.on{color:var(--red-soft);border-color:var(--line-hot);}
      .etoolbar .spacer{flex:1;}
      .epanes{display:grid;grid-template-columns:1fr 1fr;min-height:18rem;}
      .epanes.nopreview{grid-template-columns:1fr;}
      .epanes.nopreview .epreview{display:none;}
      #cBody{border:0;border-right:1px solid var(--line);background:transparent;color:var(--text);padding:1rem;font:inherit;resize:vertical;min-height:18rem;outline:none;}
      #cBody.drag{box-shadow:inset 0 0 0 2px var(--red);}
      .epreview{padding:1rem;overflow:auto;border-left:1px solid var(--line);}
      .hint{margin:0;padding:.6rem 1rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--dim);border-top:1px solid var(--line);background:var(--surface);}
      .img-count{display:inline-block;margin-left:.8rem;font-weight:700;color:var(--muted);transition:color .2s;}
      .composer-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;}
      .msg{font-family:var(--mono);font-size:.78rem;color:var(--gold);margin:.8rem 0 0;min-height:1em;}

      /* detail */
      .back{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;}
      .back:hover{color:var(--red);}
      .post{padding:clamp(1.4rem,3vw,2.2rem);}
      .pill{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-soft);background:rgba(255,200,70,.12);border-radius:999px;padding:.35rem .75rem;}
      .post h1{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;margin:1rem 0 1.2rem;line-height:1.15;overflow-wrap:anywhere;}
      .post-meta{display:flex;align-items:center;gap:.7rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);}
      .post-meta .author-link{display:flex;align-items:center;gap:.55rem;}
      .post-meta strong{display:block;font-size:.95rem;}.post-meta small{color:var(--dim);font-size:.8rem;}
      .post-body{padding:1.6rem 0;font-size:1.05rem;line-height:1.8;}
      .post-foot{padding-top:1.2rem;border-top:1px solid var(--line);}
      .likebtn{font-family:var(--mono);font-size:.85rem;font-weight:700;padding:.7rem 1.4rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;}
      .likebtn:hover{border-color:var(--red);color:var(--red-soft);}
      .likebtn.on{background:rgba(255,200,70,.14);border-color:var(--red);color:var(--red);}

      /* markdown body */
      .post-body h1,.post-body h2,.post-body h3,.epreview h1,.epreview h2,.epreview h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:1.2em 0 .5em;}
      .post-body h1{font-size:1.6rem;}.post-body h2{font-size:1.35rem;}.post-body h3{font-size:1.15rem;}
      .post-body p,.epreview p{margin:0 0 1em;}
      .post-body a,.epreview a{color:var(--blue);text-decoration:underline;}
      .post-body code,.epreview code{font-family:var(--mono);font-size:.88em;background:var(--bg-1);border:1px solid var(--line);border-radius:5px;padding:.1em .4em;}
      .md-pre{background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:1rem;overflow:auto;}
      .md-pre code{border:0;background:transparent;padding:0;}
      .post-body blockquote,.epreview blockquote{margin:0 0 1em;padding:.5em 1em;border-left:3px solid var(--red);background:rgba(255,200,70,.06);color:var(--muted);}
      .md-img{border-radius:10px;border:1px solid var(--line);margin:.6em 0;}
      .post-body ul,.epreview ul{padding-left:1.3em;margin:0 0 1em;}
      .post-body hr,.epreview hr{border:0;border-top:1px solid var(--line);margin:1.4em 0;}

      /* comments — 패널(카드) 위에 올린다(배경 이미지가 댓글 뒤로 비치지 않게) */
      .comments{margin-top:1.6rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:clamp(1rem,2.5vw,1.5rem);}
      .comments h2{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 1rem;}
      .cmt{display:flex;gap:.8rem;padding:1.1rem 0;border-bottom:1px solid var(--line);}
      .cmt-main{flex:1;min-width:0;}
      .cmt-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem;}
      .cmt-top strong{font-size:.9rem;}.cmt-top small{color:var(--dim);font-size:.78rem;}
      .link-del{margin-left:auto;background:none;border:0;color:var(--dim);font-size:.78rem;cursor:pointer;}
      .link-del:hover{color:var(--red);}
      .link-reply{background:none;border:0;color:var(--blue);font-size:.78rem;cursor:pointer;}
      .link-reply:hover{color:var(--gold);}
      .cmt-top .link-reply + .link-del{margin-left:0;}
      .cmt.reply{margin-left:2.2rem;border-left:2px solid var(--line-hot);padding-left:.9rem;}
      .cmt.reply::before{content:"↳";color:var(--dim);margin-right:.2rem;}
      .reply-form{margin:.2rem 0 .8rem 3rem;display:grid;gap:.5rem;}
      .reply-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text);padding:.7rem;font:inherit;resize:vertical;outline:none;}
      .reply-form .rf-act{display:flex;gap:.4rem;justify-content:flex-end;}
      .cmt-body{color:var(--text);font-size:.96rem;}
      .cmt-form{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.1rem 0 0;margin-top:1.2rem;}
      .cmt-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text);padding:.8rem;font:inherit;resize:vertical;outline:none;}
      .cmt-form textarea:focus{border-color:var(--red);}
      .cmt-actions{display:flex;justify-content:flex-end;margin-top:.7rem;}
      .login-cta{text-align:center;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;}

      /* dialog + toast */
      dialog{width:min(28rem,calc(100vw - 2rem));border:1px solid var(--line-hot);background:var(--surface);color:var(--text);border-radius:var(--r);padding:0;}
      dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px);}
      .login-form{display:grid;gap:1rem;padding:1.8rem;}
      .login-form h2{font-family:var(--display);font-weight:600;font-size:1.4rem;margin:0;}
      .login-form label{display:grid;gap:.4rem;color:var(--muted);font-size:.85rem;}
      .login-form input{border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text);padding:.8rem;font:inherit;outline:none;}
      .login-form input:focus{border-color:var(--red);}
      .login-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;}
      #toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);background:var(--surface-2);border:1px solid var(--line-hot);border-radius:999px;padding:.7rem 1.3rem;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;}
      #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

      @media (max-width:780px){
        .site-nav{display:none;}
        .thead,.trow{grid-template-columns:1fr 3rem 4rem;}
        .thead span:nth-child(4),.trow .c:nth-child(4){display:none;}
        .epanes{grid-template-columns:1fr;}
        .epanes .epreview{display:none;}
        #cBody{border-right:0;}
      }
    .md-yt{position:relative;padding-top:56.25%;margin:.8em 0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;} .md-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
    .ql-toolbar.ql-snow{border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface);}
    .ql-container.ql-snow{border:1px solid var(--line);border-radius:0 0 12px 12px;background:var(--bg-1);font-family:var(--body);font-size:1rem;}
    .ql-editor{min-height:18rem;color:var(--text);}
    .ql-editor.ql-blank::before{color:var(--dim);font-style:normal;left:1rem;}
    .ql-snow .ql-stroke{stroke:var(--muted);} .ql-snow .ql-fill{fill:var(--muted);} .ql-snow .ql-picker{color:var(--muted);}
    .ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke{stroke:var(--red-soft);}
    .ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--red);}
    .ql-snow .ql-picker-options{background:var(--surface-2);border-color:var(--line);}
    .ql-editor img{max-width:100%;border-radius:10px;} .ql-editor blockquote{border-left:3px solid var(--red);color:var(--muted);}
    .ql-editor .ql-video{width:100%;aspect-ratio:16/9;border-radius:10px;}
    .ql-snow .ql-tooltip{background:var(--surface-2);color:var(--text);border-color:var(--line);box-shadow:0 6px 24px rgba(0,0,0,.5);z-index:60;}
    .ql-snow .ql-tooltip input[type=text]{background:var(--bg-1);color:var(--text);border:1px solid var(--line);}
    .post-body img{max-width:100%;border-radius:10px;} .post-body iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;}
    /* 표(붙여넣기 포함) — 다크 테마에서 항상 잘 보이도록 색 강제 */
    .post-body table,.epreview table,.ql-editor table{width:100%;border-collapse:collapse;margin:0 0 1em;}
    .post-body th,.post-body td,.epreview th,.epreview td,.ql-editor th,.ql-editor td{border:1px solid var(--line)!important;padding:.5rem .7rem;text-align:left;color:var(--text)!important;background-color:transparent!important;}
    .post-body th,.epreview th,.ql-editor th{background-color:var(--bg-1)!important;color:var(--red-soft)!important;font-weight:700;}
    .langwrap{display:inline-flex;} .langsel{background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:.78rem;padding:.35rem .5rem;cursor:pointer;letter-spacing:.04em;} .langsel:focus{outline:none;border-color:var(--red);}
    input,textarea,select{color:var(--text);} ::placeholder{color:var(--dim);opacity:1;} input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px var(--bg-1) inset!important;caret-color:var(--text);}
    /* 언어 필터 토글 + 글 언어 배지 */
    .langtoggle{display:inline-flex;gap:.2rem;}
    .langtoggle button{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:6px;padding:.3rem .55rem;cursor:pointer;}
    .langtoggle button.on{color:var(--gold);border-color:var(--line-hot);background:rgba(255,200,70,.1);}
    .langtag{font-family:var(--mono);font-size:.6rem;background:rgba(120,170,255,.18);color:var(--blue);border-radius:4px;padding:.05rem .3rem;margin-right:.2rem;vertical-align:middle;}

    /* ============ 상용 포럼형 목록(인벤/공식포럼 스타일) — 아래 정의가 위 토픽리스트를 덮어씀 ============ */
    /* 검색 옵션 select */
    .search select.qfield{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;outline:none;cursor:pointer;border-right:1px solid var(--line);padding-right:.6rem;margin-right:.2rem;}
    .search select.qfield option{background:var(--surface);color:var(--text);}

    /* 베스트글 박스 */
    .bestbox{border:1px solid var(--line-hot);background:linear-gradient(180deg,rgba(255,200,70,.08),rgba(255,200,70,.02));border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1rem;}
    .bestbox .bb-head{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;font-weight:700;}
    .bestbox .bb-head::before{content:"★";color:var(--gold);}
    .bestbox .bb-row{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;min-width:0;}
    .bestbox .bb-row + .bb-row{border-top:1px dashed var(--line);}
    .bestbox .bb-rank{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--gold);width:1.2rem;text-align:center;flex:none;}
    .bestbox .bb-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem;color:var(--text);}
    .bestbox .bb-t:hover{color:var(--gold);}
    .bestbox .bb-like{font-family:var(--mono);font-size:.78rem;color:var(--red-soft);flex:none;}

    /* 테이블: 제목 | 글쓴이 | 추천 | 조회 | 작성일 */
    .topiclist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);}
    .thead,.trow{display:grid;grid-template-columns:3fr 10rem 3rem 3.5rem auto;align-items:center;gap:.6rem;}
    .thead{padding:.65rem 1rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-1);}
    .thead span{display:flex;align-items:center;justify-content:center;}
    .thead .h-like,.thead .h-view{justify-content:flex-end;padding-right:.3rem;}
    .trow{display:grid;grid-template-columns:3fr 10rem 3rem 3.5rem auto;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);transition:background .12s;font-size:.92rem;align-items:center;text-decoration:none;color:inherit;}
    .trow:last-child{border-bottom:0;}
    .trow:hover{background:var(--surface-2);}
    .trow .c{color:var(--muted);font-size:.84rem;display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;}
    .trow .c.red{color:var(--red-soft);}
    /* 숫자 컬럼: 우측 고정 + tabular-nums — 자릿수 달라도 위치 흔들리지 않음 */
    .trow .c-like,.trow .c-view{justify-content:flex-end;padding-right:.3rem;font-family:var(--mono);font-variant-numeric:tabular-nums;}
    .trow .c-date{white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;}
    .ttitle{display:flex;align-items:center;gap:.3rem;min-width:0;}
    .ttitle .t-inner{flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:center;gap:.3rem;}
    .ttitle .t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--text);min-width:0;flex:1 1 0;}
    .trow:hover .t-text{color:var(--gold);}
    .ttitle .newdot{flex:none;width:.4rem;height:.4rem;border-radius:50%;background:#ff5b5b;}
    .row-ico{display:inline-flex;align-items:center;gap:.18rem;flex:none;font-family:var(--mono);font-size:.78rem;line-height:1;border-radius:4px;padding:.1rem .28rem;}
    .row-ico svg{width:.8rem;height:.8rem;flex:none;}
    .row-ico em{font-style:normal;}
    .ico-cmt{color:var(--blue);background:rgba(170,199,254,.12);}
    .ico-link{color:var(--gold);background:rgba(255,200,70,.1);}
    .ico-img{color:var(--muted);background:rgba(150,180,230,.1);}
    .t-author{display:flex;align-items:center;gap:.3rem;min-width:0;justify-content:center;overflow:hidden;}
    .t-author .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem;color:var(--muted);min-width:0;}
    .t-author .avatar.sm{flex:none;width:22px;height:22px;font-size:.7rem;}

    /* 공지 고정행 */
    .trow.pin{background:rgba(255,200,70,.06);}
    .trow.pin:hover{background:rgba(255,200,70,.1);}
    .trow.pin .c.num{color:var(--gold);}
    .pinbadge{flex:none;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#1a1400;background:var(--gold);border-radius:5px;padding:.1rem .4rem;}

    /* 갤러리형 썸네일 카드 그리드 (GRID_BOARDS 대상 게시판 전용) */
    .topicgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;}
    .topicgrid .empty{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);}
    .gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);text-decoration:none;color:inherit;transition:border-color .12s,transform .12s;}
    .gcard:hover{border-color:var(--line-hot);transform:translateY(-2px);}
    .gcard.pin{border-color:var(--gold);}
    .gthumb{position:relative;aspect-ratio:1/1;background:var(--bg-1);}
    .gthumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .gthumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--dim);}
    .gthumb-empty svg{width:2rem;height:2rem;}
    .gthumb .pinbadge{position:absolute;top:.4rem;left:.4rem;}
    .gthumb .newdot{position:absolute;top:.5rem;right:.5rem;width:.5rem;height:.5rem;border-radius:50%;background:#ff5b5b;}
    .gmeta{padding:.6rem .7rem;display:flex;flex-direction:column;gap:.35rem;}
    .gtitle{font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .gauthor{font-size:.78rem;}
    .gstat{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;color:var(--muted);}
    .gstat .c.red{color:var(--red-soft);}

    /* 페이지네이션 바 */
    .listfoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.3rem;flex-wrap:wrap;}
    .pagebar{display:flex;align-items:center;gap:.4rem;margin-inline:auto;}
    .pagebar button{font-family:var(--mono);font-size:.82rem;min-width:2.6rem;height:2.6rem;padding:0 .6rem;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:all .12s;}
    .pagebar button.arr{font-family:var(--body);font-size:1rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;}
    .pagebar button.arr svg{width:.85rem;height:.85rem;flex:none;}
    .pagebar button:hover:not(:disabled){border-color:var(--line-hot);color:var(--text);}
    .pagebar button.on{background:var(--red);border-color:var(--red);color:#1a1400;font-weight:700;}
    .pagebar button:disabled{opacity:.35;cursor:not-allowed;}
    .listfoot .newbtn-foot{flex:none;}
    .foot-spacer{flex:none;width:5.5rem;}
    @media (max-width:560px){.foot-spacer{display:none;}}
    @media (max-width:600px){
      .pagebar{width:100%;gap:.25rem;}
      .pagebar button{flex:1 1 0;min-width:0;padding:0 .2rem;}
    }
    .filtnote{font-family:var(--mono);font-size:.78rem;color:var(--dim);flex:none;min-width:5.5rem;white-space:nowrap;}

    /* 상세: 이전·다음글 네비 */
    .adjnav{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);}
    .adjnav a,.adjnav .none{display:grid;grid-template-columns:5rem 1fr;align-items:center;gap:.8rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);}
    .adjnav a:last-child,.adjnav .none:last-child{border-bottom:0;}
    .adjnav a:hover{background:var(--surface-2);}
    .adjnav .lbl{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
    .adjnav a:hover .lbl{color:var(--red-soft);}
    .adjnav .atitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.9rem;}
    .adjnav a:hover .atitle{color:var(--text);}
    .adjnav .none .atitle{color:var(--dim);}

    /* 상세/댓글 신고·좋아요 버튼 */
    .post-foot{display:flex;align-items:center;gap:.6rem;}
    .reportbtn{margin-left:auto;background:none;border:0;color:var(--dim);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;cursor:pointer;}
    .reportbtn:hover{color:#ff5b5b;}
    .clike{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:.78rem;padding:.2rem .6rem;cursor:pointer;transition:all .12s;}
    .clike:hover{border-color:var(--red);color:var(--red-soft);}
    .clike.on{background:rgba(255,200,70,.14);border-color:var(--red);color:var(--red);}
    .cmt-top .clike{margin-left:.2rem;}
    .link-report{background:none;border:0;color:var(--dim);font-size:.78rem;cursor:pointer;}
    .link-report:hover{color:#ff5b5b;}

    /* 신고 다이얼로그 */
    .report-form{display:grid;gap:.8rem;padding:1.6rem;}
    .report-form h2{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:0;}
    .report-form .ropts{display:grid;gap:.4rem;}
    .report-form .ropts label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted);cursor:pointer;}
    .report-form textarea{border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text);padding:.7rem;font:inherit;resize:vertical;outline:none;min-height:4rem;}
    .report-form .ractions{display:flex;justify-content:flex-end;gap:.5rem;}

    @media (max-width:780px){
      .thead,.trow{grid-template-columns:minmax(0,1fr) auto !important;}
      .thead .h-author,.trow .c-author,
      .thead .h-like,.trow .c-like,
      .thead .h-view,.trow .c-view{display:none;}
      .adjnav a,.adjnav .none{grid-template-columns:4rem 1fr;}
    }