/* =========================================================
   빈뮤직 아카데미 (피아노) 전용 — sub-c-d.css 다음에 읽는다
   공통 파일은 건드리지 않고, 이 페이지에만 있는 부분을 더한다
   흐름: 무대 히어로 → 향상음악회(오선 재생선) → 레벨업(건반) → 사진 띠 → 선생님 → 수업 방식 → 콩쿨(연주 순서지) → 사진 → 다른 학원 → 커튼콜
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Music&display=swap&text=%F0%9D%84%9E');

/* 가운데 정렬 섹션 제목 (이 페이지에서 리듬을 바꾸는 곳) */
.sec-head.ctr{flex-direction:column;align-items:center;text-align:center;gap:18px}
.sec-head.ctr .sec-desc{max-width:600px}

/* ---------- HERO '무대' ---------- */
.stg-hero{position:relative;height:100vh;height:100svh;min-height:640px;padding:var(--gnb) 0 0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.stg-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(26px,5vh,64px) var(--pad) clamp(22px,3.6vh,40px)}
.stg-title{margin-top:14px;font-size:clamp(36px,4.6vw,72px);line-height:1.18;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.stg-title .g{color:var(--blue)}
.stg-copy{margin-top:clamp(12px,1.8vh,20px);font-size:clamp(15.5px,1.15vw,18px);line-height:1.65;color:var(--sub)}
.stg-head .row{margin-top:clamp(18px,2.6vh,28px);justify-content:center}
.stg-wrap{position:relative;flex:1 1 auto;min-height:280px;margin:0 clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px)}
.stg-photo{position:absolute;inset:0;margin:0;overflow:hidden;background:#0b1736;border-radius:28px;clip-path:inset(0px 0px 0px 0px round 28px);will-change:clip-path}
.stg-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 30%;filter:brightness(1.14) saturate(1.05);will-change:transform}
/* 무대 조명: 위에서 떨어지는 타원 빛 바깥은 남색으로 어둡게, 아래쪽은 글자가 읽히게 */
.stg-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse var(--sx,92%) 140% at 50% -14%,rgba(11,23,54,0) 48%,rgba(11,23,54,.66) 100%),linear-gradient(180deg,rgba(11,23,54,0) 40%,rgba(11,23,54,.82) 100%)}
.stg-dark{position:absolute;inset:0;background:#0b1736;opacity:0;pointer-events:none}
/* 오선 + 음표가 된 숫자 4개 */
.stg-facts{position:absolute;z-index:2;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(20px,3.4vh,36px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);padding-left:clamp(58px,5.4vw,84px);color:#fff}
.stg-staff{position:absolute;left:0;right:0;bottom:calc(100% + 24px);height:65px;pointer-events:none}
.stg-staff>i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:rgba(255,255,255,.6);transform-origin:left center}
.stg-staff>i:nth-child(1){top:0}.stg-staff>i:nth-child(2){top:16px}.stg-staff>i:nth-child(3){top:32px}.stg-staff>i:nth-child(4){top:48px}.stg-staff>i:nth-child(5){top:64px}
.stg-clef{position:absolute;left:-2px;top:-20px;font-family:"Noto Music","Segoe UI Symbol",serif;font-size:94px;line-height:1;color:#fff}
.stg-facts>li:not(.stg-staff){position:relative;min-width:0}
.stg-facts .nh{position:absolute;left:2px;bottom:calc(100% + 24px + var(--l,4) * 8px - 7px);width:19px;height:14px;border-radius:50%;background:#fff}
.stg-facts .nh::after{content:"";position:absolute;right:0;bottom:7px;width:1.5px;height:40px;background:#fff}
.stg-facts .hi .nh{background:var(--blue);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.stg-facts .hi .nh::after{background:#8fbcff}
.stg-facts b{display:block;font-size:clamp(24px,2.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.stg-facts b small{margin-left:4px;font-size:.46em;font-weight:700;letter-spacing:-.02em}
.stg-facts li:not(.stg-staff)>span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.8)}
/* 첫 화면 등장 전 (스크립트가 늦으면 3초 뒤 그대로 보임) */
.p-intro .stg-head>*,.p-intro .stg-wrap{opacity:0}

/* ---------- 향상음악회: 오선 위를 재생선이 지나가며 음표(음악회)가 켜짐 ---------- */
.concert-sec{padding-top:clamp(72px,9vw,128px)}
.score{position:relative;border-radius:28px;background:var(--blue-l);padding:clamp(30px,3.4vw,52px) clamp(18px,2.6vw,40px) clamp(26px,3vw,44px);overflow:hidden}
.sc-staff{position:absolute;left:clamp(18px,2.6vw,40px);right:clamp(18px,2.6vw,40px);top:clamp(30px,3.4vw,52px);height:120px;pointer-events:none}
.sc-staff>i{position:absolute;left:0;right:0;height:1.5px;background:#a9c9f3}
.sc-staff>i:nth-child(1){top:20px}.sc-staff>i:nth-child(2){top:40px}.sc-staff>i:nth-child(3){top:60px}.sc-staff>i:nth-child(4){top:80px}.sc-staff>i:nth-child(5){top:100px}
.sc-clef{position:absolute;left:4px;top:-6px;font-family:"Noto Music","Segoe UI Symbol",serif;font-size:104px;line-height:1;color:var(--blue)}
.sc-head{position:absolute;left:0;top:2px;width:2px;height:116px;border-radius:2px;background:var(--blue);box-shadow:0 0 0 4px rgba(49,130,246,.14);will-change:transform}
.sc-head::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blue)}
.sc-list{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 2% 0 8%}
.cn{position:relative;padding-top:156px}
.nh{position:absolute;left:50%;top:calc(var(--l,4) * 10px + 13px);width:20px;height:15px;margin-left:-10px;border-radius:50%;border:2px solid var(--blue);background:var(--blue-l);transition:background-color .35s,scale .5s var(--ease)}
.nh::after{content:"";position:absolute;right:-2px;bottom:6px;width:2px;height:44px;border-radius:2px;background:var(--blue);opacity:.45;transition:opacity .35s}
.stg-facts .nh{border:0;margin:0;top:auto;transition:none}
.stg-facts .nh::after{opacity:1}
.cn::before{content:"";position:absolute;left:50%;top:122px;height:28px;border-left:1.5px dashed #a9c9f3}
.cn-card{margin:0 6px;padding:16px 16px 18px;border-radius:18px;background:#fff;opacity:.5;translate:0 10px;transition:opacity .5s,translate .7s var(--ease),box-shadow .5s}
.cn-card small{display:block;font-size:13px;font-weight:800;color:var(--blue);letter-spacing:-.01em}
.cn-card b{display:block;margin-top:4px;font-size:clamp(16px,1.3vw,19px);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.cn-card p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--sub)}
.cn.on .nh{background:var(--blue);scale:1.15}
.cn.on .nh::after{opacity:1}
.cn.on .cn-card{opacity:1;translate:none;box-shadow:0 16px 34px -20px rgba(2,32,71,.35)}
.cn.next .nh{border-style:dashed}
.cn.next .cn-card{background:transparent;border:1.5px dashed #a9c9f3;box-shadow:none}
.cn.next.on .nh{background:#fff}
/* 스크립트가 없거나 움직임을 줄인 경우: 모두 켠 상태 */
.score:not(.live) .cn-card{opacity:1;translate:none}
.score:not(.live) .nh{background:var(--blue)}
.score:not(.live) .sc-head{display:none}
.score:not(.live) .cn.next .nh{background:#fff}

.sc-info{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3vw,40px)}
.sc-guide{border-top:1px solid var(--ink)}
.sc-guide div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.sc-guide dt{color:var(--mute)}
.sc-guide dd{font-weight:600;color:var(--ink)}
.sc-etiq{border-radius:20px;background:var(--gray2);padding:22px 24px}
.sc-cap{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:12px}
.sc-etiq ol{display:grid;gap:10px;counter-reset:e}
.sc-etiq li{counter-increment:e;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.sc-etiq li::before{content:counter(e);flex:none;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}

/* ---------- 레벨업 진급 '건반': 단계마다 한 옥타브씩 켜지고, 바로 아래 카드가 함께 켜짐 ---------- */
/* 공통 base의 .roadmap .sec-title .g(회색)가 파랑 규칙보다 우선해서 이 페이지에서 바로잡음 */
.roadmap .sec-title .g{color:var(--blue)}
.kb{--kp:clamp(10px,1.2vw,16px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:44px var(--kp) var(--kp);border-radius:24px;background:#0b1736;box-shadow:0 30px 60px -36px rgba(2,32,71,.6)}
.kb::before{content:"";position:absolute;left:var(--kp);right:var(--kp);top:36px;height:4px;border-radius:2px;background:#1b64da}
.oct{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;height:clamp(124px,11.5vw,172px)}
.oct>i{position:relative;border-radius:0 0 7px 7px;background:#fff;transition:background .45s,translate .35s var(--ease),box-shadow .45s}
.oct>b{position:absolute;z-index:1;top:0;left:calc(var(--x) * (100% + 2px) / 7 - 1px);width:calc((100% - 12px) / 7 * .6);height:60%;translate:-50% 0;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#2b3446,#11161f);box-shadow:inset 0 -5px 0 rgba(255,255,255,.08);transition:background .45s}
.oct-n{position:absolute;left:2px;top:-38px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);font-size:12px;font-weight:800;display:grid;place-items:center;transition:background .4s,color .4s}
/* 켜진 건반: 지난 단계는 연한 파랑, 지금 단계는 진한 파랑으로 눌린 듯 */
.oct>i.lit{background:linear-gradient(180deg,#fff 0%,#d6e7ff 100%)}
.oct.on>i.lit{background:linear-gradient(180deg,#e8f3ff 0%,#6aa5f8 70%,#3182f6 100%);translate:0 2px;box-shadow:inset 0 -6px 0 rgba(27,100,218,.45)}
.oct>b.lit{background:linear-gradient(180deg,#24406f,#14264a)}
.oct.on>b.lit{background:linear-gradient(180deg,#1b64da,#0f3f8f)}
.oct.on .oct-n,.oct.past .oct-n{background:var(--blue);color:#fff}
.ks-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,16px);margin-top:30px}
.ks{position:relative;display:flex}
.ks::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:16px;margin-left:-1px;border-radius:2px;background:var(--line);transition:background .4s}
.ks-card{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding:22px 20px;border-radius:20px;border:1px solid var(--line);background:var(--gray2);transition:border-color .4s,background-color .4s,box-shadow .5s,translate .7s var(--ease)}
.ks-card>*{transition:opacity .5s}
.ks-card small{font-size:12.5px;font-weight:700;color:var(--blue)}
.ks-card>b{display:block;margin:4px 0 12px;font-size:clamp(18px,1.5vw,21px);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.ks-card .cls{display:flex;flex-wrap:wrap;gap:5px;margin:-4px 0 12px}
.ks-card .cls i{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--sub)}
.ks-card ul{display:grid;gap:6px;margin-bottom:16px;font-size:13.5px;color:var(--sub)}
.ks-card li::before{content:"— ";color:#b0b8c1}
.ks-card .test{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--mute)}
.ks-card .test b{font-weight:600;color:var(--ink-2)}
.ks-flag{position:absolute;top:-13px;right:14px;z-index:2;padding:4px 10px;border-radius:99px;background:var(--blue);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.keys.live .ks:not(.on):not(.past) .ks-card>*{opacity:.4}
.keys.live .ks.on .ks-card{background:#fff;border-color:var(--blue);box-shadow:0 14px 34px -14px rgba(49,130,246,.35);translate:0 -6px}
.keys.live .ks.on::before,.keys.live .ks.past::before{background:var(--blue)}
@media (max-width:1180px) and (min-width:761px){.ks-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}.ks::before{display:none}}

/* ---------- 화면 가득 사진 띠 + 아이들 목소리 (카드가 띠 아래에 걸침) ---------- */
.vband{padding:clamp(24px,3vw,48px) 0 clamp(56px,7vw,104px)}
.vb-photo{position:relative;margin:0;height:clamp(440px,74vh,760px);overflow:hidden;background:#0b1736;will-change:clip-path}
.vb-photo>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 40%;will-change:transform}
.vb-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,23,54,.86) 0%,rgba(11,23,54,.5) 55%,rgba(11,23,54,.15) 100%)}
.vb-in{position:absolute;z-index:2;left:0;right:0;bottom:clamp(120px,16vh,180px);margin:0 auto;padding-left:max(var(--pad),8vw);color:#fff}
.vb-eb{display:block;font-size:15px;font-weight:700;color:#8fbcff}
.vb-lead{margin-top:14px;font-size:clamp(32px,4vw,64px);line-height:1.22;font-weight:800;letter-spacing:-.04em}
.vb-lead .g{color:#8fbcff}
.vband .voices{position:relative;z-index:3;margin-top:calc(-1 * clamp(76px,9vh,112px));gap:16px}
.vband .quote{border:0;border-radius:24px;background:#fff;padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) clamp(20px,2vw,26px);box-shadow:0 28px 56px -30px rgba(2,32,71,.4),0 0 0 1px var(--line)}
.vband .quote cite{margin-top:10px}

/* ---------- 가르치는 사람 ---------- */
.teach-sec .director{align-items:center}
.teach-sec .portrait{aspect-ratio:4/5;max-height:760px}
.teach-sec .portrait img{object-position:50% 60%}
.teach-sec .portrait .tag{border-radius:16px}
.t-copy .sec-title{margin-bottom:clamp(26px,3vw,40px)}
.path{border-top:1px solid var(--ink);padding-top:18px}
.path-cap{font-size:13px;font-weight:700;color:var(--blue)}
.path ol{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.path ol::before{content:"";position:absolute;left:7px;right:14%;top:7px;height:2px;border-radius:2px;background:var(--line)}
.path ol::after{content:"";position:absolute;left:7px;right:14%;top:7px;height:2px;border-radius:2px;background:var(--blue);transform-origin:left;transform:scaleX(var(--pl,1))}
.path li{position:relative;z-index:1;padding-top:30px}
.path li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.path li:last-child::before{background:var(--blue)}
.path b{display:block;font-size:clamp(16px,1.35vw,19px);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.path span{display:block;margin-top:4px;font-size:13px;color:var(--mute)}
.teach-sec .letter{margin-top:clamp(26px,3vw,36px);font-size:16.5px;color:var(--sub)}
.tq{margin-top:28px;padding:22px 24px;border-radius:20px;background:var(--gray2);font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit}
.tq p{font-size:clamp(17px,1.4vw,20px);font-weight:700;letter-spacing:-.025em;line-height:1.55;color:var(--ink)}
.tq cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--mute)}

/* ---------- 수업 방식: 가운데 정렬 · 좁은 폭 ---------- */
.way-narrow .wrap{max-width:1180px}
#acc .msg li{grid-template-columns:72px 1fr}

/* ---------- 콩쿨: 글 왼쪽 · 사진 오른쪽 (앞 섹션과 좌우를 바꿈) ---------- */
@media (min-width:901px){
  .result-sec .report-grid{grid-template-columns:7fr 5fr}
  .result-sec .report-photo{order:2}
}
/* 콩쿨 '연주 순서지': 인쇄된 프로그램처럼 — 순서(점선 리더) 다음에 결과 */
.prog{position:relative;margin-top:32px;padding:clamp(28px,2.8vw,42px) clamp(24px,3vw,48px) clamp(24px,2.6vw,36px);background:#fff;border-radius:8px;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(2,32,71,.45)}
.prog::before{content:"";position:absolute;inset:10px;border:1px solid #d6e4f7;border-radius:4px;pointer-events:none}
.pg-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.pg-eb{padding-left:.32em;font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--blue)}
.pg-head b{margin-top:8px;font-size:clamp(20px,1.8vw,26px);font-weight:800;letter-spacing:-.035em}
.pg-head small{margin-top:4px;font-size:13px;color:var(--mute)}
.pg-order{display:grid;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.pg-order li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline}
.pg-order em{font-style:normal;font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.pg-row{display:flex;align-items:baseline;gap:10px}
.pg-row b{font-size:clamp(16px,1.3vw,18px);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.pg-row span{font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.ld{flex:1 1 auto;min-width:20px;height:0;border-bottom:2px dotted #b0b8c1;translate:0 -4px;transform-origin:left center}
.pg-sub{margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--sub)}
.pg-res{padding-top:20px}
.pg-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.03em;color:var(--ink)}
.pg-cap{margin-right:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.pg-total b{font-weight:800}
.pg-total b .pg-n{margin-right:2px;font-size:clamp(42px,3.8vw,58px);line-height:1;letter-spacing:-.04em;color:var(--blue)}
.pg-total strong{font-weight:800;color:var(--blue)}
.pg-awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin-top:16px}
.pg-awards li{display:flex;align-items:baseline;gap:10px;font-size:15px}
.pg-awards b{font-weight:700;white-space:nowrap}
.pg-awards li>span{font-weight:700;color:var(--ink);white-space:nowrap}
.pg-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px;padding:14px 18px;border-radius:12px;background:var(--blue-l);font-size:14px;font-weight:600;color:var(--ink-2)}
.pg-foot b{flex:none;font-size:20px;font-weight:800;color:var(--blue)}
.result-sec .r-note{margin-top:16px}

/* ---------- 마무리 '커튼콜' ---------- */
.curtain{padding:clamp(48px,6vw,96px) 0 clamp(80px,9vw,140px)}
.curtain .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.cc-title{font-size:clamp(34px,4.2vw,64px);font-weight:800;line-height:1.2}
.cc-staff{position:relative;width:100%;max-width:1080px;height:65px;margin:clamp(56px,6vw,84px) 0 clamp(52px,5.4vw,72px)}
.cc-staff>i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:#c9dcf7;transform-origin:left center}
.cc-staff>i:nth-child(1){top:0}.cc-staff>i:nth-child(2){top:16px}.cc-staff>i:nth-child(3){top:32px}.cc-staff>i:nth-child(4){top:48px}.cc-staff>i:nth-child(5){top:64px}
.cc-clef{position:absolute;left:0;top:-20px;font-family:"Noto Music","Segoe UI Symbol",serif;font-size:94px;line-height:1;color:var(--blue)}
.cc-n{position:absolute;left:var(--x);top:calc(64px - var(--l) * 8px - 7px);width:19px;height:14px;margin-left:-9px;border-radius:50%;background:#a9c9f3}
.cc-n::after{content:"";position:absolute;right:0;bottom:7px;width:1.5px;height:40px;background:#a9c9f3}
.cc-n.end{width:24px;height:18px;margin-left:-12px;top:calc(64px - var(--l) * 8px - 9px);background:var(--blue);box-shadow:0 0 0 6px rgba(49,130,246,.16)}
.cc-n.end::after{bottom:9px;height:46px;background:var(--blue)}
.cc-lab{position:absolute;top:calc(100% + 18px);font-size:13px;font-weight:700;color:var(--mute);white-space:nowrap}
.cc-lab.l{left:12%}
.cc-lab.r{right:0;color:var(--blue)}
.cc-desc{max-width:560px;text-align:center}
.cc-row{justify-content:center;margin-top:30px}
.cc-info{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--sub)}
.cc-info b{margin-right:10px;font-weight:700;color:var(--ink)}
.cc-info a{color:var(--ink);font-weight:600}
.cc-info a:hover{color:var(--blue)}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .sc-list{margin-left:10%}
  .cn-card{padding:14px 12px 16px;margin:0 4px}
}
@media (max-width:1023px){
  .stg-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .stg-facts .nh{display:none}
}
@media (max-width:900px){
  .teach-sec .portrait{max-width:none;aspect-ratio:4/3}
  .sc-info{grid-template-columns:1fr}
  .vband .voices{grid-template-columns:1fr;gap:10px}
}
@media (max-width:760px){
  .pc-br{display:none}
  .stg-head{padding:22px 20px 18px}
  .stg-title{font-size:clamp(30px,8.4vw,36px)}
  .stg-copy{font-size:15px}
  .stg-head .row{margin-top:16px}
  .stg-head .btn{padding:11px 12px 11px 18px;font-size:14.5px}
  .stg-head .btn-line{padding:11px 18px}
  .stg-wrap{margin:0 10px 10px;min-height:300px}
  .stg-photo{border-radius:22px;clip-path:inset(0px 0px 0px 0px round 22px)}
  .stg-photo>img{object-position:34% 30%}
  .stg-facts{left:18px;right:18px;bottom:18px;padding-left:0;gap:14px 14px}
  .stg-staff{height:49px;bottom:calc(100% + 18px)}
  .stg-staff>i:nth-child(2){top:12px}.stg-staff>i:nth-child(3){top:24px}.stg-staff>i:nth-child(4){top:36px}.stg-staff>i:nth-child(5){top:48px}
  .stg-clef{font-size:70px;top:-15px}
  .stg-facts b{font-size:24px}
  .stg-facts li:not(.stg-staff)>span{font-size:12.5px;margin-top:4px}
  /* 건반: 화면 위(목차 캡슐 아래)에 붙어 있고, 카드를 내려 보는 동안 해당 옥타브가 켜짐 */
  .kb{--kp:8px;position:sticky;top:calc(var(--gnb) + 58px);z-index:4;padding-top:34px;border-radius:18px}
  .kb::before{top:27px;height:3px}
  .oct{height:84px;gap:1.5px}
  .oct>i{border-radius:0 0 4px 4px}
  .oct-n{top:-31px;min-width:20px;height:20px;padding:0 6px;font-size:10.5px}
  .ks-list{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .ks::before{display:none}
  .ks-card{padding:20px 18px}
  .prog{padding:28px 20px 22px}
  .prog::before{inset:7px}
  .pg-awards{gap:10px 18px}
  .pg-awards li{font-size:14.5px;gap:6px}
  .pg-foot{padding:12px 14px;font-size:13.5px}
  .path ol{grid-template-columns:1fr;gap:0}
  .path ol::before,.path ol::after{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .path ol::after{transform-origin:top;transform:scaleY(var(--pl,1))}
  .path li{padding:0 0 16px 30px}
  .path li:last-child{padding-bottom:0}
  /* 오선 대신 세로 선: 내려가며 음표가 차례로 켜짐 */
  .score{padding:24px 18px 24px 16px}
  .sc-staff{display:none}
  .sc-list{grid-template-columns:1fr;margin:0;padding-top:0;gap:12px}
  .sc-list::before,.sc-list::after{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:2px;border-radius:2px;background:#a9c9f3}
  .sc-list::after{background:var(--blue);transform-origin:top;transform:scaleY(var(--p,1))}
  .cn{padding:0 0 0 44px}
  .cn::before{display:none}
  .cn .nh{left:6px;top:20px;margin-left:0;z-index:1}
  .cn .nh::after{display:none}
  .cn-card{margin:0}
  .sc-guide div{grid-template-columns:72px 1fr;font-size:14px}
  .vb-photo{height:min(78vh,600px)}
  .vb-photo::after{background:linear-gradient(180deg,rgba(11,23,54,.25) 0%,rgba(11,23,54,.88) 75%)}
  .vb-in{bottom:96px}
  .vb-lead{font-size:clamp(28px,7.6vw,34px)}
  .vband .voices{margin-top:-64px}
  .cc-staff{height:49px;margin:48px 0 52px}
  .cc-staff>i:nth-child(2){top:12px}.cc-staff>i:nth-child(3){top:24px}.cc-staff>i:nth-child(4){top:36px}.cc-staff>i:nth-child(5){top:48px}
  .cc-clef{font-size:70px;top:-15px}
  .cc-n{left:calc(44px + var(--x) * .86);top:calc(48px - var(--l) * 6px - 6px);width:14px;height:11px;margin-left:-7px}
  .cc-n::after{height:30px;bottom:6px}
  .cc-n.end{width:18px;height:14px;margin-left:-9px;top:calc(48px - var(--l) * 6px - 7px)}
  .cc-n.end::after{height:34px;bottom:7px}
  .cc-lab{font-size:12px;top:calc(100% + 14px)}
  .cc-lab.l{display:none}
  .cc-row .btn{width:100%;justify-content:center}
  .cc-info{flex-direction:column;gap:8px;align-items:center}
}