/* ===== Tokens & base ===== */
:root{--bg:#fff;--surface:#f6f6f7;--text:#111114;--muted:#696970;--line:#dedee3;--accent:#ef1748;--accent-dark:#be0c35;--success:#147a43;--warning:#a46200;--radius:14px;--shadow:0 18px 60px rgba(17,17,20,.08);--shell:min(1180px,calc(100% - 40px));font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,.button{border:0;background:var(--text);color:#fff;padding:.78rem 1.1rem;border-radius:10px;font-weight:750;cursor:pointer}
.button:hover,button:hover{background:var(--accent)}
button:disabled{opacity:.45;cursor:not-allowed}
.shell{width:var(--shell);margin-inline:auto}
.muted{color:var(--muted)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);border-top:3px solid var(--accent);backdrop-filter:blur(14px)}
.nav-row{min-height:60px;display:flex;align-items:center;gap:28px}
.brand{font-size:1.15rem;letter-spacing:-.03em;font-weight:900}
.brand strong{color:var(--accent)}
.primary-nav{display:flex;align-items:center;gap:22px;font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.primary-nav a{padding:6px 0;border-bottom:2px solid transparent}
.primary-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav-toggle{display:none;padding:.55rem .7rem;margin-left:auto}

/* ===== Shared news components ===== */
.chip{display:inline-block;background:var(--accent);color:#fff;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .5rem;border-radius:4px;line-height:1.2}
.time{font-size:.78rem;color:var(--muted);margin-left:10px}
.time.views{color:var(--accent);font-weight:750}
.thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#17171c 0%,#26262e 55%,#3b0d1a 100%);background-size:cover;background-position:center}
.thumb-mark{font-weight:950;letter-spacing:-.04em;color:rgba(239,23,72,.85);font-size:clamp(1.2rem,3vw,2rem);text-transform:uppercase}

/* ===== Front page (Soompi-style, 첫 화면 한 장에 전부) ===== */
.front{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:32px;padding-block:12px;align-items:start}
.lead-card{display:block}
.lead-thumb{aspect-ratio:16/9;border-radius:12px}
.lead-thumb .thumb-mark{font-size:clamp(2rem,6vw,3.4rem)}
.lead-copy{padding-top:12px}
.lead-copy h1{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12;letter-spacing:-.03em;margin:.45rem 0 .45rem}
.lead-card:hover h1{color:var(--accent)}
.lead-copy p{margin:0;color:var(--muted);font-size:.96rem;max-width:640px}
.front-rail{border-left:1px solid var(--line);padding-left:26px;min-width:0}
.rail-title{font-size:1.2rem;font-weight:950;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 4px;border-bottom:3px solid var(--accent);display:inline-block;padding-bottom:3px}
.rail-title.rail-sub{margin-top:16px}
.rail-list{display:grid}
.rail-list>a{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rail-list>a:hover strong{color:var(--accent)}
.rail-rank{font-size:1.3rem;font-weight:950;color:var(--line);line-height:1.2;min-width:24px}
.rail-list>a:hover .rail-rank{color:var(--accent)}
.rail-thumb{flex:0 0 50px;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#17171c,#3b0d1a);background-size:cover;background-position:center}
.rail-thumb .thumb-mark{font-size:.58rem;text-align:center;line-height:1.25;letter-spacing:.04em}
.rail-copy{min-width:0}
.rail-copy strong{display:block;font-size:.85rem;line-height:1.28;letter-spacing:-.01em;margin-top:4px}
.rail-copy .time{font-size:.7rem}
.mini-events{display:grid;gap:2px;padding-top:4px}
.mini-events>a{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:.85rem;min-width:0}
.mini-events time{font-weight:850;color:var(--accent);white-space:nowrap;font-size:.78rem}
.mini-events span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-events>a:hover span{color:var(--accent)}
.mini-events .text-link{border-bottom:0;padding-top:8px;font-size:.8rem}

/* ===== Sections & grids ===== */
.section{padding-block:44px}
.band{background:var(--surface)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}
.section-heading h2,.explained-callout h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.035em;margin:0}
.section-heading>a,.text-link{font-weight:800;color:var(--accent);font-size:.9rem}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.news-card{display:block;min-width:0}
.news-card .thumb{margin-bottom:12px}
.news-card h3{font-size:1.08rem;line-height:1.28;letter-spacing:-.015em;margin:.5rem 0 .35rem}
.news-card:hover h3{color:var(--accent)}
.news-card p{margin:0;color:var(--muted);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card{border-top:3px solid var(--text);padding-top:16px}
.article-card h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.02em;margin:.45rem 0}
.article-card p{color:var(--muted)}
.meta{font-size:.82rem;color:var(--muted)}
.category{display:inline-block;color:var(--accent);font-size:.74rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.split-section>div{min-width:0}
.event-list,.artist-list,.source-directory{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.event-row,.artist-list>a,.source-directory>a{background:#fff;padding:16px;display:flex;align-items:center;gap:16px}
.event-row time{width:64px;font-weight:850;color:var(--accent)}
.event-row div,.artist-list a span:last-child,.source-directory a{min-width:0}
.event-row strong{display:block;margin-top:4px}
.event-row span:not(.chip),.artist-list small,.source-directory span{display:block;color:var(--muted);font-size:.84rem}
.comeback-home{max-width:680px}
/* 공식 쇼츠 쉘프: 세로 카드 가로 스크롤, 클릭하면 그 자리에서 공식 임베드 재생 */
.shorts-section{padding-block:28px}
.shorts-shelf{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shorts-shelf::-webkit-scrollbar{display:none}
.short-card{flex:0 0 172px;cursor:pointer}
.short-thumb{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000 center/cover no-repeat;display:grid;place-items:center}
.short-thumb iframe{width:100%;height:100%;border:0;display:block}
.short-play{width:44px;height:44px;border-radius:50%;background:rgba(17,17,20,.72);color:#fff;display:grid;place-items:center;font-size:1rem;padding-left:3px;transition:transform .12s,background .12s}
.short-card:hover .short-play{transform:scale(1.12);background:var(--accent)}
.short-fallback{display:grid;place-items:end center;width:100%;height:100%;background:#000 center/cover no-repeat;padding-bottom:14px}
.short-fallback span{background:rgba(17,17,20,.85);color:#fff;font-size:.72rem;font-weight:800;padding:.4rem .6rem;border-radius:8px}
.short-fallback:hover span{background:var(--accent)}
.short-copy{padding-top:8px}
.short-copy strong{display:block;font-size:.82rem;letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.short-copy span{font-size:.72rem;color:var(--muted)}
/* 채널별 영상 줄 (아티스트 허브): 공식 한 줄 + 멤버별 한 줄, 인기/최신 토글 */
.short-card.wide{flex:0 0 236px}
.short-card.wide .short-thumb{aspect-ratio:16/9}
.vrow{margin-bottom:26px}
.vrow-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:0 0 10px}
.vrow-head h2{font-size:1.25rem;letter-spacing:-.03em;margin:0;border-bottom:3px solid var(--accent);padding-bottom:3px}
.vrow-sort{display:flex;gap:6px}
.sort-btn{background:var(--surface);color:var(--muted);padding:.3rem .65rem;border-radius:999px;font-size:.74rem;font-weight:800}
.sort-btn.is-on{background:var(--text);color:#fff}
.sort-btn:hover{background:var(--accent);color:#fff}
/* 아티스트 독: 전 페이지 공통, 데스크톱 왼쪽 세로 로고 레일 (작게 — 본창 우선).
   콘텐츠 영역(.page-body) 안에서만 sticky로 따라오고, 푸터 구분선에서 멈춘다. */
.artist-dock{display:none}
@media(min-width:761px){
.page-body{display:flex;align-items:flex-start}
.page-body>main{flex:1;min-width:0}
.artist-dock{position:sticky;top:74px;height:calc(100vh - 90px);flex:0 0 48px;margin-left:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none;align-items:center;padding:4px 0}
.artist-dock::-webkit-scrollbar{display:none}
.artist-dock .avatar{width:36px;height:36px;font-size:.85rem;flex-shrink:0;background:linear-gradient(135deg,#17171c,#3b0d1a);transition:transform .12s}
.artist-dock a:hover .avatar{transform:scale(1.14);outline:2px solid var(--accent);outline-offset:2px}
.artist-dock a.is-active .avatar{outline:2px solid var(--accent);outline-offset:2px}
.artist-dock .dock-all{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px dashed var(--muted);color:var(--muted);font-weight:900;flex-shrink:0;font-size:.9rem}
.artist-dock .dock-all:hover{color:var(--accent);border-color:var(--accent)}
}
/* 모바일 상단 아티스트 바: 전 페이지 공통, 로고만, 스크롤하면 같이 올라감 */
.artist-bar{display:none}
.avatar{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--text);color:#fff;font-weight:900;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.photo-credit{font-size:.72rem;margin-top:6px}
.avatar.large{width:76px;height:76px;font-size:1.8rem;background:linear-gradient(135deg,#17171c,#3b0d1a)}
.avatar.xl{width:128px;height:128px;font-size:3.2rem}
.explained-callout{max-width:880px;text-align:center}
.explained-callout p{font-size:1.08rem;color:var(--muted)}
.empty-state{padding:42px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}

/* ===== Listing pages ===== */
.page-head{padding-top:48px;padding-bottom:20px}
.page-head h1{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.05em;margin:.3rem 0 .9rem;max-width:900px}
.page-head p,.dek{font-size:1.12rem;color:var(--muted);max-width:760px}
.inline-form,.filter-bar,.search-large{display:flex;gap:10px}
.inline-form input,.filter-bar input,.filter-bar select,.search-large input{width:100%;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;background:#fff}
.filter-bar{margin-bottom:28px}
.filter-bar input{flex:1}
.filter-bar select{max-width:240px}
.story-list{display:grid}
.story-list article{display:flex;justify-content:space-between;gap:40px;padding:24px 0;border-top:1px solid var(--line)}
.story-list h2,.story-list h3{font-size:1.4rem;line-height:1.18;letter-spacing:-.025em;margin:.45rem 0}
.story-list a:hover{color:var(--accent)}
.story-list p{margin:0;color:var(--muted);max-width:760px}
.timeline article{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.timeline time{font-weight:850}
.timeline h2{margin:.4rem 0;font-size:1.35rem;letter-spacing:-.02em}
.schedule-month{margin-bottom:40px}
.schedule-month>h2{font-size:1.4rem;letter-spacing:-.03em;text-transform:uppercase;border-bottom:4px solid var(--accent);display:inline-block;padding-bottom:4px;margin:0 0 8px}
.schedule-row{display:flex;align-items:center;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}
.schedule-date{flex:0 0 64px;text-align:center;background:var(--surface);border-radius:10px;padding:10px 0}
.schedule-date strong{display:block;font-size:1.5rem;line-height:1;letter-spacing:-.03em}
.schedule-date span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.schedule-copy{min-width:0;flex:1}
.schedule-copy h3{margin:.35rem 0 .2rem;font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
.schedule-copy p{margin:0;font-size:.88rem;color:var(--muted)}
.schedule-source{font-weight:800;color:var(--accent);font-size:.85rem;white-space:nowrap}
/* 자체 비디오 차트 */
.chart-list{display:grid}
.chart-row{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.chart-rank{font-size:1.7rem;font-weight:950;color:var(--line);min-width:44px;text-align:center}
.chart-row:nth-child(-n+3) .chart-rank{color:var(--accent)}
.chart-card{flex:0 0 108px;cursor:pointer}
.chart-card.wide{flex:0 0 172px}
.chart-card .short-thumb{aspect-ratio:9/16;border-radius:8px}
.chart-card.wide .short-thumb{aspect-ratio:16/9}
.chart-copy{min-width:0;flex:1}
.chart-copy strong{display:block;font-size:1rem;letter-spacing:-.015em;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chart-copy p{margin:.25rem 0;font-size:.85rem;color:var(--muted)}
.chart-vel{display:inline-block;font-size:.76rem;font-weight:850;color:var(--success)}
.chart-vel.measured{color:var(--accent)}
.artist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.artist-tile{background:var(--surface);padding:24px;border-radius:var(--radius);display:grid;gap:10px}
.artist-tile strong{font-size:1.2rem}
.artist-tile small{color:var(--muted)}
.artist-hero{padding:48px 0 20px;display:flex;align-items:center;gap:28px}
.artist-hero h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.055em;line-height:.95;margin:0}
.artist-intro{color:var(--muted);max-width:640px;margin:.5rem 0 0}
.prose{max-width:800px}
.prose h2{margin-top:2.5rem;font-size:1.7rem}

/* ===== Article page (Soompi-style: main + related rail) ===== */
.article-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:36px;padding-block:28px;align-items:start}
.article-main{min-width:0}
.article-hero{border-radius:12px;margin-bottom:20px}
.video-embed{aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:20px;background:#000}
.hub-player-wrap{padding-top:6px}
.hub-player-wrap .video-embed{margin-bottom:8px}
.hub-player-title{margin:0 0 6px;display:flex;align-items:baseline;gap:10px}
.hub-player-title strong{font-size:1.05rem;letter-spacing:-.02em}
.short-card.is-current .short-thumb{outline:3px solid var(--accent);outline-offset:-3px}
.video-embed iframe{width:100%;height:100%;border:0;display:block}
.social-embed{display:flex;justify-content:center;margin:0 0 20px}
.social-embed blockquote{margin:0;max-width:540px;width:100%;background:var(--surface);border-radius:12px;padding:18px}
.social-embed iframe{max-width:100%}
.article-hero .thumb-mark{font-size:clamp(1.6rem,4vw,2.8rem)}
.breadcrumb{font-size:.85rem;color:var(--muted);padding-top:18px}
.article-header{padding:0 0 14px}
.article-header h1{font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.035em;margin:.2rem 0 .6rem}
.byline-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);padding-bottom:14px}
.byline{font-size:.85rem;color:var(--muted);margin-left:10px}
.byline strong{color:var(--accent)}
.takeaways,.context-box{background:var(--surface);border-radius:var(--radius);padding:22px 26px;margin:22px 0}
.takeaways h2,.context-box h2,.article-section h2,.source-log h2,.article-body h2{font-size:1.25rem;letter-spacing:-.02em}
.takeaways ul{margin:.4rem 0 0;padding-left:20px}
.takeaways li{margin:.5rem 0}
.official-embed{margin:26px 0}
.embed-label{font-size:.72rem;letter-spacing:.12em;font-weight:900;color:var(--accent);margin-bottom:8px}
.official-post{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:18px;display:flex;justify-content:space-between;gap:20px}
.official-post span{color:var(--accent);font-weight:750}
.article-body{font-family:Georgia,serif;font-size:1.1rem;line-height:1.85}
.article-body h2{font-family:Inter,ui-sans-serif,sans-serif;margin-top:2.2rem}
.article-section{padding:14px 0}
.official-posts{border-top:1px solid var(--line);margin-top:28px;padding-top:20px}
.official-posts h2{font-size:1.25rem;letter-spacing:-.02em}
.official-posts .video-embed,.official-posts .social-embed{margin-top:14px}
.source-log{border-top:1px solid var(--line);margin-top:32px;padding-top:22px}
.source-log>a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.source-log small{color:var(--muted)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line);padding:44px 0;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:1fr .6fr 1fr;gap:40px}
.footer-grid>div:nth-child(2){display:grid;align-content:start;gap:8px}
.newsletter-form label{display:block;font-weight:800;margin-bottom:10px}

/* ===== Admin ===== */
.admin-body{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;background:#f1f1f3}
.admin-sidebar{position:sticky;top:0;height:100vh;background:#111114;color:#fff;padding:28px;display:flex;flex-direction:column}
.admin-sidebar nav{display:grid;gap:4px;margin:36px 0 auto}
.admin-sidebar nav a,.link-button{padding:10px 12px;border-radius:8px;color:#d0d0d5;background:transparent;text-align:left}
.admin-sidebar nav a:hover,.link-button:hover{background:#26262c;color:#fff}
.admin-main{min-width:0}
.admin-topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.admin-topbar span{display:block;color:var(--muted);font-size:.8rem}
.admin-content{padding:30px;display:grid;gap:24px}
.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.metric span{font-size:.8rem;color:var(--muted)}
.metric strong{display:block;font-size:2rem;line-height:1;margin-top:8px}
.admin-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.panel-head h2,.admin-panel h2{margin:0;font-size:1.15rem}
.panel-head p{margin:4px 0;color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:12px 10px;vertical-align:top}
th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.table-wrap{overflow:auto}
.upload-form{display:flex;gap:12px}
.upload-form input{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px}
.issue-stack{display:grid}
.issue-stack article{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.score-circle{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:#fff;font-weight:900}
.issue-copy span{font-size:.75rem;color:var(--accent);font-weight:800}
.issue-copy h2{font-size:1rem;margin:4px 0}
.issue-copy p{font-size:.8rem;color:var(--muted);margin:0}
.panel-actions{display:flex;justify-content:flex-end}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.editor-main label,.login-card label{display:grid;gap:7px;font-weight:750;margin-bottom:17px}
.editor-main input,.editor-main textarea,.login-card input{width:100%;border:1px solid var(--line);border-radius:9px;padding:.75rem .85rem;background:#fff}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.editor-main fieldset{border:1px solid var(--line);border-radius:12px;margin:0 0 18px;display:grid;gap:9px}
.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem}
.editor-side{display:grid;align-content:start;gap:18px}
.error-list{color:#8d1b1b;padding-left:20px}
.alert{padding:12px;border-radius:9px}
.alert.error{background:#ffe9e9;color:#8d1b1b}
.alert.success{background:#e7f7ee;color:var(--success)}
.source-chip{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.source-chip span{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.workflow-actions{display:flex;gap:10px;justify-content:flex-end}
.danger{background:var(--accent)}
.login-page{min-height:100vh;background:var(--surface);display:grid;place-items:center}
.login-card{width:min(430px,calc(100% - 32px));background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.login-card h1{font-size:2rem;letter-spacing:-.04em;margin-bottom:0}
.login-card p{color:var(--muted)}
.manual-post-form{display:grid;grid-template-columns:160px 1fr 1fr;gap:14px;align-items:end}
.manual-post-form label{display:grid;gap:6px;font-size:.8rem;font-weight:750}
.manual-post-form input,.manual-post-form textarea,.manual-post-form select{width:100%;border:1px solid var(--line);border-radius:9px;padding:.7rem}
.manual-post-form label:nth-of-type(4){grid-column:1/3}
.settings-form label{display:grid;gap:7px;font-weight:750;margin-bottom:16px}
.settings-form input,.settings-form textarea,.settings-form select{width:100%;border:1px solid var(--line);border-radius:9px;padding:.75rem;background:#fff}
.settings-form input:disabled{background:var(--surface);color:var(--muted)}

/* ===== Responsive ===== */
@media(max-width:980px){
.front,.article-layout{grid-template-columns:1fr;gap:32px}
.front-rail{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
.article-grid{grid-template-columns:repeat(2,1fr)}
.artist-grid{grid-template-columns:repeat(3,1fr)}
.metric-grid{grid-template-columns:repeat(3,1fr)}
.admin-body{grid-template-columns:210px minmax(0,1fr)}
.editor-layout{grid-template-columns:1fr}
.editor-side{grid-template-columns:1fr 1fr}
.manual-post-form{grid-template-columns:1fr 1fr}
.manual-post-form label:nth-of-type(4){grid-column:auto}
}
@media(max-width:760px){
:root{--shell:min(100% - 28px,1180px)}
.artist-bar{display:flex;gap:12px;overflow-x:auto;padding:8px 14px;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.artist-bar::-webkit-scrollbar{display:none}
.artist-bar a{flex-shrink:0}
.artist-bar .avatar{width:40px;height:40px;font-size:.9rem;background:linear-gradient(135deg,#17171c,#3b0d1a)}
.artist-bar a.is-active .avatar{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle{display:block}
.primary-nav{display:none;position:absolute;top:63px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:18px 20px;flex-direction:column;align-items:flex-start}
.primary-nav.is-open{display:flex}
.nav-row{justify-content:space-between}
.article-grid,.split-section,.footer-grid,.artist-grid{grid-template-columns:1fr}
.story-list article{display:block}
.story-list .meta{margin-top:10px}
.timeline article{grid-template-columns:1fr;gap:4px}
.official-post,.source-log>a{display:grid}
.admin-body{display:block}
.admin-sidebar{position:static;height:auto;display:block}
.admin-sidebar nav{grid-template-columns:repeat(2,1fr);margin:20px 0}
.admin-topbar{padding:0 18px}
.admin-content{padding:16px}
.metric-grid{grid-template-columns:repeat(2,1fr)}
.issue-stack article{grid-template-columns:54px 1fr}
.issue-stack form{grid-column:2}
.editor-side{grid-template-columns:1fr}
.two-col{grid-template-columns:1fr}
.workflow-actions{flex-wrap:wrap}
.filter-bar,.search-large,.inline-form{flex-direction:column}
.filter-bar select{max-width:none}
.artist-hero{align-items:flex-start}
.avatar.xl{width:86px;height:86px;font-size:2rem}
.manual-post-form{grid-template-columns:1fr}
}

/* ---- 리액션 + 공유 바 ---- */
.engage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.reaction-bar { display: flex; gap: 8px; }
.reaction-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer; font-size: 14px; transition: transform 0.12s ease, border-color 0.12s ease; }
.reaction-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.reaction-btn.is-done { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); cursor: default; }
.reaction-emoji { font-size: 16px; line-height: 1; }
.reaction-count { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 0.12s ease; }
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- 플랫폼형 썸네일: <picture>/<img> 채움 + 스켈레톤 시머 ---- */
.short-thumb, .rail-thumb, .thumb { position: relative; overflow: hidden; }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.short-thumb:has(.thumb-img), .rail-thumb:has(.thumb-img), .thumb:has(.thumb-img) {
  background: linear-gradient(100deg, #ececf0 40%, #f7f7f9 50%, #ececf0 60%);
  background-size: 200% 100%;
  animation: kpp-shimmer 1.4s linear infinite;
}
@keyframes kpp-shimmer { to { background-position: -200% 0; } }
.short-play { z-index: 1; }

/* ---- 유튜브식 재생 영역: 풀블리드 (양옆 테두리·여백 제거) ---- */
.video-embed{border-radius:0}
@media (max-width: 768px){
  /* 재생 화면은 화면 끝까지 가득 (쉘 여백 탈출) */
  .article-main .video-embed,
  .hub-player-wrap .video-embed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0;
  }
  .hub-player-wrap{padding-top:0}
  /* 롱폼 카드 줄: 화면 끝까지 스크롤 + 카드 크게 (유튜브 모바일 감) */
  .video-rows .shorts-shelf.vrow-shelf{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:12px;
    padding-right:12px;
  }
  .short-card.wide{flex:0 0 78vw}
  .short-card.wide .short-thumb{border-radius:8px}
}

/* ---- 홈 메인 자동재생 + 사운드 온 버튼 ---- */
.home-player{position:relative;margin-bottom:14px}
.sound-btn{position:absolute;left:12px;bottom:12px;z-index:2;border:0;border-radius:999px;padding:9px 16px;font-weight:700;font-size:13px;background:rgba(17,17,20,.82);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.sound-btn:hover{background:var(--accent)}
.sound-btn.is-hidden{display:none}
@media (max-width: 768px){
  .home-player{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
}

/* ---- 오버레이 플레이어 (유튜브 쇼츠 습관: 즉시 확대 + 스와이프/휠로 다음) ---- */
.is-hidden{display:none!important}
#kpp-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,10,12,.94);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
#kpp-overlay .ov-frame{position:relative;background:#000;border-radius:14px;overflow:hidden}
#kpp-overlay .ov-frame.short{height:min(92vh,860px);aspect-ratio:9/16;max-width:94vw}
#kpp-overlay .ov-frame.wide{width:min(94vw,1200px);aspect-ratio:16/9;max-height:92vh}
#kpp-overlay iframe{width:100%;height:100%;border:0;display:block}
.ov-close{position:absolute;top:14px;right:16px;z-index:2;border:0;border-radius:999px;width:40px;height:40px;font-size:18px;background:rgba(17,17,20,.7);color:#fff;cursor:pointer}
.ov-nav{position:fixed;right:max(18px,calc(50vw - 300px));display:flex;flex-direction:column;gap:10px;z-index:2}
.ov-nav{top:50%;transform:translateY(-50%)}
.ov-nav button{border:0;border-radius:999px;width:46px;height:46px;font-size:19px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.ov-nav button:hover{background:var(--accent)}
.ov-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:#ffffffb0;font-size:12.5px;z-index:2}
@media (max-width:768px){
  #kpp-overlay .ov-frame.short{height:100dvh;max-width:100vw;border-radius:0}
  #kpp-overlay .ov-frame.wide{width:100vw;border-radius:0}
  .ov-nav{display:none}
}

/* ---- 모바일 안정화: 가로 흔들림 차단 + 와이드 카드 풀폭 스냅 ---- */
html, body { overflow-x: hidden; }
body { overscroll-behavior-x: none; }
@media (max-width: 768px){
  /* 롱폼 카드 = 화면 정확히 한 장씩, 스냅으로 항상 정중앙 (왼쪽 흰 여백 제거) */
  .video-rows .shorts-shelf.vrow-shelf{
    padding-left:0;
    padding-right:0;
    scroll-snap-type:x mandatory;
    gap:0;
  }
  .video-rows .shorts-shelf.vrow-shelf .short-card.wide{
    flex:0 0 100vw;
    scroll-snap-align:center;
    padding:0 0 6px;
  }
  .video-rows .short-card.wide .short-thumb{border-radius:0}
  .video-rows .short-card.wide .short-copy{padding:8px 14px 0}
}