/* TAECHORA WEB v2 — 스튜디오(/v2/studio/) · 채보 편집기. v2.css·pages.css 토큰을 쓴다.
   한글·문장은 IBM Plex Sans KR, Black Han Sans는 영문 제목·숫자에만. 손으로 쓴 원본. */
[hidden]{display:none!important}
.st-hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.st-tools{margin-top:18px}
.st-tools .fbar{align-items:center}
.st-main{padding-bottom:110px}
.st-main>.msg{margin:0 0 10px}
.st-sec{margin-bottom:56px}
.st-link{appearance:none;border:0;background:none;color:var(--gold);font:600 14px var(--f-ui);white-space:nowrap}
.st-link:hover{color:var(--gold2)}
.st-foot{margin-top:48px}
.st-bar:not(.on){visibility:hidden}
body.st-editing .st-tools,body.st-editing #stHero{display:none!important}
body.st-editing #stNote:not(:empty){position:fixed;left:50%;top:calc(var(--hdr) + 12px);transform:translateX(-50%);z-index:70;width:max-content;max-width:min(720px,92vw);margin:0;padding:10px 16px;border-radius:12px;background:rgba(17,21,37,.97);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.ed{scroll-margin-top:calc(var(--hdr) + 14px)}
.st-songs.home{grid-template-columns:repeat(5,minmax(0,1fr))}
/* 곡 카드 */
.st-songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.st-song{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,rgba(24,29,49,.95),rgba(10,13,23,.96));border:1px solid var(--line);transition:border-color .15s,transform .15s}
.st-song:hover{border-color:rgba(245,185,63,.5);transform:translateY(-2px)}
.st-cv{position:relative;aspect-ratio:1;overflow:hidden;background:radial-gradient(circle at 40% 35%,#2a2f55,#07080e)}
.st-cv img{width:100%;height:100%;object-fit:cover}
.st-cv.sm{width:76px;height:76px;aspect-ratio:auto;border-radius:12px;flex:none}
.st-cv.md{width:120px;height:120px;aspect-ratio:auto;border-radius:16px;flex:none;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.st-pp{position:absolute;right:12px;bottom:12px;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .15s}
.st-pp:hover{transform:scale(1.06)}
.st-pp svg{width:20px;height:20px;fill:currentColor}
.st-pp[aria-pressed=true]{background:#fff}
.st-tag{position:absolute;left:12px;top:12px;font:400 11px/1 var(--f-disp);letter-spacing:.06em;color:var(--ink);background:var(--gold);padding:5px 8px 4px;transform:skewX(var(--skew))}
.st-bd{padding:14px 16px 6px;min-width:0}
.st-bd h3{margin:0 0 4px;font-size:17px;line-height:1.35;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-bd p{margin:0;color:var(--mute);font-size:13px;line-height:1.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-num b{font:400 14px var(--f-disp);color:var(--ivory);letter-spacing:.03em}
.st-ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px 16px;margin-top:auto}
.st-vote{appearance:none;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:rgba(5,6,11,.5);color:var(--text);font:600 13px var(--f-ui)}
.st-vote b{font:400 13px var(--f-disp);letter-spacing:.03em}
.st-vote[aria-pressed=true]{color:#ff8fb6;border-color:rgba(255,79,154,.6)}
.st-more{appearance:none;border:0;background:none;color:var(--dim);font:600 12px var(--f-ui);padding:6px 4px}
.st-more:hover{color:var(--text)}
/* 채보 카드 */
.st-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.st-chart{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 14px;padding:14px;border-radius:16px;background:linear-gradient(160deg,rgba(24,29,49,.95),rgba(10,13,23,.96));border:1px solid var(--line)}
.st-chart .st-bd{padding:0}
.st-chart .st-bd .chips{gap:6px;margin-bottom:8px}
.st-chart .st-ft{grid-column:1/-1;padding:8px 0 0}
.st-by{color:var(--mute);font-size:13px;line-height:1.6}
/* 목록 도구 */
.st-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.st-filters .search{flex:1;min-width:220px}
.st-sort{width:auto;height:48px}
/* 제작자 랭킹 */
.st-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-rank li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:rgba(17,21,37,.8);border:1px solid var(--line)}
.st-rank .no{font:400 26px/1 var(--f-disp);color:var(--mute);text-align:center}
.st-rank .top.t1 .no{color:var(--gold)}.st-rank .top.t2 .no{color:#cfd8e6}.st-rank .top.t3 .no{color:#e0a07a}
.st-rank .top.t1{border-color:rgba(245,185,63,.55);background:linear-gradient(90deg,rgba(245,185,63,.12),rgba(17,21,37,.8) 60%)}
.st-rank .who b{display:block;font-size:16px}
.st-rank .who small{display:block;color:var(--mute);font-size:12px;line-height:1.6}
.st-rank .who .en{font:400 12px var(--f-disp);color:var(--gold);letter-spacing:.04em}
.st-rank .pt{font:400 26px/1 var(--f-disp);color:var(--ivory);letter-spacing:.02em}
.st-cases{display:grid;gap:16px}
.st-cases h3{margin:0 0 10px;font-size:16px}
.st-cases p{font-size:14px;line-height:1.6}
/* 채보 상세·연주 */
.st-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;margin-top:14px}
.st-dtop{display:flex;gap:18px;align-items:center}
.box .st-dt{margin:10px 0 6px;font:700 clamp(22px,3vw,30px)/1.3 var(--f-ui);letter-spacing:-.01em}
.st-desc{color:var(--text);line-height:1.7;margin:18px 0}
.st-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.st-hist h3{margin:0 0 12px;font:400 20px var(--f-disp);letter-spacing:.04em;color:var(--gold)}
.st-hist p{font-size:13px;line-height:1.6;margin:0 0 14px}
.st-hist .en{font:400 15px var(--f-disp);letter-spacing:.03em}
.st-play{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:14px}
.st-frame{height:min(78vh,760px);min-height:520px;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#080a14}
.st-frame iframe{display:block;width:100%;height:100%;border:0}
.st-play h3{margin:0 0 8px;font-size:20px}
/* 폼 */
.st-form{max-width:860px;margin-top:14px}
.st-form h2 i{font-style:normal;color:var(--gold)}
.st-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-ta,.ed-ta{height:auto;min-height:110px;padding:12px 14px;line-height:1.6;resize:vertical}
.st-form .chk{margin-bottom:10px}
.st-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.st-steps li{padding:22px;border-radius:16px;background:rgba(17,21,37,.8);border:1px solid var(--line)}
.st-steps b{font:400 30px/1 var(--f-disp);color:var(--gold)}
.st-steps h3{margin:10px 0 6px;font-size:17px}
.st-steps p{margin:0;color:var(--mute);font-size:14px;line-height:1.65}
.st-v10 b{color:var(--ivory)}

/* ---------- 편집기 ---------- */
.ed{margin-top:6px}
.ed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.ed-head .linkbtn{display:block;margin-bottom:12px}
.ed-head .kick{margin:0 0 10px}
.ed-head h1{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ed-meta{margin:6px 0 0;color:var(--mute);font-size:14px}
.ed-head-r{display:flex;align-items:center;gap:16px}
.ed-count{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.ed-count b{font:400 34px var(--f-disp);color:var(--gold);letter-spacing:.02em}
.ed-count small{font:400 11px var(--f-disp);color:var(--mute);letter-spacing:.14em;margin-top:4px}
.ed-grid{display:grid;grid-template-columns:270px minmax(0,1fr) 280px;gap:16px;align-items:start}
.ed-col{display:grid;gap:14px}
.ed-card{padding:18px;border-radius:16px;background:linear-gradient(160deg,rgba(24,29,49,.95),rgba(10,13,23,.96));border:1px solid var(--line)}
.ed-card h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:15px;font-weight:700}
.ed-card h3 i{font:400 13px var(--f-disp);font-style:normal;color:var(--ink);background:var(--gold);padding:4px 7px 3px;transform:skewX(var(--skew))}
.ed-card .fld{margin-bottom:10px}
.ed-card .inp{height:42px;font-size:14px;border-radius:10px}
.ed-help{margin:6px 0 10px;color:var(--mute);font-size:12.5px;line-height:1.6}
.ed-diff{display:flex;flex-wrap:wrap;gap:6px}
.ed-diff .fch{height:32px;padding:0 10px;font:400 12px var(--f-disp);letter-spacing:.04em;color:var(--c)}
.ed-diff .fch.on{color:var(--ink)}
.ed-diff .fch.on::before{background:var(--c);border-color:var(--c)}
.ed-diff .fch:disabled{opacity:.55;cursor:default}
.btn.wide{width:100%}
.ed-ok{margin-left:auto;font:400 13px var(--f-disp);letter-spacing:.04em;color:var(--easy)}
.ed-ok.bad{color:#ff6f86}
.ed-lint{display:grid;gap:6px;max-height:300px;overflow:auto;scrollbar-width:thin}
.ed-lint button{appearance:none;display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,79,106,.35);background:rgba(255,79,106,.07);color:var(--text);font:500 12.5px/1.5 var(--f-ui)}
.ed-lint button:hover{border-color:#ff6f86}
.ed-lint b{font:400 12px var(--f-disp);color:#ff8f9f;letter-spacing:.03em}
.ed-advice p{margin:10px 0 0;padding:8px 10px;border-radius:10px;border:1px dashed rgba(255,174,31,.45);color:#ffd28a;font-size:12.5px;line-height:1.55}
/* 가운데 */
.ed-main{display:grid;gap:10px;min-width:0}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(17,21,37,.85);border:1px solid var(--line)}
.ed-play{width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:var(--ink);font:700 16px var(--f-ui);flex:none}
.ed-seg{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.ed-seg button{appearance:none;border:0;background:none;color:var(--mute);height:34px;padding:0 10px;font:600 12.5px var(--f-ui)}
.ed-seg button.on{background:var(--gold);color:var(--ink)}
.ed-mini{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:12.5px;font-weight:600}
.ed-mini select{height:34px;border-radius:9px;border:1px solid var(--line2);background:rgba(5,6,11,.6);color:var(--text);font:500 13px var(--f-ui);padding:0 6px}
.ed-undo{display:flex;gap:4px;margin-left:auto}
.ed-undo button{width:36px;height:34px;border-radius:9px;border:1px solid var(--line2);background:rgba(5,6,11,.6);color:var(--text);font-size:16px}
.ed-undo button:disabled{opacity:.35}
.ed-stage{position:relative;height:min(64vh,640px);min-height:420px;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:#070912}
.ed-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:0}
.ed[data-mode=preview] .ed-stage canvas{cursor:default}
.ed-stage canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.ed-time{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font:400 13px var(--f-disp);color:var(--mute);letter-spacing:.03em}
.ed-time input{width:100%;accent-color:var(--gold)}
.ed-keys{display:flex;gap:6px}
.ed-keys button{flex:1;min-width:0;height:54px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 10%,rgba(17,21,37,.9));color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none}
.ed-keys button.wide{flex:1.6}
.ed-keys button:active{background:color-mix(in srgb,var(--c) 45%,rgba(17,21,37,.9))}
.ed-keys b{font:400 15px var(--f-disp);letter-spacing:.04em;color:var(--c)}
.ed-keys small{font-size:10.5px;color:var(--mute)}
/* 오른쪽 */
.ed-sel{color:var(--mute);font-size:13px;line-height:1.6}
.ed-btns{display:flex;gap:8px;flex-wrap:wrap}
.ed-btns .btn{flex:1}
.ed-card .chk{padding:10px;font-size:13px;margin-bottom:10px}
.ed-file{display:flex;align-items:center;justify-content:center;height:40px;margin-top:10px;border-radius:10px;border:1px dashed var(--line2);color:var(--mute);font-size:13px;font-weight:600;cursor:pointer;position:relative}
.ed-file:hover{color:var(--text);border-color:var(--gold)}
.ed-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ed-try .btn:disabled,.ed-save .btn:disabled{color:var(--mute);cursor:not-allowed}
.ed-try .btn:disabled::before,.ed-save .btn:disabled::before{background:rgba(17,21,37,.8);border:1px dashed var(--line2);box-shadow:none}
/* 저장 */
.ed-save{margin-top:22px;scroll-margin-top:90px}
.ed-save h2 i{font-style:normal;color:var(--gold)}
.ed-save-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px}
.ed-save .chk{margin-bottom:10px}
/* 시험 연주 창 */
.ed-dlg{width:min(1180px,96vw);height:min(860px,92vh);padding:0;border:1px solid var(--line2);border-radius:18px;background:#05060b;color:var(--text);overflow:hidden}
.ed-dlg::backdrop{background:rgba(2,3,8,.82);backdrop-filter:blur(6px)}
.ed-dlg header{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ed-dlg header b{font-size:15px}
.ed-dlg header span{color:var(--mute);font-size:12.5px;margin-right:auto}
.ed-dlg-stage{position:relative;height:calc(100% - 65px)}
.ed-frame{display:block;width:100%;height:100%;border:0}
.ed-hidden{position:fixed;left:-9999px;top:0;width:800px;height:600px;opacity:0;pointer-events:none}
.ed-launch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(5,6,11,.92);z-index:2;text-align:center;color:var(--mute)}
@media (max-width:1180px){
  .st-songs.home{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ed-grid{grid-template-columns:240px minmax(0,1fr)}
  .ed-grid>.ed-col:last-child{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .st-detail,.st-play{grid-template-columns:minmax(0,1fr)}
  .st-row,.st-steps,.ed-save-grid{grid-template-columns:minmax(0,1fr)}
  .st-charts{grid-template-columns:minmax(0,1fr)}
  .st-songs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .st-songs.home{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .st-songs.home>*{scroll-snap-align:start}
  .ed-grid{grid-template-columns:minmax(0,1fr)}
  .ed-grid>.ed-col:last-child{grid-template-columns:minmax(0,1fr)}
  .ed-main{order:-1}
  .ed-stage{height:58vh;min-height:360px}
  .ed-keys b{font-size:13px}.ed-keys small{display:none}
  .st-frame{height:70vh;min-height:420px}
}