@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#17191b;--muted:#71767d;--line:#e3e5e8;--blue:#2458e8;--paper:#fff;font-family:'Noto Sans KR',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}button{background:none;border:0;color:inherit}button:disabled{cursor:default}button,a{touch-action:manipulation}[hidden]{display:none!important}.header{height:112px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:21px;align-items:center}.brand-mark{font-family:Arial,sans-serif;font-size:46px;letter-spacing:-3.5px;font-weight:900;line-height:1}.brand-mark>span{font-size:12px;letter-spacing:0;vertical-align:top;margin-left:5px;display:inline-block;padding-top:4px}.brand-name{font:600 10px/1.65 Arial,sans-serif;letter-spacing:1.7px;padding-left:20px;border-left:1px solid #ccd0d5}.header nav{display:flex;gap:40px;height:100%;align-items:center}.header nav a{font:700 13px Arial,sans-serif;letter-spacing:.7px;position:relative;display:flex;height:100%;align-items:center}.header nav a[aria-current=page]:after{content:'';position:absolute;bottom:-1px;height:3px;background:var(--ink);width:100%;left:0}main{max-width:1800px;margin:0 auto}.lesson-stage{display:grid;grid-template-columns:37% 63%;padding:54px 5% 0}.eyebrow{font:600 12px/1.6 Arial,sans-serif;letter-spacing:1.8px;display:flex;align-items:center;gap:10px}.small-rule{width:22px;height:2px;background:var(--blue)}.slash{color:#b3b6ba}.editorial h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(76px,7.5vw,116px);font-weight:700;letter-spacing:-1.5px;line-height:.91;margin:27px 0 24px}.blue{color:var(--blue)}.intro{font-size:19px;font-weight:600;line-height:1.7;letter-spacing:-.65px;margin:0 0 13px}.instruction{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.part-detail{max-width:335px;min-height:174px;border-top:1px solid var(--line);margin-top:29px;padding:20px 0 6px}.detail-counter{font:600 10px Arial,sans-serif;letter-spacing:1.5px;color:var(--blue)}.part-detail h2{font-size:20px;line-height:1.3;margin:10px 0}.part-detail p{font-size:14px;line-height:1.85;color:#646b72;margin:0}.instrument{min-width:0;position:relative;display:flex;flex-direction:column;min-height:650px}.viewer-top{display:flex;justify-content:space-between;gap:12px;font:500 10px Arial,sans-serif;letter-spacing:1.5px;color:#92979d;padding:0 0 10px 25px}.view-label{color:#555c65}.view-label:before{content:'◈';color:var(--blue);padding-right:8px}#viewer{position:relative;flex:1;min-height:520px;overflow:hidden;cursor:grab;touch-action:none}#viewer:active{cursor:grabbing}#viewer canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px}#hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-9px,-9px);pointer-events:auto;padding:4px;font:600 11px Arial,sans-serif;letter-spacing:.3px;white-space:nowrap}.hotspot i{width:12px;height:12px;display:block;border-radius:50%;border:3px solid white;background:var(--blue);box-shadow:0 0 0 1px #2458e844,0 0 0 5px #2458e80c}.hotspot span{padding:6px 9px;background:#ffffffea;box-shadow:0 2px 14px #00000008;border:1px solid #e9ecf0;border-radius:2px}.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:16px 0;margin:0 0 0 25px;color:var(--muted);font-size:12px}.view-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.view-controls button{padding:8px 10px;border:1px solid #e2e5e9;background:white;color:#343b44;font-size:12px;border-radius:3px;min-height:35px}.view-controls button[aria-pressed=true]{color:var(--blue);border-color:var(--blue)}.parts-section{padding:24px 5% 38px}.section-label{font:600 11px Arial,sans-serif;letter-spacing:1.3px;margin:0 0 15px;display:flex;gap:18px;align-items:center}.section-label span{font:400 12px 'Noto Sans KR',sans-serif;color:#8a8e94;letter-spacing:0}.part-buttons{display:flex;gap:7px;flex-wrap:wrap}.part-buttons button{padding:11px 15px;border:1px solid var(--line);font:500 12px Arial,sans-serif;border-radius:3px;transition:background .15s}.part-buttons button:hover{background:#f2f5fc}.part-buttons button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.continue{margin:0 5%;padding:42px 0 46px;border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:30px}.continue h2{font-size:30px;letter-spacing:-1.2px;margin:12px 0}.continue p{color:var(--muted);font-size:14px;margin:0;line-height:1.8}.primary{min-width:178px;display:flex;justify-content:space-between;align-items:center;gap:40px;padding:20px 23px;background:var(--ink);color:white;font-size:14px}.primary:hover{background:var(--blue)}footer{border-top:1px solid var(--line);padding:29px 5%;display:flex;justify-content:space-between;gap:20px;font:500 10px Arial,sans-serif;letter-spacing:1px;color:#899098}.page-heading{padding:66px 5% 55px}.page-heading h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(62px,8vw,110px);line-height:1;letter-spacing:-1px;margin:22px 0}.page-heading p{font-size:16px;color:var(--muted);line-height:1.8}.curriculum-heading{margin:0 5%;padding:20px 0;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:25px}.curriculum-heading h2{font:700 16px Arial,sans-serif;letter-spacing:1px}.curriculum-heading span{font-size:13px;color:var(--muted)}#lesson-list{margin:0 5%}.lesson-row{width:100%;display:grid;grid-template-columns:70px 1fr 230px 90px;align-items:center;text-align:left;gap:20px;padding:28px 14px;border-bottom:1px solid var(--line)}a.lesson-row:hover{background:#f6f8fc}.lesson-number{font:500 14px Arial,sans-serif;color:var(--muted)}.lesson-name{font-family:'Barlow Condensed',Arial,sans-serif;font-size:33px;font-weight:600;letter-spacing:.2px}.lesson-korean{font-size:13px;color:var(--muted)}.lesson-status{font-size:12px;color:#858a92;text-align:right}.lesson-status.open{color:var(--blue)}.curriculum-note{font-size:14px;color:var(--muted);line-height:1.9;margin:36px 5% 70px}.about-grid{display:grid;grid-template-columns:1fr 1fr;margin:0 5% 90px;border-top:1px solid var(--ink);padding-top:50px;gap:50px}.about-grid h2{font-size:32px;line-height:1.6;letter-spacing:-1px}.about-grid h3{font-size:28px;line-height:1.6;margin-top:0}.about-grid p{font-size:16px;line-height:2;color:#676f77;max-width:560px}.text-link{display:inline-block;margin-top:20px;border-bottom:1px solid black;padding-bottom:7px;font-size:14px}.sound{color:var(--blue);font-size:12px;border:1px solid #ccd8fc;padding:7px 11px;margin-top:10px}
@media(min-width:1550px){.lesson-stage{padding-top:65px}.instrument{min-height:760px}.part-detail{margin-top:38px}}@media(max-width:1050px){.header nav{gap:25px}.brand-name{display:none}.lesson-stage{grid-template-columns:36% 64%}.editorial h1{font-size:85px}.viewer-bottom{flex-direction:column;align-items:flex-start}.instrument{min-height:660px}.lesson-row{grid-template-columns:45px 1fr 190px 70px}}@media(max-width:700px){.header{height:85px;margin:0 6%}.brand-mark{font-size:36px}.header nav{gap:19px}.header nav a{font-size:10px;letter-spacing:.3px}.lesson-stage{padding:30px 6% 0;display:flex;flex-direction:column}.editorial{display:contents}.eyebrow{font-size:10px;gap:8px}.editorial h1{font-size:64px;line-height:.95;margin:18px 0 15px;letter-spacing:-.5px}.editorial h1 br{display:none}.editorial h1 br:after{content:' '}.editorial h1{max-width:310px}.intro{font-size:16px}.intro br{display:none}.instruction{font-size:13px;margin:8px 0 16px}.instruction br{display:none}.instrument{min-height:470px;order:1}.viewer-top{padding-left:0;font-size:9px;margin-top:6px}.view-label{display:none}#viewer{min-height:380px}.viewer-bottom{margin:0;gap:12px;padding:13px 0;align-items:center}.part-detail{order:2;max-width:none;min-height:145px;margin-top:15px;padding-top:18px}.parts-section{padding:23px 6% 30px}.part-buttons{gap:7px}.part-buttons button{padding:11px 13px;font-size:12px}.continue{margin:0 6%;align-items:flex-start;flex-direction:column;padding:30px 0}.continue h2{font-size:28px}.continue p{font-size:13px}.primary{padding:16px 20px;min-width:170px}footer{padding:25px 6%;font-size:9px}footer span:nth-child(2){display:none}.page-heading{padding:42px 6% 30px}.page-heading h1{font-size:64px}.page-heading p{font-size:14px}.lesson-row{grid-template-columns:30px 1fr 65px;padding:24px 0;gap:10px}.lesson-name{font-size:29px}.lesson-korean{grid-column:2;grid-row:auto;font-size:12px}.lesson-status{grid-column:3;grid-row:1/3}.lesson-number{align-self:center}.about-grid{grid-template-columns:1fr;gap:20px;padding-top:30px}.about-grid h3{font-size:25px}.about-grid p{font-size:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:700px){.editorial h1{font-size:58px;max-width:100%;line-height:1}.editorial h1 br{display:inline}}
@media(max-width:700px){.editorial h1 br:first-of-type{display:none}.intro{margin-bottom:3px}}