/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 61건은 전부 원형 요소(아바타·도트(LED)·아이콘 원판·삭제/닫기 버튼·슬라이더 노브·크롭 가이드) 전용
   — CLAUDE.md §8-2 ② 사유 주석. 전건 셀렉터를 대조해 확인했다(2026-08-06). */
main{padding:0 20px 64px}
.sec{margin-top:36px}
.sec-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.sec-title{font-size:17px;font-weight:800;letter-spacing:-.3px}
.sec-sub{font-size:11px;color:var(--t3)}
.more{margin-left:auto;font-size:11px;color:var(--t3);padding:3px 8px;border:1px solid var(--bor);border-radius:var(--rad);cursor:pointer;transition:all .15s}
.more:hover{color:var(--acc);border-color:var(--acc)}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--bor);margin-bottom:14px}
.tab{padding:7px 14px;font-size:13px;font-weight:500;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--t1)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}

/* H-SCROLL */
.hs-wrap{position:relative;padding:0 36px}
.hs{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;padding-left:4px;scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}
.hs .card{flex-shrink:0;width:var(--card-w);min-width:0}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:100%;border:none;background:none;color:var(--t1);font-size:24px;opacity:.5;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.hs-arrow:hover{opacity:1}
.hs-arrow-left{left:0}
.hs-arrow-right{right:0}
.hs-arrow.hidden{opacity:0;pointer-events:none}

/* CARD */
.card:hover{transform:scale(1.03);transform-origin:center}
.card:hover .ctitle{color:var(--acc)}
.thumb{width:100%;aspect-ratio:var(--card-ratio);position:relative;overflow:hidden;border-radius:var(--rad)}
.thumb-bg{position:absolute;inset:0}
.thumb-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");opacity:.4}
.thumb-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 55%,transparent 100%)}
[data-theme=light] .thumb-grad{background:linear-gradient(to top,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 55%,transparent 100%)}
.thumb-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 9px 10px}
.tbadges-tl{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.tbadges-tr{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.tb{border-radius:var(--rad)}   /* 하단 이관본 .tb가 border-radius 미정의라 이 선언만 생존(나머지는 이관본이 덮음) */
.tb-new{background:var(--acc);color:var(--c-white)}
.tb-season{background:rgba(0,0,0,.6);color:#ffd34e;font-weight:800;backdrop-filter:blur(4px)}
.tb-done{background:rgba(255,255,255,.13);color:rgba(255,255,255,.8);backdrop-filter:blur(4px)}
/* 19금 배지 규칙 1건 제거(2026-08-07) — 발행처 0인 죽은 규칙이었다(§14-5 3경로 전수:
   리터럴·템플릿·classList 전부 0. docs/_archive_poc/ 의 동명 규칙은 구 POC 보관본이라 별개).
   현행 정본은 .tb.adt(components.css 하단) + .mb-adult + .topbar .ibtn.adult.on = --adult 계열.
   지운 규칙은 주황이라 살아 있었다면 19금이 스포일러(--spoiler)와 같은 색이 됐다.
   ※옛 리터럴 값을 여기 적지 않는다 — 잔존 전수 grep 이 주석에 걸려 "아직 쓰인다"로 오독된다. */
.tb-plat{background:rgba(0,0,0,.55);color:rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.hbtn{position:absolute;bottom:8px;right:8px;width:24px;height:24px;background:rgba(0,0,0,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.5);transition:all .15s;backdrop-filter:blur(4px)}
.hbtn:hover,.hbtn.bm{color:var(--acc);background:rgba(0,0,0,.7)}
.ctitle-row{display:flex;align-items:center;gap:6px}
.ctitle-row .ctitle{flex:1;min-width:0}
.cscore{font-size:10px;font-weight:700;line-height:1}   /* 이관본 .cscore가 미정의한 속성만 생존(display/align-items/gap/flex-shrink는 이관본이 덮음) */
.cscore-rt,.cscore-herb{display:inline-flex;align-items:center;gap:2px;color:var(--t2)}
.cscore-rt svg,.cscore-herb svg{flex-shrink:0}
.ci{padding:6px 0 0}
.ctitle{transition:color .15s}   /* 이관본 .ctitle이 transition 미정의라 이 선언만 생존(나머지는 이관본이 덮음) */
.cmeta{font-size:10px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr));gap:14px 10px;padding-left:4px}
.content-grid{grid-template-columns:repeat(6,minmax(0,1fr))}   /* 6열 고정·균등(#page 1080px). minmax(0,1fr)=카드 내용이 컬럼 밀어내는 것 차단(1fr 단독은 min-content로 불균등) → perPage 30=5행 */
.content-grid>.card{min-width:0}   /* 카드 내부 오버플로(긴 제목 등) 컬럼 확장 방지 */
/* 추천 1줄 레일 — 2줄 줄바꿈 금지. 데스크탑=화살표, 모바일=터치슬라이드. 스크롤바 숨김 */
.rec-rail{display:flex;align-items:center;gap:4px}
.rec-rail-track{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:0 0 6px 4px;scrollbar-width:none;cursor:grab}
.rec-rail-track:active{cursor:grabbing}
.rec-rail-track::-webkit-scrollbar{display:none}
.rec-rail-track>.card{flex:0 0 var(--card-w);min-width:0}   /* min-width:0 = flexbox min-content 팽창(이미지 자연폭) 차단 → flex-basis 고정폭 유지 */
.rec-rail-arrow{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--bor);background:var(--bg3);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.rec-rail-arrow:hover{background:var(--bg4);color:var(--t1);border-color:var(--bor2)}
@media(hover:none),(pointer:coarse){.rec-rail-arrow{display:none}}  /* 모바일/터치 = 슬라이드, 화살표 숨김 */

/* DAY TABS */
.daytabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.dtab{padding:5px 14px;font-size:12px;font-weight:600;border:1px solid var(--bor);border-radius:var(--rad);color:var(--t3);cursor:pointer;transition:all .15s}
.dtab:hover{color:var(--t2);border-color:var(--bor2)}
.dtab.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}

/* RANKING */
.rk-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media(min-width:800px){.rk-grid{grid-template-columns:1fr 1fr 1fr 1fr}}
.rk-item{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;border-radius:var(--rad);transition:background .15s;min-height:80px}
.rk-item:hover{background:var(--bg2)}
.rk-no{font-size:20px;font-weight:900;width:26px;text-align:center;color:var(--t3);letter-spacing:-1px;flex-shrink:0}
.rk-no.hi{color:var(--acc)}
.rk-thumb{width:44px;height:58px;border-radius:var(--rad);overflow:hidden;flex-shrink:0;position:relative}
.rk-tbg{width:100%;height:100%}
.rk-info{flex:1;min-width:0;height:58px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rk-title{font-size:13px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.rk-meta{font-size:10px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-score{font-size:12px;color:var(--acc);font-weight:800;margin-top:auto;padding-top:3px;white-space:nowrap}

/* GENRE SECTION */
.genre-row{margin-top:28px}
.genre-row-title{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.genre-row-title span{font-size:11px;color:var(--t3);font-weight:400}

/* BOOKMARK */
.bm-list{display:flex;flex-direction:column;gap:5px}
.bm-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg2);border-radius:var(--rad);cursor:pointer;border-left:3px solid transparent;transition:all .15s}
.bm-item:hover{background:var(--bg3)}
.bm-item.new-ep{border-left-color:var(--acc)}
.bm-thumb{width:38px;height:50px;border-radius:var(--rad);overflow:hidden;flex-shrink:0;position:relative}
.bm-tbg{width:100%;height:100%;display:flex;align-items:flex-end;padding:3px;position:relative}
.bm-info{flex:1;min-width:0}
.bm-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.bm-new{font-size:9px;font-weight:800;padding:2px 5px;background:var(--acc);color:var(--c-white);border-radius:var(--rad)}
.bm-meta{font-size:11px;color:var(--t3);margin-top:2px}
.bm-latest{font-size:11px;color:var(--acc);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-date{font-size:10px;color:var(--t3);flex-shrink:0;white-space:nowrap}
.push-notice{font-size:11px;color:var(--t3);padding:7px 12px;background:var(--bg2);border-radius:var(--rad);margin-bottom:12px;border-left:2px solid var(--bor2)}

/* MODAL */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
/* 모달 스택 — id 마다 고유 값. 값이 겹치면 DOM 소스순서가 승패를 갈라 스택이 뒤집힌다. */
#user-profile-modal{z-index:var(--z-modal-stack-1)}
#report-view-overlay{z-index:var(--z-report-view)}      /* 프로필 위 */
#sanction-overlay{z-index:var(--z-sanction)}            /* 신고 원문 위 */
#purge-overlay{z-index:var(--z-purge)}                  /* 제재 위 */
#login-gate{z-index:var(--z-login-gate)}                /* 위 전부보다 위 */
.moverlay.open{display:flex}
.modal{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);width:680px;max-width:100%;max-height:88vh;overflow-y:auto;position:relative;flex-shrink:0}
.mbadges{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.mb{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--rad);border:1px solid var(--bor);color:var(--t2)}
.mb-acc{border-color:var(--acc);color:var(--acc);background:var(--acc-dim)}
.mb-adult{border-color:var(--adult);color:var(--adult);background:var(--adult-dim)}   /* 19금 경고 배지 — 전용 워시드레드 토큰(mb-acc 미러) */
.mclose{position:absolute;top:12px;right:12px;width:30px;height:30px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t1);font-size:14px;cursor:pointer;z-index:2;transition:background .15s}
.mclose:hover{background:rgba(0,0,0,.85)}
.mbody{padding:14px 22px 22px}
.mactions{display:flex;gap:6px;margin-bottom:16px}
.mabtn{padding:8px 14px;border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--bor);color:var(--t2);background:var(--bg2);transition:all .15s}
.mabtn:hover{border-color:var(--acc);color:var(--acc)}
.mabtn.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}
.msec{margin-top:16px}
.msec-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bor)}
.msec-t-season{margin-left:6px;color:var(--acc);text-transform:none;letter-spacing:0;font-weight:800}   /* 평가 대상 기수 명시 */
.msynopsis{font-size:13px;color:var(--t2);line-height:1.7}
.msynopsis.msynopsis-empty{color:var(--t3)}
.rat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rat-box{background:var(--bg2);border-radius:var(--rad);padding:9px 6px;text-align:center}
.rat-lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.rat-val{font-size:20px;font-weight:900;color:var(--acc);letter-spacing:-1px;margin:3px 0 4px}
.rat-bar{height:2px;background:var(--bor);border-radius:var(--rad)}
.rat-fill{height:100%;background:var(--acc);border-radius:var(--rad);transition:width .5s}
.plat-name{font-size:13px;font-weight:700;flex:1}
.revs{display:flex;flex-direction:column;gap:7px}
.rev-card{background:var(--bg2);border-radius:var(--rad);padding:9px 11px}
.rev-spoil-lbl{font-size:10px;color:var(--spoiler);font-weight:700;margin-bottom:3px}
.rev-body{font-size:13px;line-height:1.6;transition:filter .2s}
.rev-body.blur{filter:blur(5px);user-select:none;cursor:pointer}
.rev-meta{font-size:10px;color:var(--t3);margin-top:5px}
.ep-item{display:flex;align-items:center;gap:9px;padding:7px 3px;border-bottom:1px solid var(--bor);cursor:pointer;border-radius:var(--rad)}
.ep-item:hover{background:var(--bg2)}
.ep-no{font-size:11px;color:var(--t3);width:34px;flex-shrink:0;font-variant-numeric:tabular-nums}
.ep-thumb{width:44px;height:26px;object-fit:cover;border-radius:var(--rad);flex-shrink:0}   /* 회차 썸네일(옵셔널) */
.ep-name{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-free{font-size:9px;padding:1px 4px;border-radius:var(--rad);background:var(--acc-dim);color:var(--acc);flex-shrink:0}
.ep-date{font-size:10px;color:var(--t3);flex-shrink:0}
.ep-item.ep-read .ep-name,.ep-item.ep-read .ep-no{opacity:.4}
.ep-cb{width:14px;height:14px;flex-shrink:0;cursor:pointer;accent-color:var(--acc)}
.ep-last-badge{font-size:9px;padding:1px 5px;border-radius:var(--rad);background:var(--acc);color:var(--c-white);font-weight:700;flex-shrink:0}
.ep-link{flex-shrink:0;display:flex;align-items:center;color:var(--t3)}
.ep-link.dim{opacity:.3}

/* 위키 기본정보 그리드 */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 32px}
.info-row{display:flex;gap:14px;font-size:13px;align-items:baseline}
.info-k{color:var(--t3);flex:0 0 56px}
.info-v{color:var(--t1);font-weight:600}
.info-v.info-empty{color:var(--t3);font-weight:400}
@media(max-width:560px){.info-grid{grid-template-columns:1fr}}

/* 보러가기 시청방식 탭 */
.wt-tabs{display:flex;gap:16px;border-bottom:1px solid var(--bor);margin-bottom:6px}
.wt-tab{padding:8px 2px;font-size:13px;font-weight:700;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.wt-tab.on{color:var(--t1);border-bottom-color:var(--acc)}
.wt-tab.wt-dim{opacity:.45}
.wt-tab .cnt{color:var(--t3);font-weight:600;margin-left:3px}
.wt-tab.on .cnt{color:var(--acc)}
.wt-panel{display:none}
.wt-panel.on{display:block}
.plat-row{display:flex;align-items:center;gap:11px;padding:11px 6px;border-bottom:1px solid var(--bg4);cursor:pointer;border-radius:var(--rad);transition:background .12s}
.plat-row:hover{background:var(--bg3)}
.plat-logo{width:32px;height:32px;border-radius:var(--r);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--acc-dim);color:var(--acc)}
.plat-mid{flex:1;min-width:0}
.plat-row .plat-name{font-size:13px;font-weight:700;flex:none}
.plat-sub{font-size:11px;color:var(--t3);margin-top:1px}
.plat-way{font-size:12px;color:var(--t2);font-weight:600;flex-shrink:0}
.plat-arrow{color:var(--t3);flex-shrink:0;display:flex}
.watch-empty{background:var(--bg3);border-radius:var(--r);padding:16px;text-align:center;color:var(--t2);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.watch-empty-sm{padding:14px 6px;text-align:center;color:var(--t3);font-size:12px}

/* CARD PROGRESS */
.card-progress{height:3px;background:var(--bor2);border-radius:var(--rad);overflow:hidden;margin-top:5px}
.card-progress-fill{height:100%;background:var(--acc)}
.card-read-txt{font-size:10px;color:var(--t3);margin-top:3px;line-height:1.2}
.tb-read{background:var(--acc);border-color:var(--acc);color:var(--c-white)}

/* BOOKMARK PROGRESS */
.bm-progress-row{display:flex;align-items:center;gap:6px;margin-top:3px}
.bm-progress{flex:1;height:3px;background:var(--bor2);border-radius:var(--rad);overflow:hidden}
.bm-progress-fill{height:100%;background:var(--acc)}
.bm-prog-txt{font-size:10px;color:var(--t3);white-space:nowrap;flex-shrink:0}
.bm-resume{font-size:10px;padding:3px 8px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--rad);cursor:pointer;margin-top:5px;font-weight:600;display:inline-block}
.bm-resume:hover{opacity:.85}
.bm-complete{font-size:9px;padding:1px 5px;background:var(--acc);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}
.bm-binge{font-size:9px;padding:1px 5px;background:var(--st-binge);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}
.bm-watching{font-size:9px;padding:1px 5px;background:var(--st-watching);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}
.bm-st-onhold{font-size:9px;padding:1px 5px;background:var(--st-onhold);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}
.bm-st-dropped{font-size:9px;padding:1px 5px;background:var(--t3);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}
.bm-st-interested{font-size:9px;padding:1px 5px;background:var(--acc);color:var(--c-white);border-radius:var(--rad);font-weight:700;margin-left:4px;vertical-align:middle}

/* MISC */
.empty{text-align:center;padding:56px 20px;color:var(--t3)}
.chip{display:inline-block;padding:2px 7px;border-radius:var(--rad);font-size:10px;font-weight:600}

/* HERO SLOT ADMIN */
.hero-slot-list{display:flex;flex-direction:column;gap:4px}
.hero-slot-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--rad);background:var(--bg2);border:1px solid var(--bor)}
.hero-slot-auto{background:var(--bg);opacity:.65}
.hero-slot-num{font-size:11px;font-weight:700;color:var(--acc);width:18px;flex-shrink:0;text-align:center}
.hero-slot-name{flex:1;font-size:12px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-slot-actions{display:flex;gap:4px;flex-shrink:0}
.hero-slot-order-btn{padding:2px 7px;font-size:11px}
.hero-slot-search{width:100%}
.hero-slot-drop{position:absolute;top:100%;left:0;right:0;background:var(--sur);border:1px solid var(--bor);border-radius:var(--rad);z-index:var(--z-dropdown);max-height:220px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.hero-slot-drop-item{padding:8px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--bor);transition:background .1s}
.hero-slot-drop-item:last-child{border-bottom:none}
.hero-slot-drop-item:hover{background:var(--bg2)}
/* FOOTER — 진 스타일 미니멀(바코드 스트립). .mono/.barbar/.led=본 파일 하단 전역 베이스(§전역 베이스 이관, 구 home-zine.css) 재사용(토큰 신설 없음) */
.site-footer{background:var(--bg2);border-top:1px solid var(--bor);margin-top:40px}
.footer-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:18px 40px;border-bottom:1px solid var(--bor)}
.footer-meta-l{display:flex;align-items:center;gap:12px;min-width:0}
.footer-mark{display:flex;align-items:center;gap:5px;flex-shrink:0}
/* 헤더(.topbar .wm/.mk, 본 파일 하단 전역 베이스) 마크와 동일 구조 — 푸터용 크기만 축소, 색 --acc */
.footer-mark .wm{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.5px;text-transform:uppercase;line-height:1;color:var(--t1)}
.footer-mark .wm .hb{color:var(--acc)}
.footer-mark .mk{height:16px;width:auto;color:var(--acc)}
.footer-tagline{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer-meta-r{display:flex;align-items:center;gap:10px;flex-shrink:0}
.footer-barcode{width:64px;height:16px;opacity:.5}
.footer-code{font-size:10px;color:var(--t3);letter-spacing:1px}
.footer-bottom{padding:12px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.footer-copyright{font-size:10px;color:var(--t3)}
.footer-links{display:flex;align-items:center;flex-wrap:wrap}
.footer-links span{font-size:11px;color:var(--t3);cursor:pointer;padding:0 10px;border-left:1px solid var(--bor);transition:color .1s}
.footer-links span:first-child{border-left:none;padding-left:0}
.footer-links span:hover{color:var(--t1)}
.footer-online{font-size:10px;color:var(--t3);white-space:nowrap}
.footer-online b{color:var(--t2);font-weight:700}
@media(max-width:900px){.footer-meta{padding:16px 20px}.footer-bottom{padding:12px 20px}}
@media(max-width:600px){.footer-barcode,.footer-code{display:none}.footer-meta{flex-wrap:wrap;gap:10px}.footer-bottom{flex-direction:column;text-align:center;gap:8px}.footer-links{justify-content:center}}

/* PROFILE DROPDOWN */
.prof-wrap{position:relative}
.prof-avatar{width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--c-white);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;transition:box-shadow .15s;border:2px solid transparent}
.prof-avatar:hover{box-shadow:0 0 0 2px var(--acc)}
.prof-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.prof-drop{position:absolute;top:40px;right:0;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:var(--z-popover);display:none;overflow:hidden}
.prof-drop.open{display:block}
.prof-drop-top{padding:12px 14px;border-bottom:1px solid var(--bor)}
.prof-drop-nick{font-size:13px;font-weight:700}
.prof-drop-role{font-size:10px;color:var(--t3);margin-top:2px}
.prof-drop-item{padding:9px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.prof-drop-item:hover{background:var(--bg2)}
.prof-drop-item.danger{color:var(--danger)}
.prof-drop-sep{height:1px;background:var(--bor);margin:4px 0}

/* ROLE SWITCHER */
.role-sw{display:flex;align-items:center;gap:3px;padding:0 6px;border-left:1px solid var(--bor);margin-left:2px}
.role-sw-label{font-size:9px;color:var(--t3);white-space:nowrap;margin-right:2px}
.role-btn{padding:2px 7px;font-size:10px;border:1px solid var(--bor);border-radius:var(--rad);color:var(--t3);cursor:pointer;transition:all .12s;white-space:nowrap;background:none;font-family:inherit}
.role-btn:hover{border-color:var(--bor2);color:var(--t2)}
.role-btn.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}

/* PROFILE MODAL */
.pmod-body{padding:20px}
.pmod-avatar-wrap{width:86px;height:86px;border-radius:50%;margin:0 auto 16px;overflow:hidden;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:var(--c-white);border:3px solid var(--bor2);position:relative;cursor:pointer}
.pmod-avatar-wrap img{width:100%;height:100%;object-fit:cover}
.pmod-avatar-wrap:hover::after{content:'변경';position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:50%}
.pmod-upload-area{border:2px dashed var(--bor2);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:border-color .15s;margin-bottom:12px}
.pmod-upload-area:hover{border-color:var(--acc)}
.pmod-upload-area p{font-size:11px;color:var(--t3);margin-top:5px}
.pmod-preview{width:54px;height:54px;border-radius:50%;object-fit:cover;margin:10px auto 0;display:none;border:2px solid var(--acc)}
.pmod-status{font-size:12px;text-align:center;padding:8px 12px;border-radius:var(--rad);margin:10px 0;display:none}
.pmod-status.pending{background:rgba(230,150,0,.12);color:#e67e00}
.pmod-status.approved{background:var(--acc-dim);color:var(--acc)}
.pmod-status.rejected{background:var(--danger-dim);color:var(--neg)}
.special-imgs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.sp-img{aspect-ratio:1;border-radius:50%;background:var(--bg3);border:2px solid var(--bor);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:border-color .15s;position:relative}
.sp-img.locked{opacity:.35;cursor:not-allowed}
.sp-img.selected{border-color:var(--acc)}
.sp-img:not(.locked):hover{border-color:var(--acc)}
.pmod-sec-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bor)}

/* REV PROFILE */
.rev-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rev-avatar{width:24px;height:24px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);flex-shrink:0;overflow:hidden}
.rev-avatar img{width:100%;height:100%;object-fit:cover}
.rev-nick{font-size:12px;font-weight:600}
.rev-score-sm{font-size:10px;color:var(--acc);margin-left:auto}

/* LOGIN GATE */
.login-gate{text-align:center;padding:32px 24px}
.login-gate h3{font-size:18px;font-weight:800;margin-bottom:8px}
.login-gate p{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.login-gate-btns{display:flex;gap:8px;justify-content:center}

/* GENRE FILTER BAR */
.gfbar{display:flex;flex-wrap:wrap;gap:5px;padding:14px 20px 0;background:var(--bg);position:sticky;top:50px;z-index:var(--z-sticky);padding-bottom:10px;border-bottom:1px solid var(--bor)}
.gftag{padding:4px 13px;font-size:11px;font-weight:600;border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;transition:all .15s;color:var(--t3);white-space:nowrap;background:none;font-family:inherit}
.gftag:hover{border-color:var(--bor2);color:var(--t2)}
.gftag.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}

/* DEV PANEL */
.dev-panel{position:fixed;bottom:20px;right:20px;z-index:var(--z-ctx-menu);background:var(--sur);border:1px solid var(--bor2);border-radius:var(--r);padding:12px 14px;box-shadow:0 8px 32px rgba(0,0,0,.5);min-width:200px;display:none}
.dev-panel.open{display:block}
.dev-panel-title{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-bottom:9px}
.dev-panel-row{display:flex;gap:4px;margin-bottom:5px;flex-wrap:wrap}
.dev-role-btn{padding:4px 10px;font-size:11px;border:1px solid var(--bor);border-radius:var(--rad);color:var(--t2);cursor:pointer;transition:all .12s;background:none;font-family:inherit;white-space:nowrap}
.dev-role-btn:hover{border-color:var(--acc);color:var(--acc)}
.dev-role-btn.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}
.dev-hint{font-size:9px;color:var(--t3);margin-top:6px}

/* ADMIN LAYOUT */
.admin-layout{display:flex;min-height:calc(100vh - 50px);margin-top:50px}
.admin-sidebar{width:190px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--bor);padding:14px 0;position:sticky;top:50px;height:calc(100vh - 50px);overflow-y:auto}
.admin-sidebar-title{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--t3);padding:0 14px;margin-bottom:6px;text-transform:uppercase}
.admin-menu-group{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--t3);padding:12px 14px 4px;text-transform:uppercase;opacity:.65}
.admin-menu-item{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:12px;color:var(--t2);cursor:pointer;transition:all .12s;border-left:2px solid transparent}
.admin-menu-item:hover{background:var(--bg3);color:var(--t1)}
.admin-menu-item.on{color:var(--acc);background:var(--acc-dim);border-left-color:var(--acc);font-weight:700}
.admin-content{flex:1;padding:22px;overflow-y:auto;max-width:900px}
.admin-page-title{font-size:19px;font-weight:900;margin-bottom:18px;letter-spacing:-.3px}

/* ADMIN STATS */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:12px 14px}
.stat-lbl{font-size:10px;color:var(--t3);margin-bottom:4px}
.stat-val{font-size:24px;font-weight:900;letter-spacing:-1px}
.stat-val.acc{color:var(--acc)}
.stat-sub{font-size:9px;color:var(--t3);margin-top:3px}

/* ADMIN CHART */
/* .chart-mock 제거(2026-08-06) — 소비처 0. docs/_archive_poc/ 에 동명 규칙이 남아 있으나
   그건 구 POC 보관본이라 별개다(정본=toonhub/). */
.chart-title{font-size:12px;font-weight:700;margin-bottom:12px}
.chart-bars{display:flex;align-items:flex-end;gap:5px;height:90px;padding-bottom:22px;position:relative}
.cbar{flex:1;background:var(--acc);border-radius:var(--rad) var(--rad) 0 0;opacity:.65;min-height:4px;position:relative;transition:opacity .15s;cursor:default}
.cbar:hover{opacity:1}
.cbar-lbl{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--t3);white-space:nowrap}
.chart-foot{display:flex;justify-content:space-between;font-size:9px;color:var(--t3);margin-top:4px;border-top:1px solid var(--bor);padding-top:6px}

/* ADMIN TABLE */
.admin-table-wrap{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.admin-table-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--bor);gap:8px}
.admin-table-hd-title{font-size:12px;font-weight:700}
.atbl{width:100%;border-collapse:collapse;font-size:12px}
.atbl th{padding:7px 10px;text-align:left;color:var(--t3);font-size:9px;letter-spacing:.05em;font-weight:600;border-bottom:1px solid var(--bor);background:var(--bg3);white-space:nowrap}
.atbl td{padding:8px 10px;border-bottom:1px solid var(--bor);color:var(--t2);vertical-align:middle}
.atbl tr:last-child td{border-bottom:none}
.atbl tr:hover td{background:rgba(255,255,255,.02)}
/* 신청 상세 — 사유가 길면 셀에서 잘리므로(말줄임) 행을 눌러 펼친다. 관리자·매니저 신청 공통 */
.atbl .atbl-more{cursor:pointer}
.atbl .atbl-more:hover{color:var(--t1);text-decoration:underline}
.atbl tr.atbl-det[hidden]{display:none}
.atbl tr.atbl-det td{background:var(--bg3);padding:12px 14px;color:var(--t2)}
.atbl-det-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;align-items:start}
.atbl-det-k{color:var(--t3);white-space:nowrap}
.atbl-det-v{color:var(--t1);white-space:pre-wrap;word-break:break-word}
.badge{display:inline-block;padding:1px 6px;border-radius:var(--rad);font-size:10px;font-weight:600;white-space:nowrap}
.badge-green{background:var(--acc-dim);color:var(--acc)}
.badge-red{background:var(--danger-dim);color:var(--neg)}
.badge-yellow{background:rgba(230,150,0,.14);color:#e67e00}
.badge-blue{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.badge-grey{background:var(--bg4);color:var(--t3)}

/* ADMIN FORMS */
.admin-section{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:14px;margin-bottom:14px}
.admin-section-title{font-size:12px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bor)}
.form-row{display:flex;gap:8px;margin-bottom:9px;align-items:center;flex-wrap:wrap}
.form-label{font-size:10px;color:var(--t3);width:80px;flex-shrink:0}
.form-input{flex:1;min-width:120px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px;color:var(--t1);font-size:12px;outline:none;transition:border-color .15s;font-family:inherit}
.form-input:focus{border-color:var(--acc)}
.form-select{flex:1;min-width:100px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px;color:var(--t1);font-size:12px;outline:none;cursor:pointer;font-family:inherit}
.abtn{padding:5px 12px;border-radius:var(--rad);font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--bor);color:var(--t2);background:var(--bg3);transition:all .15s;font-family:inherit;white-space:nowrap}
.abtn:hover{border-color:var(--acc);color:var(--acc)}
.abtn-acc{background:var(--acc);border-color:var(--acc);color:var(--c-white)}
.abtn-acc:hover{background:var(--acc2);border-color:var(--acc2);color:var(--c-white)}
.abtn-danger{border-color:var(--danger);color:var(--danger)}
.abtn-danger:hover{background:var(--danger);color:var(--c-white)}
/* 파기(비가역) — abtn-danger(삭제·제재, 가역)와 색이 같으면 오조작을 유도한다. 채운 대비로 급을 분리.
   ※ 짝인 .mbtn-purge 는 여기 두지 않는다 — .mbtn 정의가 pages.css 에 있고 그 파일이 뒤에 로드돼
     동일 특이도(0,1,0)에서 .mbtn 이 이긴다. .mbtn-primary 와 같은 자리(pages.css)에 둔다. */
.abtn-purge{background:var(--t1);border:1px solid var(--t1);color:var(--bg);font-weight:700}
.abtn-purge:hover{background:var(--danger);border-color:var(--danger);color:var(--c-white)}

/* ADMIN BADGE MANAGEMENT */
.admin-badge-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.admin-badge-card{background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;width:110px}
.admin-badge-img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--bg2)}
.admin-badge-label{font-size:11px;font-weight:600;text-align:center}
.admin-badge-level{font-size:10px;color:var(--t3);text-align:center}
.admin-badge-del{font-size:10px;color:var(--danger);background:none;border:1px solid var(--danger);border-radius:var(--rad);padding:2px 8px;cursor:pointer;margin-top:2px}
.admin-badge-del:hover{background:var(--danger);color:var(--c-white)}
.admin-badge-form{display:flex;flex-direction:column;gap:8px}
.admin-form-row{display:flex;align-items:center;gap:10px}
.admin-form-row label{font-size:11px;color:var(--t3);width:120px;flex-shrink:0}
.admin-input{flex:1;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px;color:var(--t1);font-size:12px;outline:none;font-family:inherit;max-width:360px}
.admin-input:focus{border-color:var(--acc)}
.admin-btn{align-self:flex-start;padding:6px 16px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px}
.admin-btn:hover{background:var(--acc2)}

/* admin 반복 인라인 추출 (#3 옵션B 복합블록 — 정확값 보존) */
.atbl td.admin-empty{text-align:center;color:var(--t3);padding:20px}
.atbl td.empty{padding:14px}
.admin-empty-pad{padding:14px;color:var(--t3);font-size:12px}
.admin-icon-box{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);flex-shrink:0}
.admin-foot-row{padding:10px 12px;border-top:1px solid var(--bor);display:flex;gap:8px}
.admin-flex2-row{display:flex;align-items:center;gap:8px;flex:2;min-width:220px}
.admin-flex-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-mb10-row{margin-bottom:10px;display:flex;align-items:center;gap:8px}
.admin-title-sm{font-size:13px;font-weight:700;color:var(--t1)}
.admin-img-fit{object-fit:contain;border-radius:var(--r);border:1px solid var(--bor)}
.admin-meta-mt{font-size:11px;color:var(--t3);margin-top:2px}
.admin-meta-mb{font-size:10px;color:var(--t3);margin-bottom:4px}

/* ADMIN IMAGE REVIEW */
.img-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.img-review-card{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden}
.img-review-thumb{width:100%;aspect-ratio:1;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--t3);border-bottom:1px solid var(--bor)}
.img-review-thumb-img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-bottom:1px solid var(--bor);background:var(--bg3)}
.img-review-card.is-done{opacity:.55}
.img-review-info{padding:8px}
.img-review-user{font-size:11px;font-weight:700}
.img-review-conf{font-size:9px;color:var(--t3);margin-top:2px}
.img-review-actions{display:flex;gap:4px;margin-top:7px}
.img-review-actions .abtn{flex:1;text-align:center;padding:4px 0;font-size:10px}

/* ADMIN THEME */
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .15s;box-shadow:0 0 0 1px var(--bor)}
.swatch.on,.swatch:hover{border-color:var(--t1)}

/* MULTI-ROW FILTER */
.filter-bar{padding:8px 20px 4px;background:var(--bg);border-bottom:1px solid var(--bor)}
.filter-row{display:flex;align-items:flex-start;gap:6px;padding:4px 0}
.filter-row+.filter-row{border-top:1px solid var(--bor)}
.filter-label{font-size:10px;font-weight:700;color:var(--t3);width:52px;flex-shrink:0;padding-top:4px;white-space:nowrap}
.filter-tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.filter-ep-input{align-items:center;gap:6px}
.ep-num{width:64px;padding:4px 8px;font-size:12px;border:1px solid var(--bor);border-radius:var(--r);background:var(--bg2);color:var(--t1);font-family:inherit}
.ep-num:focus{outline:none;border-color:var(--acc)}
.ep-tilde,.ep-unit{font-size:12px;color:var(--t3)}
.ftag{padding:3px 11px;font-size:11px;font-weight:600;border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;transition:all .15s;color:var(--t3);background:none;font-family:inherit;white-space:nowrap}
.ftag:hover{border-color:var(--bor2);color:var(--t2)}
.ftag.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}
.ftag.exclude{background:color-mix(in srgb,var(--neg) 20%,transparent);border-color:var(--neg);color:var(--neg)}
.ftag.exclude:hover{background:color-mix(in srgb,var(--neg) 30%,transparent);border-color:var(--neg);color:var(--neg)}
.ftag.off{opacity:.32;cursor:not-allowed;pointer-events:none}
.filter-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:5px 0 4px;border-top:1px solid var(--bor)}
.filter-reset{padding:3px 10px;font-size:11px;border:1px solid var(--bor);border-radius:var(--r);color:var(--t3);cursor:pointer;background:none;font-family:inherit;transition:all .15s}
.filter-reset:hover{border-color:var(--acc);color:var(--acc)}
.sort-sel{background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:4px 8px;color:var(--t1);font-size:11px;outline:none;cursor:pointer;font-family:inherit}
.filter-adv-toggle{display:block;width:100%;padding:5px 0;font-size:11px;color:var(--t3);cursor:pointer;background:none;border:none;border-top:1px solid var(--bor);text-align:left;font-family:inherit;transition:color .15s}
.filter-adv-toggle:hover{color:var(--acc)}
.filter-adv-section{border-top:1px dashed var(--bor);padding-top:2px}
.filter-chips-row{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
.filter-chip{display:inline-flex;align-items:center;padding:3px 10px;font-size:11px;background:var(--acc);color:var(--c-white);border-radius:var(--r);cursor:pointer;transition:opacity .15s}
.filter-chip:hover{opacity:.8}
.preset-item{display:inline-flex;align-items:center;gap:2px}
.preset-del{background:none;border:none;color:var(--t3);cursor:pointer;font-size:12px;padding:0 2px;line-height:1;transition:color .15s}
.preset-del:hover{color:#ff4444}
.preset-naming{display:inline-flex;align-items:center;gap:4px}
.tag-divider{display:block;width:100%;font-size:10px;color:var(--t3);padding:4px 0 2px;letter-spacing:.06em}
.filter-more-btn{background:none;border:1px dashed var(--bor);border-radius:var(--r);padding:3px 11px;font-size:11px;color:var(--t3);cursor:pointer;font-family:inherit;transition:all .15s}
.filter-more-btn:hover{border-color:var(--acc);color:var(--acc)}

/* SUBTAG SEARCH */
.filter-row>div{position:relative}
.subtag-search{width:100%;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px;color:var(--t1);font-size:11px;outline:none;transition:border-color .15s;font-family:inherit}
.subtag-search:focus{border-color:var(--acc)}
.subtag-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--sur);border:1px solid var(--bor);border-radius:var(--rad);box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:var(--z-popover);max-height:200px;overflow-y:auto;display:none}
.subtag-dropdown.open{display:block}
.subtag-dropdown-item{padding:7px 10px;font-size:11px;cursor:pointer;transition:background .1s}
.subtag-dropdown-item:hover{background:var(--bg2)}
.subtag-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.subtag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--acc-dim);border:1px solid var(--acc);border-radius:var(--r);font-size:10px;font-weight:600;color:var(--acc);cursor:pointer;transition:all .15s}
.subtag-chip:hover{background:var(--acc);color:var(--c-white)}

/* HASHTAG */
.hashtag{color:var(--acc);cursor:pointer;font-weight:600;transition:all .15s}
.hashtag:hover{text-decoration:underline}
.hashtag-reported{opacity:0.5;cursor:not-allowed;text-decoration:line-through}
.hashtag-reported:hover{text-decoration:line-through}

/* TAG CONTEXT MENU */
#tag-ctx-menu{position:fixed;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:var(--z-ctx-menu);display:none;min-width:120px;overflow:hidden}
#tag-ctx-menu.open{display:block}
.tag-ctx-item{padding:8px 12px;font-size:12px;cursor:pointer;transition:background .1s;color:var(--t1)}
.tag-ctx-item:hover{background:var(--bg2)}
.tag-ctx-item.danger{color:var(--danger)}
.tag-ctx-item.danger:hover{background:rgba(231,76,60,.1)}

/* WORK THUMBNAIL IMAGE */
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bm-tname{position:relative;z-index:1}
.rk-tname{position:relative;z-index:1}

/* UNDO TOAST */
.undo-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.5);z-index:var(--z-toast);transition:transform .3s ease;max-width:90%;white-space:nowrap}
.undo-toast.show{transform:translateX(-50%) translateY(0)}
.undo-toast-btn{background:none;border:1px solid var(--acc);color:var(--acc);padding:4px 12px;border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.undo-toast-btn:hover{background:var(--acc);color:var(--bg)}

/* COMMUNITY LATEST */
.com-post-list{display:flex;flex-direction:column;gap:2px}
.com-post-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--bor);cursor:pointer;transition:background .1s;gap:12px}
.com-post-row:hover{background:var(--bg2)}
.com-post-title{font-size:13px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-post-meta{font-size:11px;color:var(--t3);white-space:nowrap;flex-shrink:0}

/* CRITIC PICK */
.critic-pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.critic-pick-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;transition:border-color .15s}
.critic-pick-card:hover{border-color:var(--acc)}
.critic-pick-avatar{width:48px;height:48px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.critic-pick-info{flex:1;min-width:0}
.critic-pick-name{font-size:13px;font-weight:700;margin-bottom:4px}
.critic-pick-meta{font-size:11px;color:var(--t3)}

/* RIGHT SIDEBAR */
.side-section{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:16px 16px 18px}
.side-title{font-size:14px;font-weight:800;margin-bottom:10px}
.side-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.side-head .side-title{margin-bottom:0}
.side-gender{font-size:11px;color:var(--t3);flex-shrink:0}
.side-gender a{cursor:pointer;color:var(--t3)}
.side-gender a:hover{color:var(--t1)}
.side-gender a.on{color:var(--acc);font-weight:700}
.side-gender .sep{margin:0 4px;color:var(--bor2)}
.side-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.side-tab{padding:4px 8px;font-size:11px;font-weight:500;color:var(--t3);background:var(--bg3);border-radius:var(--rad);cursor:pointer;transition:all .15s}
.side-tab:hover{color:var(--t1)}
.side-tab.on{background:var(--acc);color:var(--c-white)}
.side-rank-list{display:flex;flex-direction:column;gap:8px}
/* ★[사이드바 스타일 복구] 랭킹·인기글 행 규칙이 home-zine.css 에 `.main` 스코프로만 있었다.
   사이드바는 #sidebar-right 안이라 `.main` 밖이고, 그래서 .srow/.prow 가 flex 를 못 받아
   순위·제목·출처가 세로로 분해됐다(디렉터 육안 파손). .side-rank-list 와 .ad-slot 은 전역이라
   살아 있었던 것이 증상을 부분 파손처럼 보이게 했다.
   home-zine.css 는 홈 시안 파일이라 건드리지 않고, 같은 선언을 #sidebar-right 스코프로 승격한다.
   ★값은 home-zine.css:86~104 와 동일하다. 두 곳이 갈리면 홈 본문과 사이드바가 달라 보이므로
     한쪽을 고칠 때 다른 쪽도 함께 본다. */
#sidebar-right .side-rank-list,#sidebar-right .side-post-list{display:flex;flex-direction:column}
#sidebar-right .srow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--hair);cursor:pointer}
#sidebar-right .srow:last-child{border-bottom:none}
#sidebar-right .srow .rn{font-family:'Chakra Petch';font-weight:700;font-size:17px;width:20px;text-align:center;color:var(--t3);flex:none}
#sidebar-right .srow .rn.top{color:var(--acc-br)}
#sidebar-right .srow .rth{width:30px;height:40px;background-size:cover;background-position:center;border:1px solid var(--hair);flex:none}
#sidebar-right .srow .rmain{flex:1;min-width:0}
/* ★.rt 는 마크업이 <span>(home.js:469)인데 display 를 주는 규칙이 repo 전체에 없었다.
   인라인 박스에는 overflow·text-overflow·폭이 적용되지 않는다 → ellipsis 가 안 걸리고 콘텐츠가
   그대로 흘러 평점(.rsc)과 겹쳤다. 실측(1440px, 애니 랭킹): 2위 +94px · 5위 +6px 넘침.
   같은 파일의 .pt 도 <span> 이지만 .prow(flex)의 직접 자식이라 flex item 으로 자동 블록화돼
   문제가 없었다 — 이 대비가 원인의 증거다.
   ★home-zine.css:93 도 display 가 없다. 홈 본문의 .srow 에도 같은 잠복이 있으나 그 파일은
     시안 파일이라 수정 금지 대상이라 손대지 않았다(보고만). */
#sidebar-right .srow .rt{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar-right .srow .rs{display:block;font-size:10px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar-right .srow .rsc{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
#sidebar-right .prow{display:flex;align-items:center;gap:9px;padding:7px 0;cursor:pointer}
#sidebar-right .prow:hover .pt{color:var(--acc-br)}
#sidebar-right .prow .pn{font-family:'Chakra Petch';font-weight:700;font-size:13px;width:16px;text-align:center;color:var(--t3);flex:none}
#sidebar-right .prow .pn.top{color:var(--acc-br)}
/* .pt 는 .prow 의 직접 자식이라 flex 기본값 min-width:auto 가 걸린다 — 콘텐츠보다 작아지지 않아
   긴 제목이 출처 배지를 밀어낼 수 있다. .rt 는 min-width:0 인 .rmain 안이라 이미 안전하다.
   현재 폭(300px)에서는 .pn·.src 가 공간을 나눠 우연히 맞지만 배지가 길어지면 드러난다. */
#sidebar-right .prow .pt{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s;min-width:0}
/* ── 제목 hover 마퀴 ─────────────────────────────────────────────
   잘린 제목에 마우스를 올리면 왼쪽으로 흘러 전문을 보여준다.
   ★"넘칠 때만 움직인다"를 순수 CSS 로 푼 방법 = container query unit.
     바깥(.rt/.pt)에 container-type:inline-size 를 주면 100cqw 가 바깥 폭이 된다.
     transform 의 100% 는 자기 박스 기준인데 래퍼가 inline-block 이라 곧 콘텐츠 폭이다.
     min(0px, 100cqw - 100%) → 짧은 제목은 (컨테이너>콘텐츠)라 양수가 되고 min 이 0 을 골라
     **이동량이 정확히 0**, 긴 제목만 음수가 되어 흐른다. JS 폭 측정이 필요 없다(레이아웃 스래싱 회피).
   ★정지 상태는 기존과 같다 — 래퍼는 인라인 레벨이라 바깥의 text-overflow:ellipsis 가 그대로 걸린다.
   ★title 속성은 유지한다. 마퀴는 보조 수단이고 reduced-motion·터치·스크린리더에서는 그쪽이 정본이다. */
#sidebar-right .rt,#sidebar-right .prow .pt{container-type:inline-size}
/* ★.pt 에 flex:1 이 필요하다. container-type 은 size containment 를 만들어 콘텐츠가 박스 크기 계산에
   기여하지 못하게 하는데, .pt 는 flex:0 1 auto 라 basis 를 콘텐츠에서 가져오던 요소다 → 폭이 0 이 된다
   (실측 boxW 0). flex:1 로 남는 공간을 받게 하면 해결된다. .rt 는 .rmain(flex:1) 안의 블록이라
   원래 부모 폭을 채우므로 이 문제가 없다.
   ※시각 변화 1건 — 짧은 제목 행에서 출처 배지가 제목 바로 뒤가 아니라 우측 끝에 붙는다.
     긴 제목일 때는 원래 그렇게 보였으므로 행 간 정렬이 오히려 일관돼진다. */
#sidebar-right .prow .pt{flex:1}
#sidebar-right .tmq{display:inline-block;white-space:nowrap;transform:translateX(0);transition:transform .3s ease}
/* duration 은 JS 가 이동량에 맞춰 심는다(--mq-dur, home.js _mqSyncDurations). 고정값이면 짧은 제목과
   긴 제목의 속도가 3배까지 갈린다(2위 37px/s vs 5위 12.5px/s). 폴백 2.4s 는 스크립트가 아직
   안 돌았을 때만 쓰인다. 복귀(.3s)는 고정 — 복귀는 읽으라고 보여주는 동작이 아니라 정리 동작이다. */
#sidebar-right .srow:hover .rt .tmq,#sidebar-right .prow:hover .pt .tmq{transform:translateX(min(0px,calc(100cqw - 100%)));transition:transform var(--mq-dur,2.4s) linear}
@media(prefers-reduced-motion:reduce){#sidebar-right .srow:hover .rt .tmq,#sidebar-right .prow:hover .pt .tmq{transform:translateX(0);transition:none}}
#sidebar-right .prow .src{font-size:9px;font-weight:700;color:var(--t3);border:1px solid var(--hair);padding:1px 4px;flex:none}
.side-rank-item{display:flex;align-items:center;gap:10px;padding:4px 5px;cursor:pointer;transition:background .1s;border-radius:var(--rad)}
.side-rank-item:hover{background:var(--bg3)}
.side-rank-no{font-size:15px;font-weight:800;color:var(--t2);width:18px;text-align:center;flex-shrink:0}
.side-rank-no.top{color:var(--acc)}
.side-rank-thumb{width:44px;height:44px;border-radius:var(--r);flex-shrink:0;position:relative;overflow:hidden;background:var(--bg3)}
.side-rank-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;line-height:1.35}
.side-rank-name{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-rank-sub{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* post 행(허브 인기글/마지막읽은글) — 썸네일 없는 컴팩트 */
.side-post-list{display:flex;flex-direction:column;gap:4px}
.side-post-item{display:flex;align-items:center;gap:8px;padding:6px 5px;cursor:pointer;border-radius:var(--rad)}
.side-post-item:hover{background:var(--bg3)}
.side-post-no{font-size:12px;font-weight:700;color:var(--t3);width:16px;text-align:center;flex-shrink:0}
.side-post-no.top{color:var(--acc)}
.side-post-title{font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.side-divider{height:1px;background:var(--bor);margin:16px 0}

/* AD SLOTS */
.ad-slot{width:100%;background:var(--bg2);border:1.5px dashed var(--bor);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--t3)}
.ad-slot-300x250{height:250px}
.ad-slot-300x600{height:600px}
.ad-slot-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.ad-slot-size{font-size:9px;font-family:monospace;opacity:.3}

/* MYPAGE MODAL */
.mypage-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:20px;overflow-x:auto;flex-shrink:0}
.mypage-tab{padding:7px 14px;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-radius:var(--rad);background:var(--bg2);border:1px solid transparent;transition:all .15s;white-space:nowrap;letter-spacing:.01em}
.mypage-tab:hover{color:var(--t1);background:var(--bg3)}
.mypage-tab.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
.mypage-tab--dim{opacity:.4;pointer-events:none}
.mypage-content{flex:1;overflow-y:auto;min-height:0}
.mypage-content::-webkit-scrollbar{width:4px}
.mypage-content::-webkit-scrollbar-track{background:transparent}
.mypage-content::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--rad);transition:background .2s}
.mypage-content:hover::-webkit-scrollbar-thumb{background:var(--bor)}
.mypage-section{display:flex;flex-direction:column;gap:16px}
.mypage-section-title{font-size:11px;color:var(--t3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}

/* 프로필 탭 */
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--acc);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700}
.profile-avatar-btn{padding:6px 16px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);font-size:12px;cursor:pointer;font-family:inherit}
.profile-avatar-btn:hover{border-color:var(--acc)}
.profile-field{display:flex;flex-direction:column;gap:8px}
.profile-field label{font-size:12px;font-weight:600;color:var(--t2)}
.mypage-input{width:100%;padding:12px 14px;border:1px solid var(--bor);border-radius:var(--r);font-size:13px;background:var(--bg);color:var(--t1);font-family:inherit;transition:border .15s}
.mypage-input:focus{outline:none;border-color:var(--acc)}
.mypage-input-sm{width:100%;padding:9px 12px;border:1px solid var(--bor);border-radius:var(--r);font-size:12px;background:var(--bg);color:var(--t1);font-family:inherit;transition:border .15s}
.mypage-input-sm:focus{outline:none;border-color:var(--acc)}
.mypage-readonly{padding:12px 14px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);font-size:13px;color:var(--t3)}
.mypage-btn{padding:10px 18px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mypage-btn:hover{opacity:.9}
.mypage-btn-sm{padding:7px 14px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.mypage-btn-danger{width:100%;padding:12px;background:var(--danger);color:var(--c-white);border:none;border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mypage-btn-danger:hover{opacity:.9}
.gender-toggle{display:flex;gap:6px}
.gender-toggle-btn{flex:1;padding:10px 14px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--rad);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s;font-family:inherit}
.gender-toggle-btn:hover{border-color:var(--acc);color:var(--acc)}
.gender-toggle-btn.on{background:var(--acc);color:var(--c-white);border-color:var(--acc)}
.special-imgs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sp-img{width:100%;aspect-ratio:1;background:var(--bg3);border:2px solid var(--bor);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:all .15s}
.sp-img:hover{border-color:var(--acc)}
.sp-img.selected{border-color:var(--acc);background:var(--bg2)}
.sp-img.locked{opacity:.3;cursor:not-allowed}

/* 플랫폼 구독 탭 */
.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.platform-card{padding:16px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);transition:border .15s}
.platform-card:hover{border-color:var(--bor)}
.platform-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.platform-name{font-size:13px;font-weight:700;color:var(--t1)}
.platform-remove{width:22px;height:22px;border:1px solid var(--bor);background:none;border-radius:50%;font-size:14px;line-height:1;color:var(--t3);cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;padding:0}
.platform-remove:hover{border-color:var(--acc);color:var(--acc)}
.platform-type-select{width:100%;padding:9px 12px;border:1px solid var(--bor);border-radius:var(--r);font-size:12px;background:var(--bg);color:var(--t1);font-family:inherit;margin-bottom:10px;cursor:pointer}
.platform-type-select:focus{outline:none;border-color:var(--acc)}
.platform-sub-detail,.platform-point-detail{display:flex;flex-direction:column;gap:6px}
.platform-sub-detail label,.platform-point-detail label{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:6px}
.platform-field-label{font-size:11px;color:var(--t3);font-weight:600}
.expire-warning{display:inline-block;padding:3px 8px;background:var(--danger);color:var(--c-white);font-size:10px;font-weight:700;border-radius:var(--r)}
.platform-empty{padding:32px 16px;text-align:center;font-size:13px;color:var(--t3);background:var(--bg2);border:1px dashed var(--bor);border-radius:var(--r);line-height:1.8}
.platform-empty small{font-size:11px;color:var(--t3);opacity:.8}
.platform-add-wrap{position:relative}
.platform-add-btn{width:100%;padding:12px;background:var(--bg2);border:1px dashed var(--bor);border-radius:var(--r);font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .15s}
.platform-add-btn:hover{border-color:var(--acc);color:var(--acc);border-style:solid}
.platform-dropdown{margin-top:8px;background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);max-height:300px;overflow-y:auto;padding:6px}
.platform-drop-group{padding:6px 4px;border-bottom:1px solid var(--bor)}
.platform-drop-group:last-child{border-bottom:none}
.platform-group-title{font-size:11px;color:var(--t3);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;margin-bottom:4px}
.platform-drop-item{padding:8px 10px;font-size:12px;color:var(--t1);cursor:pointer;border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;transition:background .12s}
.platform-drop-item:hover{background:var(--bg2);color:var(--acc)}
.platform-drop-item.disabled{color:var(--t3);cursor:not-allowed;opacity:.55}
.platform-drop-item.disabled:hover{background:none;color:var(--t3)}
.platform-drop-added{font-size:10px;color:var(--t3);padding:1px 6px;border:1px solid var(--bor);border-radius:var(--r)}
.platform-drop-custom-trigger{color:var(--acc);font-weight:700}
.platform-drop-custom{display:flex;gap:6px;padding:6px 4px}
.platform-drop-custom .mypage-input-sm{flex:1}

/* ═══ 마이페이지 v4 재편 (커스터마이징/통계/활동) — .mypage- / .mp- 스코프 ═══ */
/* HERO (공개프로필 미러) */
.mypage-cust{display:flex;flex-direction:column;gap:20px}
.mypage-av{width:88px;height:88px;border-radius:50%;border:4px solid var(--bg2);margin-top:-50px;background:var(--bg3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bor),0 6px 20px rgba(0,0,0,.5);position:relative;z-index:1}
.mypage-av--bdg{overflow:visible;border:none;background:transparent;box-shadow:none}
.mypage-av img{width:100%;height:100%;object-fit:cover}
.mypage-nick{font-size:20px;font-weight:800;line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mypage-lv{font-size:12px;color:var(--t3);font-weight:600}
.mypage-bio-inline{color:var(--t2)}
.mypage-sep{color:var(--t3)}
/* PANEL & SECTION */
.mp-panel{background:var(--bg2);border:1px solid var(--bor);border-radius:0 0 var(--r) var(--r);overflow:hidden}
.mp-sec{padding:18px 20px;border-bottom:1px solid var(--bor)}
.mp-sec:last-child{border-bottom:none}
.mp-sec__t{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.mp-sec-actions{margin-top:10px}
/* 아바타 탭 */
.mp-avtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--bor)}
.mp-avtab{padding:8px 12px;font-size:12px;color:var(--t3);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;transition:all .15s}
.mp-avtab:hover{color:var(--t2)}
.mp-avtab.on{color:var(--t1);border-bottom-color:var(--t1)}
.mp-dfopts{display:flex;flex-direction:column;gap:10px}
.mp-dfopt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);border:1px solid var(--bor);cursor:pointer;transition:border-color .15s,background .15s}
.mp-dfopt:hover{border-color:var(--t3);background:var(--bg3)}
.mp-dfopt.on{border-color:var(--acc);background:rgba(47,148,96,.06)}
.mp-dfprev{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mp-dfinfo{flex:1}
.mp-dfnm{font-size:13px;font-weight:600}
.mp-dfdesc{font-size:11px;color:var(--t3);margin-top:2px}
.mp-dfr{width:16px;height:16px;border-radius:50%;border:2px solid var(--bor);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mp-dfr.on{border-color:var(--acc)}
.mp-dfr.on::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--acc)}
.mp-pal{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:var(--bg3);border-radius:var(--r);margin-top:12px}
.mp-sw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}
.mp-sw:hover{transform:scale(1.12)}
.mp-sw.on{border-color:var(--t1);transform:scale(1.08)}
.mp-cc{display:flex;align-items:center;gap:8px;margin-top:8px}
.mp-cc input[type=color]{width:32px;height:32px;border:1px solid var(--bor);border-radius:var(--r);background:var(--bg4);cursor:pointer;padding:2px}
.mp-cc span{font-size:11px;color:var(--t3)}
.mp-imgpane{display:flex;flex-direction:column;align-items:center;gap:12px}
.mp-imgprev{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--bg4);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mp-imgpane-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
/* 아바타 업로드 플로우(업로드→크롭→적용) */
.mp-flow{display:flex;align-items:center;gap:6px;width:100%;max-width:240px}
.mp-flow-s{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t3);white-space:nowrap}
.mp-flow-s.on{color:var(--t1)}
.mp-flow-s.done{color:var(--acc)}
.mp-flow-n{width:18px;height:18px;border-radius:50%;background:var(--bg4);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}
.mp-flow-s.on .mp-flow-n{background:var(--acc);color:var(--c-white)}
.mp-flow-s.done .mp-flow-n{background:var(--acc-dim);color:var(--acc)}
.mp-flow-ln{flex:1;height:1px;background:var(--bor)}
/* 상시 규격 안내 칩 */
.mp-spec{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mp-bggrid + .mp-spec{margin-top:12px;justify-content:flex-start}
.mp-spec-chip{font-size:10.5px;color:var(--t3);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:3px 9px;display:inline-flex;align-items:center;gap:4px}
.mp-spec-chip svg{opacity:.7}
/* 적용완료 — 실 렌더 88px 미러 */
.mp-applied{display:flex;align-items:center;gap:12px}
.mp-av-mirror{width:88px;height:88px;border-radius:50%;border:4px solid var(--bg2);overflow:hidden;flex-shrink:0;box-shadow:0 0 0 2px var(--bor);background:var(--bg3)}
.mp-av-mirror img{width:100%;height:100%;object-fit:cover}
.mp-av-mirror--off{opacity:.5;filter:grayscale(.4)}
.mp-applied-ok{font-size:12px;color:var(--t2)}
.mp-applied-ok b{color:var(--st-completed)}
.mp-bdgpane-desc{font-size:11px;color:var(--t3);margin-bottom:12px}
.mp-bdggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
.mp-bdgitem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--r);border:1px solid var(--bor);cursor:pointer;transition:border-color .15s,background .15s}
.mp-bdgitem:hover{border-color:var(--t3);background:var(--bg3)}
.mp-bdgitem.on{border-color:var(--tier-gold);background:rgba(245,197,24,.06)}
.mp-bdgitem.lk{opacity:.35;cursor:not-allowed}
.mp-bdgnm{font-size:9px;color:var(--t3);text-align:center}
.mp-bdgpane-foot{margin-top:8px;font-size:11px;color:var(--t3)}
/* 배경 그리드 */
.mp-bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.mp-bgitem{height:44px;border-radius:var(--r);border:2px solid var(--bor);cursor:pointer;transition:border-color .15s}
.mp-bgitem:hover{border-color:var(--t3)}
.mp-bgitem.on{border-color:var(--acc)}
.mp-bgitem--up{display:flex;align-items:center;justify-content:center}
.mp-bgitem--img{position:relative;background-size:cover;background-position:center}
.mp-bgitem-del{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:var(--c-white);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mp-bgitem-del:hover{background:var(--acc)}
/* 신규: 이미지 배경일 때만 노출되는 조정 안내문 한 줄 */
.mp-bg-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2);margin-top:12px;padding-top:12px;border-top:1px dashed var(--bor)}
.mp-bg-hint svg{flex-shrink:0;color:var(--t3)}
.mp-bg-hint[hidden]{display:none}
/* 프로필 배경 세로위치 드래그 리포지션 — .user-hero-bg에 얹는 modifier(마이페이지 편집 히어로 전용). 로컬 마이크로 스태킹(z-index:1인 .user-hero-avatar 선례와 동일 패턴, base.css 변수 대상 아님) */
.mp-hero-drag{cursor:grab;touch-action:none;transition:background-position .15s ease}
.mp-hero-drag--dragging{cursor:grabbing;transition:none}
.mp-hero-drag--disabled{cursor:default}
.mp-hero-drag__hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:.85;pointer-events:none;transition:opacity .15s}
.mp-hero-drag--dragging .mp-hero-drag__hint{opacity:0}
.mp-hero-drag--disabled .mp-hero-drag__hint{display:none}
.mp-hero-drag__hint svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.mp-hero-drag__hint-txt{font-size:10.5px;font-weight:700;color:var(--c-white);text-shadow:0 1px 3px rgba(0,0,0,.7);letter-spacing:.02em}
.mp-hero-drag__track{position:absolute;right:12px;top:14px;bottom:14px;width:3px;border-radius:var(--r-sm);background:rgba(255,255,255,.25);z-index:2}
.mp-hero-drag--disabled .mp-hero-drag__track{display:none}
.mp-hero-drag__thumb{position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.mp-hero-drag__val{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:700;color:var(--t1);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:3px 9px;pointer-events:none}
.mp-hero-drag--disabled .mp-hero-drag__val{display:none}
.mp-hero-drag__toast{position:absolute;bottom:14px;left:50%;transform:translate(-50%,8px);z-index:2;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--c-white);background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:5px 12px;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.mp-hero-drag__toast--show{opacity:1;transform:translate(-50%,0)}
.mp-hero-drag__toast svg{flex-shrink:0}
.mp-hero-drag__lock{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.5);color:var(--t2);font-size:12px;font-weight:600}
.mp-hero-drag--disabled .mp-hero-drag__lock{display:flex}
/* bio */
.mp-bio-input{resize:vertical;min-height:48px;line-height:1.6}
/* 진열 */
.mp-showgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.mp-showitem{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--bg4);cursor:pointer}
.mp-showitem--empty{border:2px dashed var(--bor);display:flex;align-items:center;justify-content:center;cursor:default}
.mp-showrm{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mp-showrm:hover{background:var(--acc)}
/* 대표작품 검색 드롭다운(인라인 searchSelect) */
.mp-showpick-wrap{position:relative}
.mp-showpick-trigger{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.mp-showpick-trigger:hover{opacity:.9}
.mp-showpick-trigger svg{transition:transform .15s}
.mp-showpick-trigger.open svg{transform:rotate(180deg)}
.mp-showdd{margin-top:8px;width:320px;max-width:100%;background:var(--bg);border:1px solid var(--bor2);border-radius:var(--r);box-shadow:0 6px 18px rgba(0,0,0,.35);overflow:hidden}
.mp-showdd-search{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--bor)}
.mp-showdd-search svg{flex-shrink:0;stroke:var(--t3)}
.mp-showdd-search input{flex:1;min-width:0;background:none;border:none;color:var(--t1);font-size:13px;font-family:inherit;outline:none}
.mp-showdd-search input::placeholder{color:var(--t3)}
.mp-showdd-cnt{font-size:11px;color:var(--t3);white-space:nowrap}
.mp-showdd-list{max-height:264px;overflow-y:auto}
.mp-showdd-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(61,58,57,.4)}
.mp-showdd-row:hover{background:var(--bg3)}
.mp-showdd-row.on{background:var(--acc-dim)}
.mp-showdd-row.lk{opacity:.45}
.mp-showdd-th{width:34px;height:46px;border-radius:var(--r-sm);overflow:hidden;position:relative;flex-shrink:0;background:var(--bg4)}
.mp-showdd-th .thumb-img{width:100%;height:100%;object-fit:cover}
.mp-showdd-info{flex:1;min-width:0}
.mp-showdd-nm{font-size:13px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-showdd-badge{font-size:10px;color:var(--t3);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:1px 7px;margin-top:3px;display:inline-block}
.mp-showdd-chk{width:20px;height:20px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--bor2);display:flex;align-items:center;justify-content:center}
.mp-showdd-chk svg{display:none;stroke:var(--c-white)}
.mp-showdd-row.on .mp-showdd-chk{background:var(--acc);border-color:var(--acc)}
.mp-showdd-row.on .mp-showdd-chk svg{display:block}
.mp-showdd-row.lk .mp-showdd-chk{border-style:dashed}
.mp-showdd-empty{padding:28px 16px;text-align:center;color:var(--t3);font-size:12px;line-height:1.6}
/* 공개 토글 행 */
.mp-tog-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mp-tog-info{flex:1}
.mp-tog-lbl{font-size:13px;font-weight:600}
.mp-tog-desc{font-size:11px;color:var(--t3);margin-top:2px}
.mypage-btn-ghost{padding:7px 14px;background:none;border:1px solid var(--bor);border-radius:var(--r);font-size:12px;color:var(--t2);cursor:pointer;font-family:inherit}
.mypage-btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
/* ── 통계 대시보드 ── */
.mp-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mp-kpi{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:16px;text-align:center}
.mp-kpi__v{font-size:22px;font-weight:800;line-height:1.2}
.mp-kpi__l{font-size:10px;color:var(--t3);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.mp-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mp-dc{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:18px}
.mp-dc--full{grid-column:1/-1}
.mp-dc__t{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.mp-dc-empty{font-size:12px;color:var(--t3);line-height:1.7;padding:8px 0}
.mp-donut-wrap{display:flex;align-items:center;gap:20px}
.mp-donut-leg{flex:1;display:flex;flex-direction:column;gap:8px}
.mp-donut-li{display:flex;align-items:center;font-size:12px;color:var(--t2)}
.mp-donut-dot{width:8px;height:8px;border-radius:var(--rad);flex-shrink:0;margin-right:8px}
.mp-donut-nm{flex:1}
.mp-donut-pct{font-size:11px;color:var(--t3)}
.mp-genre-list{display:flex;flex-direction:column;gap:10px}
.mp-genre-row{display:flex;align-items:center;gap:10px}
.mp-genre-nm{width:72px;font-size:12px;color:var(--t2);text-decoration:none;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-genre-nm:hover{color:var(--acc)}
.mp-genre-bg{flex:1;height:8px;background:var(--bg4);border-radius:var(--r);overflow:hidden}
.mp-genre-fill{height:100%;border-radius:var(--r);background:var(--acc);opacity:.7}
.mp-rating-line{font-size:13px;color:var(--t2);margin-bottom:14px}
.mp-rating-line strong{color:var(--t1)}
.mp-hist{display:flex;align-items:flex-end;gap:4px;height:70px}
.mp-hist-b{flex:1;border-radius:var(--rad) var(--rad) 0 0;background:var(--acc);opacity:.6;min-height:2px;transition:opacity .15s}
.mp-hist-b:hover{opacity:1}
.mp-hist-xl{display:flex;gap:4px;margin-top:4px}
.mp-hist-xl span{flex:1;text-align:center;font-size:9px;color:var(--t3)}
.mp-gauge-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--t3);margin-bottom:8px}
.mp-gauge-lbl strong{color:var(--t1)}
.mp-gauge-bg{height:10px;background:var(--bg4);border-radius:var(--r);overflow:hidden}
.mp-gauge-fill{height:100%;border-radius:var(--r);background:linear-gradient(90deg,var(--tier-bronze),var(--tier-gold))}
.mp-gauge-hint{font-size:11px;color:var(--t3);margin-top:8px}
.mp-ms-wrap{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:18px}
.mp-ms-t{font-size:13px;font-weight:700;margin-bottom:14px}
.mp-ms-track{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.mp-ms-track::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:var(--bg4);transform:translateY(-50%)}
.mp-ms-fill{position:absolute;left:0;top:50%;height:2px;background:linear-gradient(90deg,var(--tier-iron),var(--tier-gold));transform:translateY(-50%)}
.mp-ms-dot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1}
.mp-ms-lbl{font-size:9px;color:var(--t3);text-align:center;white-space:nowrap}
.mp-ms-dot--cur .mp-ms-lbl{color:var(--tier-gold);font-weight:700}
.mp-ms-dot--lk{opacity:.35}
.mp-influence{display:flex;align-items:baseline;gap:6px}
.mp-influence-v{font-size:26px;font-weight:800;color:var(--tier-gold)}
.mp-influence-u{font-size:12px;color:var(--t3)}
.mp-influence-sub{font-size:11px;color:var(--t3);margin-top:6px}
.mp-influence-sub strong{color:var(--t2)}
.mp-lvcard{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:16px}
.mp-lvcard-t{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.mp-lvcard-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mp-lvcard-nm{font-size:15px;font-weight:700}
.mp-lvcard-sub{font-size:12px;color:var(--t3)}
.mp-lvcard-bg{height:6px;background:var(--bg4);border-radius:var(--rad);overflow:hidden}
.mp-lvcard-fill{height:100%;border-radius:var(--rad)}
.mp-lvcard-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--t3);margin-top:6px}
/* ── 활동 내역 ── */
.mp-afrow{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.mp-afbtn{padding:5px 12px;border-radius:var(--r);font-size:12px;color:var(--t3);background:var(--bg3);border:1px solid var(--bor);cursor:pointer;font-family:inherit;transition:all .15s}
.mp-afbtn:hover{color:var(--t1);border-color:var(--t3)}
.mp-afbtn.on{color:var(--t1);background:var(--bg4);border-color:var(--t2)}
.mp-actsum{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.mp-asc{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:12px 8px;text-align:center}
.mp-asc__v{font-size:16px;font-weight:800}
.mp-asc__l{font-size:9px;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.mp-actlist{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden}
.mp-arow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bor);transition:background .12s}
.mp-arow:last-child{border-bottom:none}
.mp-arow:hover{background:var(--bg3)}
.mp-aico{width:32px;height:32px;border-radius:var(--r);background:var(--bg4);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t3)}
.mp-aico--rating,.mp-aico--review{color:var(--acc)}
.mp-aico--post{color:var(--heat-4,#56d364)}
.mp-aico--comment{color:var(--tier-silver)}
.mp-aico--wiki{color:var(--tier-diamond,#a855f7)}
.mp-abody{flex:1;min-width:0}
.mp-attl{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-attl a{color:inherit;text-decoration:none}
.mp-attl a:hover{color:var(--acc)}
.mp-ameta{font-size:11px;color:var(--t3);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mp-awork{color:inherit;text-decoration:none}
.mp-awork:hover{color:var(--acc)}
.mp-asep{color:var(--t3)}
.mp-at{display:inline-block;font-size:9px;padding:1px 6px;border-radius:var(--r);font-weight:600;letter-spacing:.04em}
.mp-at--rev{background:rgba(47,148,96,.12);color:var(--acc)}
.mp-at--cmt{background:rgba(159,180,196,.1);color:var(--tier-silver)}
.mp-at--pst{background:rgba(86,211,100,.1);color:var(--heat-4,#56d364)}
.mp-at--wk{background:rgba(168,85,247,.1);color:var(--tier-diamond,#a855f7)}
.mp-alk{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);flex-shrink:0}
.mp-alk.hi{color:var(--acc2)}
.mp-atm{font-size:11px;color:var(--t3);white-space:nowrap;flex-shrink:0}
.mp-pages{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px}
.mp-pgbtn{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);border:1px solid var(--bor);background:none;color:var(--t3);font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s;padding:0 8px}
.mp-pgbtn:hover:not(:disabled){color:var(--t1);border-color:var(--t2)}
.mp-pgbtn.on{background:var(--acc);color:var(--c-white);border-color:var(--acc)}
.mp-pgbtn:disabled{opacity:.35;cursor:not-allowed}
.mp-act-empty{text-align:center;padding:48px 24px;color:var(--t3)}
.mp-empty-t{font-size:16px;font-weight:700;margin:16px 0 8px}
.mp-empty-d{font-size:12px;line-height:1.6}

/* 내 신청 탭 — .myapp-* (확장가능 신청목록). 빈/로딩=.mp-act-empty 재사용, 배지=전역 .badge-* */
.myapp-list{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden}
.myapp-row{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:44px;border-bottom:1px solid var(--bor);transition:background .12s}
.myapp-row:last-child{border-bottom:none}
.myapp-row:hover{background:var(--bg3)}
.myapp-row:focus-within{background:var(--bg3);outline:2px solid var(--acc);outline-offset:-2px}
.myapp-type{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.02em;padding:3px 8px 3px 6px;border-radius:var(--r);border:1px solid var(--bor2);background:var(--bg3);color:var(--t2);white-space:nowrap}
.myapp-type svg{flex-shrink:0;color:var(--t3)}
.myapp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.myapp-title{font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myapp-title a{color:var(--acc);text-decoration:none;display:inline-block;min-height:20px}
.myapp-title a:hover,.myapp-title a:focus-visible{text-decoration:underline}
.myapp-title a:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--rad)}
.myapp-meta{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myapp-reason b{color:var(--t2);font-weight:600}
.myapp-status{flex:0 0 auto}
.myapp-date{flex:0 0 auto;min-width:64px;text-align:right;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.myapp-spin{animation:myapp-spin 1s linear infinite}
.myapp-loadic{display:block;margin:0 auto;opacity:.5}
.myapp-load-t{font-size:13px;margin-top:14px}
@keyframes myapp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.myapp-spin{animation:none}}
@media(max-width:480px){
  .myapp-row{flex-wrap:wrap;row-gap:6px;padding:12px}
  .myapp-body{flex-basis:100%;order:3}
  .myapp-status{order:2}
  .myapp-date{order:2;margin-left:auto;min-width:0}
  .myapp-type{order:1}
}
@media(max-width:767px){.mp-dgrid{grid-template-columns:1fr}.mp-kpi-row{grid-template-columns:repeat(2,1fr)}.mp-actsum{grid-template-columns:repeat(3,1fr)}.mp-showgrid{grid-template-columns:repeat(3,1fr)}}

/* 활동 내역 탭 */
.activity-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.activity-stat{padding:16px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);display:flex;flex-direction:column;gap:6px}
.stat-label{font-size:12px;color:var(--t3)}
.stat-value{font-size:18px;font-weight:700}

/* 보안 탭 */
.login-history{display:flex;flex-direction:column;gap:4px}
.login-record{padding:10px 12px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);font-size:12px;color:var(--t2)}
.blocked-list{display:flex;flex-direction:column;gap:6px}
.blocked-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r)}
.blocked-nick{font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
.blocked-nick:hover{color:var(--acc);text-decoration:underline}
.blocked-empty{padding:10px 0;font-size:13px;color:var(--t3)}

/* 알림 설정 탭 */
.notify-item{padding:12px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r)}
.notify-item label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.notify-item input[type="checkbox"]{cursor:pointer}

/* LOGIN / SIGNUP */
.login-gate h3{margin:0 0 8px;font-size:20px;font-weight:700}
.login-tabs{display:flex;border-bottom:1px solid var(--bor);margin-bottom:20px}
.login-tab{flex:1;padding:10px;text-align:center;font-size:14px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.login-tab:hover{color:var(--t1)}
.login-tab.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-input{width:100%;padding:10px 12px;border:1px solid var(--bor);border-radius:var(--r);font-size:13px;background:var(--bg);color:var(--t1);font-family:inherit;transition:border .15s}
.login-input:focus{outline:none;border-color:var(--acc)}
.login-submit{width:100%;padding:11px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:inherit}
.login-submit:hover{opacity:.9}
.login-divider{position:relative;text-align:center;margin:8px 0;color:var(--t3);font-size:12px}
.login-divider::before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--bor);z-index:0}
.login-divider span{position:relative;background:var(--sur);padding:0 12px;z-index:1}
.login-google{width:100%;padding:10px;background:var(--c-white);color:#3c4043;border:1px solid #dadce0;border-radius:var(--r);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;font-family:inherit}
.login-google:hover{background:#f8f9fa}
.email-check-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 10px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--rad);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.email-check-btn:hover{opacity:.9}
.gender-select{margin-top:4px}
.gender-label{display:block;font-size:12px;color:var(--t2);margin-bottom:8px}
.gender-btns{display:flex;gap:12px}
.gender-btns label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t1);cursor:pointer}
.gender-btns input[type="radio"]{cursor:pointer}
.terms-wrap{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.terms-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);cursor:pointer}
.terms-item input[type="checkbox"]{cursor:pointer}
.terms-item a{color:var(--acc);text-decoration:none}
.terms-item a:hover{text-decoration:underline}
.privacy-policy{margin-top:16px;padding:16px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);max-height:300px;overflow-y:auto}
.privacy-policy h4{margin:0 0 12px;font-size:14px;font-weight:700}
.privacy-content p{font-size:11px;line-height:1.6;margin-bottom:12px;color:var(--t2)}
.privacy-close{width:100%;padding:8px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;margin-top:8px;font-family:inherit}
.privacy-close:hover{opacity:.9}

.comm-sort-bar{display:flex;gap:6px;margin-bottom:12px}
.comm-sort{padding:5px 12px;border:1px solid var(--bor);border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;color:var(--t3);background:none;font-family:inherit;transition:all .15s}
.comm-sort:hover{color:var(--t1);border-color:var(--t2)}
.comm-sort.on{background:var(--acc);color:var(--c-white);border-color:var(--acc)}
.comm-sort-link{padding:3px 6px;border:none;border-radius:0;font-size:12px;font-weight:400;cursor:pointer;color:var(--t3);background:none;font-family:inherit;transition:color .1s;border-bottom:2px solid transparent}
.comm-sort-link:hover{color:var(--t1)}
.comm-sort-link.on{color:var(--t1);font-weight:700;border-bottom-color:var(--acc)}
.comm-post-list{display:flex;flex-direction:column}
.comm-post-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--bor);cursor:pointer;transition:background .1s}
.comm-post-row:hover{background:var(--bg2)}
.comm-post-row.pinned{background:var(--bg2);border-left:2px solid var(--acc)}
.comm-post-row.notice{background:var(--bg2);border-left:2px solid var(--acc)}
.comm-pin-icon{color:var(--acc);margin-right:4px;font-size:12px;flex-shrink:0}
.comm-pin-divider{height:0;border-top:1px dashed var(--bor2);margin:5px 0}
/* ★아래쪽 패딩만 남아 바가 위아래 비대칭이었다(실측 wrap 47.9 = row 38.6 + 8 + 테두리 1.3).
   s9 이 .nh-wrap 에 테두리·배경을 줘 박스로 만들면서 안쪽 여백은 .nh-row{padding:7px 10px} 가
   담당하게 됐는데, 그 이전 레이아웃의 padding-bottom 이 정리되지 않고 남은 것이다.
   호출처는 community.js:807 한 곳뿐이라 이 규칙을 지워도 다른 화면 영향이 없다. */
.nh-wrap{padding:0}
.nh-row{display:flex;align-items:flex-start;gap:6px}
.nh-chips{flex:1;min-width:0;display:flex;align-items:center;gap:4px;min-height:24px;flex-wrap:nowrap;overflow:hidden}
.nh-chips.exp{flex-wrap:wrap;overflow:visible}
.nh-ex{flex-shrink:0;background:none;border:1px solid var(--bor);border-radius:var(--r);color:var(--t3);cursor:pointer;padding:0 6px;display:flex;align-items:center;height:24px}
.nh-ex:hover{border-color:var(--acc);color:var(--acc)}
.nh-x{margin-left:4px;color:var(--danger);font-weight:700}
.nh-mg{display:flex;align-items:center;gap:6px;padding:6px 0 0}
.nh-ml{color:var(--t3);font-weight:700;font-size:11px;margin-right:2px}
.nh-mb{font-size:11px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor2);border-radius:var(--r);padding:2px 8px;cursor:pointer}
.nh-mb:hover{border-color:var(--acc);color:var(--acc)}
.nh-mb.on{background:var(--acc-dim);border-color:var(--acc);color:var(--acc)}
.nh-close{margin-left:auto}
.nh-sub{font-size:11px;color:var(--c-white);background:var(--acc);padding:2px 9px;border:1px solid var(--acc);border-radius:var(--r);cursor:pointer;white-space:nowrap;font-weight:700;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.nh-sub:hover{background:var(--acc2)}
.nh-sub.on{box-shadow:0 0 0 2px var(--acc-dim)}
.nh-c{font-size:11px;color:var(--t3);padding:2px 8px;border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;background:none;transition:all .15s;white-space:nowrap}
.nh-c:hover{border-color:var(--acc);color:var(--acc)}
/* [S9-2 짝 승격] 아래 둘은 s9 .nh-* 에 대응이 없어 리네임만으로는 죽는다. s9 가 마지막 링크라
   같은 명시도(0,2,0)로는 못 이기므로 조상을 하나 더 붙여 (0,3,0)으로 올린다. */
.cmz .nh-row .nh-chips{min-height:24px}   /* 칩 0개여도 공간 예약 — 없으면 첫 진입에 아래 콘텐츠가 밀린다 */
.cmz .nh-chips .nh-sub{max-width:90px;overflow:hidden;text-overflow:ellipsis}  /* 긴 허브명 말줄임 */.comm-upvote{min-width:36px;text-align:center;font-size:14px;font-weight:800;color:var(--acc);flex-shrink:0;line-height:1}
.comm-post-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.comm-post-line1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.comm-hot-badge{font-size:9px;font-weight:800;padding:2px 5px;background:var(--acc);color:var(--c-white);border-radius:var(--rad);flex-shrink:0}
.comm-thumb{width:60px;height:60px;object-fit:cover;border-radius:var(--rad);flex-shrink:0}
.comm-thumb-empty{width:60px;height:60px;background:var(--bg2);border-radius:var(--rad);flex-shrink:0}
.comm-post-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;transition:color .1s}
.comm-post-row:hover .comm-post-title{color:var(--acc)}
.comm-post-cmt{font-size:11px;color:var(--acc);font-weight:700;flex-shrink:0}
.comm-post-line2{font-size:11px;color:var(--t3)}
.comm-fav-badge{font-size:10px;font-weight:700;color:var(--acc);padding:1px 6px;border:1px solid var(--acc);border-radius:var(--rad);white-space:nowrap;flex-shrink:0;display:inline-block;max-width:60px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* GALLERY GRID — layout.css의 카드 그리드 정의 사용(중복 제거). 아카라이브식 카드. */
/* WRITE 입력 — .write-input 쪽지 공유, .write-hot-toggle 글쓰기 페이지(write.js) 사용 */
.write-input,.write-textarea,.write-select{width:100%;padding:10px 12px;border:1px solid var(--bor);border-radius:var(--r);font-size:13px;background:var(--bg);color:var(--t1);font-family:inherit;box-sizing:border-box}
.write-input:focus,.write-textarea:focus,.write-select:focus{outline:none;border-color:var(--acc)}
.write-textarea{height:160px;resize:vertical}
.write-hot-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);cursor:pointer;margin-bottom:16px}
.write-hot-toggle input{cursor:pointer}
/* POST DETAIL */
.post-detail-wrap{max-width:none}
.post-detail-crumb{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);margin-bottom:10px}
.post-detail-crumb span:first-child{color:var(--acc);cursor:pointer}
.post-detail-crumb span:first-child:hover{text-decoration:underline}
/* 크럼 구분자·꼬리표 수식자 2종 제거(2026-08-06) — 유일 소비처였던 work.js 평론 크럼에서
   '· 평론' 꼬리표를 뺐다(바로 아래 요약이 같은 말을 한다). 게시글 상세는 hub.js 의
   pd-back / pd-c-sep / pd-c-no 별개 계통이라 영향 없다.
   ※지워진 클래스명을 여기 적지 않는다 — 이후 소비처 전수 grep 이 주석에 걸려 오염된다. */
.post-detail-crumb-sort{color:var(--t3)}
.post-detail-card{border:1px solid var(--bor);border-radius:var(--r);background:var(--sur);overflow:hidden}
.post-detail-head{padding:14px 16px;border-bottom:1px solid var(--bor)}
.post-detail-title{font-size:16px;font-weight:800;line-height:1.3;margin-bottom:6px;color:var(--t1)}
.post-detail-meta{font-size:11px;color:var(--t3)}
.post-detail-body{padding:18px 16px;border-bottom:1px solid var(--bor);min-height:140px}
.post-detail-thumb{margin-bottom:14px}
.post-detail-thumb img{max-width:100%;border-radius:var(--rad);border:1px solid var(--bor)}
.post-detail-text{font-size:13px;line-height:1.8;color:var(--t1);white-space:pre-line}
.post-detail-actions{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--bor);background:var(--bg2)}
.post-action-btn{padding:5px 14px;border:1px solid var(--bor);border-radius:var(--rad);font-size:12px;font-weight:700;color:var(--t2);background:none;cursor:pointer;font-family:inherit;transition:all .15s}
.post-action-btn:hover{border-color:var(--acc);color:var(--acc)}
.post-action-btn.on{border-color:var(--acc);color:var(--c-white);background:var(--acc)}
/* .post-action-btn.down.on 제거(2026-08-07) — pages.css 에 같은 셀렉터가 있고(특정도 동점),
   pages.css(25) 가 components.css(18) 보다 뒤에 로드돼 이 규칙은 이미 죽어 있었다.
   비추 활성색은 --neg(밝은 빨강)로 통일한다 — 회색(--t2)은 "신호 없음"의 색이다. */
.post-detail-nav{display:flex;gap:6px;padding:10px 16px}
.post-nav-btn{flex:1;padding:7px 10px;border:1px solid var(--bor);border-radius:var(--rad);font-size:12px;font-weight:600;color:var(--t2);background:var(--bg2);cursor:pointer;font-family:inherit;transition:all .15s}
.post-nav-btn:hover:not([disabled]){border-color:var(--acc);color:var(--acc)}
.post-nav-btn[disabled]{opacity:.4;cursor:not-allowed}
/* COMMENTS */
.post-detail-comments{margin-top:18px;border:1px solid var(--bor);border-radius:var(--r);background:var(--sur);padding:14px 16px}
.comment-section-title{font-size:12px;font-weight:800;color:var(--t1);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bor);letter-spacing:.04em}
.comment-count{color:var(--acc);font-weight:800;margin-left:4px}
.comment-form{margin-bottom:14px}
.comment-textarea{width:100%;min-height:60px;padding:9px 11px;border:1px solid var(--bor);border-radius:var(--rad);background:var(--bg);color:var(--t1);font-size:13px;font-family:inherit;resize:vertical;outline:none;line-height:1.5}
.comment-textarea:focus{border-color:var(--acc)}
.comment-form-foot{display:flex;justify-content:flex-end;margin-top:6px}
.comment-form-guest{padding:14px;border:1px dashed var(--bor);border-radius:var(--rad);text-align:center;font-size:12px;color:var(--t3);cursor:pointer;margin-bottom:14px;transition:all .15s}
.comment-form-guest:hover{border-color:var(--acc);color:var(--acc)}
.comment-list{display:flex;flex-direction:column}
/* 신규 댓글 배너 — 진스타일. 각진 radius 토큰·헤어라인 보더, 액센트는 좌측 선과 건수에만
   (면적을 넓게 쓰지 않는 기조). 참고했던 외부 UI 의 풀블리드 파란 바·새로고침 아이콘·
   단축키 표기는 따르지 않았다. 색은 base.css 토큰만 — 새 hex 0. 다크/라이트 자동 대응. */
.cmt-new-bar{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;
  padding:9px 12px;background:var(--bg2);border:1px solid var(--bor);border-left:3px solid var(--acc);
  border-radius:var(--rad);color:var(--t2);font-family:inherit;font-size:12px;cursor:pointer;
  text-align:left;transition:border-color .15s,color .15s}
.cmt-new-bar:hover{border-color:var(--acc);color:var(--t1)}
.cmt-new-txt{font-weight:700;letter-spacing:.02em}
.cmt-new-num{min-width:18px;padding:1px 6px;border-radius:var(--r-sm);background:var(--acc);
  color:var(--c-white);font-size:11px;font-weight:800;text-align:center}
.cmt-new-cta{margin-left:auto;font-size:11px;color:var(--t3)}
.cmt-new-bar:hover .cmt-new-cta{color:var(--acc)}
.comment-row{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--bor)}
.comment-row:last-child{border-bottom:none}
.comment-row.best{background:var(--bg2);padding:10px 10px;border-radius:var(--rad);border-bottom:none;margin-bottom:6px}
.comment-best-badge{font-size:9px;font-weight:800;background:var(--acc);color:var(--c-white);padding:2px 5px;border-radius:var(--rad);align-self:flex-start;flex-shrink:0;line-height:1.4}
.comment-main{flex:1;min-width:0}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment-author{font-size:12px;font-weight:700;color:var(--t1)}
.comment-date{font-size:10px;color:var(--t3)}
.comment-body{font-size:12px;line-height:1.6;color:var(--t1);margin-bottom:6px;word-break:break-word}
.comment-foot{display:flex;gap:6px}
.comment-act{padding:2px 8px;border:1px solid var(--bor);border-radius:var(--rad);font-size:10px;color:var(--t3);background:none;cursor:pointer;font-family:inherit;transition:all .15s}
.comment-act:hover{border-color:var(--acc);color:var(--acc)}
.comment-act.on{border-color:var(--acc);color:var(--acc)}

/* ── Board Toolbar ── */
.board-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.board-toolbar-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.board-sort-group{display:flex;gap:0}
.board-write-btn.mabtn{padding:5px 12px;font-size:12px}
.board-search-input{padding:5px 10px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);color:var(--t1);font-size:12px;font-family:inherit;outline:none;width:160px;transition:border-color .15s}
.board-search-input:focus{border-color:var(--acc)}
/* ── Search Bar (type select + input) ── */
.search-bar{display:flex;align-items:center;gap:0;border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.search-bar select{padding:5px 6px;background:var(--bg3);border:none;border-right:1px solid var(--bor);color:var(--t2);font-size:12px;font-family:inherit;outline:none;cursor:pointer;flex-shrink:0}
.search-bar input{padding:5px 10px;background:transparent;border:none;color:var(--t1);font-size:12px;font-family:inherit;outline:none;flex:1;min-width:0;width:auto}
.search-bar input:focus,.search-bar select:focus{background:var(--bg2)}
.board-search-btn{padding:0 8px;background:transparent;border:none;outline:none;box-shadow:none;border-radius:0;color:var(--t3);cursor:pointer;display:flex;align-items:center;height:100%}
.board-search-btn svg{width:12px;height:12px}
.board-search-btn:hover{color:var(--t1)}
.board-search-btn:focus,.board-search-btn:active{border:none;outline:none;box-shadow:none}
.author-wrap{display:inline-flex;align-items:center;gap:4px}
/* 아바타 슬롯 — 닉 앞 원형 자리. 크기는 renderAuthor 가 인라인으로 준다(호출부마다 다름).
   ★슬롯은 항상 렌더된다. 예전엔 레벨 포인트를 모르면 통째로 사라져 행마다 닉 시작 X 가 달라졌고,
     그 위를 지나던 댓글 연결선이 축을 못 잡았다. 내용은 avatarInnerHTML 이 5모드로 채운다. */
.u-av{display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;   /* 원형 예외 — 아바타 */
  overflow:hidden;flex-shrink:0;background:var(--bg4);position:relative}
.u-av>*{max-width:100%;max-height:100%}
.u-av .cip-img{position:absolute;inset:0;display:block}   /* circImgInner 산출물 — 슬롯을 가득 채운다 */
/* avatarMode='color' — width/height:100% 대신 absolute+inset:0(.cip-img 과 동일 형태, :1179 선례).
   ★실측(Playwright/Chromium, 2026-08-23): 원인은 .u-av 자체가 아니라 병기 클래스 캐스케이드다.
   호출부(revCardHTML 등)가 avatarHTML 의 extraCls 로 .rv-av/.rev-card-avatar/.cp-av(s4.css·pages.css)를
   이 .u-av 엘리먼트에 직접 병기하는데, 그 규칙들의 display:grid;place-items:center(또는 display:flex)가
   .u-av 의 display:inline-flex 를 로드순서+specificity 로 덮어쓴다. 그 결과 .av-fill(빈 블록, 콘텐츠 없음)
   이 grid 트랙 사이징에 걸려 width:100% 만 0으로 접힌다(height:100% 는 유지 — 비대칭 실측 확인,
   계측 0×30 과 일치). absolute+inset:0 은 grid/flex 트랙 사이징 자체를 우회해 .u-av 의
   position:relative(이미 존재, :1177)를 포함 컨테이닝블록으로 직접 잡으므로 어느 병기 클래스가
   display 를 무엇으로 덮어써도 항상 슬롯을 꽉 채운다. display:block 은 absolute 가 이미 block 화하므로 제거. */
.av-fill{position:absolute;inset:0}
.av-init{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-weight:800;color:var(--acc-br);line-height:1}
.author-nick{cursor:pointer}
.author-nick:hover{color:var(--red)}
.user-ctx-menu{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--rad);box-shadow:0 4px 16px rgba(0,0,0,.4);min-width:140px;overflow:hidden}
.user-ctx-item{padding:8px 14px;font-size:13px;cursor:pointer;white-space:nowrap}
.user-ctx-item:hover{background:var(--bg3)}
/* [4-1] 신고 항목 구분 — 시안 .am-b.danger 대응. .am-b 를 병기하면 s8 전역 규칙이 통째로
   걸려 메뉴 지오메트리가 바뀌므로(리스킨은 범위 밖) 기존 클래스 조합에 색만 준다. */
.user-ctx-item.danger{color:var(--danger)}
.user-ctx-item.danger:hover{background:var(--danger-dim)}
/* ── Notification Bell ── */
.notif-btn{position:relative}
/* 원형 예외(dot 계열) — 정본 README "pill kept only for circles (avatars, dots)" */
.notif-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;background:var(--acc);color:var(--c-white);font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* 구 팝업 스킨(.notif-panel/-tabs/-tab/-list/-item/-icon/-body/-title/-time/-empty/-actions/
   -tab-badge/-total-badge)은 P3 에서 폐기했다 — 팝업이 시안 .nt-* 스킨(community-zine-s9, 전역)으로
   넘어갔다. 남긴 것 셋: .notif-btn·.notif-count 는 nav 벨/쪽지 버튼이고(팝업 아님),
   .notif-head 는 '쪽지 보내기' 모달이 아직 쓴다(ToonHerb.html:237). */
/* ── Notification Panel ── */
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--bor);flex-shrink:0}
/* 원형 예외(dot 계열) — 정본 README "pill kept only for circles (avatars, dots)" */
/* 원형 예외(dot 계열) — 정본 README "pill kept only for circles (avatars, dots)" */
/* ── Global Search Dropdown ── */
#search-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;width:300px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--rad);z-index:var(--z-dropdown);box-shadow:0 8px 24px rgba(0,0,0,0.4);overflow:hidden}
#search-dropdown.open{display:block}
.search-dropdown-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .15s}
.search-dropdown-item:hover{background:var(--bg3)}
.search-item-thumb{width:28px;height:36px;border-radius:var(--rad);object-fit:cover;flex-shrink:0;background:var(--bg3)}
.search-item-info{flex:1;min-width:0}
.search-item-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item-name mark{background:var(--acc);color:var(--c-white);border-radius:var(--rad);padding:0 1px;font-style:normal}
.search-item-meta{font-size:11px;color:var(--t3);margin-top:2px}
.board-view-btn{padding:4px 8px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);color:var(--t3);font-size:13px;cursor:pointer;transition:all .15s;line-height:1}
.board-view-btn:hover{border-color:var(--acc);color:var(--acc)}
.board-view-btn.on{background:var(--acc);border-color:var(--acc);color:var(--c-white)}

/* ── Board Table (list view) ── */
.board-table-head{display:grid;grid-template-columns:40px 54px 1fr 72px 54px 44px;gap:0;padding:4px 8px;background:var(--bg2);border-top:1px solid var(--bor);border-bottom:1px solid var(--bor);font-size:11px;color:var(--t3);font-weight:600}
.board-table-row{display:grid;grid-template-columns:40px 54px 1fr 72px 54px 44px;gap:0;padding:4px 8px;border-bottom:1px solid var(--bor);cursor:pointer;transition:background .12s;align-items:center;min-height:36px}
.board-table-row:hover{background:var(--bg2)}
.board-table-row.pinned{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.board-table-row.notice{background:var(--bg2)}
.board-table-upvote{font-size:13px;font-weight:800;color:var(--acc);text-align:center}
.board-table-cat{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden}
.board-cat-chip{display:inline-block;padding:1px 5px;background:var(--bg3);border-radius:var(--rad);font-size:10px;color:var(--t3);white-space:nowrap;max-width:48px;overflow:hidden;text-overflow:ellipsis}
.board-table-title{font-size:12px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.board-table-title .board-table-cmt{font-size:10px;color:var(--acc);flex-shrink:0}
.board-table-author{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-table-date{font-size:10px;color:var(--t3)}
.board-table-views{font-size:10px;color:var(--t3);text-align:right}

/* ── Board Pagination ── */
.board-pagination{display:flex;justify-content:center;align-items:center;gap:4px;margin:14px 0 4px}
.page-btn{min-width:28px;height:28px;padding:0 6px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);color:var(--t2);font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.page-btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
.page-btn.on{background:var(--acc);border-color:var(--acc);color:var(--c-white);font-weight:700}
.page-btn:disabled{opacity:.35;cursor:default}
.page-ellipsis{font-size:12px;color:var(--t3);padding:0 2px}
@media(max-width:640px){.moverlay{padding:0}.modal{max-height:96vh;border-radius:0}}

/* Phase 1-2 — 라이브러리 기록 */
.bm-prog-txt--editable{cursor:pointer;border-bottom:1px dashed var(--t3);transition:color .15s}
.bm-prog-txt--editable:hover{color:var(--t1);border-color:var(--t2)}
.bm-prog-edit{display:inline-flex;align-items:center;gap:4px}
.bm-prog-edit__input{width:52px;padding:1px 5px;background:var(--bg3);border:1px solid var(--acc);border-radius:var(--rad);color:var(--t1);font-size:10px;text-align:center;outline:none}
.bm-prog-edit__sep{font-size:10px;color:var(--t3)}
.bm-record-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;padding:1px 5px;border-radius:var(--rad);margin-left:3px;vertical-align:middle}
.bm-record-badge--rated{background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.28);color:var(--st-interested)}
.bm-record-badge--memo{background:rgba(160,160,160,.1);border:1px solid rgba(160,160,160,.2);color:var(--t2)}
.bm-memo-area{padding:6px 0 2px;border-top:1px solid var(--bor);margin-top:6px}
.bm-memo-add-btn{font-size:11px;color:var(--t3);background:none;border:none;cursor:pointer;padding:0}
.bm-memo-add-btn:hover{color:var(--t2)}
.bm-memo-preview{display:flex;align-items:flex-start;gap:6px}
.bm-memo-preview__text{font-size:11px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.bm-memo-edit-icon{background:none;border:none;cursor:pointer;color:var(--t3);padding:0;flex-shrink:0}
.bm-memo-edit-icon:hover{color:var(--t2)}
.bm-memo-editor{display:flex;flex-direction:column;gap:4px}
.bm-memo-textarea{width:100%;min-height:60px;padding:6px 8px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r-sm);color:var(--t1);font-size:12px;resize:vertical;outline:none;box-sizing:border-box}
.bm-memo-textarea:focus{border-color:var(--acc)}
.bm-memo-footer{display:flex;align-items:center;justify-content:space-between}
.bm-memo-char{font-size:10px;color:var(--t3)}
.bm-memo-char--warn{color:var(--st-onhold)}
.bm-memo-actions{display:flex;gap:5px}
.bm-memo-save-btn{font-size:11px;padding:3px 10px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--rad);cursor:pointer}
.bm-memo-cancel-btn{font-size:11px;padding:3px 8px;background:none;border:1px solid var(--bor);color:var(--t3);border-radius:var(--rad);cursor:pointer}
.bm-memo-cancel-btn:hover{color:var(--t2)}
.bm-memo-textarea--work{width:100%;min-height:72px}
.bm-memo-footer--work{margin-top:6px}
.bm-item--has-memo{border-left:2px solid var(--bor)}

/* HubScore 배지 */
.herb-score{display:inline-flex;align-items:center;gap:4px;cursor:default}
.herb-score--normal .herb-score__num{font-size:15px;font-weight:700;color:var(--t1)}
.herb-score--compact .herb-score__num{font-size:12px;font-weight:700;color:var(--t1)}
.herb-score--legend .herb-score__num{color:var(--herb-legendary)}
.herb-score--rotten .herb-score__num{color:#795548}
.herb-score--pending .herb-score__num{font-size:11px;color:var(--t3)}
.herb-score__label{font-size:11px;color:var(--t2);margin-left:2px}

/* ===== 랭킹 (정보형 — 2026-07-23 진스타일 이식) ===== */
/* 색: design --herb→--acc-br, --herb-d→--acc, --herb-soft→--acc-dim, --down=신설. 금은동 폐기(TOP3=herb 단색+row.top 그라데). 폰트=Chakra Petch(디스플레이)/--font/--font-mono. */
.rank-page{--down:#c68a4e;max-width:none;margin:0;width:100%;position:relative}
[data-theme=light] .rank-page{--down:#b06a2f}
/* 마스트헤드 + eyerow(LED+바코드+VOL) */
.rkx-mast{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;border-bottom:2px solid var(--t1);padding-bottom:12px}
.rkx-mast .eyerow{display:flex;align-items:center;gap:9px;width:100%;order:-1;font-family:var(--font-mono);font-size:10px;color:var(--t3);letter-spacing:.14em;margin-bottom:9px}
.rkx-mast .led{width:6px;height:6px;flex:none;background:var(--acc-br);box-shadow:0 0 6px var(--acc-br)}
@media(prefers-reduced-motion:no-preference){.rkx-mast .led{animation:rkxblink 2.4s steps(1) infinite}}
@keyframes rkxblink{0%,88%{opacity:1}90%,100%{opacity:.25}}
@keyframes rkxqfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rkxgrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:no-preference){
  .rkx-row{animation:rkxqfade .4s ease-out both}
  .rkx-hist .b i{transform-origin:bottom;animation:rkxgrowY .55s cubic-bezier(.3,.8,.3,1) both}
}
.rkx-mast .bar{flex:1;height:10px;opacity:.3;background-image:repeating-linear-gradient(90deg,var(--t2) 0 1px,transparent 1px 3px,var(--t2) 3px 5px,transparent 5px 6px,var(--t2) 6px 9px,transparent 9px 11px)}
.rkx-mast h1{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:24px;letter-spacing:-.01em}
.rkx-mast h1 em{color:var(--acc-br);font-style:normal}
.rkx-mast .sub{font-size:12px;color:var(--t3)}
.rkx-mast .sub b{color:var(--t2)}
.rkx-mast .upd{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--t3);letter-spacing:.04em}
/* 매체탭 (샤프) */
.rkx-mtabs{display:flex;gap:2px;margin-top:16px}
.rkx-mtab{font-family:'Chakra Petch',var(--font);padding:9px 20px;font-size:14px;font-weight:600;color:var(--t3);background:var(--bg2);border:1px solid var(--bor);border-bottom:none;cursor:pointer;white-space:nowrap}
.rkx-mtab:hover{color:var(--t1);background:var(--bg3)}
.rkx-mtab.on{color:var(--bg);background:var(--acc-br);border-color:var(--acc-br)}
/* 필터바 (샤프 chip + mono 라벨) */
.rkx-fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--bor);padding:10px 14px}
.rkx-fgrp{display:flex;align-items:center;gap:7px}
.rkx-flbl{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.1em}
.rkx-fdiv{width:1px;height:18px;background:var(--bor)}
.rkx-chip{font-size:12.5px;font-weight:600;color:var(--t2);padding:5px 12px;border:1px solid var(--bor);background:var(--bg3);cursor:pointer;white-space:nowrap;position:relative}
.rkx-chip:hover{color:var(--t1);border-color:var(--bor2)}
.rkx-chip.on{color:var(--bg);background:var(--acc-br);border-color:var(--acc-br)}
.rkx-chip.disabled{color:#5a5a5a;background:transparent;cursor:not-allowed;border-style:dashed}
.rkx-soon{display:inline-block;font-family:var(--font-mono);font-size:8px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc-br);padding:0 4px;margin-left:5px;line-height:13px;vertical-align:middle}
/* 성별 필터 전체 폴백 안내(빈 성별데이터 시) */
.rkx-gnote{font-size:11.5px;color:var(--t3);padding:8px 2px 0;line-height:1.5}
.side-gnote{font-size:10.5px;color:var(--t3);padding:4px 2px 6px;line-height:1.4}
/* 요약 스트립 (4셀) */
.rkx-summary{display:flex;align-items:stretch;gap:0;border:1px solid var(--bor);border-top:none;background:var(--bg2)}
.rkx-summary .s{padding:11px 16px;border-right:1px solid var(--bor);display:flex;flex-direction:column;gap:3px;min-width:0}
.rkx-summary .s:last-child{border-right:none;flex:1}
.rkx-summary .k{font-family:var(--font-mono);font-size:9px;color:var(--t3);letter-spacing:.09em}
.rkx-summary .v{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:17px;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.rkx-summary .v em{font-style:normal;color:var(--acc-br);font-size:12px}
.rkx-summary .s.lead .v{font-size:14px;overflow:hidden;text-overflow:ellipsis}
/* 컬럼 헤더 + 행 (밀도형): 순위/작품/평점분포/평가/점수 */
.rkx-head,.rkx-row{display:grid;grid-template-columns:52px 1fr 132px 78px 108px;gap:14px;align-items:center}
.rkx-head{padding:10px 16px;font-family:var(--font-mono);font-size:10px;color:var(--t3);letter-spacing:.08em;border-bottom:1px solid var(--bor);margin-top:14px}
.rkx-head .c-c{text-align:center}.rkx-head .c-r{text-align:right}
.rkx-row{padding:12px 16px;border-bottom:1px solid var(--bor);cursor:pointer;transition:background .12s}
.rkx-row:hover{background:var(--bg2)}
.rkx-row.top{background:linear-gradient(90deg,var(--acc-dim),transparent 40%)}
.rkx-row.low{opacity:.5}
/* 순위 셀 + 변동 배지 */
.rkx-rk{display:flex;flex-direction:column;align-items:center;gap:3px}
.rkx-no{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:22px;color:var(--t2);font-variant-numeric:tabular-nums;line-height:1}
.rkx-row.top .rkx-no{color:var(--acc-br)}
.rkx-mv{font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1}
.rkx-mv.up{color:var(--acc-br)}.rkx-mv.dn{color:var(--down)}.rkx-mv.eq{color:var(--t3)}.rkx-mv.new,.rkx-mv.re{color:var(--acc-br)}
/* 작품 셀 */
.rkx-wk{display:flex;align-items:center;gap:13px;min-width:0}
.rkx-poster{position:relative;width:44px;height:66px;flex:none;border:1px solid var(--bor);overflow:hidden;background:var(--bg4)}
.rkx-row.top .rkx-poster{width:52px;height:78px}
.rkx-poster img{width:100%;height:100%;object-fit:cover}
.rkx-info{min-width:0}
.rkx-title{font-size:15px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.rkx-row:hover .rkx-title{color:var(--acc-br)}
.rkx-meta{font-size:11.5px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkx-meta .typ{color:var(--t2);font-weight:600}
.rkx-meta .dot{margin:0 5px;opacity:.5}
.rkx-genre{display:inline-block;font-family:var(--font-mono);font-size:9.5px;color:var(--t2);border:1px solid var(--bor);padding:0 6px;margin-top:5px;white-space:nowrap;cursor:pointer}
.rkx-genre:hover{color:var(--acc-br);border-color:var(--acc-br)}
/* 평점 분포 히스토그램 */
.rkx-hist{display:flex;align-items:flex-end;gap:3px;height:30px;justify-content:center}
.rkx-hist .b{width:8px;height:100%;background:var(--bg4);position:relative;overflow:hidden}
.rkx-hist .b i{position:absolute;inset:0;background:var(--acc-br);opacity:.6}
.rkx-hist.na{opacity:.3}
.rkx-histlbl{display:block;text-align:center;font-family:var(--font-mono);font-size:8px;color:var(--t3);margin-top:3px;letter-spacing:.04em}
/* 평가 수 */
.rkx-pt{text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
.rkx-pt small{display:block;font-size:8.5px;color:var(--t3);margin-top:2px;letter-spacing:.05em}
/* 점수 셀 (잎 + 등급색) */
.rkx-score{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rkx-score .v{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:24px;color:var(--acc-br);font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:center;gap:5px}
.rkx-score .v .lf{width:15px;height:15px;fill:currentColor;flex:none}
.rkx-score.g-legend .v{color:var(--acc-br)}
.rkx-score.g-normal .v{color:var(--acc)}
.rkx-score.g-low .v{color:var(--down)}
.rkx-score .grade{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em}
.rkx-score .grade.g-legend{color:var(--acc-br)}.rkx-score .grade.g-normal{color:var(--t3)}.rkx-score .grade.g-low{color:var(--down)}
.rkx-score.pending .v{color:var(--t3);font-size:13px}
.rkx-score.pending .v .lf{opacity:.45}
.rkx-score.pending .grade{color:var(--t3)}
/* S4 반응형 — explore-responsive 기조(760/520). 데스크톱(≥761) 무변경 */
@media(max-width:760px){
  .rkx-head,.rkx-row{grid-template-columns:44px 1fr 84px;gap:10px}
  .rkx-head>div:nth-child(3),.rkx-head>div:nth-child(4),.rkx-row .cHist,.rkx-pt{display:none}
  .rkx-poster{width:40px;height:60px}
  .rkx-row.top .rkx-poster{width:46px;height:69px}
  .rkx-summary{flex-wrap:wrap}
  .rkx-summary .s{flex:1 1 50%;border-right:1px solid var(--bor)}
  .rkx-summary .s:nth-child(2n){border-right:none}
  .rkx-fbar{gap:10px 12px}
}
@media(max-width:520px){
  .rkx-mtab{padding:8px 14px;font-size:13px}
  .rkx-chip{padding:4px 10px;font-size:12px}
  .rkx-title{font-size:14px}
  .rkx-score .v{font-size:21px}
  .rkx-summary .v{font-size:15px}
}
/* 사이드바 랭킹 고도화 (1-6 A) */
.side-rank-no.gold{color:#F5C518}
.side-rank-no.silver{color:#C0C0C0}
.side-rank-no.bronze{color:#CD7F32}
.side-all-link{display:block;text-align:center;font-size:11px;color:var(--t2);margin-top:8px;padding-top:8px;border-top:1px solid var(--bor);cursor:pointer}
.side-all-link:hover{color:var(--acc)}
/* 홈 히어로 평점 (1-6 B) */
.hero-rate{font-size:13px;font-weight:800;color:#F5C518;margin-top:4px}
.hero-axes-mini{font-size:11px;font-weight:600;color:var(--t2);margin-left:8px}
/* 평론 PICK 대표작 (1-6 E) */
.critic-pick-rev{margin-top:6px;cursor:pointer}
.critic-pick-work{font-size:12px;font-weight:700;color:var(--t1)}
.critic-pick-rev:hover .critic-pick-work{color:var(--acc)}
.critic-pick-score{display:block;font-size:10px;color:var(--t3);margin-top:1px}
/* 사이드바 성별필터 준비중 */
.side-gender a.dis{opacity:.4;cursor:not-allowed;color:var(--t3)}
/* 1-8 추천 UI */
.affinity-badge{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:#5B8DEF;background:rgba(91,141,239,.12);border:1px solid rgba(91,141,239,.4);padding:3px 10px;border-radius:var(--rad)}
.reltag-row{display:flex;flex-wrap:wrap;gap:6px}
.reltag{font-size:12px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:4px 11px;cursor:pointer}
.reltag:hover{color:var(--acc);border-color:var(--acc)}
.urec-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.urec-card{background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:10px 12px}
.urec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.urec-to{font-size:13px;font-weight:700;color:var(--acc);cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urec-count{font-size:11px;font-weight:700;color:var(--acc);background:var(--acc-dim);border-radius:var(--rad);padding:2px 9px;flex-shrink:0}
.urec-reasons{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.urec-reason-row{display:flex;align-items:center;gap:8px}
.urec-reason{flex:1;min-width:0;font-size:12px;color:var(--t2);line-height:1.4;margin:0}
.urec-by{font-size:11px;color:var(--t3);flex-shrink:0}
.urec-up{font-size:11px;font-weight:700;color:var(--t2);background:none;border:1px solid var(--bor);border-radius:var(--rad);padding:2px 10px;cursor:pointer;flex-shrink:0}
.urec-up:hover{color:var(--acc);border-color:var(--acc)}
.urec-up.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
.urec-more{align-self:flex-start;margin-top:6px;font-size:11px;color:var(--t3);background:none;border:none;cursor:pointer;padding:2px 0;font-family:inherit}
.urec-more:hover{color:var(--acc)}
.urec-form{display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--rad);padding:12px}
.urec-sel,.urec-ta{width:100%;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);color:var(--t1);padding:8px;font-size:12px;font-family:inherit}
.urec-ta{resize:vertical}
.urec-btn{align-self:flex-end;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--rad);padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer}
/* 검색형 드롭다운 (searchSelect) */
.ssel{position:relative}
.ssel-input{width:100%;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);color:var(--t1);padding:8px 26px 8px 10px;font-size:12px;font-family:inherit}
.ssel-input:focus{border-color:var(--acc);outline:none}
.ssel-caret{position:absolute;right:9px;top:9px;color:var(--t3);font-size:11px;pointer-events:none}
.ssel-pop{position:absolute;left:0;right:0;top:calc(100% + 2px);background:var(--bg2);border:1px solid var(--bor2);border-radius:var(--rad);max-height:240px;overflow-y:auto;z-index:var(--z-dropdown);display:none;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.ssel-pop.on{display:block}
.ssel-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;font-size:12px}
.ssel-opt:hover{background:var(--bg3)}
.ssel-opt-l{font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ssel-opt-t{display:inline-block;white-space:nowrap}
.ssel-opt-l.ssel-mq{text-overflow:clip}   /* 마퀴 대상: 잘림(…) 끄고 스크롤로 전체 노출 */
.ssel-opt-l.ssel-mq .ssel-opt-t::after{content:attr(data-mq);padding-left:24px}   /* 2번째 카피(gap 24px) → 끊김없는 루프 */
.ssel-opt:hover .ssel-opt-l.ssel-mq .ssel-opt-t{animation:sselMq var(--mq-t,5s) linear infinite}
@keyframes sselMq{from{transform:translateX(0)}to{transform:translateX(calc(-1*var(--mq-w,0)))}}
@media (prefers-reduced-motion:reduce){.ssel-opt:hover .ssel-opt-l.ssel-mq .ssel-opt-t{animation:none}}
.ssel-opt-s{font-size:10px;color:var(--t3);flex-shrink:0}
.ssel-empty{padding:10px 11px;font-size:12px;color:var(--t3)}
/* searchSelect 팝업 fixed(overflow 탈출) + 작품상세 상단 책갈피 */
.ssel-pop{position:fixed;right:auto}
/* 작품상세 히어로 책갈피 그룹(게이지 관련 죽은 패치 이력 제거 — 실제 승자는 pages.css .wp-gauge-row/.work-hero) */
.work-bm-lbl{font-size:12px;font-weight:700;color:rgba(255,255,255,.85)}
.work-bm-hint{font-size:11px;color:rgba(255,255,255,.6)}
/* 책갈피 그룹 우측 정렬 */
.work-bm-group{display:flex;align-items:center;gap:6px;margin-left:auto}
.work-bm-lbl,.bm-prog-txt--editable,.work-bm-hint{white-space:nowrap}
.work-bm-group{flex-shrink:0}
/* fix: 책갈피 margin-left:auto 제거(게이지 grow 잡아먹던 원인) → 게이지가 남는 폭 채움 */
.work-bm-group{margin-left:0}
/* 히어로 위 진행 텍스트 가독성(라이트 모드 포함) */
.work-hero .bm-prog-txt--editable{color:rgba(255,255,255,.88)}
.work-hero .bm-prog-txt--editable:hover{color:var(--c-white)}
/* 허브스코어 테스트 안내 ? */
.hub-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;font-size:9px;font-weight:800;opacity:.55;cursor:help;margin-left:5px;flex-shrink:0;align-self:flex-start}
.hub-help:hover{opacity:1}
/* ── 허브콘 (Phase3-6, namespace=.hc-) — 시안 design_preview_hubcon.html v2 ── */
.hc-page{max-width:1080px;padding-top:26px}   /* 글로벌 네비바 아래 숨 공간 */
.hc-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
/* 헤더바(타이틀+탭) — 콘텐츠와 시각 분리 + 상단탭↔콘텐츠 숨 공간 */
.hc-headbar{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--bor);flex-wrap:wrap;row-gap:12px}
.hc-headbar .hc-title{margin-right:18px}
.hc-title{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-right:8px}
.hc-title .k{color:var(--acc)}
.hc-menu{display:flex;gap:4px}
.hc-mtab{padding:7px 14px;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;border:1px solid transparent}
.hc-mtab.on{background:var(--acc-dim);color:var(--t1);border-color:var(--acc)}
.hc-mtab:hover:not(.on){background:var(--bg3)}
.hc-search{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:7px 11px;width:240px}
.hc-search svg{flex-shrink:0;color:var(--t3)}
.hc-search input{flex:1;background:none;border:none;color:var(--t1);font-size:13px;outline:none;font-family:inherit}
.hc-count{font-size:12px;color:var(--t3);margin:0 0 22px 2px}
.hc-count b{color:var(--t2)}
.hc-sec{margin-bottom:34px}
.hc-sec-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hc-sec-t{font-size:16px;font-weight:700}
.hc-period{display:flex;gap:2px;margin-left:4px;background:var(--bg3);border-radius:var(--r);padding:2px}
.hc-pbtn{padding:4px 12px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border:none;background:none;font-family:inherit}
.hc-pbtn.on{background:var(--acc);color:#fff}
.hc-more{margin-left:auto;font-size:12px;color:var(--t3);cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.hc-more:hover{color:var(--acc)}
/* 뒤로가기 — 값은 .hc-more 와 같고 margin 만 다르다(hc-more 는 margin-left:auto 로 우측에 붙는다).
   구 마크업은 .hc-more + 인라인 margin:0 0 12px 였다 — 그 인라인을 여기로 승격한 것이다. */
.hc-back{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--t3);cursor:pointer;margin:0 0 12px}
.hc-back:hover{color:var(--acc)}
/* 섹션 헤더 보조문구(hc-sec-l=헤더 라벨, hc-sec-sub=개수) — 구 인라인 font-size:12px;color:t3 승격 */
.hc-sec-l{font-size:12px;color:var(--t3);margin-left:2px}
.hc-sec-sub{font-size:12px;color:var(--t3)}
/* 폼 하단 버튼줄 — 기본 우측정렬, .split 은 양끝(이전 / 저장·완료) */
.hc-fbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.hc-fbtns.split{justify-content:space-between}
/* 인기: DC식 정사각 그리드 TOP10 (5×2). 골격=표준, 차별화=스킨 */
.hc-rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hc-pcard{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s}
.hc-pcard:hover{border-color:var(--bor2);transform:translateY(-2px)}
.hc-pthumb{position:relative;aspect-ratio:1/1;background:var(--bg4)}
.hc-pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.hc-prank{position:absolute;top:0;left:0;width:23px;height:23px;border-radius:0;background:rgba(0,0,0,.66);color:#fff;font-size:13px;font-weight:800;font-style:italic;display:flex;align-items:center;justify-content:center}
.hc-prank.top{background:var(--acc-br);color:var(--ink)}
html[data-theme="light"] .hc-prank.top{color:#fff}
.hc-pfree{position:absolute;bottom:7px;right:7px;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r)}
.hc-pci{padding:8px 10px 11px}
.hc-pname{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-pmeta{font-size:11px;color:var(--t3);margin-top:3px;display:flex;flex-direction:column;gap:1px}
/* 메타줄 하트 — 이모지가 아니라 인라인 SVG(§8). 글자 크기에 맞춰 baseline 정렬 */
.hc-favi{width:9px;height:9px;display:inline-block;vertical-align:-1px}
.hc-pmeta a{color:var(--t2);text-decoration:none;cursor:pointer}
.hc-pmeta a:hover{color:var(--acc);text-decoration:underline}
.hc-pthumb .hc-fav{position:absolute;top:6px;right:6px;bottom:auto;width:24px;height:24px}  /* 인기/즐겨찾기 카드 — 순위(좌상)·무료(우하)와 비충돌 */
/* 하위탭 슬롯·게이트·서브칩 */
.hc-slot{border:1px dashed var(--bor2);border-radius:var(--r);padding:34px 22px;color:var(--t2);font-size:13px;line-height:1.7;background:var(--bg2)}
.hc-slot em{color:var(--t3);font-style:normal;font-size:11px}
.hc-gate{display:flex;align-items:center;gap:14px;color:var(--t1)}
.hc-gate svg{color:var(--acc);flex-shrink:0}
.hc-subrow{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.hc-chip{padding:7px 14px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--bor);font-size:13px;color:var(--t2);cursor:pointer;font-family:inherit}
.hc-chip.on{background:var(--acc-dim);color:var(--t1);border-color:var(--acc)}
/* 위험 액션(중지 등) — 되돌리기 어려운 처리라 색으로 구분한다. R1에서는 소비처가 없어 만들지 않았다. */
.hc-chip.danger{color:var(--neg);border-color:var(--neg)}
.hc-chip.danger:hover{background:rgba(224,80,80,.1)}
/* Stage2 하위탭(사용법·주의사항·내허브콘·업로드) */
.hc-sec-t{font-size:15px;font-weight:700}
.hc-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--acc-dim),var(--bg2));border:1px solid var(--bor);border-radius:var(--r);padding:28px 26px;margin-bottom:22px}
.hc-hero-t{font-family:'Chakra Petch',var(--font);font-size:27px;font-weight:700;line-height:1.25;letter-spacing:-.5px;margin:11px 0 0;position:relative}
/* 키커 — LED 도트는 전역 .dotled(explore-responsive.css)를 그대로 쓴다(펄스 포함). */
.hc-hero-k{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--acc-br);text-transform:uppercase;position:relative}
/* 바코드 장식 — 우하단. 이미지·이모지가 아니라 CSS 반복 그라디언트다(요청 명시).
   본문 위로 겹치지 않게 뒤(z-index 0)에 두고 클릭도 먹지 않는다. */
.hc-hero-bc{position:absolute;right:22px;bottom:18px;width:118px;height:26px;opacity:.34;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--acc) 0 2px,transparent 2px 5px,var(--acc) 5px 6px,transparent 6px 10px,var(--acc) 10px 13px,transparent 13px 15px)}
.hc-hero-s{font-size:13.5px;color:var(--t2);margin-top:10px;line-height:1.7;position:relative;max-width:620px}
.hc-howrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.hc-how{display:flex;gap:12px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:16px 18px;font-size:13px;color:var(--t2);line-height:1.6}
.hc-how b{color:var(--t1);font-size:13.5px}
.hc-how-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hc-rulebox{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
.hc-rulebox.acc{margin-top:18px;border-color:var(--acc)}
.hc-rulebox-t{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;margin-bottom:13px}
.hc-rulebox-t svg{color:var(--acc)}
.hc-rules{list-style:none;display:flex;flex-direction:column;gap:9px}
.hc-rules li{font-size:13.5px;color:var(--t2);padding-left:16px;position:relative;line-height:1.65}
.hc-rules li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.hc-rules li b{color:var(--t1)}
.hc-spec{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--bor);border-radius:var(--r);overflow:hidden}
.hc-spec th{text-align:left;width:150px;background:var(--bg);color:var(--t3);font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--bor);vertical-align:top}
.hc-spec td{color:var(--t1);padding:12px 14px;border-bottom:1px solid var(--bor);line-height:1.6}
.hc-spec tr:last-child th,.hc-spec tr:last-child td{border-bottom:none}
.hc-mylist{display:flex;flex-direction:column;gap:10px}
.hc-myrow{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:12px 14px}
.hc-mythumb{width:46px;height:46px;border-radius:var(--r);overflow:hidden;background:var(--bg4);flex-shrink:0}
.hc-mythumb img{width:100%;height:100%;object-fit:cover}
.hc-myinfo{flex:1;min-width:0}
.hc-myname{font-size:14px;font-weight:700;color:var(--acc);cursor:pointer}
.hc-myname:hover{text-decoration:underline}
.hc-mysub{font-size:11.5px;color:var(--t3);margin-top:3px}
.hc-st{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r);flex-shrink:0}
.hc-st-ok{background:rgba(38,166,154,.16);color:#26a69a}
.hc-st-wait{background:var(--acc-dim);color:var(--acc)}
.hc-st-no{background:var(--bg4);color:var(--t3)}
.hc-empty{border:1px dashed var(--bor2);border-radius:var(--r);padding:30px;text-align:center;color:var(--t3);font-size:12.5px}
.hc-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--acc);background:var(--acc-dim);border-radius:var(--r);padding:15px 18px;margin-top:18px}
.hc-cta b{display:block;font-size:13.5px}
.hc-cta span{display:block;font-size:11.5px;color:var(--t2);margin-top:3px}
/* 게이트 미충족 — 누를 것이 없으므로 강조를 낮춘다(그린 보더 대신 기본 보더) */
.hc-cta.nogate{border-color:var(--bor);background:var(--bg3)}
.hc-gatebox{border:1px solid var(--bor2);border-radius:var(--r);padding:30px 24px;text-align:center;background:var(--bg2)}
.hc-gatebox>svg{color:var(--acc)}
.hc-gate-t{font-size:16px;font-weight:800;margin-top:12px}
.hc-gate-req{font-size:12px;color:var(--t3);margin-top:5px}
.hc-gate-miss{list-style:none;display:inline-flex;flex-direction:column;gap:6px;margin:16px auto 0;text-align:left}
.hc-gate-miss li{font-size:12.5px;color:var(--t2);padding-left:18px;position:relative}
.hc-gate-miss li::before{content:'!';position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--acc);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hc-gate-hint{font-size:12px;color:var(--t3);margin-top:16px}
/* 폼 하단 안내 — .hc-gate-hint 와 색·크기는 같고 상단 여백만 좁다(구 인라인 margin-top:8px 승격) */
.hc-hint{font-size:12px;color:var(--t3);margin-top:8px}
/* ── 업로드 검증 인라인 표시(R2) ── 구 alert 대체. 입력하는 동안 계속 보이는 자리라
   경고는 --neg(부정=밝은 빨강), 통과는 --acc 계열로 의미축을 지킨다. */
.hc-errbox{margin-top:10px;border:1px solid var(--neg);background:rgba(224,80,80,.08);border-radius:var(--r);padding:11px 13px;font-size:12px;color:var(--t2)}
.hc-errbox b{display:block;color:var(--neg);font-size:12px;margin-bottom:6px}
.hc-errbox ul{margin:0;padding-left:16px}
.hc-errbox li{margin:2px 0;line-height:1.5}
.hc-okbox{margin-top:10px;border:1px solid var(--acc);background:var(--acc-dim);border-radius:var(--r);padding:10px 13px;font-size:12px;font-weight:700;color:var(--acc-br);display:flex;align-items:center;gap:6px}
/* 약관 요약 — 체크박스 위에서 '무엇에 동의하는지'를 보여준다 */
.hc-agreebox{border:1px solid var(--bor);background:var(--bg3);border-radius:var(--r);padding:13px 15px;margin-bottom:12px;font-size:12px;color:var(--t2);line-height:1.65}
.hc-agreebox b{color:var(--t1)}
.hc-agreebox ul{margin:7px 0 0;padding-left:16px}
/* 확인 모달 요약표 */
.hc-cfm-sum{display:flex;flex-direction:column;gap:7px;margin:14px 0 4px;font-size:13px}
.hc-cfm-sum>div{display:flex;justify-content:space-between;gap:12px}
.hc-cfm-sum span{color:var(--t3)}
.hc-steps{display:flex;align-items:center;margin-bottom:16px}
.hc-step{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t3);font-weight:600}
.hc-step.on{color:var(--t1)}
.hc-step-n{width:22px;height:22px;border-radius:50%;background:var(--bg4);color:var(--t3);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hc-step.on .hc-step-n{background:var(--acc);color:#fff}
.hc-step-line{flex:1;height:1px;background:var(--bor);margin:0 10px}
.hc-formcard{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:16px}
.hc-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1)}
.hc-field{display:flex;flex-direction:column;gap:6px}
.hc-flbl{font-size:12px;color:var(--t2);font-weight:600}
/* 라벨 안 보조문구(글자수 제한 등) — 구 인라인 color:var(--t3) 승격.
   ★font-style:normal 필수 — <em> 기본 italic 이라 빼면 구 <span> 과 기울기가 달라진다. */
.hc-flbl em{color:var(--t3);font-style:normal}
.hc-inrow{display:flex;gap:8px}
.hc-input{flex:1;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);color:var(--t1);padding:8px 11px;font-size:13px;font-family:inherit;outline:none}
.hc-input:focus{border-color:var(--acc)}
/* 업로드 2단계 콘 입력폼 */
.hcu-conlist{display:flex;flex-direction:column;gap:7px}
.hcu-conrow{display:flex;align-items:center;gap:8px}
.hcu-del{width:30px;height:34px;flex-shrink:0;border:1px solid var(--bor);background:var(--bg3);color:var(--t3);border-radius:var(--r);cursor:pointer;font-size:15px;line-height:1}
.hcu-del:hover{color:var(--neg);border-color:var(--neg)}
.hcu-conimg.on{border-style:solid;border-color:var(--acc)}
.hcu-conimg{flex-shrink:0;width:44px;height:44px;border-radius:var(--r);border:1px solid var(--bor);background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;color:var(--t3);font-size:18px}
.hcu-conimg img{width:100%;height:100%;object-fit:cover}
.hcu-alt{flex:1;min-width:0}
/* 팩 상세(Stage3) */
.hcd-head{display:flex;gap:16px;align-items:flex-start}
.hcd-rep{flex-shrink:0;width:168px;height:168px;border-radius:var(--r);border:1px solid var(--bor);background:var(--bg4) center/cover no-repeat}
.hcd-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hcd-name{font-family:'Chakra Petch',var(--font);font-size:23px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 액션줄 — 구 인라인(align-self:flex-start;margin-top:4px)을 승격한 자리 */
.hcd-acts{display:flex;align-items:center;gap:8px;margin-top:10px}
.hcd-sub{font-size:12px;color:var(--t3)}
.hcd-cre{font-size:12px;color:var(--t2)}
.hcd-desc{font-size:13px;color:var(--t2);line-height:1.6}
.hcd-cons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.hcd-cons .pk-con{aspect-ratio:1/1}
/* 허브콘 관리자 검수(Stage5) */
/* 허브콘 검수 처리내역 — .atbl 은 entity/hub-apply/admin-critics/admin-filterconfig 가 공유하는
   공용 표라 base 규칙을 건드리지 않고 modifier 로만 얹는다(개칭도 하지 않는다).
   td.dim = 사유·처리자/시각 같은 보조열(구 인라인 color/font-size 승격). */
.hc-atbl td.dim{color:var(--t3);font-size:11px}
/* 반려 사유 모달 — 사유 버튼 줄 */
.hc-rj-opts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.hcrv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hcrv-card{border:1px solid var(--bor);border-radius:var(--r);padding:12px;background:var(--bg2);display:flex;flex-direction:column;gap:10px}
.hcrv-hd{display:flex;gap:10px;align-items:flex-start}
.hcrv-thumb{width:56px;height:56px;border-radius:var(--r);border:1px solid var(--bor);background:var(--bg4) center/cover no-repeat;flex-shrink:0}
.hcrv-thumb-sm{width:24px;height:24px;border-radius:var(--r);vertical-align:middle;object-fit:cover}
.hcrv-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hcrv-name{font-size:14px;font-weight:800}
.hcrv-sub{font-size:11px;color:var(--t3)}
.hcrv-desc{font-size:12px;color:var(--t2);line-height:1.5}
.hcrv-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.hcrv-tag{font-size:10px;color:var(--t3);background:var(--bg3);border-radius:var(--r);padding:1px 7px}
.hcrv-cons{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;align-items:center}
.hcrv-con{width:100%;aspect-ratio:1/1;border-radius:var(--r);border:1px solid var(--bor);object-fit:cover}
.hcrv-more{font-size:11px;color:var(--t3);text-align:center;align-self:center}
.hcrv-act{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--bor);padding-top:10px}
/* 평점 수정 이력 팝오버(R7 D-9) — 앵커드 팝오버(트리거 아래, backdrop 없음), .pk-pop 과 동형 골격 */
.rat-hist-pop{position:fixed;width:260px;max-width:calc(100vw - 16px);background:var(--sur);border:1px solid var(--bor2);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden;z-index:var(--z-popover-panel);padding:10px 12px}
.rat-hist-hd{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:6px}
.rat-hist-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.rat-hist-row{display:flex;align-items:center;gap:6px;font-size:11px;flex-wrap:wrap}
.rat-hist-date{color:var(--t3);flex:none;width:34px}
.rat-hist-tot{font-weight:700;flex:none;width:26px}
.rat-hist-ax{color:var(--t2);flex:1;min-width:0}
.rat-hist-diff{flex:none;font-weight:600;color:var(--t3)}
.rat-hist-diff.up{color:var(--acc)}
.rat-hist-diff.down{color:var(--neg)}
.rat-hist-badge{flex:none;font-size:9px;color:var(--t3);background:var(--bg3);border-radius:var(--r);padding:1px 5px}
.rat-hist-empty{font-size:11px;color:var(--t3);padding:2px 0}
.rat-hist-load{font-size:11px;color:var(--t3)}
.rat-hist-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--bor);font-size:10px;color:var(--t3);line-height:1.4}
/* 허브콘 피커(4a) — 앵커드 팝오버(트리거 아래, backdrop 없음) */
.pk-pop{position:fixed;width:321px;max-width:calc(100vw - 16px);background:var(--sur);border:1px solid var(--bor2);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden;z-index:var(--z-popover-panel)}
.pk-head{display:flex;align-items:center;padding:11px 12px 9px;border-bottom:1px solid var(--bor)}
.pk-segs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r);padding:2px}
.pk-seg{font-size:12px;font-weight:600;color:var(--t3);padding:4px 11px;border-radius:var(--r);cursor:pointer}
.pk-seg.pk-on{background:var(--acc);color:#fff}
.pk-manage{margin-left:auto;font-size:11px;color:var(--acc);cursor:pointer}
.pk-packs{display:flex;gap:5px;padding:9px 11px 4px;overflow-x:auto;scrollbar-width:none}
.pk-packs::-webkit-scrollbar{display:none}
.pk-p{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r);overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--bg4);padding:0}
.pk-p.pk-on{border-color:var(--acc-br)}
.pk-p img{width:100%;height:100%;object-fit:cover}
.pk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;align-items:start;gap:5px;padding:8px 11px 12px;max-height:200px;overflow-y:auto;scrollbar-width:none}
.pk-grid::-webkit-scrollbar{display:none}
.pk-con{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--bg4);cursor:pointer;border:1px solid transparent;display:flex;align-items:center;justify-content:center;padding:3px}
.pk-con:hover{border-color:var(--acc);background:var(--acc-dim)}
/* 빈 상태 — 구 인라인(grid-column/padding/색) 승격 */
.pk-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--t3);font-size:12px}
.pk-con img{width:100%;height:100%;object-fit:contain}
/* 인라인 허브콘(본문·댓글 [hubcon:id] hydrate 결과) */
.hc-inline{height:72px;width:72px;object-fit:contain;vertical-align:middle;border-radius:var(--r);margin:2px;background:var(--bg3)}
/* 전체: 팩 미리보기 스트립 카드 */
.hc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hc-card{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s}
.hc-card:hover{border-color:var(--bor2);transform:translateY(-2px)}
.hc-chero{position:relative;aspect-ratio:1/1;background:var(--bg4)}
.hc-chero img{width:100%;height:100%;object-fit:cover;display:block}
.hc-free{position:absolute;top:9px;right:9px;background:rgba(38,166,154,.92);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r)}
.hc-cnt-badge{position:absolute;bottom:9px;left:9px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r);display:inline-flex;align-items:center;gap:4px}
.hc-fav{position:absolute;bottom:9px;right:9px;width:28px;height:28px;border-radius:var(--r);border:none;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hc-fav.on{color:var(--acc-br)}
.hc-fav:hover{background:rgba(0,0,0,.72)}
/* 미리보기 스트립 — gap 1px + 배경으로 헤어라인 구분선을 만든다(칸마다 보더를 주면 이중선이 된다) */
.hc-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);margin:9px 11px 0}
.hc-mini{aspect-ratio:1/1;border-radius:0;overflow:hidden;background:var(--bg4);display:flex;align-items:center;justify-content:center;padding:3px}
.hc-mini img{width:100%;height:100%;object-fit:contain}
.hc-mini.more{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--t3);background:var(--bg3)}
.hc-ci{padding:9px 12px 13px}
.hc-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-creator{font-size:11px;color:var(--t3);margin-top:3px}
/* 허브콘 반응형 — 태블릿/모바일 그리드 축소 + 읽기탭 통폭 + spec 테이블 stack */
@media(max-width:900px){
  .hc-rank-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hcd-cons{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:640px){
  .hc-howrow{grid-template-columns:1fr;gap:10px;margin-bottom:18px}
  .hc-rank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hc-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .hcd-cons{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hcd-head{flex-direction:column}
  .hcd-rep{width:130px;height:130px}
  .hc-menu{flex-wrap:wrap}
  .hc-search{width:100%}
  .hc-subrow{flex-wrap:nowrap;overflow-x:auto}
  .hc-chip{flex-shrink:0}
  .hc-spec th{display:block;width:auto;border-bottom:none;padding:10px 14px 2px}
  .hc-spec td{display:block;padding:0 14px 10px}
  .hc-spec tr{display:block;border-bottom:1px solid var(--bor)}
  .hc-spec tr:last-child{border-bottom:none}
}
/* 외부 영상 임베드 (반응형 16:9) */
.video-wrapper{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;margin:10px 0;background:var(--c-black);border-radius:var(--r);overflow:hidden}
.video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ed-embed{position:relative;margin:8px 0;display:inline-block;width:100%;max-width:640px}
.ed-embed .video-wrapper{margin:0}
.ed-embed .ed-video-del{position:absolute;top:6px;right:6px;z-index:2}
/* X(트위터)+소셜(인스타/틱톡/쓰레드/레딧) 임베드: 렌더 위젯 max-width(550px)에 맞춰 placeholder 폭도 동일 — 편집중 placeholder에서 저장·미리보기 후 렌더(.tweet-wrapper/.social-wrapper) 전환 시 폭 점프 방지. 공식 위젯 자체 스타일은 각 provider 소유(흰 카드가 정상 — 다크 강제 금지), 여기선 래퍼 여백·폭만 관여 */
.ed-tweet,.ed-social{max-width:550px}
/* 본문 렌더 위젯 래퍼: .twitter-tweet/.instagram-media/.tiktok-embed 등(위젯 본체)는 각 provider 소유라 미터치, 래퍼 여백·중앙정렬만 */
.tweet-wrapper,.social-wrapper{margin:16px auto;max-width:550px}
@media(max-width:640px){.video-wrapper,.ed-embed,.tweet-wrapper,.ed-social,.social-wrapper{max-width:100%}}
/* HTML 소스 편집 모드 */
.ed-html-src{width:100%;min-height:240px;background:var(--bg2);border:1px solid var(--bor);border-top:none;color:var(--t2);padding:12px;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.55;resize:vertical;outline:none}
.ed-html-src:focus{border-color:var(--acc)}
/* 에디터 임베드 placeholder 카드 */
.ed-embed-card{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--bor2);border-radius:var(--r);padding:14px 16px;max-width:640px}
.ed-embed-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--c-white);font-size:13px;flex-shrink:0}
.ed-embed-label{font-size:13px;font-weight:700;color:var(--t2)}
/* 태그 추천 박스: 비었을 때 숨김(빈 회색 줄 제거) */
.write-tag-suggest:empty{display:none}
/* 글쓰기 에디터 높이 리사이즈 핸들 */
.ed-resize{height:11px;background:var(--bg2);border-top:1px solid var(--bor);cursor:ns-resize;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ed-resize:hover{background:var(--bg4)}
.ed-resize-grip{width:30px;height:3px;border-radius:var(--rad);background:var(--bor2)}
.ed-resize:hover .ed-resize-grip{background:var(--acc)}
/* 직접 동영상 <video> */
.video-wrapper video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--c-black)}
/* 댓글 확장: 대댓글/추천비추천/수정 */
.comment-act.down.on,.comment-act.down{color:var(--t2)}
.comment-act.down:hover{color:var(--neg)}
.comment-reply{margin-left:24px;border-left:2px solid var(--bor);padding-left:8px}
.comment-reply-arrow{color:var(--t3);margin-right:4px;font-weight:700}
.comment-reply-form,.comment-edit{margin-top:6px}
.comment-edit-foot{display:flex;gap:6px;justify-content:flex-end;margin-top:5px}
.comment-deleted{color:var(--t3);font-style:italic}
.comment-edited{font-size:10px;color:var(--t3)}
/* 댓글 헤더 우측정렬 (구 케밥메뉴 레거시 CSS 삭제 — 실사용=.ct-menu, comment-thread.js) */
.comment-head{display:flex;align-items:center;gap:6px}
/* 댓글 ⋯ 푸터 인라인(좌측) */
.comment-foot{display:flex;align-items:center;gap:4px}
/* 댓글 액션줄 우측정렬 */
.comment-foot{justify-content:flex-end}
/* 댓글 액션을 닉네임 줄 우측에 */
.comment-head .comment-foot{margin-left:auto}
/* 대댓글 @멘션 */
.comment-mention{color:var(--acc);font-weight:700}
/* 멘션 흐리게(@ 제거) + 은은한 말풍선(꼬리 없음, 플랫 테마 조화) */
.comment-mention{color:var(--t3);font-weight:600;margin-right:2px}
.comment-body{display:inline-block;max-width:100%;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad) var(--r) var(--r) var(--r);padding:8px 12px;margin:2px 0 6px}
.comment-reply .comment-body{background:var(--bg2)}
.comment-row.best .comment-body{background:var(--bg3)}
.comment-deleted{background:none;border:none;padding:6px 0}
/* 댓글 구분선 제거 + 간격으로 분리 / 대댓글 들여쓰기 라인 정돈 */
.comment-row{border-bottom:none!important;padding:7px 0}

/* ═══════════════════════════════════════════════════
   COMMENT THREAD (공용 .ct-*) — comment-thread.js 전용
   기존 .comment-* / .cmt-* 삭제 금지 (마이그레이션 공존)
   ═══════════════════════════════════════════════════ */
.ct-row{padding:7px 0;border-bottom:none}
/* 구분선 — 우리 .ct-row 는 border 가 없는데 s6 의 .cmz .cm{border-bottom:1px solid var(--hair)}
   이 병기 클래스를 타고 커뮤니티에서 걸린다. 목록 마지막과 대댓글에서는 걷는다 —
   마지막 선은 목록 끝의 테두리와 겹쳐 이중선이 되고, 대댓글에 선이 들어가면 계층이 흐려진다. */
/* ★.cmz 를 붙여 명시도를 올린다. components.css 가 s6 보다 링크 앞이라 같은 (0,2,0)이면 s6 가
   이긴다 — 실측에서 대댓글 border 가 0.667px 로 남아 있었다. (0,3,0)이면 확실히 덮는다.
   .cmz 밖(작품 회차 댓글)에는 애초에 s6 규칙이 안 걸리므로 이 선언이 필요 없다. */
.cmz .ct-row:last-child{border-bottom:none}
.cmz .ct-children > .ct-row{border-bottom:none}
/* 자식 행의 좌우 패딩을 걷는다. s6 의 .cmz .cm{padding:13px 14px} 이 중첩마다 누적되기 때문이다.
   · 오른쪽: 깊이당 14px 씩 줄어 푸터 경계가 어긋났다(실측 1371→1357→1343→1329).
   · 왼쪽: 자식 아바타를 설계 위치보다 14px 씩 밀어냈다. 들여쓰기는 --ct-ind(29px) 하나가
     담당해야 하는데 패딩이 얹혀 실효 41~43px 이 됐고, 엘보 가로획은 --ct-ind 기준으로 그려지므로
     아바타 앞 5px 에서 멈춰야 할 것이 20px 앞에서 끊겼다 — 선이 아바타에 못 닿고 붕 뜬다.
   ★핸드오프 데모도 .ct-row{padding:11px 0} 으로 좌우가 0 이고 패딩은 바깥 컨테이너가 가진다.
     이전 라운드에서 "왼쪽은 정렬 기준이라 건드리지 말 것"이라 적었으나 그건 아바타 슬롯이
     렌더되지 않던 때의 판단이다. 슬롯이 실재하는 지금은 --ind 단독이 정답이다.
   루트 행(.ct-children 밖)의 좌패딩 14px 은 카드 안쪽 여백이라 그대로 둔다 — 부모 레일도
   .ct-main 기준이라 함께 움직여 정합한다. */
.cmz .ct-children > .ct-row{padding-right:0;padding-left:0}
/* 행 상하 패딩도 데모 정본(.ct-row{padding:11px 0})에 맞춘다. 엘보는 .ct-row 기준으로
   height:var(--ct-rail-y) 만큼 내려오는데, 자식 아바타 중앙은 '행 상단 패딩 + 아바타 반경'이다.
   패딩이 13 이면 중앙이 24 인데 엘보는 22 에서 끝나 2px 어긋난다. 11 로 맞추면 22 = 22 로
   한 변수가 부모 레일(아바타 하단)과 자식 엘보(아바타 중앙) 양쪽을 동시에 만족한다. */
/* ★.cm 을 함께 물어 특이도를 (0,3,0) 으로 올린다 — s6 의 .cmz .cm{padding:13px 14px} 과
   특이도가 같으면 뒤에 로드되는 s6 이 이겨 13px 이 그대로 남는다(실측에서 엘보가 2px 어긋났다). */
.cmz .ct-row.cm{padding-top:11px;padding-bottom:11px}
.cmz .ct-children{border-bottom:none}
.ct-row.ct-hl{animation:ctHl 2.2s ease-out}   /* 딥링크 진입 댓글 잠깐 강조 */
@keyframes ctHl{0%,30%{background:var(--acc-dim);border-radius:var(--r-sm)}100%{background:transparent}}
.ct-row.best .ct-body{background:var(--bg3)}
/* ── 대댓글 연결선 — 디자인 핸드오프 패치 적용(Design/design_handoff_cmt_rail) ──────────
   ★좌표 고정값을 걷어냈다. 기존 규칙은 '부모 아바타 중앙 ↔ .ct-children 상단 = 75px' 라는
     실측값에 의존했는데, 그 75 는 **부모 본문이 한 줄일 때만** 성립한다. 본문이 여러 줄이거나
     이미지·답글폼이 열리면 선이 부모에 못 닿거나 지나쳤다. 직전 라운드(2c10d8e)가 한 줄
     케이스만 재고 통과시킨 것이 원인이다.
   해법은 그리는 주체를 나누는 것이다 — 부모(.ct-main)가 자기 아바타 중앙에서 자식 목록
     상단까지, 자식이 엘보와 통과선을. .ct-children 은 .ct-main 의 다음 형제라
     '부모 선의 bottom:0 = 자식 목록의 top:0' 이 구조적으로 보장된다 → 오프셋이 필요 없다.
   .ct-main 에 좌우 패딩을 주지 말 것 — 레일이 패딩 박스 기준이라 아바타 축에서 벗어난다.
   BEST 행 배경도 .ct-body 에만 준다(같은 이유). */
/* ★--ct-rail-y = 22px 는 데모 정본값(.fix{--railY:22px})이다. 패치 파일(comment-rail.patch.css)은
   24px 로 적었는데 그건 행 패딩 13px 을 더한 값이고, ① 부모 레일은 .ct-main::after 라 행 패딩
   바깥이 기준이다 — 더하면 안 된다. 22 = 아바타 높이이자 .ct-main 상단→아바타 하단 거리이며,
   선이 아이콘 아래에서 시작하게 한다(관통 0). 데모 HTML 이 정본이므로 그 값을 쓴다. */
.ct-row{position:relative;--ct-rail-x:11px;--ct-rail-y:22px;--ct-rail-w:2px;--ct-ind:29px}
.ct-main{position:relative}
.ct-children{position:relative;margin-left:var(--ct-ind)}

/* ① 부모 구간 — 아바타 중앙에서 자식 목록 상단까지.
      본문 길이·이미지·답글폼 상태와 무관하게 자동으로 늘어난다. */
.ct-row:has(> .ct-children) > .ct-main::after{
  content:'';position:absolute;width:var(--ct-rail-w);background:var(--bor2);
  left:calc(var(--ct-rail-x) - var(--ct-rail-w)/2);
  /* ★bottom 을 선 두께만큼 넘긴다 — 데모 정본(bottom:calc(var(--rail) * -1)). 0 으로 두면
     자식 첫 행의 엘보 곡선이 시작되는 지점과 만나는 곳에 1~2px 틈이 보인다. */
  top:var(--ct-rail-y);bottom:calc(var(--ct-rail-w) * -1)}

/* ② 자식 엘보 — 세로 진입 + 둥근 모서리 + 아바타 앞 5px 에서 멈추는 가로획.
      한 조각(border-left + border-bottom + radius)으로 그린다.
      radius 를 0 으로 두면 기존 직각 ㄴ자, 11px 이면 곡선. */
.ct-children > .ct-row::after{
  content:'';position:absolute;top:0;height:var(--ct-rail-y);
  left:calc(var(--ct-rail-x) - var(--ct-ind) - var(--ct-rail-w)/2);
  width:calc(var(--ct-ind) - var(--ct-rail-x) - 5px);
  border-left:var(--ct-rail-w) solid var(--bor2);
  border-bottom:var(--ct-rail-w) solid var(--bor2);
  border-bottom-left-radius:11px}

/* ③ 통과선 — 아래 형제가 남은 행만 그린다.
      top:0 에서 시작해야 한다 — --ct-rail-y 부터 그리면 엘보 곡선이 오른쪽으로
      휘는 반경(11px)만큼 수직축이 비어 선이 끊긴 것처럼 보인다.
      마지막 자식(.ldc)은 이 선을 안 그려서 엘보에서 자연히 끝난다 →
      "마지막 자식이 자손을 품는" 경우도 잘라낼 필요가 없다. */
.ct-children > .ct-row:not(.ldc)::before{
  content:'';position:absolute;width:var(--ct-rail-w);background:var(--bor2);
  left:calc(var(--ct-rail-x) - var(--ct-ind) - var(--ct-rail-w)/2);
  top:0;bottom:calc(var(--ct-rail-w) * -1)}   /* 다음 형제로 넘어가는 이음새(데모 정본) */
/* ★flex-wrap:wrap — nowrap 이면 좁은 화면에서 자식이 다 안 들어갈 때 flex 가 아이템을 짓눌러
   닉네임이 글자 단위로 세로로 쌓인다(390px 실측: author-nick 폭 12.1 · 높이 63 — '툰허브' 3글자가
   세로 1열). 줄을 넘기게 두는 편이 읽히고, 아래 상단 고정과 함께면 연결선 기하도 안 깨진다. */
.ct-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ★아바타를 헤드 상단에 고정한다 — 연결선 기하의 전제다.
   --ct-rail-y(22px = .ct-main 상단→아바타 하단)는 아바타 Y 가 고정이어야 성립하는데,
   align-items:center 아래에서는 헤드가 높아질수록 아바타가 내려간다. 좁은 화면에서 헤드가
   두 줄이 되면 아바타가 그만큼 내려앉아 레일이 아이콘을 관통한다(390px 실측 20~31px).
   상단 고정이면 아바타 top = 헤드 top = .ct-main top 이라 어떤 화면비에서도 하단 22·중앙 11 이다.
   ※헤드가 한 줄(22px)일 때는 아바타가 가장 큰 아이템이라 center 와 결과가 같다 — 데스크톱 무변화.
   ★.author-wrap 안쪽에도 준다 — 래퍼가 닉 줄바꿈으로 높아지면 그 안에서 아바타가 또 중앙으로
     내려가기 때문이다(바깥만 고정해선 안 잡힌다). */
.ct-head > .author-wrap{align-self:flex-start}
.ct-head > .author-wrap > .u-av{align-self:flex-start}
/* 닉은 글자 단위로 쪼개지지 않는다 — 줄이 부족하면 헤드가 줄을 넘긴다(위 flex-wrap). */
.ct-head .author-nick{white-space:nowrap}
.ct-avatar{width:22px;height:22px;border-radius:50%;background:var(--bg4);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;overflow:hidden}
/* 커뮤니티 스킨의 아바타 테두리 — s6 의 .cmz .cm-av 가 담당하던 몫. 슬롯이 .u-av 로 통일되며
   그 셀렉터는 매치되지 않는다(s6 본문은 수정 금지 대상이라 여기서 대체 규칙을 준다). */
.cmz .ct-head .u-av{border:1px solid var(--bor);color:var(--acc-br)}
/* 날짜는 작성자 바로 뒤에 붙는다. 우측 끝으로 미는 건 푸터(.ct-foot{margin-left:auto})다.
   시안(s6)은 .cm-d 에 margin-left:auto 를 줘 날짜를 우측에 붙이는데, 그 구조는 푸터가 헤더에
   없기 때문이다. 우리 헤더엔 날짜와 푸터가 같이 있어 둘 다 auto 를 가지면 날짜가 가운데 뜬다.
   ★s6 의 .cmz .cm-d{margin-left:auto} 가 커뮤니티에서 이겨 이 현상을 만들고 있었다 — 여기서 되돌린다. */
.ct-date{font-size:11px;color:var(--t3);white-space:nowrap;margin-left:0}
.cm-h .cm-d.ct-date{margin-left:0}
.ct-best-badge{font-size:9px;font-weight:800;color:var(--acc);background:var(--acc-dim);border-radius:var(--rad);padding:1px 6px;line-height:1.5;flex-shrink:0}
/* 글 작성자(OP) 배지 — BEST 배지와 같은 지오메트리, 색만 다르게 해서 둘이 나란히 와도 구분된다. */
.ct-op-badge{font-size:9px;font-weight:800;color:var(--t2);background:var(--bg4);border:1px solid var(--bor2);border-radius:var(--rad);padding:0 5px;line-height:1.5;flex-shrink:0}
.ct-warn-badge{font-size:10px;color:var(--acc);margin-left:4px;flex-shrink:0}
/* ── 헤드 아래 블록은 전부 아바타 폭만큼 들여쓴다 ────────────────────────
   핸드오프 데모(.ct-body/.ct-img/.ct-rf/.ct-fold 가 전부 margin-left:calc(--av + 6px))의 핵심 구조다.
   ★들여쓰기가 있어야 아바타 왼쪽에 세로 거터가 생기고, 레일(--ct-rail-x:11px = 아바타 중앙)이
     그 거터를 지난다. 들여쓰기가 없으면 레일이 본문 박스 위를 지나 계층이 안 읽힌다.
   ★margin 축약을 쓰는 규칙은 여기서 좌측값이 덮이므로, 아래 개별 규칙에서 margin-left 를
     따로 준다(축약 뒤에 와야 한다). */
.ct-main{--av:22px}
.ct-main>*:not(.ct-head){margin-left:calc(var(--av) + 6px)}
/* 말풍선 본문 (꼬리 없는 플랫 말풍선) */
.ct-body{display:inline-block;max-width:calc(100% - var(--av) - 6px);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad) var(--r) var(--r) var(--r);padding:8px 12px;margin:2px 0 6px calc(var(--av) + 6px);word-break:break-word}
.ct-children .ct-body{background:var(--bg2)}
/* 삭제 툼스톤 — 데모는 배경을 빼되 점선 테두리로 "여기 댓글이 있었다"를 남긴다.
   테두리까지 지우면 본문이 통째로 사라진 것처럼 보여 스레드 흐름이 끊긴다. */
.ct-deleted{background:none!important;border:1px dashed var(--bor)!important;padding:6px 10px!important;color:var(--t3);font-style:italic}
.ct-body.blur{filter:blur(5px);cursor:pointer;user-select:none}
.ct-body.blur:hover{filter:blur(3px)}
/* 멘션 — 누구에게 단 답글인지 보여야 한다. 기존엔 .author-nick 이 회색이라 본문 첫 단어와
   구분이 안 됐다. 지금은 닉 색만 다르게 한다(배경·테두리·화살표는 과해서 뺐다).
   ★.author-nick 전역 규칙은 건드리지 않는다(사이트 전 화면의 닉이 함께 바뀐다) — 스코프를 좁혀
     .ct-mention 안에서만 덮는다. */
.ct-mention{display:inline-flex;align-items:center;gap:3px;margin-right:4px;vertical-align:baseline}
/* 색만 남긴다(디렉터 지시) — 배경·테두리는 본문 한 줄 안에서 과했다.
   화살표(↪)도 뺐다(2차 지시) — 색만 남긴다. */
.ct-mention .author-nick.ct-mention-nick{color:var(--acc);font-weight:700}
.ct-edited{font-size:10px;color:var(--t3)}
/* 스포일러 레이블 */
.ct-spoil-lbl{font-size:11px;color:var(--t3);margin-bottom:3px}
/* 푸터 (추천/비추/답글/케밥) */
/* ★margin-top 을 0 으로 되돌린다. s6 의 .cmz .cm-f{margin-top:8px} 이 커뮤니티에서 이겨
   헤드 높이를 22(아바타) → 29 로 밀었고, .ct-head{align-items:center} 때문에 아바타가 3.5px
   내려앉았다. 그 결과 부모 레일(--ct-rail-y 기준)이 아바타 하단을 1.5px 파고들어 선이
   아이콘 위로 삐져나왔고, 엘보 가로획도 아바타 중앙보다 3.5px 위에서 끝났다.
   s6 은 푸터가 헤드 밖에 있는 구조라 그 여백이 필요했다 — 우리 헤드엔 푸터가 안에 있다
   (.cm-d{margin-left:auto} 를 되돌린 것과 같은 계열의 불일치). */
.ct-foot{display:flex;align-items:center;gap:4px;margin-left:auto;margin-top:0;flex-shrink:0}
.cmz .ct-head .cm-f.ct-foot{margin-top:0}
.ct-act{background:none;border:none;color:var(--t3);font-size:11px;cursor:pointer;padding:2px 5px;border-radius:var(--rad);font-family:inherit;line-height:1.4;transition:color .12s}
.ct-act:hover,.ct-act.on{color:var(--acc)}
/* 본인 댓글 — 버튼을 남기고 비활성만 한다(숨기면 푸터 칸이 빠져 날짜·케밥 정렬이 행마다 어긋난다).
   :hover 규칙이 뒤에 오면 비활성에도 색이 붙으므로 이 아래에 둔다. */
.ct-act.is-self{color:var(--t3);cursor:default;opacity:.55}
.ct-act.is-self:hover{color:var(--t3)}
.ct-act-reply{display:inline-flex;align-items:center;vertical-align:middle}
.ct-act-reply svg{display:block}
.ct-act.down.on{color:var(--neg)}
/* 케밥 메뉴 */
.ct-menu-wrap{position:relative;flex-shrink:0}
.ct-kebab{background:none;border:none;color:var(--t3);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1;border-radius:var(--rad);font-family:inherit}
.ct-kebab:hover{color:var(--t1);background:var(--bg3)}
.ct-menu{position:absolute;right:0;top:calc(100% + 2px);background:var(--bg2);border:1px solid var(--bor2);border-radius:var(--rad);box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:var(--z-dropdown,50);min-width:110px;overflow:hidden;display:flex;flex-direction:column}
.ct-menu button{background:none;border:none;text-align:left;padding:8px 13px;font-size:12px;color:var(--t2);cursor:pointer;font-family:inherit;white-space:nowrap}
.ct-menu button:hover{background:var(--bg3);color:var(--t1)}
.ct-menu button.danger:hover{color:var(--acc)}
/* 수정 폼 */
.ct-edit{margin-top:6px}
.ct-edit-foot{display:flex;gap:6px;justify-content:flex-end;margin-top:5px}
.ct-textarea{width:100%;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);color:var(--t1);padding:6px 8px;font-size:12px;font-family:inherit;resize:vertical;box-sizing:border-box}
.ct-textarea:focus{border-color:var(--acc);outline:none}
/* 대댓글 입력폼 */
.ct-reply-form{margin-top:6px}
.comment-reply{margin-left:18px;border-left:2px solid var(--bor);padding-left:12px}
/* 대댓글 입력 툴바 (작품 댓글) */
.ct-reply-tb{display:flex;gap:4px;margin-bottom:5px}
.ct-tb-btn{font-size:11px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:3px 9px;cursor:pointer;font-family:inherit}
.ct-tb-btn:hover{border-color:var(--acc);color:var(--acc)}
.ct-tb-soon{opacity:.45;cursor:not-allowed}
.ct-tb-soon:hover{border-color:var(--bor);color:var(--t2)}
/* ─── 레벨 시스템: 등급 뱃지 / 승급 연출 ─── */
.lvbadge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.lvbadge svg{display:block}
.badge-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.badge-cell{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;padding:9px 4px;border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;font-size:10px;color:var(--t3);background:var(--bg2);text-align:center;transition:all .15s}
.badge-cell:hover{border-color:var(--acc)}
.badge-cell.selected{border-color:var(--acc);color:var(--acc);background:var(--acc-dim)}
.badge-empty{font-size:12px;color:var(--t3);padding:10px 4px}
.levelup-overlay{position:fixed;inset:0;z-index:var(--z-overlay-special);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);opacity:0;transition:opacity .3s;cursor:pointer}
.levelup-overlay.show{opacity:1}
.levelup-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;transform:scale(.85);transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.levelup-overlay.show .levelup-card{transform:scale(1)}
/* 조립 완료 시점(~.85s)에 빛 폭발 */
.levelup-burst{position:absolute;top:10px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, var(--c) 0%, transparent 65%);opacity:0;animation:lvburst 1.1s ease-out .8s forwards}
@keyframes lvburst{0%{transform:scale(.4);opacity:0}25%{opacity:.75}100%{transform:scale(2.6);opacity:0}}
.levelup-badge{position:relative}
.levelup-rank{font-size:30px;font-weight:900;color:var(--c);text-shadow:0 2px 14px rgba(0,0,0,.55);animation:lvrise .5s ease 1s both}
.levelup-sub{font-size:15px;font-weight:700;color:var(--c-white);animation:lvrise .5s ease 1.14s both}
.levelup-hint{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px;animation:lvrise .5s ease 1.32s both}
@keyframes lvrise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
/* ─── 뱃지 조립 연출: 조각이 날아와 결합 ─── */
.lvbadge-asm .part{transform-box:fill-box;transform-origin:center;opacity:0;animation:asmPart .5s cubic-bezier(.2,1.3,.4,1) var(--d,0s) forwards}
@keyframes asmPart{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--sc,.7))}55%{opacity:1}100%{opacity:1;transform:none}}
/* ─── 등급별 차등 이펙트(escalation) ─── */
/* 확장 링(r2+) */
.levelup-ring{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border:2px solid var(--c);border-radius:50%;opacity:0;animation:lvring 1s ease-out .82s forwards}
@keyframes lvring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* 쇼크웨이브 2차 링(r5+) */
.levelup-shock{position:absolute;top:50%;left:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border:4px solid var(--c);border-radius:50%;opacity:0;animation:lvring 1.2s cubic-bezier(.1,.7,.3,1) .92s forwards}
/* 방사 파편(r4+) */
.levelup-shards{position:absolute;top:50%;left:50%;width:0;height:0}
.levelup-shards .shard{position:absolute;width:7px;height:7px;background:var(--c);opacity:0;clip-path:polygon(50% 0,100% 100%,0 100%);animation:lvshard .8s ease-out .85s forwards}
@keyframes lvshard{0%{opacity:0;transform:rotate(var(--a)) translateY(-12px) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-92px) scale(1)}}
/* 화면 플래시(레전드 r6) */
.levelup-flash{position:fixed;inset:0;background:var(--c-white);opacity:0;pointer-events:none;animation:lvflash .55s ease-out .8s forwards}
@keyframes lvflash{0%{opacity:0}15%{opacity:.55}100%{opacity:0}}

/* 계절 애니 시즌 뷰 (Phase1-5) — 애니 하위 서브탭 + filter-bar 톤 시즌 셀렉터 */
/* 애니 서브탭(탐색|시즌) — 값은 시안 .subtab(Design/Ani Season). 클래스명은 기존 것을 유지한다
   (렌더처 content.js:11 단독이라 리네임해도 되지만, 이름을 바꾸면 이 규칙을 찾는 grep 이력이 끊긴다).
   각진 형태라 border-radius 속성 자체를 쓰지 않는다(시안 .subtab 도 반경 선언이 없다).
   ※§8-2 ④(리터럴 0 = 명시 해제)와는 다르다 — 이건 선언 생략이라 초기값 0 이 그대로 남는 경우다. */
/* margin 0 — 서브탭은 크럼(.crumb) 줄 안에 인라인으로 들어간다. 세로 간격·정렬은 .crumb 의
   display:flex;align-items:center;gap:9px 가 소유한다(여기서 마진을 주면 크럼 줄이 밀린다). */
.anime-subtabs{display:flex;gap:3px;margin:0}
.anime-subtab{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--t2);padding:6px 14px;border:1px solid var(--hair);background:var(--pane);cursor:pointer;white-space:nowrap}
.anime-subtab.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}
/* ※구 시즌 바 규칙(.season-bar·.season-sel·.season-arrow·.season-cur·.season-lbl·.schip)은
   삭제했다 — 정본이 anime-season.css 의 .asn 스코프로 넘어갔고(P2, b945396) 이 마크업은
   .asn 안에서만 렌더돼 전역 규칙이 항상 특이도에서 져 사문화된 상태였다.
   아래 분기 선택 모달 블록은 #season-pick-overlay(.asn 밖 전역 오버레이)의 정본이라 남긴다. */
/* 분기 선택 모달 */
.season-pick-sec{margin-top:14px}
.season-pick-sec:first-of-type{margin-top:8px}
.season-pick-h{font-size:11px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.season-pick-yrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.season-pick-ylbl{font-size:13px;font-weight:800;color:var(--t1);min-width:42px}
.season-pick-qs{display:flex;gap:6px;flex:1}
.season-pick-grid{display:flex;flex-wrap:wrap;gap:6px}
.season-pick-cell{padding:6px 12px;font-size:12px;font-weight:700;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;font-family:inherit;white-space:nowrap}
.season-pick-qs .season-pick-cell{flex:1;text-align:center;padding:7px 0}
.season-pick-cell:hover{border-color:var(--acc);color:var(--acc)}
.season-pick-cell.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
/* ※구 .season-sortwrap·.season-sort(.on) 도 위와 같은 사유로 삭제 — 정본 = anime-season.css .asn */

/* 엔티티(작가/제작사/캐릭터) 프로필 + 링크 (2-A) */
.entity-link{color:var(--acc);cursor:pointer}
.entity-link:hover{text-decoration:underline}
.entity-link.dim{color:var(--t2)}
.entity-chip{display:inline-block;font-size:11px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:3px 10px;margin:2px 4px 2px 0;cursor:pointer}
.entity-chip:hover{color:var(--acc);border-color:var(--acc)}
.entity-page{max-width:none;margin:0;width:100%}
.ent-img{width:100%;aspect-ratio:3/4;border-radius:var(--r);background-color:var(--bg3);border:1px solid var(--bor);display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:12px;background-size:cover;background-position:center;overflow:hidden}
/* 원형 크롭 — 평소: 네모 원본 + 원형 가이드(위치 표시) / 크롭버튼=핸들/조정 활성(.cip-on) / 저장=확정. 표시(.cip-img)=원형 background */
.cip-img{display:block;width:100%;height:100%;background-repeat:no-repeat}
.cip-box{width:100%;max-width:240px;margin:8px auto 0;display:flex;flex-direction:column}
.cip-prev-ph{display:flex;width:100%;aspect-ratio:3/4;align-items:center;justify-content:center;color:var(--t3);font-size:11px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r)}
.cip-prev-up{flex-direction:column;gap:6px;cursor:pointer;border-style:dashed;transition:border-color .15s,color .15s}
.cip-prev-up:hover{border-color:var(--acc);color:var(--acc)}
.cip-ph-hint{font-size:10px;color:var(--t3)}
.cip-changebtn{display:block;text-align:center;margin:8px auto 0;padding:6px 14px;font-size:12px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r-sm);color:var(--t2);cursor:pointer;font-family:inherit}
.cip-changebtn:hover{border-color:var(--acc);color:var(--acc)}
/* square variant(아바타) — 엔티티 3:4 회귀 없이 1:1 원형. stage/플레이스홀더 정사각, 딤 컷아웃 원형 */
.cip-square{max-width:200px}
.cip-square .crop-stage{aspect-ratio:1}
.cip-square .cip-prev-ph{aspect-ratio:1;border-radius:50%}
.cip-square .crop-stage.cip-on .crop-sel{border-radius:50%}
/* 네모 원본 스테이지 — 엔티티 상세 .ent-img와 동일 3:4(240×320). 원본 불변, 원형 가이드만 위치 조정 */
.crop-stage{position:relative;width:100%;aspect-ratio:3/4;background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.crop-wrap{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%;touch-action:none;user-select:none}
.crop-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none}
/* 원형 크롭 프레임(정사각 셀렉션) — 평소엔 전부 숨김(네모 원본만). 크롭모드(.cip-on)에서만 딤+가이드+핸들 */
.crop-sel{position:absolute;box-sizing:border-box;cursor:default;box-shadow:none}
.crop-stage.cip-on .crop-sel{cursor:move;box-shadow:0 0 0 9999px rgba(0,0,0,.5)}
.crop-guide{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--acc);pointer-events:none;display:none}
.crop-stage.cip-on .crop-guide{display:block}
.crop-h{position:absolute;width:16px;height:16px;background:var(--c-white);border:2px solid var(--acc);border-radius:50%;z-index:1;display:none}
.crop-stage.cip-on .crop-h{display:block}
.crop-h-nw{left:-8px;top:-8px;cursor:nwse-resize}
.crop-h-ne{right:-8px;top:-8px;cursor:nesw-resize}
.crop-h-sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.crop-h-se{right:-8px;bottom:-8px;cursor:nwse-resize}
.cip-hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:10px;color:var(--c-white);background:rgba(0,0,0,.5);padding:3px;pointer-events:none;z-index:2;display:none}
.crop-stage.cip-on .cip-hint{display:block}
.cip-cropbtn{display:flex;align-self:center;align-items:center;gap:6px;margin:10px auto 0;padding:6px 14px;font-size:12px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r-sm);color:var(--t2);cursor:pointer;font-family:inherit}
.cip-cropbtn:hover{border-color:var(--acc);color:var(--acc)}
.cip-savebtn{align-self:center;margin:10px auto 0;padding:6px 20px;background:var(--acc);color:var(--c-white);border:none;border-radius:var(--r-sm);font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}
.cip-savebtn:hover{background:var(--acc2)}
.ent-fav{padding:8px 0;border-radius:var(--r);border:1px solid var(--acc);background:var(--acc);color:var(--c-white);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.ent-fav.on{background:none;color:var(--acc)}
.ent-edit{padding:7px 0;border-radius:var(--r);border:1px solid var(--bor);background:var(--bg2);color:var(--t2);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit}
.ent-edit:hover{color:var(--t1);border-color:var(--bor2)}
/* .ent-meta/.ent-meta-row/-k/-v 폐지(S7) — renderEntityPage 01 섹션이 .facts/.fact/.fk/.fv로 대체(구조설계 지시), 유일 소비처였음 */
.ent-bio{font-size:12.5px;color:var(--t2);line-height:1.6;border-top:1px solid var(--bor);padding-top:10px;white-space:pre-line}
.ent-kind{font-size:11px;font-weight:800;color:var(--acc);border:1px solid var(--acc);border-radius:var(--rad);padding:2px 7px}
.ent-empty-cta{background:var(--bg2);border:1px dashed var(--bor);border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--t2);margin-bottom:16px}
.ent-empty-cta span{color:var(--acc);cursor:pointer;font-weight:700}
.ent-sec-t{font-size:14px;font-weight:800;margin-bottom:10px}
.ent-sec-t .sec-sub{color:var(--t3);font-weight:600;font-size:12px;margin-left:4px}

/* 엔티티 편집 페이지(모달 아닌 전용 페이지, 해당 위치 인라인 수정) — 2-B 페이지화 */
.ent-edit-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:2px solid var(--bor);padding-bottom:12px;margin:8px 0 14px}
.ent-edit-h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900}
.ent-edit-actions{display:flex;gap:8px}
.ent-edit-page .ent-img{min-height:200px}

/* 인더스트리 디렉터리(작가/제작사/캐릭터) */
.industry-page{max-width:none;margin:0;width:100%}
.dir-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--bor);padding-bottom:12px;margin-bottom:4px}
.dir-title{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:26px;letter-spacing:-.5px}
.dir-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:14px 0 16px}
.dir-controls .ind-filters{margin:0;flex:1 1 auto;min-width:220px}
.dir-controls .ind-search{margin:0;width:250px;flex:none}
@media(max-width:620px){.dir-controls .ind-search{width:100%}.dir-title{font-size:22px}}
.ind-tabs{display:flex;gap:6px;border-bottom:1px solid var(--bor);margin-top:12px}
.ind-tab{padding:9px 15px;font-size:13.5px;font-weight:700;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.industry-page .ind-tab:hover{color:var(--t1)}
.ind-tab.on{color:var(--t1);border-bottom-color:var(--acc)}
.ind-cnt{font-family:'Space Mono';font-size:10px;color:var(--t3);background:var(--bg);border:1px solid var(--hair);border-radius:var(--rad);padding:1px 7px;margin-left:5px;vertical-align:middle}
.ind-list{display:flex;flex-direction:column}
.ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:980px){.ind-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
.ind-filters{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.ind-frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ind-flabel{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-right:4px}
.ind-fchip{font-size:12px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:4px 12px;cursor:pointer;transition:.12s}
.ind-fchip:hover{border-color:var(--bor2);color:var(--t1)}
.ind-fchip.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
.ind-search{display:flex;align-items:center;gap:8px;border:1px solid var(--bor);background:var(--pane);padding:9px 13px;margin:12px 0}
.ind-search svg{width:15px;height:15px;stroke:var(--t3);stroke-width:1.8;fill:none;flex:none}
.ind-search input{flex:1;background:none;border:none;color:var(--t1);font-size:13px;font-family:inherit;min-width:0}
.ind-search input:focus{outline:none}
.ind-search input::placeholder{color:var(--t3)}
.industry-page .board-pagination{gap:6px;margin-top:22px}
.industry-page .page-btn{min-width:34px;height:34px;padding:0 9px;font-family:'Space Mono';font-size:12px;font-weight:700;background:var(--pane);transition:.12s}
.industry-page .page-btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc-br)}
.industry-page .page-btn.on{background:var(--acc-br);border-color:var(--acc-br);color:var(--c-white)}
html[data-theme="light"] .industry-page .page-btn.on{color:#fff}
.industry-page .page-ellipsis{font-family:'Space Mono';color:var(--t3)}
.pager-info{text-align:center;font-family:'Space Mono';font-size:10.5px;letter-spacing:.06em;color:var(--t3);margin-top:12px}

/* 엔티티 편집 페이지 최대폭 + 작품 연결 picker (유저편의) */
.ent-edit-page{max-width:1180px}
.ee-work-pick{position:relative}
.ee-work-res{position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);background:var(--bg2);border:1px solid var(--bor2);border-radius:0 0 var(--r) var(--r);max-height:240px;overflow:auto}
.ee-work-res:empty{display:none}
.ee-work-opt{padding:7px 11px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--bor)}
.ee-work-opt:hover{background:var(--bg3);color:var(--acc)}
.ee-work-opt.dim{color:var(--t3);cursor:default}
.ee-work-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:24px}
.ee-chip b{margin-left:6px;color:var(--acc);cursor:pointer;font-weight:800}
.ee-empty{font-size:11px;color:var(--t3)}

/* DB 참조 — 인라인 링크 + 카드 임베드 + 피커 */
.entity-ref{color:var(--acc);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--acc)}
.entity-ref:hover{text-decoration:underline}
.db-card-wrap{display:inline-block;vertical-align:top;margin:3px 4px}
/* 인스타식 세로 원형 카드 — 라이브러리 팔로우(.flw-card) 정합 */
.wsec-ents{display:flex;flex-wrap:wrap;gap:8px}
.db-card-render{display:inline-flex;flex-direction:column;align-items:center;gap:4px;width:92px;max-width:100%;padding:8px 4px;border-radius:var(--r);text-decoration:none;text-align:center;vertical-align:top;transition:background .15s}
.db-card-render:hover{background:var(--bg2)}
.db-card-render:hover .db-card-name{color:var(--acc)}
.db-card-av{width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--bg3) center/cover no-repeat;border:2px solid var(--bor);display:flex;align-items:center;justify-content:center}
.db-card-av img{width:100%;height:100%;object-fit:cover}
.db-card-av.init{font-weight:800;font-size:22px;color:var(--t3)}
.db-card-name{font-size:12px;font-weight:700;color:var(--t1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.db-card-sub{font-size:10px;color:var(--t3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.db-card{display:inline-block} /* 에디터 placeholder */
.db-picker-res{margin-top:10px;max-height:300px;overflow:auto}
.db-picker-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);cursor:pointer}
.db-picker-opt:hover{background:var(--bg3)}
.db-picker-opt.dim{color:var(--t3);cursor:default;justify-content:center}
.db-opt-thumb{width:32px;height:42px;border-radius:var(--rad);flex-shrink:0;background:var(--bg4);background-size:cover;background-position:center}
.db-opt-thumb.ent{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t3);font-weight:800}
.db-opt-info{display:flex;flex-direction:column;min-width:0}
.db-opt-info b{font-size:13px}
.db-opt-info small{font-size:11px;color:var(--t3)}
/* ── 위키 폼 에디터(5-A): 섹션 골격 + richtext 툴바 ── */
.wq-form{display:flex;flex-direction:column;gap:16px}
.wq-sec{border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.wq-sec-h{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg3);border-bottom:1px solid var(--bor)}
.wq-sec-grip{color:var(--t3);font-size:13px;cursor:grab;user-select:none;letter-spacing:-2px;flex-shrink:0}
.wq-sec-grip:active{cursor:grabbing}
.wq-sec-label{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--t2);background:transparent;border:1px solid transparent;border-radius:var(--r);padding:3px 6px}
.wq-sec-label:hover{border-color:var(--bor)}
.wq-sec-label:focus{outline:none;border-color:var(--acc);background:var(--bg)}
.wq-sec-del{flex-shrink:0;border:none;background:none;color:var(--t3);font-size:13px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:var(--r)}
.wq-sec-del:hover{color:var(--neg);background:var(--bg)}
.wq-req{color:var(--acc);flex-shrink:0}
.wq-tb{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:6px 8px;border-bottom:1px solid var(--bor);background:var(--bg2)}
.wq-btn{min-width:30px;height:28px;padding:0 8px;font-size:12px;color:var(--t2);background:var(--bg);border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;transition:.12s}
.wq-btn:hover{border-color:var(--acc);color:var(--t1);background:var(--bg3)}
.wq-btn b,.wq-btn i,.wq-btn s{pointer-events:none}
.wq-btn-acc{color:var(--acc);font-weight:600}
.wq-sep{width:1px;height:18px;background:var(--bor);margin:0 4px}
.wq-edit{min-height:120px;padding:12px 14px;font-size:14px;line-height:1.7;color:var(--t1);outline:none}
.wq-edit:focus{box-shadow:inset 0 0 0 2px var(--acc)}
.wq-resize{height:11px;background:var(--bg2);border-top:1px solid var(--bor);cursor:ns-resize;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:none}
.wq-resize:hover{background:var(--bg4)}
.wq-resize:hover .ed-resize-grip{background:var(--acc)}
.wq-edit:empty::before{content:attr(data-ph);color:var(--t3)}
.wq-edit h4{font-size:15px;font-weight:700;margin:12px 0 6px;color:var(--t1)}
.wq-edit ul,.wq-edit ol{margin:6px 0 6px 22px}
.wq-edit p{margin:0 0 8px}
.wq-edit .db-card{margin:2px 3px;cursor:default}
.wq-edit img,.wiki-body img{max-width:100%;height:auto;border-radius:var(--r);margin:8px 0;display:block}
.wq-edit hr,.wiki-body hr{border:none;border-top:1px solid var(--bor);margin:16px 0}
.wq-edit .wiki-table,.wiki-body .wiki-table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
.wq-edit .wiki-table td,.wq-edit .wiki-table th,.wiki-body .wiki-table td,.wiki-body .wiki-table th{border:1px solid var(--bor);padding:7px 10px;text-align:left;vertical-align:top;min-width:40px}
.wq-edit .wiki-table th,.wiki-body .wiki-table th{background:var(--bg3);font-weight:700;color:var(--t1)}
.wq-edit details,.wiki-body details{border:1px solid var(--bor);border-radius:var(--r);padding:6px 12px;margin:10px 0;background:var(--bg2)}
.wq-edit summary,.wiki-body summary{cursor:pointer;font-weight:700;color:var(--t1);padding:2px 0;user-select:none}
.wiki-body details:not([open]) summary::after{content:' (펼치기)';font-weight:400;color:var(--t3);font-size:12px}
.wq-edit details>*:not(summary){display:block}   /* 편집 중엔 open 여부와 무관하게 내용 보이게(수정 가능) */
/* 미디어 임베드(D): placeholder 카드 → 클릭 시 iframe */
.wq-edit .wiki-embed,.wiki-body .wiki-embed{margin:10px 0}
.wiki-embed-card{display:flex;align-items:center;gap:10px;padding:0;border:1px solid var(--bor);border-radius:var(--r);overflow:hidden;background:var(--bg2);cursor:pointer;min-height:54px;position:relative}
.wiki-embed-card:hover{border-color:var(--acc)}
.wiki-embed-thumb{width:96px;height:54px;object-fit:cover;flex-shrink:0;background:var(--bg4)}
.wiki-embed-play{width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-left:12px}
.wiki-embed-label{font-size:13px;color:var(--t1);font-weight:600;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 비율 wrapper 단일화: 전역 .video-wrapper의 max-width:640px·aspect-ratio 해제 → .wiki-embed width(%)가 플레이어 전체를 통째로 스케일 */
.wq-edit .wiki-embed,.wiki-body .wiki-embed{display:block;max-width:100%}
.wiki-embed .video-wrapper{position:relative;width:100%;max-width:none;aspect-ratio:auto;padding-top:56.25%;margin:0;border-radius:var(--r);overflow:hidden;background:var(--c-black)}
.wiki-embed .video-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 음악(브금) 모드 — 영상 숨긴 YT.Player(소리만) + 미니플레이어 UI(SVG 아이콘·슬림 진행바·음량 세로팝업) */
.wiki-bgm{display:flex;align-items:center;gap:12px;border:1px solid var(--bor);border-radius:var(--r);background:var(--bg2);padding:10px 14px;position:relative;transition:border-color .15s}
.wiki-bgm:hover{border-color:var(--bor2)}
.wiki-bgm-player{position:absolute;left:-9999px;top:0;width:240px;height:135px}   /* YT.Player iframe 살아서 소리 재생, 화면 밖(display:none 금지) */
.wiki-bgm-thumb{width:42px;height:42px;border-radius:var(--r);object-fit:cover;flex-shrink:0;background:var(--bg4)}
.wiki-bgm-thumb.ph{background:linear-gradient(135deg,var(--bg3),var(--bg4))}
.wiki-bgm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.wiki-bgm-title{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.wiki-bgm-ctrl{display:flex;align-items:center;gap:8px}
/* 재생/정지 — 원형 포인트, SVG 아이콘(.playing 시 정지로) */
.wiki-bgm-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:none;background:var(--acc);color:var(--c-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,filter .12s;box-shadow:0 2px 8px rgba(47,148,96,.35)}
.wiki-bgm-btn:hover{transform:scale(1.06);filter:brightness(1.08)}
.wiki-bgm-btn svg{width:15px;height:15px;fill:var(--c-white);display:block}
.wiki-bgm-btn .ic-pause{display:none}
.wiki-bgm.playing .wiki-bgm-btn .ic-play{display:none}
.wiki-bgm.playing .wiki-bgm-btn .ic-pause{display:block}
.wiki-bgm-time{font-size:10.5px;color:var(--t3);flex-shrink:0;font-variant-numeric:tabular-nums;min-width:30px}
.wiki-bgm-dur{text-align:right}
/* 진행·음량 슬라이더 — 슬림 */
.wiki-bgm-seek,.wiki-bgm-vol{-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--rad);background:var(--bg4);outline:none;cursor:pointer}
.wiki-bgm-seek{flex:1;min-width:60px}
.wiki-bgm-seek::-webkit-slider-thumb,.wiki-bgm-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--c-white);border:2px solid var(--acc);cursor:pointer}
.wiki-bgm-seek::-moz-range-thumb,.wiki-bgm-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--c-white);border:2px solid var(--acc);cursor:pointer}
/* 음량 = 아이콘 버튼 + 세로 슬라이더 팝업(호버) → 가로 폭 안 먹음 */
.wiki-bgm-vol-wrap{position:relative;flex-shrink:0}
.wiki-bgm-vol-btn{width:28px;height:28px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--r)}
.wiki-bgm-vol-btn:hover{background:var(--bg3)}
.wiki-bgm-vol-btn svg{width:16px;height:16px;fill:var(--t2)}
.wiki-bgm-vol-pop{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--r);padding:10px 7px;display:none;box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:5}
.wiki-bgm-vol-wrap:hover .wiki-bgm-vol-pop{display:block}
.wiki-bgm-vol-pop .wiki-bgm-vol{writing-mode:vertical-lr;direction:rtl;width:5px;height:84px}
/* 정렬(좌/중/우) — 클래스로만. 이미지·미디어 공통. width(%)와 함께 동작 */
/* 특이성: base .wq-edit img(0,1,1)/.wq-edit .wiki-embed(0,2,0) margin 규칙을 이기도록 컨텍스트 스코프 + 파일 후순위 */
.wq-edit .wq-align-left,.wiki-body .wq-align-left{display:block;margin-left:0;margin-right:auto}
.wq-edit .wq-align-center,.wiki-body .wq-align-center{display:block;margin-left:auto;margin-right:auto}
.wq-edit .wq-align-right,.wiki-body .wq-align-right{display:block;margin-left:auto;margin-right:0}
.wq-align-btn{position:fixed;z-index:var(--z-popover);border:none;background:var(--acc);color:var(--c-white);font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.wiki-embed-meta{display:flex;flex-direction:column;min-width:0;padding-right:12px}
.wiki-embed-desc{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
/* 입력 모달(prompt 대체) */
.wq-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal)}
.wq-modal{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);width:min(440px,92vw);padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.wq-modal-t{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:12px}
.wq-mf{display:block;font-size:12px;color:var(--t2);margin-bottom:10px}
.wq-mf .admin-input{width:100%;margin-top:4px}
.wq-mradio{display:flex;gap:16px}.wq-mradio label{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--t1)}
.wq-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
/* 드래그 리사이즈 핸들(이미지·미디어) */
.wq-rz-handle{position:fixed;width:14px;height:14px;background:var(--acc);border:2px solid var(--c-white);border-radius:50%;cursor:nwse-resize;z-index:var(--z-popover);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.wq-edit img,.wq-edit .wiki-embed{outline:1px dashed transparent}
.wq-edit img:hover,.wq-edit .wiki-embed:hover{outline-color:var(--acc)}
/* 편집 중엔 iframe이 클릭을 먹지 않게(=embed 선택·리사이즈 가능). 표시(.wiki-body)에선 정상 재생 */
.wq-edit .wiki-embed{position:relative}
.wq-edit .wiki-embed iframe{pointer-events:none}
.wq-edit .wiki-embed::after{content:'클릭해 선택 · 모서리 드래그로 크기';position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;color:var(--c-white);background:rgba(0,0,0,.45);padding:2px;pointer-events:none}
.wq-ph{padding:16px;font-size:12.5px;color:var(--t3);text-align:center;border:1px dashed var(--bor);border-radius:var(--r);margin:10px}
/* charList/linkList/list 위젯(5-B) */
.wql{padding:10px 12px}
.wql-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.wql-empty{font-size:12px;color:var(--t3);padding:2px 0}
.wqc{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 4px;background:var(--bg);border:1px solid var(--bor);border-radius:var(--r);cursor:grab;max-width:240px}
.wqc:active{cursor:grabbing}
.wqc b{font-size:12.5px;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wqc-th{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--bg4);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--t3)}
.wqc-th.ini{text-transform:uppercase}
.wqc-x{border:none;background:none;color:var(--t3);font-size:15px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0}
.wqc-x:hover{color:var(--neg)}
.wql-badge{font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:2px 5px;border-radius:var(--r);flex-shrink:0}
.wql-badge.db{background:rgba(99,102,241,.18);color:#818cf8}
.wql-badge.ext{background:var(--bg4);color:var(--t3)}
.wql-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wql-ctl .wqu-l{max-width:170px}.wql-ctl .wqu-u{max-width:210px}
.wq-add{height:30px;padding:0 12px;font-size:12.5px;color:var(--acc);background:var(--bg);border:1px solid var(--bor);border-radius:var(--r);cursor:pointer;transition:.12s}
.wq-add:hover{border-color:var(--acc);background:var(--bg3)}
.wql-items{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.wql-irow{display:flex;align-items:center;gap:6px}
.wql-irow input{flex:1}
.wql-grip{color:var(--t3);font-size:13px;cursor:grab;user-select:none;letter-spacing:-2px}
/* 위키 수정 트롤 의심 표시(5-D-1.5, 차단 아님) */
.wf-flagged>td{background:rgba(255,107,107,.07)}
.wf-row{margin-bottom:5px}
.wf-badge{margin-right:3px}
.wf-detail{font-size:11px;color:#ff8787;margin-top:3px}
.wf-secdiff{font-size:11px;color:var(--t2);margin-bottom:3px}
/* 섹션 추가(5-D-2) */
.wq-addsec{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding:10px;border:1px dashed var(--bor);border-radius:var(--r)}
.wq-addsec .wq-addname{flex:1;min-width:140px}
.wq-addsec .wq-addtype{max-width:130px}

/* 작품 구조화 섹션(상세) + 편집 블록 */
.work-sections{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.wsec-t{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bor)}
.wsec-cards{display:flex;flex-wrap:wrap;gap:8px}
.wsec-links{display:flex;flex-wrap:wrap;gap:8px}
.wsec-link{font-size:12px;color:var(--acc);background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:6px 12px;text-decoration:none}
.wsec-link:hover{border-color:var(--acc)}
.we-block{background:var(--bg2);border:1px solid var(--bor);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.we-block-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.we-link-row{display:flex;gap:6px;margin-bottom:6px}
.we-link-row .admin-input{flex:1}

/* 작품 편집 페이지 — 상세 레이아웃 미러 시 hero 인풋 */
/* 상단바: 뒤로(좌) + 위키편집/요청(우) — float 대신 flex(폭 깨짐 방지) */
.work-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.work-edit-btn{padding:7px 15px;border-radius:var(--r);border:1px solid var(--acc);background:var(--acc);color:var(--c-white);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.work-edit-btn:hover{background:var(--acc2)}
.work-edit-save{background:var(--acc);color:var(--c-white);border-color:var(--acc);font-weight:700}
.work-edit-save:hover{background:var(--acc2)}
.work-edit-page .work-title-input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--bor2);border-radius:var(--r);color:var(--c-white);font-size:24px;font-weight:900;padding:6px 10px;margin:6px 0;font-family:inherit}
.work-edit-page .we-badge-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.work-edit-page .we-mini{width:auto;min-width:90px;padding:4px 8px;font-size:12px}
.work-edit-page .we-genre-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.work-edit-page .we-season-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.work-edit-page .we-seasons-row{margin-top:8px}
.work-edit-page .we-season-item{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.work-edit-page .we-series-badge{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--t2);background:var(--bg2);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px}
.work-edit-page .we-series-badge b{color:var(--t1);font-weight:700}
.work-edit-page .we-series-badge-ic{color:var(--acc);font-weight:700}
.work-edit-page .we-focal-handle{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.55);background:rgba(255,255,255,.22);transform:translate(-50%,-50%);z-index:5;cursor:move;pointer-events:auto}
.work-edit-page .we-focal-handle:hover{background:rgba(255,255,255,.4)}
.work-edit-page .we-focal-btn{position:absolute;top:8px;right:10px;z-index:5;font-size:11px;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);border-radius:var(--rad);padding:4px 10px;cursor:pointer;pointer-events:auto}
.work-edit-page .we-focal-btn:hover{background:rgba(0,0,0,.75)}
.work-edit-page .we-focal-btn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.work-edit-page .we-mini-lbl{font-size:11px;color:var(--t2)}
.work-edit-page .we-adult-chk{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--c-white)}
.work-edit-page .we-img-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.work-edit-page .we-img-row .we-mini{flex:1;min-width:0}
.work-edit-page .we-poster-edit{cursor:pointer}
.work-edit-page .we-poster-host{display:contents}
/* 형태맞추기-2: 포스터+URL = 1칸 컬럼(보기 .work-poster 폭). hero-inner는 [포스터칼럼|메타] 2칸 */
.work-edit-page .we-poster-col{display:flex;flex-direction:column;flex-shrink:0;width:180px;align-self:flex-start}
.work-edit-page .we-poster-col .work-poster{width:100%;cursor:pointer}
/* 포스터 아래 URL 보조칸(이미지가 주) — 옆 붙음 원인(형제 flex item) 제거: 컬럼 안으로 이동 */
.work-edit-page .we-poster-url{margin-top:8px;max-width:100%}
@media(max-width:479px){.work-edit-page .we-poster-col{width:120px}}
/* 장르·소재 = 선택칩 고정높이 + [선택] 버튼 → 드롭다운 팝오버(레이아웃 안 밀림) */
.work-edit-page .we-pick-field{position:relative}
.work-edit-page .we-pick-pop{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:var(--z-dropdown);background:var(--bg2);border:1px solid var(--bor2);border-radius:var(--rad);padding:8px;max-height:230px;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.work-edit-page .we-poster-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--c-white);background:rgba(0,0,0,.4)}
.work-edit-page .we-img-prev-img{max-width:96px;border-radius:var(--r);border:1px solid var(--bor2);display:block}
.work-edit-page .msec-t .abtn{font-size:11px}

/* 편집 검수 미리보기(깃허브식 diff) */
.review-page .rv-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:2px solid var(--bor);padding-bottom:12px;margin:8px 0 12px}
.rv-title{font-size:16px;font-weight:800}
.rv-actions{display:flex;gap:8px}
.rv-legend{display:flex;gap:14px;font-size:11px;margin-bottom:12px}
.rv-fields{display:flex;flex-direction:column;gap:2px}
.rv-field{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 12px;border-bottom:1px solid var(--bor)}
.rv-field.changed{background:rgba(255,210,78,.05)}
.rv-label{font-size:12px;font-weight:700;color:var(--t3)}
.rv-chg{font-size:9px;color:var(--acc);border:1px solid var(--acc);border-radius:var(--rad);padding:0 4px;margin-left:2px}
.rv-val{font-size:13px;color:var(--t1);white-space:pre-line;line-height:1.5;min-width:0;word-break:break-word}
.rv-empty{color:var(--t3)}
.diff-row{padding:2px 8px;border-radius:var(--rad);font-size:12.5px;margin:1px 0}
.diff-del{background:rgba(229,9,20,.12);color:#ff8a8a;border-left:3px solid #e5495a}
.diff-add{background:rgba(111,207,151,.13);color:#9be6b4;border-left:3px solid #6fcf97}

/* 통합 카드 — 엔티티 카드는 작품 카드(.card) 틀 재사용, 타입 차이만 */
.card--entity .thumb-bg.ent-initial{display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:900;color:var(--t3);background:var(--bg3)}
.tb-ent{background:rgba(0,0,0,.6);color:var(--c-white)}

/* ── 진스타일 프로필 개편 S2 CSS 베이스 ── */
/* profile-redesign.html 핸드오프 이식. S3(히어로)·S5(디렉터리)가 소비하기 전까지 휴면(마크업 미존재) 정상, JS/HTML 무변경 */

/* profile portrait (세로 포트레이트 3:4) */
.eport{position:relative;flex:none;overflow:hidden;background:var(--pane2);border:1px solid var(--bor);aspect-ratio:3/4}
.eport .ei{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.eport:hover .ei{transform:scale(1.04)}
.eport::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px);mix-blend-mode:multiply;opacity:.5}
.eport .pled{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:repeating-linear-gradient(90deg,var(--led) 0 6px,rgba(217,224,33,.22) 6px 10px);box-shadow:0 0 12px var(--led),0 -3px 10px rgba(217,224,33,.35)}
.eport .fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:'Black Han Sans';font-size:44px;color:var(--t3)}
.eport{container-type:inline-size}
.ph-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(158deg,var(--pane) 0%,var(--pane2) 62%,var(--bg) 100%);overflow:hidden}
.ph-wrap::before{content:"";position:absolute;inset:0;background-image:radial-gradient(currentColor 1px,transparent 1.5px);background-size:9px 9px;color:var(--t1);opacity:.05}
/* .ph-wrap 자식(모노그램 이니셜 표시) — S3 이식 완료 */
.ph-mono{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:46cqi;line-height:.9;letter-spacing:-.02em;color:var(--t2);opacity:.5;position:relative}
html[data-theme="light"] .ph-mono{opacity:.42}
.ph-tick{position:absolute;width:11px;height:11px;border:1px solid var(--t3);opacity:.4}
.ph-tick.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.ph-tick.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.ph-tick.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.ph-tick.br{bottom:8px;right:8px;border-left:none;border-top:none}
.ph-lbl{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:'Space Mono';font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--t3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}

/* inline stats (인스타식) */
.estat{display:flex;align-items:center;gap:0}
.estat .st{display:flex;flex-direction:column;gap:1px;padding:0 18px;position:relative}
.estat .st:first-child{padding-left:0}
.estat .st+.st::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--hair)}
.estat .stv{font-family:'Chakra Petch';font-weight:700;font-size:20px;color:var(--t1);line-height:1}
.estat .stl{font-family:'Space Mono';font-size:9.5px;letter-spacing:.05em;color:var(--t3);text-transform:uppercase}

/* 갱신 상태 네온 (프로필 내부·카드 공용) */
.nled{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.nled.fresh{background:var(--acc-br);box-shadow:0 0 6px var(--acc-br),0 0 11px rgba(60,184,120,.55);animation:ledpulse 1.8s ease-in-out infinite}
.nled.pending{background:var(--gold);box-shadow:0 0 6px var(--gold),0 0 11px rgba(216,178,74,.55);animation:ledpulse 2.2s ease-in-out infinite}
.nled.stale{background:var(--neg);box-shadow:0 0 5px rgba(224,80,80,.7);opacity:.9}
@media(prefers-reduced-motion:reduce){.nled{animation:none!important}}

/* .sec-hd 베이스(components.css 상단 정의) 유지, 없는 자식 규칙만 추가. .st 자식은 기존 전역 충돌 회피 위해 의도적 미포함 */
.sec-hd .snum{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
.sec-hd .ssub{font-family:'Space Mono';font-size:11px;color:var(--t3)}
.sec-hd .more{margin-left:auto;font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:5px 10px;white-space:nowrap}
.sec-hd .more:hover{color:var(--acc-br);border-color:var(--acc)}

/* ── 진스타일 프로필 개편 S4 — 바디 4섹션 번호헤더 + 외부링크 linkbox ── */
/* bare .sec-hd .st는 전역 충돌 회피 위해 금지(.wdz 스코프 선례 동형 적용) */
.entity-page .sec-hd .st{font-family:var(--font);font-weight:700;font-size:19px;letter-spacing:-.4px}
.linkbox{border-top:1px solid var(--bor);padding-top:10px;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.linkbox-h{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;display:flex;align-items:center;gap:7px;padding:10px 15px;margin-bottom:2px}
.linkbox .lrow{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid var(--hair);background:var(--pane2);text-decoration:none;transition:border-color .12s}
.linkbox .lrow:hover{border-color:var(--acc-br)}
.linkbox .lp{flex:none;width:24px;height:24px;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:9px;color:var(--t2);background:var(--bg);border:1px solid var(--hair);border-radius:var(--rad)}
.linkbox .ln{flex:1;font-weight:600;font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkbox .lg{flex:none;width:14px;height:14px;color:var(--t3)}
.linkbox .lg svg{width:100%;height:100%;display:block}
.linkbox .lrow:hover .lg{color:var(--acc-br)}

/* 인스타식 사람 탐색 카드 (원형 아바타) */
.pcard{position:relative;min-width:0;border:1px solid var(--bor);background:var(--pane);padding:22px 15px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:border-color .12s}
.pcard:hover{border-color:var(--acc-br)}
.pcard-led{position:absolute;top:10px;left:10px;width:7px;height:7px;border-radius:50%;z-index:2}
.pcard-led::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.25}
.pcard-led.fresh{background:var(--acc-br);color:var(--acc-br);box-shadow:0 0 6px var(--acc-br),0 0 11px rgba(60,184,120,.55);animation:ledpulse 1.7s ease-in-out infinite}
.pcard-led.pending{background:var(--gold);color:var(--gold);box-shadow:0 0 6px var(--gold),0 0 11px rgba(216,178,74,.55);animation:ledpulse 2.2s ease-in-out infinite}
.pcard-led.stale{background:var(--neg);color:var(--neg);box-shadow:0 0 5px rgba(224,80,80,.7);opacity:.9}
@media(prefers-reduced-motion:reduce){.pcard-led{animation:none!important}}
.pcard-av{position:relative;width:74px;height:74px;border-radius:50%;flex:none;background:var(--bg);border:1px solid var(--bor);background-size:cover;background-position:center;display:grid;place-items:center;font-family:'Chakra Petch';font-size:27px;font-weight:700;color:var(--t3);overflow:hidden}
.pcard-av::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px);mix-blend-mode:multiply;opacity:.4}
.pcard:hover .pcard-av{border-color:var(--acc)}
.pcard-name{font-size:14.5px;font-weight:700;color:var(--t1);margin-top:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard:hover .pcard-name{color:var(--acc-br)}
/* ── S5(디렉터리) — 카드 부가정보 + 팔로우 버튼(핸드오프 profile-redesign.html:316-329 원문 이식, 317줄 중복 svg선언 dedup) ── */
.pcard-meta{font-size:11.5px;color:var(--t2);margin-top:4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-fol{font-family:'Space Mono';font-size:9.5px;letter-spacing:.04em;color:var(--t3);margin-top:6px;text-transform:uppercase}
.pcard-add{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;height:24px;padding:0 6px;border:1px solid var(--hair);background:var(--pane);color:var(--t3);font-size:10.5px;font-weight:700;transition:.14s}
.pcard-add svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none}
.pcard-add .lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .18s,opacity .18s,margin .18s}
.pcard-add:hover{border-color:var(--acc);color:var(--acc-br)}
.pcard-add:hover .lbl,.pcard-add.on .lbl{max-width:54px;opacity:1;margin-left:4px}
.pcard-add.on{border-color:var(--acc);color:var(--acc-br);background:var(--acc-dim)}

/* ── 진스타일 프로필 개편 S3 — 히어로 A(인스타형) ── */
/* kind badge + job chips */
.ekind{font-family:'Space Mono';font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--acc-br);border:1px solid var(--acc);border-radius:var(--rad);padding:2px 8px;text-transform:uppercase;flex:none;white-space:nowrap}
.ejob{display:inline-flex;gap:5px;flex-wrap:wrap}
.ejob span{font-size:11.5px;font-weight:600;color:var(--t2);border:1px solid var(--hair);background:var(--bg);border-radius:var(--rad);padding:3px 9px;white-space:nowrap}
/* action row container(버튼 자체는 기존 .ent-fav/.work-edit-btn 클래스 유지, 여긴 배치만) */
.eact{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* 히어로 액션버튼 아웃라인 톤(S11, 시안 profile-redesign .btn) — .ent-fav/.work-edit-btn 공용 베이스(초록 채움, 작품상세 등 공유)는 무수정, 히어로 스코프 오버라이드만 */
.entity-page .heroA .eact .ent-fav,
.entity-page .heroA .eact .work-edit-btn{background:var(--pane);border-color:var(--bor);color:var(--t1);padding:9px 16px}
.entity-page .heroA .eact .ent-fav:hover,
.entity-page .heroA .eact .work-edit-btn:hover{background:var(--pane);border-color:var(--acc);color:var(--acc-br)}
.entity-page .heroA .eact .ent-fav.on{background:var(--pane);border-color:var(--acc);color:var(--acc-br)}
/* 이름/별명/소개/태그 */
.ename{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:32px;line-height:1.05;letter-spacing:-.5px;color:var(--t1);text-wrap:balance}
.ealias{font-family:'Space Mono';font-size:12px;color:var(--t3);margin-top:5px}
.ebio{font-size:13.5px;line-height:1.65;color:var(--t2);text-wrap:pretty;max-width:640px}
.etags{display:flex;flex-wrap:wrap;gap:5px}
.etag{font-size:11.5px;font-weight:600;color:var(--t2);padding:4px 10px;border:1px solid var(--hair);background:var(--bg);border-radius:var(--rad);transition:.1s;white-space:nowrap;display:inline-block}
.etag:hover{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
html[data-theme="light"] .etag:hover{color:#fff}
/* 갱신 상태 LED(위치 래퍼) — 점 자체 스타일(.nled)은 S2 기이식, 여긴 배치+상태색만 */
.hero-led{position:absolute;top:14px;left:14px;z-index:3}
.hero-led::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.22}
.hero-led.fresh{color:var(--acc-br)}.hero-led.pending{color:var(--gold)}.hero-led.stale{color:var(--neg)}
/* HERO A — 인스타형. 주의: 앱 전역 .hero(layout.css 홈배너)와 충돌 회피 위해 핸드오프의 공용 .hero 쉘 속성을 .heroA 자체에 병합(bare .hero 셀렉터 신설 금지) */
.heroA{position:relative;border:1px solid var(--bor);background:var(--pane);overflow:hidden;margin-bottom:26px;padding:26px 26px 24px;display:flex;align-items:flex-start;gap:30px}
.heroA .watermark{position:absolute;font-family:'Black Han Sans';line-height:1;color:var(--t1);opacity:.03;pointer-events:none;letter-spacing:-4px;user-select:none;right:-10px;top:-24px;font-size:150px}
html[data-theme="light"] .heroA .watermark{opacity:.055}
.heroA .eport{width:168px}
.heroA .col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.heroA .r1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.heroA .r1 .eact{margin-left:auto}
.heroA .ename{font-size:30px}
@media(max-width:639px){
  .heroA{flex-direction:column;align-items:stretch}
  .heroA .eport{width:100%;max-width:220px;margin:0 auto}
}

/* 엔티티 편집 히어로 — heroA 미러링(S6). .ed-portrait만 크롭 스테이지(cip-box max-width:240) 수용 위해 168px→240px 확장. .col은 heroA .col 베이스 그대로 상속(오버라이드 불요) */
.ed-hero .ed-portrait{width:240px}
.ent-edit-page .ed-hero .col{gap:13px}
.ent-edit-page .ed-hero .r1{gap:10px}
/* 리뷰어 FAIL 수정: 위 240px가 무조건 규칙이라 .heroA .eport(639px)와 특이도(0,2,0) 동률 → 소스 순서상 이 규칙이 이겨 모바일 축소가 안 걸렸다. 같은 639px에 .ed-portrait를 명시해 순서로 되돌림(값은 .heroA .eport와 동일) */
@media(max-width:639px){
  .ed-hero .ed-portrait{width:100%;max-width:220px;margin:0 auto}
}
/* 프로필/외부링크 2열 정보패널(S6 신설) — 엔티티 편집 페이지 스코프 한정 */
.ent-edit-page .infopanel{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
@media(max-width:640px){
  .ent-edit-page .infopanel{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ent-edit-page .ed-hero{padding:16px 14px 14px}
}

/* ── 진스타일 프로필 개편 S7 — 보기 미적용 요소(핸드오프 profile-redesign.html 이식). 전부 .entity-page 스코프(동명 범용 클래스 충돌 회피) ── */
.entity-page .ekick{font-family:'Space Mono';font-size:10.5px;letter-spacing:.1em;color:var(--acc-br);text-transform:uppercase;display:flex;align-items:center;gap:8px}

/* 01 프로필 정보 — .facts(박스形 2열 행) */
.entity-page .facts{border:1px solid var(--bor);background:var(--pane)}
.entity-page .facts .fact{display:flex;gap:12px;padding:9px 14px;border-bottom:1px solid var(--hair);font-size:12.5px}
.entity-page .facts .fact:last-child{border-bottom:none}
.entity-page .facts .fk{font-family:'Space Mono';font-size:10px;letter-spacing:.04em;color:var(--t3);text-transform:uppercase;width:64px;flex:none;padding-top:1px}
.entity-page .facts .fv{color:var(--t1);flex:1;min-width:0}

/* 02 프로필 본문 — 위키 폴리시(키커·페이드·더보기·기여 푸터) */
.entity-page .wiki{border:1px solid var(--bor);background:var(--pane);padding:18px 20px}
.entity-page .wiki .body-k{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--t3);text-transform:uppercase;margin-bottom:12px}
.entity-page .wiki .fade{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);max-height:130px;overflow:hidden;transition:max-height .3s}
.entity-page .wiki.open .fade{max-height:900px;-webkit-mask-image:none;mask-image:none}
/* 시안 h4는 정적 목업(renderWikiDoc 실출력=.wiki-doc>.wiki-sec>h2.wiki-h2+.wiki-body). 전역 .wiki-h2/.wiki-body(작품상세 위키탭·wdz 공유)는 무수정, .entity-page .wiki .fade로 얹어서 오버라이드 */
.entity-page .wiki .fade .wiki-h2{font-size:15px;font-weight:700;border-bottom:none;padding-bottom:0;margin:16px 0 7px}
.entity-page .wiki .fade .wiki-sec:first-child .wiki-h2{margin-top:0}
.entity-page .wiki .wiki-body{line-height:1.85}
.entity-page .wiki-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--hair)}
.entity-page .wiki-foot .expand{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br)}
.entity-page .wiki-foot .note{font-size:11px;color:var(--t3);margin-left:auto;display:flex;align-items:center;gap:6px}
.entity-page .wiki-foot .note .led{width:5px;height:5px}
.entity-page .wiki-foot .edit{font-size:11.5px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:4px 10px}
.entity-page .wiki-foot .edit:hover{color:var(--acc-br);border-color:var(--acc)}

/* 03 참여 작품 — 엔티티 전용 카드(cardHTML 무관, renderEntityPage 로컬 소비) */
.entity-page .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.entity-page .wcard{cursor:pointer}
.entity-page .wcard .wcov{position:relative;aspect-ratio:2/3;border:1px solid var(--hair);overflow:hidden;background:var(--pane2)}
.entity-page .wcard .wcov .thumb-img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.entity-page .wcard:hover .wcov .thumb-img{transform:scale(1.05)}
.entity-page .wcard .wcov .wgrad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 55%)}
.entity-page .wcard .wcov .wt-badge{position:absolute;left:5px;top:5px;font-size:9px;font-weight:800;padding:2px 6px;background:var(--acc-br);color:var(--c-white)}
.entity-page .wcard .wcov .role{position:absolute;left:6px;bottom:6px;right:6px;font-family:'Space Mono';font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--led);text-transform:uppercase}
.entity-page .wcard .wct{font-size:12.5px;font-weight:700;color:var(--t1);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entity-page .wcard:hover .wct{color:var(--acc-br)}
.entity-page .wcard .wcs{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t3);margin-top:2px}
.entity-page .wcard .wcs .herb{display:inline-flex;align-items:center;gap:2px;font-family:'Space Mono';font-weight:700;color:var(--acc-br)}
.entity-page .wcard .wcs .herb svg.leaf{width:10px;height:10px;fill:currentColor}
.entity-page .wcard .wcs .herb.locked{color:var(--t3);opacity:.5}
.entity-page .wcard .wcs .herb svg.lk{width:9px;height:9px;margin-left:1px}
.entity-page .wcard .wcs .herb:not(.locked) svg.lk{display:none}

/* 04 갤러리 — renderMediaGallery 내부(.mg-grid/.mg-card)가 .gal/.gcell과 구조 자체가 달라 wrapper만으론 리스킨 불가(무수정 원칙과 충돌) → 보류, .sec 래퍼만 부착 */

/* 리빌 — 공유 IO 인스턴스 없음(work.js _setupWdzReveal 페이지별 복제 컨벤션), .wdz .reveal-up 선례 미러링 */
.entity-page .reveal-up,.industry-page .reveal-up{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.entity-page .reveal-up.in,.industry-page .reveal-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.entity-page .reveal-up,.industry-page .reveal-up{opacity:1;transform:none;transition:none}}

/* 유저추천 = 비슷한작품과 동일 카드/레일(refCard+rec-rail) 재사용. ★자리=추천 인원(cscore). 전용 행/이유 CSS 폐지. */

/* 통합 카드 작은 변형(card--sm) — 유저추천 등 보조 영역용 */
.card--sm .ctitle{font-size:12px}
.card--sm .cmeta{font-size:10px}
.card--sm .cscore{font-size:10px}
.card--sm .hbtn{transform:scale(.85)}
.card--sm .tb{font-size:8.5px;padding:1px 4px}

/* 위키 본문(마크업 렌더) */
.wiki-body{font-size:13.5px;line-height:1.75;color:var(--t2);margin:6px 0 14px}
.wiki-body p{margin:0 0 10px}
.wiki-body b{color:var(--t1)}
.wiki-h2{font-size:16px;font-weight:800;color:var(--t1);border-bottom:1px solid var(--bor);padding-bottom:5px;margin:18px 0 8px}
.wiki-h3{font-size:14px;font-weight:700;color:var(--t1);margin:14px 0 6px}
.wiki-ul{margin:0 0 10px;padding-left:18px}
.wiki-ul li{margin:2px 0}

/* 엔티티 편집 — 프로필 자유 행(인포박스식) */
#ee-profile{max-width:100%}
.ee-prof-row{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;margin-bottom:6px;max-width:100%;overflow:hidden}
.ent-edit-page .ee-prof-row .ee-prof-k{flex:0 0 52px;max-width:52px;min-width:0}
.ent-edit-page .ee-prof-row .ee-prof-v{flex:1 1 0;min-width:0;width:auto}
.ee-prof-row .abtn{flex-shrink:0;padding:3px 5px;font-size:11px;line-height:1}
.ee-job-chips{display:flex;flex-wrap:wrap;gap:6px}
.ee-job-chip{font-size:12px;color:var(--t2);background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:4px 11px;cursor:pointer}
.ee-job-chip:hover{border-color:var(--bor2)}
.ee-job-chip.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
.ent-edit-page .ed-hero .admin-input{width:100%;flex:0 0 auto}

/* ── S9: 편집폼 내부 리스킨. 전부 .ent-edit-page 스코프 — 공용 베이스(.admin-input 387/.abtn 369-374/.ee-work-chips·.ee-chip)는 무수정, 여기서 오버라이드만 ── */
.ent-edit-page .admin-input{width:100%;max-width:none;background:var(--pane);border:1px solid var(--bor2);border-radius:0;padding:9px 12px;font-size:13px}
/* .entity-chip 베이스(1756, 20px pill)는 work-wiki.js 회차/작품 편집과 공유 — 직접 수정 금지. 편집폼(.ee-chip 결합)만 스코프 오버라이드 */
.ent-edit-page .entity-chip{border-radius:var(--rad)}
.ent-edit-page .admin-input:focus{border-color:var(--acc-br);box-shadow:0 0 0 1px var(--acc-br)}
/* 이름 입력 — 뷰 .ename(heroA .ename:30px)과 타이포 통일. box 대신 밑줄만(문서형) */
.ent-edit-page .ed-hero #ee-name{font-size:30px;font-weight:800;background:transparent;border:none;border-bottom:2px solid var(--bor2);border-radius:0;padding:6px 2px}
.ent-edit-page .ed-hero #ee-name:focus{border-bottom-color:var(--acc-br);box-shadow:none}
/* 직업·성별 2열(인물 kind 전용, 핸드오프 .ed-inline) */
.ent-edit-page .ed-inline{display:flex;gap:20px;flex-wrap:wrap}
.ent-edit-page .ed-inline>div{flex:1;min-width:160px}
@media(max-width:640px){.ent-edit-page .ed-inline{flex-direction:column;gap:10px}}
.ent-edit-page .hint{font-size:11px;font-weight:400;color:var(--t3);margin-left:4px}
/* +행 버튼 — addrow 룩(대시보더). 이 스코프 안 .abtn-acc=eeAddProfile/eeAddLink 2곳 전용(관리자 승인표는 .admin-section, 미포함) */
.ent-edit-page .abtn-acc{background:none;border:1px dashed var(--acc-br);color:var(--acc-br);border-radius:0;font-family:'Space Mono';font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px}
.ent-edit-page .abtn-acc:hover{background:var(--acc-br);border-style:solid;color:var(--c-white)}
/* 작품 검색 드롭다운 — 플랫 보더 정합(클래스명 불변) */
.ent-edit-page .ee-work-res{border-radius:0;border-color:var(--bor2)}
.ent-edit-page .ee-work-opt{border-bottom-color:var(--hair)}
.ent-edit-page .ee-work-opt:hover{background:var(--bg3);color:var(--acc-br)}

/* ── 공통 토글 스위치 (.sw-toggle) — 설정·마이페이지 공용. display:inline-block 필수(시안 0×0 버그픽스) ── */
.sw-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.sw-toggle input{opacity:0;width:0;height:0;position:absolute}
.sw-toggle__track{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--bor);border-radius:var(--r);transition:background .2s,border-color .2s;cursor:pointer}
.sw-toggle input:checked + .sw-toggle__track{background:var(--acc);border-color:var(--acc)}
.sw-toggle__knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--t3);transition:transform .2s,background .2s;pointer-events:none}
.sw-toggle input:checked ~ .sw-toggle__knob{transform:translateX(20px);background:var(--c-white)}
.sw-toggle input:disabled ~ .sw-toggle__track,.sw-toggle input:disabled ~ .sw-toggle__knob{opacity:.5}

/* ══════════════════════════════════════════════════════════════════════════
   전역 베이스 이관 (구 home-zine.css → components.css, zine_CSS_누출_봉합_v1 §전역 베이스 이관)
   .mono/.barbar/.hd/.topbar/.links/.led/.shell/.ad/.card 하위(.cover/.tbadges/.tb/.cplat/.bm/.cmeta/
   .ctop/.ctitle/.cscore/.csub)/.foot — cardHTML()(card.js)·nav.js·work.js·content.js·library.js 등
   홈 외 페이지에서도 쓰이는 전역 컴포넌트라 여기로 이동. 값 변경 없음(이동만).
   ↓ 이 아래에 동명 셀렉터(.card/.tb/.cscore/.ctitle/.cmeta 등)를 추가하면 소스순서상 이 블록이
   지므로, 추가 선언은 반드시 이 블록 안에서 할 것.
   ※ 위쪽 27/38/48/52/53행 구 .card/.tb/.cscore/.ctitle/.cmeta 정의는 레거시 잔재였으나 전 조합
   (테마·뷰포트·hover) 재실측 결과 속성 단위로 갈렸다: .card(구27행)는 전 속성을 이관본이 덮어써
   완전 사문화 → 삭제. .tb/.cscore/.ctitle는 이관본이 정의하지 않은 속성(.tb border-radius, .cscore
   font-size·font-weight·line-height, .ctitle transition)이 생존해 있어 겹치는 선언만 제거하고
   생존 선언만 남김(계산값 불변). .cmeta(구53행)는 이관본(padding만 정의)과 속성이 전혀 겹치지 않아
   전량 생존 — 손대지 않음, 두 규칙이 합쳐져 함께 적용됨. ══════ */
.mono{font-family:'Space Mono',monospace}
.barbar{height:20px;color:var(--acc);background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px,currentColor 6px 9px,transparent 9px 11px,currentColor 11px 12px,transparent 12px 15px)}

/* ===== header (전역 nav — nav.js 렌더) ===== */
.hd{position:sticky;top:0;z-index:var(--z-nav);background:var(--nav);backdrop-filter:blur(12px);border-bottom:1px solid var(--bor)}
.topbar{display:flex;align-items:center;gap:14px;height:56px;padding:0 22px;max-width:1320px;width:100%;margin:0 auto}
.topbar .logo{display:inline-flex;align-items:center;gap:5px;flex:none}
.topbar .wm{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.5px;text-transform:uppercase;line-height:1;color:var(--t1)}
.topbar .wm .hb{color:var(--acc-br)}
.topbar .mk{height:19px;width:auto;color:var(--acc-br)}
.links{display:flex;gap:2px;flex:none;margin-left:10px}
.links a{flex:none;font-size:13.5px;font-weight:600;color:var(--t2);padding:6px 9px;border-radius:var(--rad);white-space:nowrap}
.links a:hover{color:var(--t1)}
.links a.on{color:var(--acc-br);background:var(--acc-dim)}
.topbar .sp{flex:1}
.topbar .sbox{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t3);border:1px solid var(--bor);border-radius:var(--rad);padding:7px 12px;width:200px;flex:none;white-space:nowrap}
.topbar .sbox svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}
.topbar .ibtn{width:32px;height:32px;border-radius:var(--rad);display:grid;place-items:center;color:var(--t2)}
.topbar .ibtn:hover{background:var(--pane);color:var(--t1)}
.topbar .ibtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none}
.topbar .av{width:30px;height:30px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-weight:700;font-size:12px;color:#06281a;flex:none}
.topbar .ibtn.adult{font-family:'Space Mono';font-size:11px;font-weight:700;width:auto;padding:0 8px;border:1px solid var(--bor);color:var(--t3);border-radius:var(--rad)}
.topbar .ibtn.adult:hover{color:var(--t1)}
/* 켜짐 상태 — 옛 인라인 style(nav.js)과 toggleAdult 의 classList 두 벌이던 것을 클래스로 통일(F7). 값은 인라인과 동일 */
.topbar .ibtn.adult.on{background:var(--adult);color:#fff;border-color:var(--adult)}
.topbar .ibtn.adult.on:hover{color:#fff}
.led{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led);display:inline-block;flex:none;animation:ledpulse 1.7s ease-in-out infinite}
@keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.led{animation:none}}

/* ===== page shell (3열: rail|main|sb — work.js/work-wiki.js 상세 레이아웃도 재사용) ===== */
.shell{display:grid;grid-template-columns:160px minmax(0,1fr) 300px;gap:22px;max-width:1320px;margin:0 auto;padding:20px 22px 64px;align-items:start}
@media(max-width:1100px){.shell{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:860px){.shell{grid-template-columns:1fr}}

/* ===== ad box ===== */
.ad.sky{width:160px;height:600px}
.ad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--bor);background:var(--ad);color:var(--t3)}
.ad .l{font-size:9px;font-weight:800;letter-spacing:.16em}.ad .z{font-size:10px;opacity:.7}

/* ===== card (cardHTML 공용 베이스 — work/content/library 등 전역. 소형변형 .card--sm은 위 2289~2293행) ===== */
.card{cursor:pointer;transition:transform .18s ease}
.card:active{transform:scale(.985)}
.card{animation:cpop .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
@keyframes cpop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card{animation:none}}
.cover{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--hair);background:var(--pane2)}
.r34 .cover,.cover.a34{aspect-ratio:3/4}
.cover .ci{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover .ci{transform:scale(1.045)}
/* cover badges */
.tbadges{position:absolute;left:5px;top:5px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;z-index:2}
.tb{font-size:8.5px;font-weight:800;letter-spacing:.03em;padding:2px 6px;line-height:1.3;font-family:var(--font)}
.tb.nbnew{background:var(--led);color:var(--ink)}
.tb.done{background:rgba(0,0,0,.62);color:var(--t1);border:1px solid rgba(255,255,255,.18)}
.tb.adt{background:#a3303a;color:#fff}
.tb.ssn{background:rgba(0,0,0,.62);color:var(--acc-br);border:1px solid var(--acc)}
.cplat{position:absolute;right:5px;top:5px;z-index:2;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:2px 6px}
.bm{position:absolute;right:5px;bottom:5px;z-index:2;width:26px;height:28px;display:grid;place-items:center;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(3px);transition:opacity .16s,transform .16s,background .12s,color .12s}
.card:hover .bm{opacity:1;transform:none}
.bm:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.bm.on{opacity:1;color:var(--acc-br);background:rgba(0,0,0,.6)}
.bm svg{width:13px;height:15px}
/* 상태버튼 색코딩(E3 card-status-btn 통합 복원, --st-* 재사용). .bm.on 뒤라 상태색 우선 */
.bm.st-watching{color:var(--st-watching)}
.bm.st-completed{color:var(--st-completed)}
.bm.st-onhold{color:var(--st-onhold)}
.bm.st-dropped{color:var(--st-dropped)}
.bm.st-interested{color:var(--acc)}
.bm.st-binge{color:var(--st-binge)}
.bm.st-hiatus{color:var(--st-hiatus)}
/* meta + dual score */
.cmeta{padding:8px 1px 0}
.ctop{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.ctitle{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cscore{display:flex;align-items:center;gap:6px;flex:none}
.cscore .star{font-weight:800;font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.cscore .herb{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:11px;color:var(--acc-br);font-variant-numeric:tabular-nums}
.cscore .herb .leaf{width:10px;height:10px}
.cscore .herb.locked{color:var(--t3);opacity:.5}
.cscore .herb .lk{width:9px;height:9px;margin-left:1px}
.cscore .herb:not(.locked) .lk{display:none}
.csub{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* HerbScore 잠금 해제 시 → 허브스코어가 메인 */
body.herb-on .cscore .star{font-size:11px;color:var(--t3);font-weight:700}
body.herb-on .cscore .herb,body.herb-on .cscore .herb.locked{font-size:13.5px;color:var(--acc-br);opacity:1}
body.herb-on .cscore .herb .lk{display:none}

/* ===== footer (진 스타일 미니멀 바코드 스트립 — .site-footer 신버전과 별개, .foot=구버전 재사용처 존재시 유지) ===== */
.foot{display:flex;align-items:center;gap:12px;padding-top:6px}
.foot .ast{font-family:'Chakra Petch';font-weight:700;font-size:18px;color:var(--acc)}
.foot .mono{font-size:10px;color:var(--t3);letter-spacing:.06em}

/* ===== 부팅 스켈레톤 (배포표준_적합성감사_v1 P0-4 — CLS 방지, ToonHerb.html _bootLoadingHTML 전용) =====
   실제 홈 첫 화면(.jhero 480px + .main gap 32px + 첫 셸프 헤더·카드열)이 차지할 높이를 미리 예약한다.
   값은 home-zine.css 실측치와 동일(.jhero height:480 :109, .main gap:32 :11, .hs gap:13 :36,
   .main .hs .card 150 :38 — 이 150 은 --card-w(base.css:15, 132px) 전역 토큰과 무관한 홈 전용 오버라이드) —
   신규 매직넘버가 아니라 기존 레이아웃 실측값을 스켈레톤에 그대로 반영한 것. */
.boot-skel{display:flex;flex-direction:column;gap:32px}
.boot-skel-hero{height:480px;border:1px solid var(--bor);border-radius:var(--rad);background:var(--pane);overflow:hidden;position:relative}
.boot-skel-sh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.boot-skel-bar{border-radius:var(--rad);background:var(--bg3)}
.boot-skel-sh .boot-skel-bar:nth-child(1){width:22px;height:11px}
.boot-skel-sh .boot-skel-bar:nth-child(2){width:120px;height:15px}
.boot-skel-row{display:flex;gap:13px;overflow:hidden}
.boot-skel-card{flex:none;width:150px;display:flex;flex-direction:column;gap:8px}
.boot-skel-card .boot-skel-bar{aspect-ratio:var(--card-ratio);width:100%;height:auto}
.boot-skel-card .boot-skel-bar+.boot-skel-bar{aspect-ratio:auto;height:13px;width:80%}
.boot-skel-hero,.boot-skel-bar{background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);background-size:200% 100%;animation:boot-skel-sheen 1.6s ease-in-out infinite}
@keyframes boot-skel-sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.boot-skel-hero,.boot-skel-bar{animation:none}}