@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--radius-sm:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.static{position:static}.block{display:block}}:root{--font-kr:"Malgun Gothic", "Apple SD Gothic Neo";--font-sans:Arial, sans-serif;--font-mono:"Cascadia Code", "Consolas", monospace;--bg:#16171a;--bg-grain:#131417;--panel:#1e2024;--panel-2:#23262b;--elev:#2a2d33;--elev-hover:#31343b;--inset:#141518;--line:#34373f;--line-soft:#292c32;--text:#f3eee4;--text-dim:#cec9bd;--muted:#928d84;--accent:#e3a458;--accent-strong:#f0b972;--accent-deep:#b9772d;--accent-ink:#1c1305;--accent-glow:#e3a45829;--good:#8bb98f;--danger:#e79082;--radius:16px;--radius-sm:10px;--shadow:0 1px 0 #ffffff08, 0 18px 40px -24px #000000b3;--font-body:var(--font-kr), var(--font-sans), "Malgun Gothic", system-ui, sans-serif;--font-num:var(--font-mono), ui-monospace, "SFMono-Regular", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f7f6f2;--bg-grain:#eeece6;--panel:#fff;--panel-2:#f4f1ea;--elev:#f0eee8;--elev-hover:#e7e3da;--inset:#f6f4ee;--line:#c9c4b9;--line-soft:#e2ded5;--text:#28251f;--text-dim:#524c40;--muted:#70685a;--accent:#92500c;--accent-strong:#804406;--accent-deep:#ae702d;--accent-ink:#fff;--accent-glow:#92500c1a;--good:#376d40;--danger:#ae3529;--shadow:0 1px 2px #2f251208, 0 10px 30px -20px #2f25122e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=light] button.primary:hover,:root[data-theme=light] .mobile-dock button:hover{background:#754008}:root[data-theme=light] button.selected:hover{background:var(--elev-hover)}:root[data-theme=light] .routines button.selected{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--accent-deep)}.header-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.theme-picker{border-radius:24px;min-width:96px;font-size:13px}@media (max-width:480px){header{flex-wrap:wrap}.brand{letter-spacing:1px;font-size:12px}.header-actions{gap:6px}.theme-picker{min-width:82px;padding-left:10px}.account-menu>summary{padding-left:10px;padding-right:10px}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:radial-gradient(1200px 600px at 50% -10%, #e3a4580d, transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-grain) 100%);min-height:100dvh;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-attachment:fixed;margin:0;font-size:16px;line-height:1.6}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--elev);min-height:44px;color:var(--text);cursor:pointer;padding:11px 16px;font-weight:500;transition:background .15s,border-color .15s,color .15s,transform 60ms}button:hover{background:var(--elev-hover);border-color:#454852}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button:disabled:active{transform:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.selected,button.primary{background:linear-gradient(180deg, var(--accent-strong), var(--accent));color:var(--accent-ink);border-color:var(--accent-deep);box-shadow:0 8px 22px -14px var(--accent);font-weight:700}button.primary:hover,button.selected:hover{background:linear-gradient(180deg, #f6c580, var(--accent-strong));border-color:var(--accent-deep)}input,select{background:var(--inset);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);max-width:100%;min-height:44px;padding:10px 12px}input:hover,select:hover{border-color:#454852}input[type=range]{min-height:0;accent-color:var(--accent);padding:0}select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 18px),calc(100% - 13px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:34px}a{color:inherit}.app{max-width:1480px;margin:auto;padding:0 16px}header,footer{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;padding:18px 0;display:flex}.brand{letter-spacing:2px;color:var(--text);align-items:center;gap:10px;font-size:15px;font-weight:800;text-decoration:none;display:flex}.brand>:first-child{color:var(--accent);font-size:18px}.accent{color:var(--accent)}.muted,small{color:var(--muted)}p{color:var(--text-dim);margin:10px 0;line-height:1.7}.eyebrow{font-family:var(--font-num);letter-spacing:2.5px;color:var(--accent);text-transform:uppercase;font-size:11px;font-weight:600;display:inline-block}.intro{justify-content:space-between;align-items:flex-end;gap:20px;margin:26px 0 22px;display:flex}h1{letter-spacing:-.5px;color:var(--text);margin:10px 0 6px;font-size:26px;font-weight:700;line-height:1.25}h2{letter-spacing:-.3px;margin:12px 0;font-size:22px;font-weight:650}h3{color:var(--text);font-size:17px;font-weight:650}.session{border-left:1px solid var(--line);color:var(--muted);white-space:nowrap;padding-left:26px;font-size:14px;display:none}.session b{color:var(--accent);font-family:var(--font-num);margin-top:6px;font-size:26px;font-weight:700;display:block}.routines{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px;display:grid}.routines button{text-align:left;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);align-items:center;gap:12px;min-height:74px;padding:16px;display:flex}.routines button:hover{border-color:var(--line);background:var(--panel-2)}.routines button.selected{background:linear-gradient(180deg, var(--panel-2), #e3a45812);border-color:var(--accent-deep);box-shadow:inset 0 0 0 1px #e3a45840, 0 10px 26px -18px var(--accent);color:var(--text)}.routines small{font-family:var(--font-num);letter-spacing:1px;color:var(--muted);margin-top:6px;font-size:11px;display:block}.routines .selected small{color:var(--accent-strong)}.number{font-family:var(--font-num);color:var(--muted);opacity:.8;font-size:20px;font-weight:700}.routines .selected .number{color:var(--accent);opacity:1}.arrow{color:var(--muted);margin-left:auto}.routines .selected .arrow{color:var(--accent)}.workspace{grid-template-columns:1fr;align-items:start;gap:16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);min-width:0;box-shadow:var(--shadow);margin-bottom:16px;padding:18px}.panelhead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;display:flex}.pill{font-family:var(--font-num);letter-spacing:.5px;color:var(--text-dim);background:var(--inset);border:1px solid var(--line-soft);border-radius:20px;padding:6px 11px;font-size:11px}.timer{position:relative;overflow:hidden}.timer:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.5;height:2px;position:absolute;inset:0 0 auto}.clock{font-family:var(--font-num);letter-spacing:-3px;color:var(--text);font-variant-numeric:tabular-nums;margin:14px 0 16px;font-size:68px;font-weight:700;line-height:1}.clock span{color:var(--accent);animation:2s step-end infinite blink}@keyframes blink{50%{opacity:.35}}progress{background:var(--inset);width:100%;height:6px;accent-color:var(--accent);border:none;border-radius:6px;overflow:hidden}progress::-webkit-progress-bar{background:var(--inset);border-radius:6px}progress::-webkit-progress-value{background:linear-gradient(90deg, var(--accent-deep), var(--accent));border-radius:6px}progress::-moz-progress-bar{background:var(--accent)}.timer [role=status]{color:var(--accent-strong);min-height:18px;margin-top:4px;font-size:13px}.field{color:var(--muted);flex-direction:column;gap:7px;font-size:13px;display:flex}.stack{gap:12px;display:grid}.checklist{background:var(--inset);border:1px solid var(--line-soft);border-radius:var(--radius-sm);color:var(--text-dim);margin:18px 0 4px;padding:16px 20px;font-size:14px;line-height:1.9}.checklist li::marker{color:var(--accent)}.scroll{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overflow-x:auto}.scroll::-webkit-scrollbar{height:8px}.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}.tabimage{border-radius:var(--radius-sm);width:100%;height:auto;display:block}.error{color:var(--danger);font-size:14px}.hint{color:var(--muted);font-size:13px}.bigpattern{gap:10px;margin:22px 0;display:flex}.bigpattern span{text-align:center;background:linear-gradient(180deg, var(--panel-2), var(--inset));border:1px solid var(--line);font-family:var(--font-num);color:var(--accent);border-radius:14px;flex:1;padding:20px 0;font-size:40px;font-weight:700}.pattern-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0;display:grid}.pattern-grid button{min-height:40px;font-family:var(--font-num);background:var(--panel-2);padding:8px 2px;font-size:14px}.visited{box-shadow:inset 0 -3px var(--accent)}.metronome{scroll-margin-top:14px}.beats{flex-wrap:wrap;gap:8px;margin:18px 0;display:flex}.beats button{width:46px;height:46px;min-height:46px;font-family:var(--font-num);border-radius:50%;padding:0;font-weight:700}.beats .pulse{outline:3px solid var(--text);outline-offset:3px}.bpm{width:108px;font-family:var(--font-num);text-align:center;color:var(--accent);font-size:34px;font-weight:700}.recorder{scroll-margin-top:14px}.video{aspect-ratio:4/3;border:1px solid var(--line-soft);border-radius:var(--radius-sm);object-fit:contain;background:#0c0d0f;width:100%}.recording{color:var(--danger);font-family:var(--font-num);letter-spacing:1px;font-size:13px;animation:1.2s step-end infinite blink}.folder-save{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:16px}.folder-save h3{margin:0 0 4px}.download{color:var(--accent);padding:10px 0;font-weight:600;text-decoration:none;display:inline-block}.download:hover{color:var(--accent-strong)}.fretboard{width:100%;min-width:820px;display:block}.noteinfo{font-family:var(--font-num);color:var(--accent);font-size:13px}.chords{flex-wrap:wrap;justify-content:space-around;gap:16px;margin:22px 0;display:flex}.chord{text-align:center}.chord h3{color:var(--accent);font-family:var(--font-num);margin-bottom:8px}.chord svg{width:128px;height:168px}.rhythm-trainer{margin:20px 0}.rhythm-tab{width:100%;min-width:1050px;margin-top:18px;display:block}.auto-pattern{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:16px}.practice-history{margin-top:22px}.practice-history h2{margin:6px 0 0}.history-summary{grid-template-columns:1fr;gap:10px;margin:20px 0;display:grid}.history-summary>div{background:var(--inset);border:1px solid var(--line-soft);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.history-summary span,.history-routines span{color:var(--muted);font-size:13px;display:block}.history-summary strong{font-family:var(--font-num);color:var(--text);font-size:24px;font-weight:700;display:block}.history-bars{background:var(--inset);border:1px solid var(--line-soft);border-radius:var(--radius-sm);grid-template-columns:repeat(7,1fr);gap:8px;margin:24px 0;padding:18px 4px 4px;display:grid}.history-bars>div{font-family:var(--font-num);color:var(--muted);flex-direction:column;align-items:center;gap:8px;font-size:11px;display:flex}.bar-track{background:var(--bg-grain);border-radius:5px;align-items:flex-end;width:100%;max-width:40px;height:100px;display:flex;overflow:hidden}.bar-track>div{background:#6f5a34;border-radius:5px 5px 0 0;width:100%;min-height:2px;transition:height .4s}.today .bar-track>div{background:linear-gradient(180deg, var(--accent-strong), var(--accent-deep))}.today>span{color:var(--accent)}.history-routines{border-top:1px solid var(--line-soft);grid-template-columns:repeat(2,1fr);gap:10px;padding:18px 0 4px;display:grid}.history-routines>div{background:var(--inset);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px}.history-routines strong{font-family:var(--font-num);color:var(--text);margin-top:6px;display:block}.history-table{border-collapse:collapse;width:100%;min-width:700px;margin-top:18px;font-size:14px}.history-table th,.history-table td{border-bottom:1px solid var(--line-soft);text-align:left;padding:12px}.history-table thead th{color:var(--accent);font-family:var(--font-num);letter-spacing:.5px;font-size:12px}.history-table tbody th{color:var(--text-dim);font-weight:600}.history-table td{color:var(--muted);font-family:var(--font-num)}footer{font-family:var(--font-num);letter-spacing:1px;border-top:1px solid var(--line-soft);color:var(--muted);text-transform:uppercase;border-bottom:0;margin-top:26px;font-size:11px}.mobile-dock{z-index:20;background:var(--panel);justify-content:space-between;align-items:center;gap:10px;display:flex;position:fixed;bottom:0;left:0;right:0}@supports (color:color-mix(in lab, red, red)){.mobile-dock{background:color-mix(in srgb, var(--panel) 92%, transparent)}}.mobile-dock{-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 14px max(10px, env(safe-area-inset-bottom))}.mobile-dock a{color:var(--text-dim);white-space:nowrap;padding:12px 4px;font-size:13px;text-decoration:none}.mobile-dock a:hover{color:var(--accent)}.mobile-dock button{color:var(--accent-ink);font-family:var(--font-num);letter-spacing:-.5px;background:linear-gradient(180deg, var(--accent-strong), var(--accent));border-color:var(--accent-deep);align-items:center;gap:8px;padding:8px 20px;font-size:16px;font-weight:700;display:inline-flex}body{padding-bottom:82px}@media (min-width:760px){.app{padding:0 24px}header,footer{padding:24px 0}h1{font-size:30px}h2{font-size:24px}.intro{margin:32px 0 26px}.session{display:block}.routines{grid-template-columns:repeat(4,1fr);gap:12px}.panel{padding:24px}.pattern-grid{grid-template-columns:repeat(8,1fr)}.history-summary{grid-template-columns:repeat(3,1fr);gap:16px}.history-summary>div{flex-direction:column;align-items:flex-start;gap:8px}.history-routines{grid-template-columns:repeat(4,1fr);gap:14px}.history-bars{gap:16px;padding:20px 12px 8px}.bar-track{max-width:56px}.metronome{grid-template-columns:auto 1fr;align-items:center;gap:10px 32px;display:grid}.metronome>.panelhead,.metronome>.hint,.metronome>.error{grid-column:1/-1}.metronome>.beats{align-self:center;margin:6px 0 0}.metronome>.row:last-of-type{grid-column:1/-1;margin-top:0}.metronome .bpm{font-size:30px}.metronome .field{flex-direction:row;align-items:center}.metronome .hint{margin:0}.mobile-dock{display:none}body{padding-bottom:0}}@media (min-width:1000px){.app{padding:0 40px}h1{font-size:34px}.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:22px}aside{position:sticky;top:16px}}aside .metronome{margin:0;display:block}aside .metronome .row{flex-wrap:wrap}aside .metronome .field{flex-direction:column;align-items:stretch}aside .metronome .beats{margin:14px 0}aside{position:static}.clock span{animation:none}.history-bars>div>span{white-space:nowrap}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.practice-column{gap:20px;min-width:0;display:grid}aside{gap:20px;display:grid}@media (max-width:999px){.practice-column{display:contents}.workspace>.practice-column>.panel:first-child{order:0}.workspace>aside{order:1}.workspace>.practice-column>.recorder{order:2}}@media (min-width:1000px){.recorder .video{object-fit:contain;max-height:300px}.recorder .stack{grid-template-columns:repeat(3,minmax(0,1fr))}.recorder .field{min-width:0}}.disclosure{border-top:1px solid var(--line-soft);min-width:0;margin-top:18px;padding-top:6px}summary{cursor:pointer;min-height:44px;color:var(--text-dim);padding:12px 0;font-size:13px}summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.disclosure[open]>summary{color:var(--text);margin-bottom:8px}button.selected{background:var(--panel-2);color:var(--accent);box-shadow:none;border-color:var(--accent-deep)}.account-menu{margin-left:auto;position:relative}.account-menu>summary{border:1px solid var(--line);white-space:nowrap;border-radius:24px;padding:10px 16px}.account-content{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:min(340px,100vw - 32px);box-shadow:var(--shadow);z-index:30;overflow-wrap:anywhere;padding:20px;position:absolute;top:52px;right:0}.account-content .row{margin-top:0}.routines{margin-top:22px}.metronome,aside .metronome{display:block}.metronome>.row{justify-content:space-between;align-items:center}.metronome .field{flex-direction:column;align-items:stretch}.history-summary{max-width:320px;margin:12px 0;display:block}.history-summary>div{flex-direction:row;align-items:center}.recorder>div:has(>video[aria-label=카메라\ 미리보기]){margin:12px 0!important}.recorder video[aria-label=카메라\ 미리보기]{max-height:240px}@media (max-width:759px){.routines button{gap:8px;min-height:56px;padding:10px}.routines small,.routines .arrow{display:none}.recorder video[aria-label=카메라\ 미리보기]{max-height:180px}header{gap:12px}}.tempo-steps{grid-template-columns:repeat(4,1fr);gap:6px;width:100%;display:grid}.tempo-steps button{min-height:44px;font-family:var(--font-num);padding:8px}button kbd{font:11px var(--font-num);opacity:.7;border:1px solid;border-radius:4px;margin-left:8px;padding:0 5px;line-height:18px;display:inline-block}.policy-page{max-width:960px}.policy-page main{margin-top:24px}.policy-page h2{margin-top:32px;font-size:20px}.policy-page li{color:var(--text-dim);margin:12px 0}.policy-page a,.folder-save .hint a,.account-content a{text-underline-offset:3px;text-decoration:underline}textarea{resize:vertical;background:var(--inset);width:100%;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;padding:12px}footer{flex-wrap:wrap;gap:12px}.account-content{max-height:75vh;overflow-y:auto}