:root{--wb: keep-all;--sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--kbb: max(var(--sab), 16px);--sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));--sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px))}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}html[lang^=ja],html[lang^=zh]{--wb: normal}body{background:#0d1420;color:#e8eef6;font-family:-apple-system,Noto Sans KR,Malgun Gothic,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.center-msg{height:100%;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;color:#9fb2c8}button.banner-cta{display:block;width:100%;cursor:pointer;font:inherit;font-weight:700;color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:10px}button.banner-cta:active{transform:scale(.99)}button.banner-cta:disabled{opacity:.7;cursor:progress}.acquisition-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;box-sizing:border-box;text-align:center;text-decoration:none;line-height:1.35;white-space:normal}.mp-plus-retention{background:linear-gradient(90deg,#12312e,#143a36);border-color:#2c6b63;color:#c8fff7}.acq-footer-link{display:block;width:100%;text-align:center;margin-top:10px;padding:8px 0}button.header-signin{width:auto;padding:0 10px;font-size:13px;white-space:nowrap}.header-account{align-self:center;font-size:12px;color:#7fd7cc;white-space:nowrap}.account-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.text-action{background:none;border:none;padding:2px 0;font:inherit;font-size:13px;color:#a9c3e0;text-decoration:underline;cursor:pointer}.text-action:hover{color:#d5e6f7}.text-action:focus-visible{outline:2px solid #3fd6c8;outline-offset:2px}.text-action.danger{color:#d99a9a}.text-action.danger:hover{color:#f0b9b9}.text-action:disabled{opacity:.6;cursor:progress}.login-code{font-size:1.6rem;font-weight:700;letter-spacing:.15em;text-align:center;padding:10px 0;user-select:all;-webkit-user-select:all}.library{max-width:560px;margin:0 auto;padding:calc(16px + var(--sat)) 16px calc(24px + var(--sab))}.lib-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.header-btns{display:flex;gap:8px}.header-btns .hud-btn{display:flex;align-items:center;justify-content:center}.lib-header h1{font-size:26px;letter-spacing:.5px}.subtitle{color:#8fa3ba;font-size:13px;margin-top:4px}.banner-slot{background:linear-gradient(90deg,#14273f,#1a2c46);border:1px solid #27405f;border-radius:10px;padding:10px 14px;font-size:13px;color:#a9c3e0;margin-bottom:14px}.update-banner .update-title{margin:0 0 4px;font-weight:700;color:#d5e6f7}.update-banner .update-desc{margin:0 0 10px}.update-banner .update-actions{display:flex;gap:8px}.update-banner .update-actions .btn{flex:none;padding:8px 18px}.song-list{list-style:none;display:flex;flex-direction:column;gap:8px}.song-list li{display:flex;align-items:center;gap:12px;background:#131e30;border:1px solid #1f3049;border-radius:12px;padding:12px 14px;cursor:pointer;transition:background .15s}.song-list li:active{background:#1a2a42}.song-list li.locked{opacity:.55}.song-order{width:32px;height:32px;border-radius:8px;background:#1d3050;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#7fd7cc;flex-shrink:0}.preview-btn{width:36px;height:36px;border-radius:50%;flex-shrink:0;border:1px solid #2c4667;background:#1d3050;color:#7fd7cc;font-size:13px;cursor:pointer}.preview-btn.on{background:#1f6f66;border-color:#3fd6c8;color:#eafffb}.song-info{flex:1;min-width:0}.song-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-sub{font-size:12px;color:#8fa3ba;margin-top:2px}.stars{color:#ffd45e;font-size:14px;letter-spacing:1px}.lock{font-size:16px}.overlay{position:fixed;inset:0;background:#050a12b8;display:flex;align-items:center;justify-content:center;z-index:40}.modal{background:#16223a;border:1px solid #27405f;border-radius:16px;padding:22px;width:min(92vw,380px);display:flex;flex-direction:column;gap:14px;max-height:86vh;overflow-y:auto}.modal h2{font-size:19px}.modal-desc{color:#a9bdd6;font-size:14px}.modal-fineprint{color:#6d829b;font-size:12px}.ios-sub-info{display:flex;flex-direction:column;gap:6px;line-height:1.45}.ios-sub-links{display:flex;flex-wrap:wrap;gap:12px}.ios-sub-links .text-action{font-size:12px}.opt-group{display:flex;flex-direction:column;gap:8px}.opt-group>label{font-size:13px;color:#a9bdd6}.seg{display:flex;gap:6px}.seg button{flex:1;padding:10px 4px;border-radius:10px;border:1px solid #27405f;background:#101a2c;color:#c6d6e8;font-size:14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center}.seg button small{font-size:10px;color:#7189a3}.seg button.on{background:#1f4d49;border-color:#3fd6c8;color:#c8fff7}.btn{padding:11px 16px;border-radius:12px;border:1px solid #2c4667;background:#182842;color:#dce8f5;font-size:15px;cursor:pointer}.btn.primary{background:#1f6f66;border-color:#3fd6c8;color:#eafffb;font-weight:700}.btn.big{padding:14px 16px}input[type=range]{width:100%;accent-color:#3fd6c8}.game-root{position:fixed;inset:0;background:#0a1220}.game-canvas{width:100%;height:calc(100% - var(--kbb));display:block;touch-action:none}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:8px 12px;padding-top:calc(8px + var(--sat));pointer-events:none}.hud-btn{pointer-events:auto;width:38px;height:38px;border-radius:10px;border:1px solid #2c4667;background:#101a2ccc;color:#c6d6e8;font-size:15px;cursor:pointer;flex-shrink:0}.hud-title{flex:1;font-size:14px;color:#b9cde2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-stats{display:flex;gap:12px;font-size:15px;font-weight:700;color:#d8fff4}.combo{color:#ffd45e}.progress-bar{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff14}.progress-bar>div{height:100%;background:#3fd6c8;transition:width .2s linear}.countdown{font-size:84px;font-weight:800;color:#d8fff4}.rotate-hint{display:none}@media (orientation: portrait){.game-root .rotate-hint{display:flex;position:absolute;inset:0;z-index:30;background:#080e18eb;align-items:center;justify-content:center;font-size:18px;color:#c6d6e8;pointer-events:none}}.freeplay-top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + var(--sat))}.freeplay-canvas{position:absolute;left:0;right:0;bottom:var(--kbb);top:calc(54px + var(--sat));width:100%;height:calc(100% - 54px - var(--sat) - var(--kbb));touch-action:none}.octave-label{font-size:13px;color:#7fd7cc;min-width:30px;text-align:center}.listen-root{position:fixed;inset:0;display:flex;flex-direction:column;background:#0a1220;padding-bottom:var(--kbb)}.listen-top{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + var(--sat))}.falling-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#a9bdd6;white-space:nowrap;cursor:pointer}.falling-toggle input{accent-color:#2f7ff6}.listen-progress{position:static;flex-shrink:0;height:5px}.listen-progress-hit{padding:6px 0;cursor:pointer;flex-shrink:0;touch-action:manipulation}.score-pane{flex:1;overflow-y:auto;background:#fdfcf8;position:relative;border-radius:10px;margin:6px 8px}.score-pane .center-msg{color:#667}.free-badge{font-size:11px;font-weight:700;color:#2fd67f;border:1px solid rgba(47,214,127,.55);border-radius:10px;padding:1px 8px;margin-right:8px;vertical-align:middle}.popular-badge{color:#ff9f5b;border-color:#ff9f5b8c}.ad-fail{color:#ff8b8b}.measure-flash{position:absolute;pointer-events:none;border-radius:4px;background:#33e02f38;border:2px solid rgba(51,224,47,.65);animation:measure-flash-fade 1.1s ease-out forwards}@keyframes measure-flash-fade{0%{opacity:1}55%{opacity:1}to{opacity:0}}.listen-canvas{width:100%;display:block;flex-shrink:0;touch-action:none}.score-lock-note{flex-shrink:0;text-align:center;font-size:12px;color:#ffd45e;padding:4px 8px;background:#ffd45e14}.music-pass-pitch{font-size:14px;line-height:1.6;color:#d8fff4;background:linear-gradient(135deg,#143c3a,#1a2c46);border:1px solid #3fd6c8;border-radius:12px;padding:14px}.result{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:20px}.result h2{font-size:20px;color:#b9cde2}.result-stars .star{font-size:46px;color:#33415a;margin:0 4px}.result-stars .star.on{color:#ffd45e;text-shadow:0 0 18px rgba(255,212,94,.5)}.result-acc{font-size:52px;font-weight:800;color:#eafffb}.result-detail{display:flex;gap:18px;color:#8fa3ba;font-size:14px}.result-msg{color:#a9bdd6;font-size:15px;margin-bottom:8px}.result .btn{width:min(80vw,300px)}.settings{max-width:560px;margin:0 auto;padding:calc(20px + var(--sat)) 16px calc(20px + var(--sab));display:flex;flex-direction:column;gap:20px}.exit-toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%);background:#141c2af2;color:#dce8f5;padding:10px 18px;border-radius:20px;font-size:14px;border:1px solid rgba(255,255,255,.12);z-index:1000;pointer-events:none;white-space:nowrap}.doc-screen{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;background:#0d1420}.doc-header{flex:0 0 auto;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,.08)}.doc-frame{flex:1 1 auto;width:100%;border:0;background:#fdfcf8}.learn-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin-bottom:10px;padding:12px 14px;background:linear-gradient(90deg,#14273f,#182c4a);border:1px solid #2a4468;border-radius:12px;color:inherit;font:inherit;text-align:left;cursor:pointer}.learn-entry:active{background:#1a2a42}.learn-entry-icon{width:42px;height:42px;border-radius:10px;background:#1d3050;color:#7fd7cc;display:flex;align-items:center;justify-content:center;flex-shrink:0}.learn-entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.learn-entry-title{font-weight:700;font-size:16px}.learn-entry-sub{font-size:12px;color:#8fa3ba;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-entry-chevron{color:#7fd7cc;font-size:22px;line-height:1;flex-shrink:0}.learn{position:fixed;inset:0;max-width:560px;margin:0 auto;background:#0d1420;display:flex;flex-direction:column;padding:calc(8px + var(--sat)) max(16px,var(--sar)) calc(24px + var(--sab)) max(16px,var(--sal))}.learn-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.learn-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:14px}.learn-back{background:none;border:none;color:#7fb2ff;font:inherit;font-size:16px;min-height:44px;padding:10px 8px 10px 0;cursor:pointer;white-space:nowrap;flex-shrink:0}.learn-page-title{flex:1;font-size:18px;font-weight:700;text-align:center}.learn-header-spacer{width:64px;flex-shrink:0}.learn-course-title{font-size:30px;font-weight:800;line-height:1.2;margin-top:4px}.learn-course-sub{color:#9fb2c8;font-size:15px;margin-top:6px;word-break:var(--wb);overflow-wrap:anywhere}.learn-progress-text{margin-top:22px;font-size:15px;color:#c6d6e8}.learn-progress-text strong{font-size:20px;font-weight:800;color:#eaf3ff;margin-right:4px}.learn-progress-bar{display:flex;gap:4px;margin:8px 0 22px}.learn-progress-bar span{flex:1;height:8px;border-radius:4px;background:#1a2d4a}.learn-progress-bar span.on{background:#3fd6f0}.learn-all-done{color:#7fd7cc;font-size:13px;margin:-10px 0 16px;word-break:var(--wb);overflow-wrap:anywhere}.learn-steps{list-style:none;display:flex;flex-direction:column}.learn-step{display:flex;gap:12px;align-items:stretch}.learn-rail{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}.learn-num{width:40px;height:40px;border-radius:50%;border:2px solid #34506f;background:#0d1420;color:#c6d6e8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;margin-top:26px;flex-shrink:0}.learn-line{flex:1;width:3px;background:#2a3f5c;margin-top:4px;margin-bottom:-26px;min-height:30px}.learn-step.done .learn-num{border-color:#2fd67f;color:#5cf09a}.learn-step.done .learn-line{background:#2fd67f}.learn-step.next .learn-num{border-color:#6c7cf2;color:#9aa8ff}.learn-card{flex:1;min-width:0;margin-bottom:12px;padding:12px 14px 14px;min-height:88px;background:#16243a;border:1px solid #27405f;border-radius:14px;color:inherit;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px}.learn-step.done .learn-card{background:#132a2e;border-color:#2c6b5c}.learn-step.next .learn-card{background:#182a4d;border-color:#6c7cf2}.learn-card:active{filter:brightness(1.12)}.learn-card-step{font-size:12px;color:#9fb2c8}.learn-card-row{display:flex;align-items:center;gap:10px}.learn-card-icon{color:#eaf3ff;width:32px;display:flex;justify-content:center;flex-shrink:0}.learn-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.learn-card-title{font-size:19px;font-weight:700;line-height:1.25;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-card-desc{font-size:13px;color:#a9bdd6;line-height:1.35;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-card-status{font-size:13px;font-weight:700;flex-shrink:0;color:#a9bdd6;text-align:right;white-space:nowrap;margin-left:2px}.learn-step.done .learn-card-status{color:#5cf09a}.learn-step.next .learn-card-status{color:#9aa8ff}.learn-step.inprogress .learn-card-status{color:#ffd45e}.learn-step-root{position:fixed;inset:0;background:#0d1420;display:flex;flex-direction:column;padding-left:var(--sal);padding-right:var(--sar)}.learn-step-top{display:flex;align-items:center;gap:8px;padding:4px 12px;padding-top:calc(4px + var(--sat));min-height:52px}.learn-step-heading{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center}.learn-step-heading h1{font-size:16px;font-weight:700;line-height:1.25;white-space:normal}.learn-step-body{flex:1;min-height:0;overflow-y:auto;padding:2px 16px 6px;display:flex;flex-direction:column;gap:8px}.learn-step-body>*{flex-shrink:0}.learn-goal{display:flex;gap:12px;align-items:flex-start;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:10px 14px}.learn-goal-icon{color:#7fd7cc;flex-shrink:0;margin-top:1px}.learn-goal p{font-size:15px;line-height:1.45;color:#dce8f5;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-practice{display:flex;flex-direction:column;gap:4px}.learn-practice-progress{font-size:20px;font-weight:800;color:#eaf3ff}.learn-practice-hint{font-size:15px;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere}.learn-staff-wrap{background:#16243a;border:1px solid #27405f;border-radius:14px;padding:8px 10px;overflow-x:auto}.learn-done-title{font-size:20px;font-weight:800;color:#5cf09a;word-break:var(--wb);overflow-wrap:anywhere}.learn-feedback{min-height:22px;font-size:15px;word-break:var(--wb);overflow-wrap:anywhere}.learn-feedback.good{color:#5cf09a}.learn-feedback.gentle{color:#ffd45e}.learn-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}.learn-actions .btn{min-height:48px;width:100%}.learn-keyboard{flex-shrink:0;width:100%;height:min(33vh,236px);min-height:170px;display:block;touch-action:none;margin-bottom:var(--kbb)}@media (orientation: portrait) and (max-height: 860px){.learn-keyboard{height:min(33vh,192px)}}.learn-target{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 0 4px;text-align:center}.learn-target-sub{font-size:14px;color:#9fb2c8;word-break:var(--wb);overflow-wrap:anywhere}.learn-target-key{font-size:64px;font-weight:800;line-height:1.1;color:#eaf3ff;letter-spacing:.02em}.learn-swap{display:grid}.learn-swap-item{grid-area:1 / 1;min-width:0}.learn-swap-item.off{visibility:hidden}.learn-target.pending .learn-target-key{opacity:.5}.learn-beat-dots{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.learn-beat-dots span{display:inline-block;border-radius:50%;background:#1f3350;border:2px solid #34506f;transition:transform .08s ease-out}.learn-beat-dots .ci{width:12px;height:12px}.learn-beat-dots .bt{width:22px;height:22px}.learn-beat-dots .past{opacity:.45}.learn-beat-dots .now{background:#3fd6f0;border-color:#3fd6f0;transform:scale(1.35);box-shadow:0 0 12px #3fd6f0b3;opacity:1}.learn-beat-dots .hit{background:#2fd67f;border-color:#2fd67f;opacity:1}.learn-hold{display:flex;flex-direction:column;gap:4px;margin-top:8px}.learn-hold-bar{height:10px;border-radius:5px;background:#1a2d4a;overflow:hidden}.learn-hold-bar>div{height:100%;background:#3fd6c8;transition:width .08s linear}.learn-hold-label{font-size:12px;color:#8fa3ba}@media (orientation: landscape) and (max-height: 520px){.learn-keyboard{height:30vh;min-height:112px}.learn-step-top{min-height:40px;padding-top:calc(2px + var(--sat))}.learn-step-body{padding:2px 16px 6px;gap:8px}.learn-goal{padding:8px 12px}.learn-goal p{font-size:13px;line-height:1.35}.learn-practice-progress{font-size:17px}.learn-target{padding:4px 0}.learn-target-key{font-size:36px}.learn-actions .btn{min-height:44px;padding:8px 16px}}.learn-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:4px}.learn-title-row .learn-course-title{margin-top:0;min-width:0;word-break:var(--wb);overflow-wrap:anywhere}.learn-chapter-badge{flex-shrink:0;font-size:12px;font-weight:700;color:#9aa8ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:999px;padding:3px 10px;white-space:nowrap;align-self:center}.learn-chapter-tabs{display:flex;gap:6px;margin-top:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}.learn-chapter-tabs::-webkit-scrollbar{height:4px}.learn-chapter-tabs::-webkit-scrollbar-thumb{background:#27405f;border-radius:2px}.learn-chapter-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px;background:#16243a;border:1px solid #27405f;border-radius:12px;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;flex:0 0 auto;width:132px;scroll-snap-align:start}.learn-chapter-tab.on{background:#182a4d;border-color:#6c7cf2}.learn-chapter-tab:active{filter:brightness(1.12)}.learn-chapter-tab-num{font-size:11px;font-weight:700;color:#9aa8ff;white-space:nowrap}.learn-chapter-tab-title{font-size:12px;line-height:1.25;color:#dce8f5;word-break:var(--wb);overflow-wrap:anywhere}.learn-chapter-tab-progress{font-size:11px;color:#8fa3ba}.learn-chapter-tab.all .learn-chapter-tab-progress{color:#5cf09a}.learn-practice-sub{font-size:13px;color:#9fb2c8}.learn-practice-hint.strong{font-weight:700;color:#eaf3ff}.learn-practice-hint.release{color:#5cf09a;font-weight:700}.learn-target-key.small{font-size:34px}.learn-hold-gauge{display:flex;flex-direction:column;gap:6px;padding:6px 0}.learn-hold-gauge svg{display:block}.learn-hold-items{display:flex;gap:6px;flex-wrap:wrap}.learn-hold-item{font-size:12px;padding:3px 9px;border-radius:999px;background:#1a2d4a;color:#9fb2c8;border:1px solid #2a3f5c}.learn-hold-item.active{color:#eaf3ff;border-color:#3fd6f0;background:#163a52}.learn-hold-item.done{color:#5cf09a;border-color:#2fd67f}.learn-hold-item.missed{color:#ffd45e;border-color:#7a6a2a}.learn-beat-dots .bt.half{width:14px;height:14px}.learn-beat-dots .bt.bar{margin-left:10px}.learn-keyboards{display:flex;flex-direction:column;flex-shrink:0;margin-bottom:var(--kbb)}.learn-keyboards .learn-keyboard{margin-bottom:0}.learn-keyboard-part{display:flex;flex-direction:column;min-width:0}.learn-keyboard-label{font-size:11px;color:#8fa3ba;padding:2px 12px 0;background:#0d1a2c}.learn-keyboards.two{flex-direction:column-reverse}.learn-keyboards.two .learn-keyboard{height:min(22vh,160px);min-height:104px}.learn-step-root.two-parts .learn-step-body{gap:8px}@media (orientation: landscape) and (max-height: 520px){.learn-keyboards.two{flex-direction:row}.learn-keyboards.two .learn-keyboard-part{flex:1}.learn-keyboards.two .learn-keyboard{height:30vh;min-height:112px}.learn-chapter-tabs{margin-top:8px}.learn-hold-gauge{gap:3px;padding:2px 0}}@media (max-width: 360px){.learn-chapter-tab{width:118px}}@media (orientation: landscape) and (max-height: 520px){.learn-target{padding:0;gap:0}.learn-target-key{font-size:28px}.learn-target-key.small{font-size:24px}.learn-staff-wrap{padding:4px 8px}.learn-practice{gap:2px}.learn-practice-progress{font-size:15px}}@media (orientation: landscape) and (max-height: 520px){.learn-step-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content max-content max-content;column-gap:12px;row-gap:6px;align-content:start}.learn-goal{grid-column:2;grid-row:1;align-self:start}.learn-practice{grid-column:1;grid-row:1}.learn-feedback,.learn-done{grid-column:1;grid-row:2}.learn-staff-wrap{grid-column:2;grid-row:2 / span 2;align-self:start}.learn-staff-wrap{max-height:62vh;overflow-y:auto}.learn-actions{grid-column:1;grid-row:3;margin-top:0}}.learn-beat-gauge{display:block}.learn-gauge-section{display:flex;flex-direction:column;gap:4px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:8px 12px 6px}.learn-gauge-text{font-size:14px;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere;min-height:20px}.learn-gauge-text.release{color:#5cf09a;font-weight:700}@media (orientation: landscape) and (max-height: 520px){.learn-step-body{grid-template-rows:max-content max-content max-content max-content}.learn-gauge-section{grid-column:1;grid-row:2}.learn-feedback,.learn-done{grid-row:3}.learn-actions{grid-row:4}.learn-staff-wrap{grid-row:2 / span 3}}.learn-keyboards.two{position:relative}.learn-keyboards.two .learn-keyboard{height:min(17vh,124px);min-height:96px}.learn-keyboard-part{position:relative}.learn-keyboard-part .learn-keyboard-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 12px 2px}.learn-keyboard-part.inactive .learn-keyboard-label{opacity:.55}.learn-keyboard-now{font-size:10px;font-weight:800;color:#0d1420;background:currentColor;border-radius:999px;padding:1px 7px}.learn-keyboard-now{color:inherit;background:#ffffff1f}.learn-keyboard-part.active .learn-keyboard-now{color:#0d1420;background:#eaf3ff}.learn-keyboard-divider{position:absolute;left:12px;right:12px;top:50%;height:2px;background:linear-gradient(90deg,#9aa8ff,#3fd6c8);opacity:.55;border-radius:1px;pointer-events:none}.learn-step-root.two-parts .learn-target-key{font-size:44px}.learn-step-root.two-parts .learn-goal p{font-size:14px;line-height:1.4}@media (orientation: landscape) and (max-height: 520px){.learn-keyboards.two{gap:14px;padding:0 4px}.learn-keyboards.two .learn-keyboard-part{flex:1;min-width:0}.learn-keyboards.two .learn-keyboard{height:28vh;min-height:104px}.learn-keyboard-divider{inset:6px auto 6px 50%;width:4px;height:auto;transform:translate(-50%);background:linear-gradient(180deg,#9aa8ff,#3fd6c8);box-shadow:0 0 10px #9aa8ff99;opacity:.9}}@media (orientation: landscape) and (max-height: 520px){.learn-staff-wrap{grid-row:1 / span 2}.learn-goal{grid-row:3}.learn-step-root.two-parts .learn-staff-wrap{max-height:56vh}}.learn-score{position:relative;width:max-content;min-width:100%}.learn-score.with-labels{padding-bottom:22px}.learn-score-host{display:block}.learn-score-host>div{display:block}.learn-score-host svg{display:block}.learn-score-current{position:absolute;pointer-events:none;border-radius:8px;background:#3fd6c81f;border:1.5px solid rgba(63,214,200,.55);box-sizing:border-box}.learn-score-cursor{position:absolute;left:0;width:0;pointer-events:none;transition:none}.learn-score-cursor>span{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#ffd45e;border-radius:1px}.learn-score-cursor>span:before{content:"";position:absolute;left:-5px;top:-8px;border:6px solid transparent;border-top:8px solid #ffd45e;border-bottom:0}.learn-score-cursor.ready>span{background:repeating-linear-gradient(180deg,#ffd45e 0 4px,transparent 4px 7px);opacity:.75}.learn-score-label{position:absolute;transform:translate(-50%);font-size:11px;color:#e8eef6b3;white-space:nowrap;pointer-events:none}.learn-score-label.cur{color:#3fd6c8;font-weight:700}.learn-score-label.row2{transform:translate(-50%,14px)}.learn-score-label.row3{transform:translate(-50%,28px)}.learn-score-label.tight{font-size:9px}.learn-beat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}.learn-beat-row .learn-beat-dots{margin-top:0}.learn-beat-dots .bt.first{border-color:#ffd45e}.learn-beat-dots .bt.first.now{background:#ffd45e;border-color:#ffd45e;box-shadow:0 0 12px #ffd45eb3}.learn-click-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;color:#dce8f5;background:#16243a;border:1px solid #27405f;border-radius:999px;padding:6px 12px;cursor:pointer;min-height:36px}.learn-click-toggle[aria-pressed=false]{color:#8fa3ba;text-decoration:line-through}.learn-click-toggle:active{filter:brightness(1.12)}.learn-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.learn-done-badge{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#0d1420;background:#ffd45e;border-radius:999px;padding:6px 14px;margin-bottom:8px;animation:learn-badge-pop .45s cubic-bezier(.2,1.4,.4,1) both}.learn-done-badge.chapter{background:linear-gradient(90deg,#ffd45e,#5cf09a)}.learn-done-badge.review{background:#1e3a5a;color:#dce8f5;font-weight:700;animation:none}.learn-done-progress{font-size:13px;color:#9fb2c8;margin-top:6px}@keyframes learn-badge-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.learn-done-badge{animation:none}}.learn-compare{display:flex;flex-direction:column;gap:10px;margin-top:6px}.learn-compare-card{display:flex;flex-direction:column;gap:6px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:10px 12px}.learn-compare-card.heard{border-color:#2fd67f}.learn-compare-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.learn-compare-label{font-size:14px;font-weight:700;color:#eaf3ff;word-break:var(--wb)}.learn-compare-heard{font-size:12px;font-weight:700;color:#5cf09a}.learn-staff-wrap.small{padding:4px 6px;background:#0f1a2c}.learn-compare .btn{min-height:44px}@media (orientation: landscape) and (max-height: 520px){.learn-compare{grid-column:1 / span 2;grid-row:2}.learn-compare-card{flex-direction:row;align-items:center;flex-wrap:wrap}.learn-compare-card .learn-staff-wrap.small{flex:1 1 260px;max-height:120px}}.learn-theory-btn{width:64px;flex-shrink:0;font:inherit;font-size:13px;font-weight:700;color:#9aa8ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:999px;padding:6px 0;cursor:pointer}.th-root{display:flex;flex-direction:column;height:100dvh;padding-bottom:0}.th-header{margin-bottom:8px;flex-shrink:0}.th-title{font-size:20px;flex:1;min-width:0;text-align:center;word-break:var(--wb);overflow-wrap:anywhere}.th-pick-btn{flex-shrink:0;min-height:44px;font:inherit;font-size:15px;font-weight:700;color:#eaf3ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:12px;padding:8px 14px;cursor:pointer}.th-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:8px}.th-lead{margin:0;font-size:18px;line-height:1.5;color:#dce8f5;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.th-hint{margin:0;font-size:15px;color:#9fb2c8;word-break:var(--wb);overflow-wrap:anywhere}.th-label{font-size:19px;font-weight:800;color:#eaf3ff;line-height:1.3;word-break:var(--wb);overflow-wrap:anywhere}.th-sub{font-size:15px;color:#9fb2c8;margin-top:2px;word-break:var(--wb);overflow-wrap:anywhere}.th-note{margin:0;font-size:17px;line-height:1.5;color:#dce8f5;word-break:var(--wb);overflow-wrap:anywhere}.th-playing-text{font-size:14px;font-weight:700;color:#ffd45e}.th-listen{min-height:48px;font-size:16px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.th-listen.on{background:#3a2f10;border-color:#ffd45e;color:#ffd45e}.th-rows{display:flex;flex-direction:column;gap:8px}.th-row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:7px 12px}.th-row.playing{border-color:#ffd45e;background:#1a2b3f}.th-row-score{grid-column:1;grid-row:1 / span 2;overflow:visible}.th-row-score .learn-score{min-width:0;width:100%}.th-row-text{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0;align-self:end}.th-row-act{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0;align-self:start}.th-row-act .th-bar{flex:1;min-width:40px;margin-top:0}.th-row-act .th-listen{flex-shrink:0;padding:10px;min-width:108px}.th-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.th-len{font-size:16px;font-weight:700;color:#7fd7cc;white-space:nowrap}.th-bar{position:relative;display:flex;gap:4px;height:16px;margin-top:3px}.th-bar-cell{flex:1;position:relative;overflow:hidden;background:#10203a;border:1px solid #2a3f5c;border-radius:4px;box-sizing:border-box}.th-bar-cell-fill{position:absolute;left:0;top:0;bottom:0;background:#3fd6c88c;border-radius:2px;pointer-events:none}.th-bar-cell.lit{border-color:#ffd45e;box-shadow:0 0 6px #ffd45e99}.th-bar-cell.lit .th-bar-cell-fill{background:#ffd45e}.th-bar-cell.lit.full{background:#3a2f10}@media (prefers-reduced-motion: reduce){.th-bar-cell.lit{box-shadow:none}}.th-stack{display:flex;flex-direction:column;gap:12px}.th-card{display:flex;flex-direction:column;gap:8px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:12px 14px}.th-card.playing{border-color:#ffd45e;background:#1a2b3f}.th-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.th-card-score{background:#0f1a2c;border-radius:10px;padding:6px 8px;overflow:visible}.th-card-score .learn-score{min-width:0;width:100%}.th-keys{display:block;width:100%;height:64px}.th-beats{display:flex;align-items:center;gap:8px}.th-beat{width:16px;height:16px;border-radius:50%;background:#1f3350;border:2px solid #34506f}.th-beat.strong{width:22px;height:22px;border-color:#ffd45e}.th-beat.medium{width:19px;height:19px;border-color:#c9a94a;border-style:dashed}.th-beat.gap{margin-left:12px}.th-beat.now{background:#3fd6f0;border-color:#3fd6f0;box-shadow:0 0 10px #3fd6f0b3}.th-tabs{display:flex;flex-wrap:wrap;gap:8px}.th-stepper{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.th-step-btn{min-height:48px;font-size:16px}.th-step-btn:disabled{opacity:.4}.th-step-pos{font-size:15px;color:#9fb2c8;white-space:nowrap}.th-tab{min-height:48px;padding:8px 16px;font:inherit;font-size:17px;font-weight:700;color:#dce8f5;background:#16243a;border:1px solid #27405f;border-radius:12px;cursor:pointer}.th-tab.on{background:#182a4d;border-color:#6c7cf2;color:#fff;text-decoration:underline;text-underline-offset:4px}.th-more{display:flex;flex-direction:column;gap:8px}.th-more-btn{align-self:flex-start;min-height:44px;font:inherit;font-size:15px;font-weight:700;color:#9aa8ff;background:transparent;border:1px solid #3a4a8a;border-radius:999px;padding:8px 14px;cursor:pointer}.th-more-text{margin:0;font-size:17px;line-height:1.5;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere}.th-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:10px 0 calc(10px + var(--kbb, 0px));flex-shrink:0;border-top:1px solid #1c2c44}.th-nav-btn{min-height:48px;font-size:16px}.th-nav-btn:disabled{opacity:.4}.th-pos{font-size:15px;color:#9fb2c8;white-space:nowrap}.th-picker{position:fixed;inset:0;background:#0d1420;z-index:20;display:flex;flex-direction:column;padding:calc(12px + var(--sat, 0px)) max(16px,var(--sar)) calc(16px + var(--sab, 0px)) max(16px,var(--sal))}.th-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-bottom:8px}.th-picker-title{font-size:20px;font-weight:800;color:#eaf3ff}.th-picker-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.th-picker-item{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;font:inherit;font-size:18px;font-weight:700;color:#eaf3ff;background:#16243a;border:1px solid #27405f;border-radius:12px;cursor:pointer;text-align:left}.th-picker-item.on{border-color:#6c7cf2;background:#182a4d}.th-picker-icon{color:#7fd7cc;display:inline-flex;flex-shrink:0}.th-picker-name{flex:1;min-width:0;word-break:var(--wb);overflow-wrap:anywhere}.th-picker-num{font-size:14px;color:#8fa3ba}@media (max-width: 360px){.th-title{font-size:18px}.th-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}.th-row-score{grid-column:1;grid-row:1}.th-row-text{grid-column:1;grid-row:2}.th-row-act{grid-column:1;grid-row:3}}@media (orientation: landscape) and (max-height: 520px){.th-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.th-stack>.th-tabs{grid-column:1 / -1}.th-stack>.th-card:only-child,.th-stack>.th-tabs~.th-card{grid-column:1 / -1}.th-nav{padding:6px 0 calc(6px + var(--kbb, 0px))}}.learn-done-mp{font-size:15px;font-weight:700;color:#ffd45e;word-break:var(--wb);overflow-wrap:anywhere;margin:6px 0 0}.lang-select{width:100%;font-size:16px;padding:10px 12px;border-radius:10px;background:#0f1a2c;color:#eaf3ff;border:1px solid #27405f}.lang-prompt .lang-select{margin:4px 0 2px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h2{min-width:0;flex:1;word-break:var(--wb);overflow-wrap:anywhere}.btn.small{padding:6px 10px;font-size:13px;white-space:nowrap;flex-shrink:0}.song-access{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;max-width:56%}.song-access .btn.small{white-space:normal;text-align:center;line-height:1.25}.song-access small{font-size:11px;color:#7fd7cc;white-space:normal;text-align:right}.song-buy-song{font-weight:700;color:#eaf3ff;margin:-6px 0 0}.song-buy-option{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #27405f;border-radius:12px;background:#121d30}.song-buy-option h3{font-size:16px;margin:0}.song-buy-bullets{margin:0;padding-left:18px;color:#a9bdd6;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:3px;word-break:var(--wb);overflow-wrap:anywhere}.song-buy-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.sheet-pdf-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sheet-pdf-license{color:#6d829b;font-size:12px;line-height:1.5;margin:0 0 10px}.sheet-pdf-viewer-wrap{position:fixed;inset:0;display:flex;flex-direction:column;background:#0b1220;padding:calc(8px + var(--sat)) max(12px,var(--sar)) calc(12px + var(--sab)) max(12px,var(--sal))}.sheet-pdf-viewer-head{flex-shrink:0}.sheet-pdf-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.sheet-pdf-pages{display:flex;flex-direction:column;gap:8px;align-items:center}.sheet-pdf-page{background:#fff;max-width:100%;box-shadow:0 2px 8px #0006}html.web-app .song-modal .modal-head{flex-wrap:wrap;row-gap:8px}html.web-app .song-modal .modal-head>h2{order:0;flex:1 1 0;min-width:0}html.web-app .song-modal .modal-head>.hud-btn{order:1}html.web-app .song-modal .modal-head>.song-access,html.web-app .song-modal .modal-head>a.btn.small,html.web-app .song-modal .modal-head>button.btn.small{order:2;flex:0 0 100%;max-width:none}html.web-app .song-modal .modal-head>.song-access{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 10px}html.web-app .song-modal .modal-head>.song-access small{text-align:left}html.web-app .song-modal .modal-head>a.btn.small,html.web-app .song-modal .modal-head>button.btn.small,html.web-app .song-modal .modal-head>.song-access .btn.small{white-space:normal;text-align:center;line-height:1.3}html.web-app .learn:not(.th-root){max-width:none;margin:0}html.web-app .learn-scroll>*{max-width:528px;margin-inline:auto}html.web-app .learn-step-root{max-width:none;margin:0}html.web-app .learn-step-top,html.web-app .learn-keyboards{max-width:560px;margin-inline:auto;width:100%}html.web-app .learn-step-body>*{max-width:528px;margin-inline:auto;width:100%}@media (orientation: landscape) and (max-height: 520px){html.web-app .learn-step-body{grid-template-columns:minmax(0,258px) minmax(0,258px);justify-content:center}html.web-app .learn-step-body>*{max-width:none;margin-inline:0}}html.web-app .learn-scroll,html.web-app .learn-step-body{scrollbar-width:none}html.web-app .learn-scroll::-webkit-scrollbar,html.web-app .learn-step-body::-webkit-scrollbar{width:0;height:0;display:none}.song-list li.promo-item{display:block;padding:0;background:none;border:0;cursor:auto}.song-list li.promo-item:active{background:none}.promo-card{--promo-h: 140px;--promo-px: clamp(14px, calc(14px + (100% - 358px) / 6.854), 40px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,38.2%,236px);gap:6px;align-items:center;box-sizing:border-box;height:var(--promo-h);padding:0 var(--promo-px);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(120% 140% at 60% 50%,#0000 55%,#03081280),radial-gradient(60% 90% at 74% 45%,#18767c6b,#0d203800 70%),radial-gradient(60% 70% at 72% 115%,#46beb94d,#0000 65%),linear-gradient(180deg,#102139,#0b1527);border:1px solid rgba(127,215,204,.55);box-shadow:inset 0 0 0 1px #7fd7cc0f,0 0 0 1px #7fd7cc1f,0 8px 22px #00000059}.promo-card:focus-visible{outline:2px solid #7fd7cc;outline-offset:3px}@media (hover: hover) and (prefers-reduced-motion: no-preference){.promo-card{transition:transform .18s ease,box-shadow .18s ease}.promo-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #7fd7cc1a,0 14px 28px #00000073}}.promo-text{position:relative;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:8px 0}@font-face{font-family:Promo Playfair;font-style:normal;font-weight:600;font-display:swap;src:url(/promo/playfair-display-600-basic-latin.woff2) format("woff2");unicode-range:U+0020-007E}.promo-label{padding:2px 8px;border-radius:999px;border:1px solid rgba(127,215,204,.7);background:#7fd7cc14;color:#9fe6dc;font-size:10.5px;font-weight:500;letter-spacing:.02em;line-height:1.25;white-space:nowrap}.promo-title{display:flex;flex-direction:column;color:#fff;line-height:1.1;word-break:var(--wb);overflow-wrap:normal;text-shadow:0 1px 8px rgba(0,0,0,.35)}.promo-brand{font-family:Promo Playfair,Playfair Display,Georgia,Times New Roman,serif;font-weight:600;font-size:21px;line-height:1.05;letter-spacing:0}.promo-title-ko{font-weight:700;font-size:15px;line-height:1.15;letter-spacing:-.01em}.promo-desc{font-size:11px;font-weight:400;color:#b8c8da;line-height:1.3;word-break:var(--wb)}.promo-cta{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 11px;margin-top:2px;border-radius:999px;background:linear-gradient(90deg,#86f2de,#4fd0c4);color:#073331;font-weight:500;font-size:11.5px;letter-spacing:.01em;box-shadow:0 4px 12px #4fd0c459;white-space:nowrap}.promo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.promo-stage{position:relative;z-index:1;height:100%;min-width:0;perspective:600px;perspective-origin:50% 46%}.promo-glow{position:absolute;left:10%;right:10%;top:6%;height:80%;border-radius:50%;background:radial-gradient(ellipse at 50% 58%,#48e2d280,#3cc8be29 42%,#3cc8be00 70%);filter:blur(10px)}.promo-floor{position:absolute;left:-70%;right:-60%;bottom:-10px;height:36px;background:linear-gradient(180deg,#46beb933,#08142426 35%,#050e1ac7);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 46%);mask-image:linear-gradient(90deg,#0000,#000 46%)}.promo-floor:after{content:"";position:absolute;right:4%;bottom:0;width:44%;height:100%;background:radial-gradient(ellipse at 60% 100%,#4fd0c459,#4fd0c400 70%);filter:blur(5px)}.promo-floor:before{content:"";position:absolute;left:46%;right:8%;top:0;height:1px;background:linear-gradient(90deg,#7fd7cc00,#7fd7cc4d 30% 70%,#7fd7cc00)}.promo-shadow{position:absolute;height:8px;border-radius:50%;background:radial-gradient(ellipse at center,#000000e6,#0000 70%);filter:blur(2px)}.promo-shadow-front{left:50%;width:84px;margin-left:-42px;bottom:20px;z-index:2}.promo-shadow-left{left:calc(50% - 80px);width:62px;bottom:30px}.promo-shadow-right{right:calc(50% - 80px);width:62px;bottom:30px}.promo-book{position:absolute;bottom:24px;transform-style:preserve-3d;--t: 7px}.promo-book-front{left:50%;width:72px;margin-left:-36px;z-index:3;--t: 10px;transform:translateZ(10px) rotateY(-13deg)}.promo-book-left{left:calc(50% - 76px);width:54px;bottom:36px;z-index:1;--t: 7px;transform:translateZ(-40px) rotateY(26deg)}.promo-book-right{right:calc(50% - 76px);width:54px;bottom:36px;z-index:1;--t: 7px;transform:translateZ(-40px) rotateY(-26deg)}.promo-book-cover{position:relative;display:block;width:100%;aspect-ratio:2480 / 3507;transform:translateZ(var(--t));backface-visibility:hidden;border-radius:1px 2px 2px 1px;box-shadow:0 2px 5px #0006}.promo-book-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;-webkit-box-reflect:below 0 linear-gradient(rgba(255,255,255,0) 60%,rgba(255,255,255,.42) 100%)}.promo-book-cover:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(108deg,#ffffff29,#fff0 32%,#0000,#0003)}.promo-book-left .promo-book-cover:after,.promo-book-right .promo-book-cover:after{background:linear-gradient(108deg,#ffffff14,#0000 30%,#0000003d),#050c181a}.promo-book-pages{position:absolute;top:1.2%;bottom:1.2%;left:100%;width:var(--t);transform-origin:left center;transform:rotateY(-90deg);background:repeating-linear-gradient(90deg,#fbf8f1 0 1px,#d9d2c3 1px 2px);box-shadow:inset -2px 0 3px #00000059,inset 1px 0 #ffffff8c}.promo-book-bottom{position:absolute;left:1%;right:1%;top:100%;height:var(--t);transform-origin:center top;transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#ebe5d7 0 1px,#cdc6b6 1px 2px);box-shadow:inset 0 -2px 3px #0000004d}.promo-book-spine{position:absolute;top:0;bottom:0;left:0;width:var(--t);transform-origin:left center;transform:rotateY(-90deg);background:linear-gradient(90deg,#1c2d49,#30476b,#16263f);box-shadow:inset 1px 0 #ffffff24,inset -1px 0 #00000073}.promo-petal{position:absolute;width:9px;height:12px;border-radius:70% 0;background:radial-gradient(circle at 30% 30%,#ffd6e6,#ff9fc3 65%,#ef7fac);box-shadow:0 1px 2px #00000059,inset 1px 1px 1px #ffffff80;z-index:2}.promo-petal-1{left:calc(50% - 94px);bottom:10px;transform:rotate(22deg) scaleY(.7)}.promo-petal-2{left:calc(50% - 14px);bottom:9px;width:7px;height:10px;transform:rotate(-30deg) scaleY(.7)}.promo-petal-3{right:calc(50% - 96px);bottom:9px;transform:rotate(60deg) scaleY(.7)}.promo-petal-4{left:calc(50% - 60px);top:8%;width:6px;height:8px;transform:rotate(-20deg);opacity:.7;filter:blur(.5px)}.promo-petal-5{right:calc(50% - 86px);top:16%;width:5px;height:7px;transform:rotate(45deg);opacity:.6;filter:blur(.6px)}@media (max-width: 359px){.promo-card{--promo-px: 12px;grid-template-columns:minmax(0,1fr) 132px;gap:4px}.promo-text{gap:3px;padding:6px 0}.promo-brand{font-size:19px}.promo-title-ko{font-size:14px}.promo-desc{font-size:10.5px;line-height:1.25}.promo-cta{min-height:24px;font-size:11px;padding:0 10px}.promo-book-front{width:64px;margin-left:-32px}.promo-book-left,.promo-book-right{width:48px}.promo-book-left{left:calc(50% - 64px)}.promo-book-right{right:calc(50% - 64px)}.promo-shadow-front{width:74px;margin-left:-37px}}