/* Public hero animations adapted from blog-on.co.kr and place-on; scoped to MK LAB previews. */
.program-animation-placeon { --placeon-cycle-duration: 24s; }
.program-animation-blogon .app-window { overflow: hidden; position: relative; min-height: 394px; color: #25364b; background: #f7f9fc; border: 1px solid #ccd6e1; border-radius: 16px; box-shadow: 0 24px 65px rgba(23,38,63,.16); }
.program-animation-blogon .app-titlebar { height: 32px; display: flex; align-items: center; padding: 0 12px; color: #fff; background: #102642; border-bottom: 1px solid #081a31; }
.program-animation-blogon .window-dots { display: flex; gap: 6px; }
.program-animation-blogon .window-dots i { width: 7px; height: 7px; border-radius: 50%; }
.program-animation-blogon .window-dots i:nth-child(1) { background: #ff635f; }
.program-animation-blogon .window-dots i:nth-child(2) { background: #ffc043; }
.program-animation-blogon .window-dots i:nth-child(3) { background: #36c96f; }
.program-animation-blogon .app-titlebar > strong { position: absolute; left: 50%; color: rgba(255,255,255,.84); font-size: 9px; letter-spacing: -.02em; transform: translateX(-50%); }
.program-animation-blogon .app-title-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #c9d5e2; font-size: 7px; }
.program-animation-blogon .app-title-status i { width: 5px; height: 5px; background: #f0a36f; border-radius: 50%; box-shadow: 0 0 0 3px rgba(240,163,111,.12); transition: background .3s ease, box-shadow .3s ease; }
.program-animation-blogon .app-title-status b { font-weight: 700; }
.program-animation-blogon .app-window[data-demo-step="7"] .app-title-status i { background: #46c77c; box-shadow: 0 0 0 3px rgba(70,199,124,.15); }
.program-animation-blogon .app-body { display: grid; grid-template-columns: 40px minmax(145px,.9fr) minmax(175px,1.12fr) minmax(150px,.88fr); min-height: 362px; background: #fff; }
.program-animation-blogon .demo-rail { display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 10px 5px; color: #9dafc3; background: #f6f8fb; border-right: 1px solid #e2e8ef; }
.program-animation-blogon .demo-rail img { width: 25px; height: 25px; margin-bottom: 5px; border-radius: 7px; }
.program-animation-blogon .demo-rail span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 800; }
.program-animation-blogon .demo-rail span.is-active { color: #fff; background: #193b66; box-shadow: 0 5px 12px rgba(25,59,102,.2); }
.program-animation-blogon .demo-settings, .program-animation-blogon .demo-queue, .program-animation-blogon .demo-browser { min-width: 0; padding: 14px 12px 12px; }
.program-animation-blogon .demo-settings, .program-animation-blogon .demo-queue { border-right: 1px solid #e3e8ee; }
.program-animation-blogon .demo-settings > header, .program-animation-blogon .demo-queue > header, .program-animation-blogon .demo-browser > header { height: 23px; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; color: #172a42; font-size: 10px; font-weight: 850; }
.program-animation-blogon .demo-settings > header small, .program-animation-blogon .demo-queue > header small, .program-animation-blogon .demo-browser > header small { color: #9aa8b6; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.program-animation-blogon .demo-queue > header small b { color: #da522f; font-size: 8px; }
.program-animation-blogon .demo-settings > label { display: block; margin: 8px 0 4px; color: #657589; font-size: 7px; font-weight: 750; }
.program-animation-blogon .demo-select { height: 27px; display: grid; grid-template-columns: 16px 1fr 9px; align-items: center; gap: 4px; padding: 0 7px; background: #fff; border: 1px solid #dce4ed; border-radius: 5px; box-shadow: 0 2px 5px rgba(23,38,63,.025); font-size: 7px; }
.program-animation-blogon .demo-select > i { width: 13px; height: 13px; background: linear-gradient(145deg, #f4a070, #e25b36); border-radius: 50%; }
.program-animation-blogon .demo-select > i.is-keyword { display: grid; place-items: center; color: #fff; background: #3c7eb7; font-size: 7px; font-style: normal; font-weight: 900; }
.program-animation-blogon .demo-select > b { color: #8795a4; font-size: 9px; }
.program-animation-blogon .demo-option { height: 21px; display: flex; align-items: center; justify-content: space-between; color: #5e6e81; font-size: 6.5px; }
.program-animation-blogon .demo-option span { display: flex; align-items: center; gap: 5px; }
.program-animation-blogon .demo-option span i { width: 9px; height: 4px; background: #dce4eb; border-radius: 3px; }
.program-animation-blogon .demo-switch { position: relative; width: 20px; height: 11px; background: #b8c5d1; border-radius: 7px; transition: background .25s ease; }
.program-animation-blogon .demo-switch::after { position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); content: ""; transition: transform .25s ease; }
.program-animation-blogon .demo-switch.is-on { background: #183b65; }
.program-animation-blogon .demo-switch.is-on::after { transform: translateX(9px); }
.program-animation-blogon .demo-keyword { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; color: #496074; background: #fff; border: 1px solid #dce4ed; border-radius: 5px; font-size: 7px; }
.program-animation-blogon .demo-keyword i { width: 5px; height: 5px; border: solid #9ca9b7; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-1px); }
.program-animation-blogon .demo-start { width: 100%; height: 29px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; padding: 0; color: #fff; background: #183b65; border: 0; border-radius: 5px; pointer-events: none; font-size: 7px; font-weight: 800; transition: background .3s ease, box-shadow .3s ease; }
.program-animation-blogon .demo-start i { font-size: 6px; font-style: normal; }
.program-animation-blogon .app-window:not([data-demo-step="0"]) .demo-start { background: #d94b27; box-shadow: 0 5px 12px rgba(217,75,39,.19); }
.program-animation-blogon .app-window[data-demo-step="7"] .demo-start { background: #299159; }
.program-animation-blogon .demo-ai-activity { position: relative; overflow: hidden; height: 30px; display: grid; grid-template-columns: 22px minmax(0,1fr) 24px; align-items: center; gap: 5px; margin: -2px 0 7px; padding: 4px 6px; color: #5b657d; background: linear-gradient(105deg,#f5f1ff,#edf7ff); border: 1px solid #ded9f1; border-radius: 6px; font-size: 5.5px; transition: border-color .3s ease, box-shadow .3s ease; }
.program-animation-blogon .demo-ai-activity::after { position: absolute; top: 0; bottom: 0; width: 45px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); content: ""; transform: translateX(-60px); }
.program-animation-blogon .app-window:not([data-demo-step="0"]) .demo-ai-activity::after { animation: mkb-demoAiShimmer 2.1s ease infinite; }
.program-animation-blogon .demo-ai-activity > i { display: grid; width: 20px; height: 20px; place-items: center; color: #fff; background: linear-gradient(145deg,#6d5bd0,#328bd2); border-radius: 6px; font-size: 6px; font-style: normal; font-weight: 900; box-shadow: 0 3px 8px rgba(83,91,189,.2); }
.program-animation-blogon .demo-ai-activity > span { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .demo-ai-activity > b { color: #6555b8; font-size: 5px; text-align: right; }
.program-animation-blogon .app-window[data-demo-step="2"] .demo-ai-activity, .program-animation-blogon .app-window[data-demo-step="3"] .demo-ai-activity { border-color: #aeb7eb; box-shadow: 0 4px 12px rgba(85,91,183,.12); }
.program-animation-blogon .demo-progress { overflow: hidden; height: 3px; margin: 0 0 8px; background: #edf1f5; border-radius: 3px; }
.program-animation-blogon .demo-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #e56542, #d94925); border-radius: inherit; transition: width .65s cubic-bezier(.2,.8,.2,1); }
.program-animation-blogon .demo-job { position: relative; min-height: 48px; display: grid; grid-template-columns: 14px 20px minmax(0,1fr) 22px; align-items: center; gap: 5px; margin-bottom: 6px; padding: 7px 6px; background: #fff; border: 1px solid #e4e9ef; border-radius: 6px; transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease; }
.program-animation-blogon .demo-job-check { display: grid; width: 11px; height: 11px; place-items: center; color: #9ba8b5; border: 1px solid #cbd4de; border-radius: 3px; font-size: 5px; }
.program-animation-blogon .demo-job-icon { position: relative; width: 19px; height: 19px; background: #eaf0f5; border-radius: 4px; }
.program-animation-blogon .demo-job-icon::after { position: absolute; inset: 5px; border: 1px solid #8ca0b3; border-radius: 1px; content: ""; }
.program-animation-blogon .demo-job-icon.is-doc { background: #fff0e9; }
.program-animation-blogon .demo-job-icon.is-doc::after { border-color: #e06c45; border-width: 0 0 0 4px; }
.program-animation-blogon .demo-job-icon.is-photo::after { border-width: 0 0 6px 7px; border-style: solid; border-color: transparent transparent #7c9ab5 transparent; transform: rotate(0deg); }
.program-animation-blogon .demo-job-icon.is-play { border-radius: 50%; }
.program-animation-blogon .demo-job-icon.is-play::after { inset: 5px 4px 5px 7px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent #7c9ab5; }
.program-animation-blogon .demo-job-icon.is-link::after { inset: 5px 4px; border: 2px solid #7c9ab5; border-radius: 5px; transform: rotate(-35deg); }
.program-animation-blogon .demo-job > span { overflow: hidden; line-height: 1.2; }
.program-animation-blogon .demo-job strong, .program-animation-blogon .demo-job small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .demo-job strong { color: #3d4e62; font-size: 6.5px; font-weight: 800; }
.program-animation-blogon .demo-job small { margin-top: 4px; color: #9aa6b3; font-size: 5px; }
.program-animation-blogon .demo-job em { color: #a1acb7; font-size: 5.5px; font-style: normal; text-align: right; }
.program-animation-blogon .demo-job.is-current { background: #f0f7fd; border-color: #bcd6ea; box-shadow: 0 5px 13px rgba(45,108,158,.08); transform: translateX(2px); }
.program-animation-blogon .demo-job.is-current em { color: #2473ab; font-weight: 800; }
.program-animation-blogon .demo-job.is-current .demo-job-check { color: #fff; background: #2778b2; border-color: #2778b2; }
.program-animation-blogon .demo-job.is-done { background: #f6fbf8; border-color: #cfe8d9; }
.program-animation-blogon .demo-job.is-done em { color: #27915a; font-weight: 800; }
.program-animation-blogon .demo-job.is-done .demo-job-check { color: transparent; background: #34a769; border-color: #34a769; }
.program-animation-blogon .demo-job.is-done .demo-job-check::after { width: 5px; height: 3px; border: solid #fff; border-width: 0 0 1px 1px; content: ""; transform: rotate(-45deg) translate(0,-1px); }
.program-animation-blogon .demo-queue > footer { display: grid; grid-template-columns: 30px 30px 30px 1fr; gap: 5px; align-items: center; margin-top: 8px; }
.program-animation-blogon .demo-queue > footer button { height: 23px; padding: 0; color: #75869a; background: #fff; border: 1px solid #dce3ea; border-radius: 4px; pointer-events: none; font-size: 6px; }
.program-animation-blogon .demo-queue > footer button.is-primary { color: #fff; background: #183b65; border-color: #183b65; }
.program-animation-blogon .demo-queue > footer span { overflow: hidden; color: #7e8d9e; font-size: 5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .demo-browser { background: #fbfcfd; }
.program-animation-blogon .demo-browser > header small { color: #34a66a; }
.program-animation-blogon .demo-phone { overflow: hidden; position: relative; width: min(100%, 142px); height: 285px; margin: 1px auto 0; background: #fff; border: 4px solid #173554; border-radius: 20px; box-shadow: 0 8px 20px rgba(21,48,78,.16); }
.program-animation-blogon .demo-notch { position: absolute; z-index: 3; top: -1px; left: 50%; width: 50px; height: 11px; background: #173554; border-radius: 0 0 8px 8px; transform: translateX(-50%); }
.program-animation-blogon .demo-phone-bar { height: 35px; display: grid; grid-template-columns: 18px 1fr 14px; align-items: end; gap: 3px; padding: 0 8px 5px; color: #82909e; border-bottom: 1px solid #eff2f4; font-size: 4px; }
.program-animation-blogon .demo-phone-bar b { color: #03c75a; font-size: 13px; font-weight: 950; line-height: 1; }
.program-animation-blogon .demo-phone-bar i { font-size: 5px; font-style: normal; letter-spacing: 1px; }
.program-animation-blogon .demo-phone-content { position: relative; padding: 10px 9px 7px; transition: opacity .3s ease, filter .3s ease; }
.program-animation-blogon .demo-phone-kicker { display: block; margin-bottom: 3px; color: #39a96e; font-size: 4px; font-weight: 800; }
.program-animation-blogon .demo-phone-content > strong { overflow: hidden; display: block; color: #273c54; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s ease; }
.program-animation-blogon .demo-phone-lines { display: grid; gap: 4px; margin-top: 8px; }
.program-animation-blogon .demo-phone-lines i { height: 3px; background: #dce3e9; border-radius: 4px; transform-origin: left center; }
.program-animation-blogon .demo-phone-lines i:nth-child(1) { width: 85%; }
.program-animation-blogon .demo-phone-lines i:nth-child(2) { width: 68%; }
.program-animation-blogon .demo-phone-lines i:nth-child(3) { width: 76%; }
.program-animation-blogon .demo-phone-photo { overflow: hidden; position: relative; height: 70px; margin-top: 9px; background: linear-gradient(145deg, #dfe9ef, #bdcfdd); border-radius: 4px; }
.program-animation-blogon .demo-phone-photo::before { position: absolute; right: 14px; top: 10px; width: 15px; height: 15px; background: rgba(255,255,255,.86); border-radius: 50%; content: ""; }
.program-animation-blogon .demo-phone-photo i, .program-animation-blogon .demo-phone-photo b { position: absolute; bottom: -8px; background: #86a7c1; transform: rotate(45deg); }
.program-animation-blogon .demo-phone-photo i { left: 10px; width: 44px; height: 44px; }
.program-animation-blogon .demo-phone-photo b { right: 3px; width: 38px; height: 38px; background: #9fb9cc; }
.program-animation-blogon .demo-phone-lines.is-bottom { margin-top: 8px; }
.program-animation-blogon .demo-comment-trigger { overflow: hidden; height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; padding: 0 6px; color: #708093; background: #f2f5f7; border: 1px solid #e2e7eb; border-radius: 6px; font-size: 4px; transition: color .3s ease, background .3s ease, border-color .3s ease; }
.program-animation-blogon .demo-comment-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .demo-comment-trigger i { flex: 0 0 auto; width: 5px; height: 5px; background: #9aa7b4; border-radius: 50%; }
.program-animation-blogon .app-window[data-demo-step="4"] .demo-comment-trigger, .program-animation-blogon .app-window[data-demo-step="5"] .demo-comment-trigger { color: #2674ac; background: #edf7ff; border-color: #b9d9ef; }
.program-animation-blogon .demo-ai-panel { position: absolute; z-index: 4; top: 62px; right: 8px; left: 8px; min-height: 112px; padding: 9px; color: #40506a; background: rgba(255,255,255,.97); border: 1px solid #cfd5f1; border-radius: 9px; box-shadow: 0 10px 24px rgba(39,55,92,.2); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.program-animation-blogon .demo-ai-panel > header { display: grid; grid-template-columns: 22px minmax(0,1fr) 20px; align-items: center; gap: 5px; }
.program-animation-blogon .demo-ai-panel > header > i { position: relative; display: grid; width: 22px; height: 22px; place-items: center; color: #fff; background: linear-gradient(145deg,#745bd8,#278fd0); border-radius: 7px; font-size: 6px; font-style: normal; font-weight: 900; }
.program-animation-blogon .demo-ai-panel > header > i::after { position: absolute; inset: -3px; border: 1px solid rgba(100,91,205,.28); border-radius: 9px; content: ""; animation: mkb-demoAiOrbit 1.5s ease infinite; }
.program-animation-blogon .demo-ai-panel > header span { min-width: 0; }
.program-animation-blogon .demo-ai-panel > header strong, .program-animation-blogon .demo-ai-panel > header small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .demo-ai-panel > header strong { color: #293b58; font-size: 6px; }
.program-animation-blogon .demo-ai-panel > header small { margin-top: 2px; color: #8792a5; font-size: 4px; }
.program-animation-blogon .demo-ai-panel > header em { color: #6759bb; font-size: 5px; font-style: normal; font-weight: 850; text-align: right; }
.program-animation-blogon .demo-ai-track { overflow: hidden; height: 3px; margin-top: 8px; background: #edf0f7; border-radius: 3px; }
.program-animation-blogon .demo-ai-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#755ddd,#2c92d2); border-radius: inherit; transition: width .75s cubic-bezier(.2,.8,.2,1); }
.program-animation-blogon .demo-ai-panel > p { height: 22px; overflow: hidden; margin: 7px 0 5px; color: #59677a; font-size: 4.5px; font-weight: 650; line-height: 1.45; }
.program-animation-blogon .demo-ai-tags { display: flex; gap: 3px; }
.program-animation-blogon .demo-ai-tags span { overflow: hidden; min-width: 0; flex: 1; padding: 3px 2px; color: #6659b1; background: #f2efff; border-radius: 4px; font-size: 3.5px; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-blogon .app-window[data-demo-step="2"] .demo-phone-content, .program-animation-blogon .app-window[data-demo-step="3"] .demo-phone-content { opacity: .35; filter: blur(.4px); }
.program-animation-blogon .app-window[data-demo-step="2"] .demo-ai-panel, .program-animation-blogon .app-window[data-demo-step="3"] .demo-ai-panel { opacity: 1; transform: translateY(0) scale(1); }
.program-animation-blogon .demo-comment-sheet { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; height: 105px; padding: 9px 9px 8px; background: rgba(255,255,255,.98); border-top: 1px solid #dce4eb; border-radius: 10px 10px 0 0; box-shadow: 0 -8px 20px rgba(20,47,77,.16); opacity: 0; transform: translateY(105%); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.program-animation-blogon .demo-comment-sheet > header { height: 18px; display: flex; align-items: flex-start; justify-content: space-between; color: #263c54; font-size: 6px; }
.program-animation-blogon .demo-comment-sheet > header > span { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 5px; color: #6558b5; }
.program-animation-blogon .demo-comment-sheet > header > span i { display: grid; width: 12px; height: 12px; place-items: center; color: #fff; background: linear-gradient(145deg,#735cd3,#318bd0); border-radius: 4px; font-size: 3.5px; font-style: normal; font-weight: 900; }
.program-animation-blogon .demo-comment-sheet > header > span small { font-size: 4px; font-weight: 800; }
.program-animation-blogon .demo-comment-sheet > header b { color: #8c99a6; font-size: 8px; font-weight: 500; }
.program-animation-blogon .demo-comment-form { transition: opacity .2s ease, transform .2s ease; }
.program-animation-blogon .demo-comment-input { overflow: hidden; height: 39px; padding: 6px; color: #475a6e; background: #f7f9fb; border: 1px solid #dce4eb; border-radius: 5px; font-size: 5px; line-height: 1.4; }
.program-animation-blogon .demo-comment-input span { overflow: hidden; display: block; width: 100%; white-space: nowrap; }
.program-animation-blogon .demo-comment-input i { display: inline-block; width: 1px; height: 7px; margin-left: 1px; vertical-align: -1px; background: #2d74aa; opacity: 0; }
.program-animation-blogon .demo-comment-form footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: #83909d; font-size: 4px; }
.program-animation-blogon .demo-comment-form button { min-width: 31px; height: 16px; padding: 0 6px; color: #fff; background: #d94b27; border: 0; border-radius: 4px; pointer-events: none; font-size: 4.5px; font-weight: 800; }
.program-animation-blogon .demo-comment-success { position: absolute; right: 9px; bottom: 12px; left: 9px; display: flex; align-items: center; flex-direction: column; gap: 5px; color: #27915a; font-size: 5px; font-weight: 800; opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .25s ease; }
.program-animation-blogon .demo-comment-success i { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: #34a769; border-radius: 50%; font-size: 10px; font-style: normal; box-shadow: 0 5px 12px rgba(52,167,105,.2); }
.program-animation-blogon .app-window[data-demo-step="4"] .demo-comment-sheet, .program-animation-blogon .app-window[data-demo-step="5"] .demo-comment-sheet { opacity: 1; transform: translateY(0); }
.program-animation-blogon .app-window[data-demo-step="4"] .demo-comment-input span { animation: mkb-demoCommentType 1.45s steps(24,end) .28s both; }
.program-animation-blogon .app-window[data-demo-step="4"] .demo-comment-input i { opacity: 1; animation: mkb-demoCaret .55s steps(1,end) infinite; }
.program-animation-blogon .app-window[data-demo-step="5"] .demo-comment-form { opacity: 0; transform: translateY(-4px); }
.program-animation-blogon .app-window[data-demo-step="5"] .demo-comment-success { opacity: 1; transform: scale(1); }
.program-animation-blogon .demo-reactions { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 3px; color: #8794a2; font-size: 7px; }
.program-animation-blogon .demo-reactions span { transition: color .25s ease, transform .25s ease; }
.program-animation-blogon .app-window[data-demo-step="6"] .demo-reactions span:first-child, .program-animation-blogon .app-window[data-demo-step="7"] .demo-reactions span:first-child { color: #ef5b50; transform: scale(1.3); }
.program-animation-blogon .demo-live-badge { position: absolute; z-index: 4; right: 13px; bottom: 11px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #fff; background: rgba(16,38,66,.9); border-radius: 6px; box-shadow: 0 5px 15px rgba(16,38,66,.17); font-size: 5.5px; font-weight: 700; backdrop-filter: blur(5px); }
.program-animation-blogon .demo-live-badge i { width: 5px; height: 5px; background: #4bc779; border-radius: 50%; box-shadow: 0 0 0 3px rgba(75,199,121,.16); animation: mkb-demoPulse 1.2s ease infinite; }
@keyframes mkb-demoCommentType { from { width: 0; } to { width: 100%; } }
@keyframes mkb-demoCaret { 50% { opacity: 0; } }
@keyframes mkb-demoPulse { 50% { box-shadow: 0 0 0 5px rgba(75,199,121,0); } }
@keyframes mkb-demoAiShimmer { to { transform: translateX(230px); } }
@keyframes mkb-demoAiOrbit { 50% { opacity: .25; transform: scale(1.12) rotate(10deg); } }

.program-animation-placeon .app-visual { position: relative; min-width: 670px; background: #fff; border: 1px solid #d7e3df; border-radius: 22px; box-shadow: 0 38px 95px rgba(13, 75, 56, .18), 0 8px 24px rgba(24, 54, 45, .09); transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); transform-origin: left center; }
.program-animation-placeon .window-bar { height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; background: #f7f5f7; border-bottom: 1px solid #e0dfe1; border-radius: 22px 22px 0 0; }
.program-animation-placeon .window-bar strong { color: #676568; font-size: 10px; font-weight: 750; }
.program-animation-placeon .traffic-lights { display: flex; gap: 7px; }
.program-animation-placeon .traffic-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.program-animation-placeon .traffic-lights i:nth-child(2) { background: #febc2e; }
.program-animation-placeon .traffic-lights i:nth-child(3) { background: #28c840; }
.program-animation-placeon .app-body { position: relative; height: 446px; display: flex; overflow: hidden; border-radius: 0 0 22px 22px; }
.program-animation-placeon .app-sidebar { flex: 0 0 126px; padding: 24px 11px 14px; display: flex; flex-direction: column; color: #adcbc0; background: #082f25; }
.program-animation-placeon .app-logo { margin: 0 10px 28px; color: #fff; font-size: 16px; font-weight: 850; }
.program-animation-placeon .app-logo small { display: block; margin-top: 5px; color: #86a99c; font-size: 7px; font-weight: 600; }
.program-animation-placeon .mock-menu { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 11px; margin-bottom: 6px; border-radius: 9px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.program-animation-placeon .mock-menu.active { color: #fff; background: #078566; }
.program-animation-placeon .menu-icon { width: 14px; text-align: center; font-size: 12px; }
.program-animation-placeon .app-content { flex: 1; min-width: 0; background: #f5f7fb; }
.program-animation-placeon .mock-topbar { height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e3e9ef; }
.program-animation-placeon .mock-topbar strong { font-size: 10px; }
.program-animation-placeon .mock-topbar span { padding: 6px 9px; color: #176b52; background: #eef9f5; border: 1px solid #d2e9e0; border-radius: 7px; font-size: 6px; font-weight: 750; }
.program-animation-placeon .mock-panels { height: calc(100% - 52px); min-height: 0; display: grid; grid-template-columns: .92fr 1.03fr 1.35fr; grid-template-rows: minmax(0, 1fr); gap: 8px; padding: 10px; }
.program-animation-placeon .mock-card { min-width: 0; min-height: 0; padding: 12px; background: #fff; border: 1px solid #dfe6ef; border-radius: 10px; }
.program-animation-placeon .mock-card h3 { margin: 0 0 13px; font-size: 9px; }
.program-animation-placeon .mock-card label { display: block; margin: 10px 0 5px; color: #53637a; font-size: 7px; font-weight: 750; }
.program-animation-placeon .mock-select, .program-animation-placeon .keyword { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #283951; border: 1px solid #d5deea; border-radius: 6px; font-size: 7px; }
.program-animation-placeon .mock-select b { font-size: 9px; }
.program-animation-placeon .keyword span { padding: 3px 7px; color: #167258; background: #e7f7f1; border-radius: 5px; }
.program-animation-placeon .keyword em { color: #8794a6; font-style: normal; font-size: 11px; }
.program-animation-placeon .mock-option { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: #4d5e74; font-size: 7px; }
.program-animation-placeon .mock-option i { width: 13px; height: 13px; display: grid; place-items: center; border-radius: 4px; font-size: 8px; font-style: normal; }
.program-animation-placeon .mock-option .checked { color: #fff; background: #108064; }
.program-animation-placeon .settings-card button { width: 100%; height: 30px; margin-top: 81px; color: #fff; background: #087e60; border: 0; border-radius: 7px; font-size: 8px; font-weight: 750; }
.program-animation-placeon .card-heading { display: flex; align-items: center; justify-content: space-between; }
.program-animation-placeon .card-heading span { padding: 4px 7px; color: #0d785c; background: #e8f8f2; border-radius: 5px; font-size: 7px; font-weight: 800; }
.program-animation-placeon .card-heading .live-count { display: flex; align-items: center; gap: 4px; }
.program-animation-placeon .live-count i { width: 5px; height: 5px; background: #20b882; border-radius: 50%; box-shadow: 0 0 0 0 rgba(32,184,130,.45); animation: mkp-live-pulse 1.8s ease-out infinite; }
.program-animation-placeon .rank-item { min-height: 58px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid #edf1f5; }
.program-animation-placeon .rank-item > strong { width: 22px; height: 22px; display: grid; place-items: center; color: #0d785c; background: #e7f7f1; border-radius: 7px; font-size: 8px; }
.program-animation-placeon .rank-item div { font-size: 7px; font-weight: 750; }
.program-animation-placeon .rank-item small { display: block; color: #8995a5; font-size: 6px; font-weight: 600; }
.program-animation-placeon .rank-item > b { color: #176b52; font-size: 8px; }
.program-animation-placeon .rank-active { position: relative; background: linear-gradient(90deg, rgba(232,248,242,.72), transparent); }
.program-animation-placeon .rank-active > b { display: flex; align-items: center; gap: 4px; }
.program-animation-placeon .rank-active > b em { color: #9aa7b4; font-size: 6px; font-style: normal; font-weight: 600; text-decoration: line-through; }
.program-animation-placeon .rank-active > b span { display: inline-block; animation: mkp-rank-rise 3.6s ease-in-out infinite; }
.program-animation-placeon .mini-rank-chart { position: relative; height: 58px; margin-top: 9px; padding-top: 13px; overflow: hidden; }
.program-animation-placeon .mini-rank-chart svg { width: 100%; height: 42px; overflow: visible; }
.program-animation-placeon .mini-rank-chart .mini-grid { fill: none; stroke: #edf2f0; stroke-width: 1; }
.program-animation-placeon .mini-rank-chart .mini-line { fill: none; stroke: #21a979; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: mkp-draw-line 4.6s ease-in-out infinite; }
.program-animation-placeon .mini-rank-chart circle { fill: #fff; stroke: #21a979; stroke-width: 3; animation: mkp-point-pulse 2s ease-in-out infinite; }
.program-animation-placeon .mini-rank-chart span { position: absolute; left: 0; top: 0; color: #78879a; font-size: 6px; font-weight: 700; }
.program-animation-placeon .browser-card { padding: 0; overflow: hidden; }
.program-animation-placeon .browser-head { height: 36px; padding: 0 7px; display: flex; align-items: center; gap: 5px; background: #fff; border-bottom: 1px solid #e5eaf0; }
.program-animation-placeon .browser-head > span { width: 22px; height: 22px; display: grid; place-items: center; color: #52627a; background: #f5f8fa; border: 1px solid #dce3ea; border-radius: 5px; font-size: 9px; }
.program-animation-placeon .browser-head div { flex: 1; height: 22px; padding: 5px 7px; color: #8491a3; background: #f6f8fa; border-radius: 5px; font-size: 5px; overflow: hidden; }
.program-animation-placeon .browser-page { position: relative; height: calc(100% - 36px); padding: 17px 10px 10px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #f0f5f8, #fff 38%); }
.program-animation-placeon .place-brand { display: flex; align-items: center; gap: 7px; }
.program-animation-placeon .place-brand > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #03c75a; border-radius: 8px; font-size: 13px; font-weight: 950; }
.program-animation-placeon .place-brand strong, .program-animation-placeon .place-brand small { display: block; white-space: nowrap; }
.program-animation-placeon .place-brand strong { color: #1d2a3c; font-size: 7px; letter-spacing: -.03em; }
.program-animation-placeon .place-brand small { margin-top: 1px; color: #8a96a4; font-size: 5px; }
.program-animation-placeon .place-search { height: 28px; margin: 11px 0 10px; padding: 0 9px; display: flex; align-items: center; gap: 6px; color: #385166; background: #fff; border: 2px solid #03c75a; border-radius: 999px; box-shadow: 0 4px 12px rgba(3,199,90,.08); font-size: 6px; font-weight: 750; }
.program-animation-placeon .place-search i { width: 7px; height: 7px; position: relative; border: 2px solid #03c75a; border-radius: 50%; }
.program-animation-placeon .place-search i::after { content: ""; position: absolute; width: 4px; height: 2px; right: -4px; bottom: -2px; background: #03c75a; transform: rotate(45deg); border-radius: 2px; }
.program-animation-placeon .place-tabs { height: 23px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; color: #8692a0; background: #fff; border-bottom: 1px solid #e5ebee; font-size: 5px; text-align: center; }
.program-animation-placeon .place-tabs b { height: 23px; display: grid; place-items: center; color: #111d2d; border-bottom: 2px solid #111; }
.program-animation-placeon .place-result { margin-top: 10px; padding: 8px; background: #fff; border: 1px solid #e3e9eb; border-radius: 9px; box-shadow: 0 5px 15px rgba(29,55,47,.07); }
.program-animation-placeon .place-photo { height: 67px; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: repeat(2, 1fr); gap: 3px; overflow: hidden; border-radius: 6px; }
.program-animation-placeon .place-photo i { display: block; background: linear-gradient(135deg, #40312b, #99614a 55%, #d29b72); }
.program-animation-placeon .place-photo i:first-child { grid-row: 1 / 3; background: radial-gradient(circle at 60% 45%, #e5a44b 0 13%, transparent 14%), linear-gradient(135deg, #2c2421, #744a38 52%, #c28b61); }
.program-animation-placeon .place-photo i:nth-child(2) { background: linear-gradient(135deg, #e8d6c1, #88634e); }
.program-animation-placeon .place-photo i:nth-child(3) { background: linear-gradient(135deg, #5b362a, #d19a6d); }
.program-animation-placeon .place-result-copy { padding: 7px 1px 1px; }
.program-animation-placeon .place-result-copy small, .program-animation-placeon .place-result-copy strong, .program-animation-placeon .place-result-copy span { display: block; }
.program-animation-placeon .place-result-copy small { color: #8a96a3; font-size: 5px; }
.program-animation-placeon .place-result-copy strong { margin: 1px 0; color: #192538; font-size: 8px; }
.program-animation-placeon .place-result-copy span { color: #f19a16; font-size: 6px; font-weight: 800; }
.program-animation-placeon .place-result-copy em { margin-left: 3px; color: #778697; font-style: normal; font-weight: 600; }
.program-animation-placeon .place-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 7px; }
.program-animation-placeon .place-actions span { padding: 5px 1px; color: #4c5d70; background: #fff; border: 1px solid #e1e7ea; border-radius: 5px; font-size: 5px; font-weight: 750; text-align: center; }
.program-animation-placeon .naver-word { color: #03c75a; font-size: 17px; font-weight: 900; text-align: center; letter-spacing: -.06em; }
.program-animation-placeon .search-line { position: relative; height: 29px; margin: 15px 0 16px; overflow: hidden; background: #fff; border: 2px solid #03c75a; border-radius: 999px; }
.program-animation-placeon .search-line i { position: absolute; width: 30%; height: 100%; left: -40%; top: 0; background: linear-gradient(90deg, transparent, rgba(3,199,90,.16), transparent); transform: skewX(-20deg); animation: mkp-search-sweep 3.2s ease-in-out infinite; }
.program-animation-placeon .browser-chips { display: flex; gap: 6px; padding: 8px; background: #fff; border-radius: 9px; box-shadow: 0 4px 12px rgba(31,52,47,.06); }
.program-animation-placeon .browser-chips i { height: 9px; flex: 1; background: #e7ecef; border-radius: 4px; }
.program-animation-placeon .result-line { width: 72%; height: 8px; margin-top: 16px; background: #dfe5e9; border-radius: 4px; }
.program-animation-placeon .result-line.wide { width: 94%; margin-top: 23px; }
.program-animation-placeon .map-block { height: 95px; margin-top: 14px; background: linear-gradient(135deg, #deeee5, #c8e1d7); border-radius: 8px; }
.program-animation-placeon .traffic-pulse { position: absolute; right: 11px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; color: #0b7055; background: rgba(255,255,255,.94); border: 1px solid #cde8de; border-radius: 7px; box-shadow: 0 7px 18px rgba(12,77,59,.12); font-size: 6px; font-weight: 850; animation: mkp-traffic-toast 3.2s ease-in-out infinite; }
.program-animation-placeon .traffic-pulse i { width: 6px; height: 6px; background: #21b980; border-radius: 50%; box-shadow: 0 0 0 0 rgba(33,185,128,.35); animation: mkp-live-pulse 1.5s ease-out infinite; }
.program-animation-placeon .float-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 195px; padding: 12px 15px; background: rgba(255,255,255,.96); border: 1px solid #d9e5e0; border-radius: 13px; box-shadow: 0 15px 34px rgba(11,54,42,.16); transform: rotateY(2deg); }
.program-animation-placeon .float-badge > span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 9px; font-size: 11px; font-weight: 850; }
.program-animation-placeon .float-badge strong, .program-animation-placeon .float-badge small { display: block; }
.program-animation-placeon .float-badge strong { font-size: 10px; }
.program-animation-placeon .float-badge small { margin-top: 2px; color: #7a8898; font-size: 7px; }
.program-animation-placeon .float-badge-top { top: -27px; right: 18px; }
.program-animation-placeon .float-badge-bottom { left: 18px; bottom: -45px; }
.program-animation-placeon .float-badge-top { animation: mkp-badge-float 3.2s ease-in-out infinite; }
.program-animation-placeon .float-badge-bottom { animation: mkp-badge-float 3.2s .8s ease-in-out infinite; }
.program-animation-placeon .float-badge-bottom > span { background: #152c53; }
.program-animation-placeon .float-badge .pulse-icon { box-shadow: 0 0 0 0 rgba(23,107,82,.35); animation: mkp-live-pulse 1.8s ease-out infinite; }

@keyframes mkp-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,162,126,.42); } 70%, 100% { box-shadow: 0 0 0 8px rgba(46,162,126,0); } }
@keyframes mkp-rank-rise { 0%, 18% { opacity: .45; transform: translateY(5px); } 38%, 84% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: .45; transform: translateY(-2px); } }
@keyframes mkp-draw-line { 0%, 12% { stroke-dashoffset: 300; opacity: .3; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .3; } }
@keyframes mkp-point-pulse { 0%, 100% { transform: scale(.82); transform-origin: center; } 50% { transform: scale(1.18); transform-origin: center; } }
@keyframes mkp-search-sweep { 0%, 20% { left: -40%; } 65%, 100% { left: 115%; } }
@keyframes mkp-traffic-toast { 0%, 14%, 100% { opacity: 0; transform: translateY(7px); } 28%, 78% { opacity: 1; transform: translateY(0); } }
@keyframes mkp-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.program-animation-placeon .enterprise-window-status { white-space: nowrap; }
.program-animation-placeon .enterprise-sidebar-account { margin-top: auto; padding: 9px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.program-animation-placeon .enterprise-sidebar-account strong, .program-animation-placeon .enterprise-sidebar-account small, .program-animation-placeon .enterprise-sidebar-account span { display: block; }
.program-animation-placeon .enterprise-sidebar-account strong { color: #fff; font-size: 7px; }
.program-animation-placeon .enterprise-sidebar-account small { margin: 2px 0 7px; overflow: hidden; color: #7fa396; font-size: 5px; text-overflow: ellipsis; }
.program-animation-placeon .enterprise-sidebar-account span { padding: 5px; color: #466b5e; background: rgba(255,255,255,.94); border-radius: 5px; font-size: 6px; font-weight: 800; text-align: center; }
.program-animation-placeon .enterprise-panel-caption { display: block; margin: -10px 0 5px; color: #8a96a6; font-size: 5px; line-height: 1.4; }
.program-animation-placeon .enterprise-app-visual .settings-card, .program-animation-placeon .enterprise-app-visual .enterprise-bundle-card { display: flex; flex-direction: column; }
.program-animation-placeon .enterprise-code-verified { min-height: 30px; margin-top: 6px; padding: 5px 6px; display: flex; align-items: center; gap: 5px; color: #08795b; background: #e9f8f3; border: 1px solid #cbeade; border-radius: 6px; }
.program-animation-placeon .enterprise-code-verified > i { flex: 0 0 16px; height: 16px; display: grid; place-items: center; color: #fff; background: #12a078; border-radius: 50%; font-size: 7px; font-style: normal; }
.program-animation-placeon .enterprise-code-verified > span { font-size: 5px; font-weight: 850; line-height: 1.35; }
.program-animation-placeon .enterprise-code-verified small { display: block; color: #639383; font-size: 4px; font-weight: 650; }
.program-animation-placeon .settings-card .enterprise-add-button { height: 26px; margin-top: 6px; }
.program-animation-placeon .enterprise-delay-row { margin-top: 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.program-animation-placeon .enterprise-delay-row span { padding: 5px 4px; color: #5c6e83; background: #f7f9fb; border: 1px solid #dce4ec; border-radius: 5px; font-size: 5px; text-align: center; }
.program-animation-placeon .enterprise-pattern-row { min-height: 28px; margin-top: 8px; padding: 0 7px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; color: #52647a; background: #fff; border: 1px solid #dce4ec; border-radius: 5px; font-size: 5px; }
.program-animation-placeon .enterprise-pattern-row b { overflow: hidden; color: #26394e; font-size: 5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.program-animation-placeon .enterprise-pattern-row i { color: #7890a1; font-size: 7px; font-style: normal; }
.program-animation-placeon .settings-card .mock-option { margin-top: 9px; }
.program-animation-placeon .enterprise-work-actions { margin-top: auto; padding-top: 8px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 4px; }
.program-animation-placeon .enterprise-work-actions span, .program-animation-placeon .enterprise-work-actions b { padding: 6px 3px; border-radius: 5px; font-size: 4.5px; text-align: center; }
.program-animation-placeon .enterprise-work-actions span { color: #65768b; border: 1px solid #dce4ec; }
.program-animation-placeon .enterprise-work-actions b { color: #fff; background: #078566; }
.program-animation-placeon .enterprise-bundle-card .rank-item { min-height: var(--enterprise-group-row-height, 64px); }
.program-animation-placeon .enterprise-bundle-card .rank-item > b { padding: 3px 6px; color: #08785c; background: #e8f8f2; border-radius: 5px; font-size: 6px; }
.program-animation-placeon .enterprise-group-list { --enterprise-group-row-height: 78px; --enterprise-group-step: 88px; --enterprise-group-step-double: 176px; position: relative; flex: 1; min-height: 210px; margin-top: 6px; overflow: hidden; }
.program-animation-placeon .enterprise-group-item { position: absolute; inset: 0 0 auto; min-height: var(--enterprise-group-row-height); margin: 0; padding: 0 7px; background: #fff; border: 1px solid #e1e8ee; border-radius: 8px; will-change: transform, background-color, border-color, box-shadow; }
.program-animation-placeon .enterprise-group-one { animation: mkp-enterprise-group-one-cycle var(--placeon-cycle-duration) cubic-bezier(.45,0,.2,1) infinite; }
.program-animation-placeon .enterprise-group-two { animation: mkp-enterprise-group-two-cycle var(--placeon-cycle-duration) cubic-bezier(.45,0,.2,1) infinite; }
.program-animation-placeon .enterprise-group-three { animation: mkp-enterprise-group-three-cycle var(--placeon-cycle-duration) cubic-bezier(.45,0,.2,1) infinite; }
.program-animation-placeon .enterprise-group-item > b::after { display: block; min-width: 28px; text-align: center; }
.program-animation-placeon .enterprise-group-one > b::after { content: "작업 중"; animation: mkp-enterprise-group-one-status var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .enterprise-group-two > b::after { content: "대기"; animation: mkp-enterprise-group-two-status var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .enterprise-group-three > b::after { content: "대기"; animation: mkp-enterprise-group-three-status var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .bundle-summary { flex: 0 0 30px; height: 30px; margin-top: 8px; padding: 8px 9px; background: #f3f7f6; border: 1px solid #e0e9e5; border-radius: 7px; }
.program-animation-placeon .bundle-summary span { position: static; color: #607286; }
.program-animation-placeon .enterprise-browser-toolbar { height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 5px; background: #fff; border-bottom: 1px solid #e5eaf0; }
.program-animation-placeon .enterprise-browser-toolbar strong { margin-right: auto; color: #26384d; font-size: 7px; }
.program-animation-placeon .enterprise-browser-toolbar span, .program-animation-placeon .enterprise-browser-toolbar b { padding: 4px 6px; border-radius: 5px; font-size: 5px; }
.program-animation-placeon .enterprise-browser-toolbar span { color: #d66b2d; background: #fff4ec; border: 1px solid #ffd5bb; }
.program-animation-placeon .enterprise-browser-toolbar b { color: #a66800; background: #fff7df; border: 1px solid #f1dda3; }
.program-animation-placeon .enterprise-browser-status { position: relative; width: 38px; height: 18px; overflow: hidden; }
.program-animation-placeon .enterprise-browser-status i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font-size: 5px; font-style: normal; white-space: nowrap; }
.program-animation-placeon .enterprise-browser-status i:nth-child(1) { animation: mkp-enterprise-browser-status-search var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-status i:nth-child(2) { animation: mkp-enterprise-browser-status-scroll var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-status i:nth-child(3) { animation: mkp-enterprise-browser-status-click var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-toolbar + .browser-head { height: 32px; }
.program-animation-placeon .enterprise-browser-toolbar ~ .browser-page { height: calc(100% - 64px); padding-top: 13px; }
.program-animation-placeon .enterprise-browser-url { position: relative; white-space: nowrap; }
.program-animation-placeon .enterprise-browser-url i { position: absolute; inset: 5px 7px; overflow: hidden; opacity: 0; font-size: 5px; font-style: normal; text-overflow: ellipsis; }
.program-animation-placeon .enterprise-browser-url i:nth-child(1) { animation: mkp-enterprise-browser-url-home var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-url i:nth-child(2) { animation: mkp-enterprise-browser-url-search var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-url i:nth-child(3) { animation: mkp-enterprise-browser-url-place var(--placeon-cycle-duration) linear infinite; }
.program-animation-placeon .enterprise-browser-track { position: relative; z-index: 1; will-change: transform; animation: mkp-enterprise-browser-scroll var(--placeon-cycle-duration) cubic-bezier(.38,.05,.22,1) infinite; }
.program-animation-placeon .enterprise-primary-result { position: relative; overflow: hidden; animation: mkp-enterprise-result-focus var(--placeon-cycle-duration) ease-in-out infinite; }
.program-animation-placeon .enterprise-primary-result::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 34px; height: 34px; border: 2px solid rgba(3,199,90,.5); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); animation: mkp-enterprise-result-click var(--placeon-cycle-duration) ease-out infinite; pointer-events: none; }
.program-animation-placeon .enterprise-primary-result .place-result-copy strong { font-size: 0; }
.program-animation-placeon .enterprise-primary-result .place-result-copy strong::after { content: "예시 매장 A"; font-size: 8px; animation: mkp-enterprise-result-name var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .enterprise-primary-result .place-result-copy em { font-size: 0; }
.program-animation-placeon .enterprise-primary-result .place-result-copy em::after { content: "000001"; font-size: 6px; animation: mkp-enterprise-result-code var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .place-search > span { font-size: 0; }
.program-animation-placeon .place-search > span::after { content: "지역명 맛집"; font-size: 6px; animation: mkp-enterprise-search-keyword var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .enterprise-next-result { min-height: 49px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; }
.program-animation-placeon .enterprise-next-result > strong { width: 25px; height: 25px; display: grid; place-items: center; color: #078566; background: #e8f8f2; border-radius: 7px; font-size: 7px; }
.program-animation-placeon .enterprise-next-result .place-result-copy { padding: 0; }
.program-animation-placeon .enterprise-next-result .place-result-copy b { color: #26384d; font-size: 0; }
.program-animation-placeon .enterprise-next-result .place-result-copy b::after { content: ""; font-size: 7px; animation: mkp-enterprise-next-result-name var(--placeon-cycle-duration) step-end infinite; }
.program-animation-placeon .enterprise-next-result .place-result-copy span { color: #168367; }
.program-animation-placeon .place-actions span { animation: mkp-enterprise-browser-action var(--placeon-cycle-duration) ease-in-out infinite; }
.program-animation-placeon .place-actions span:nth-child(2) { animation-name: mkp-enterprise-browser-scroll-action; }
.program-animation-placeon .place-actions span:nth-child(3) { animation-name: mkp-enterprise-browser-click-action; }
.program-animation-placeon .browser-page .traffic-pulse { z-index: 2; animation: mkp-enterprise-success-cycle var(--placeon-cycle-duration) ease-in-out infinite; }
.program-animation-placeon .vpn-auto-toast { position: absolute; left: 60%; top: 49%; z-index: 12; width: 238px; padding: 11px 13px 14px; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 10px; overflow: hidden; color: #26394e; background: rgba(255,255,255,.98); border: 1px solid #bfe4d7; border-radius: 12px; box-shadow: 0 20px 48px rgba(5,52,39,.25); opacity: 0; transform: translate(-50%, -50%) scale(.92); animation: mkp-vpn-auto-toast-cycle var(--placeon-cycle-duration) cubic-bezier(.2,.75,.25,1) infinite; pointer-events: none; }
.program-animation-placeon .vpn-auto-toast .vpn-auto-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: #078566; border-radius: 9px; font-size: 13px; font-weight: 900; animation: mkp-vpn-auto-icon-cycle var(--placeon-cycle-duration) ease-in-out infinite; }
.program-animation-placeon .vpn-auto-toast strong, .program-animation-placeon .vpn-auto-toast small { display: block; }
.program-animation-placeon .vpn-auto-toast strong { font-size: 8px; }
.program-animation-placeon .vpn-auto-toast small { margin-top: 2px; color: #718297; font-size: 5px; }
.program-animation-placeon .vpn-auto-toast > i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #19ae80, #75d6b4); transform-origin: left; animation: mkp-vpn-auto-progress var(--placeon-cycle-duration) linear infinite; }
@keyframes mkp-enterprise-group-one-cycle { 0%, 27% { transform: translateY(0); background-color: #e9f8f3; border-color: #bee6d7; box-shadow: 0 0 0 3px rgba(23,107,82,.08); } 32%, 61% { transform: translateY(var(--enterprise-group-step-double)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 66%, 94% { transform: translateY(var(--enterprise-group-step)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 99%, 100% { transform: translateY(0); background-color: #e9f8f3; border-color: #bee6d7; box-shadow: 0 0 0 3px rgba(23,107,82,.08); } }
@keyframes mkp-enterprise-group-two-cycle { 0%, 27% { transform: translateY(var(--enterprise-group-step)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 32%, 61% { transform: translateY(0); background-color: #e9f8f3; border-color: #bee6d7; box-shadow: 0 0 0 3px rgba(23,107,82,.08); } 66%, 94% { transform: translateY(var(--enterprise-group-step-double)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 99%, 100% { transform: translateY(var(--enterprise-group-step)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } }
@keyframes mkp-enterprise-group-three-cycle { 0%, 27% { transform: translateY(var(--enterprise-group-step-double)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 32%, 61% { transform: translateY(var(--enterprise-group-step)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } 66%, 94% { transform: translateY(0); background-color: #e9f8f3; border-color: #bee6d7; box-shadow: 0 0 0 3px rgba(23,107,82,.08); } 99%, 100% { transform: translateY(var(--enterprise-group-step-double)); background-color: #fff; border-color: #e1e8ee; box-shadow: none; } }
@keyframes mkp-enterprise-group-one-status { 0%, 27%, 99%, 100% { content: "작업 중"; } 28%, 98% { content: "완료"; } }
@keyframes mkp-enterprise-group-two-status { 0%, 27%, 99%, 100% { content: "대기"; } 28%, 61% { content: "작업 중"; } 62%, 98% { content: "완료"; } }
@keyframes mkp-enterprise-group-three-status { 0%, 61%, 99%, 100% { content: "대기"; } 62%, 94% { content: "작업 중"; } 95%, 98% { content: "완료"; } }
@keyframes mkp-enterprise-browser-scroll { 0%, 2%, 32%, 35%, 65%, 68%, 98%, 100% { transform: translateY(0); } 12%, 43%, 76% { transform: translateY(-28px); } 24%, 27%, 57%, 60%, 90%, 94% { transform: translateY(-92px); } }
@keyframes mkp-enterprise-browser-status-search { 0%, 8%, 32%, 41%, 65%, 74%, 98%, 100% { opacity: 1; } 10%, 30%, 43%, 63%, 76%, 96% { opacity: 0; } }
@keyframes mkp-enterprise-browser-status-scroll { 0%, 8%, 20%, 41%, 53%, 74%, 86%, 100% { opacity: 0; } 10%, 18%, 43%, 51%, 76%, 84% { opacity: 1; } }
@keyframes mkp-enterprise-browser-status-click { 0%, 19%, 32%, 52%, 65%, 85%, 98%, 100% { opacity: 0; } 21%, 29%, 54%, 62%, 87%, 95% { opacity: 1; } }
@keyframes mkp-enterprise-browser-url-home { 0%, 5%, 32%, 38%, 65%, 71%, 98%, 100% { opacity: 1; } 7%, 30%, 40%, 63%, 73%, 96% { opacity: 0; } }
@keyframes mkp-enterprise-browser-url-search { 0%, 5%, 22%, 38%, 55%, 71%, 88%, 100% { opacity: 0; } 7%, 20%, 40%, 53%, 73%, 86% { opacity: 1; } }
@keyframes mkp-enterprise-browser-url-place { 0%, 21%, 32%, 54%, 65%, 87%, 98%, 100% { opacity: 0; } 23%, 30%, 56%, 63%, 89%, 96% { opacity: 1; } }
@keyframes mkp-enterprise-search-keyword { 0%, 31%, 99%, 100% { content: "지역명 맛집"; } 32%, 64% { content: "지역명 카페"; } 65%, 98% { content: "지역명 디저트"; } }
@keyframes mkp-enterprise-result-name { 0%, 31%, 99%, 100% { content: "예시 매장 A"; } 32%, 64% { content: "예시 매장 B"; } 65%, 98% { content: "예시 매장 C"; } }
@keyframes mkp-enterprise-result-code { 0%, 31%, 99%, 100% { content: "000001"; } 32%, 64% { content: "000002"; } 65%, 98% { content: "000003"; } }
@keyframes mkp-enterprise-next-result-name { 0%, 31%, 99%, 100% { content: "예시 매장 B"; } 32%, 64% { content: "예시 매장 C"; } 65%, 98% { content: "예시 매장 A"; } }
@keyframes mkp-enterprise-browser-action { 0%, 6%, 28%, 34%, 39%, 61%, 67%, 72%, 94%, 100% { color: #4c5d70; background: #fff; border-color: #e1e7ea; } 7%, 13%, 40%, 46%, 73%, 79% { color: #08785c; background: #e8f8f2; border-color: #bfe4d7; } }
@keyframes mkp-enterprise-browser-scroll-action { 0%, 12%, 28%, 34%, 45%, 61%, 67%, 78%, 94%, 100% { color: #4c5d70; background: #fff; border-color: #e1e7ea; } 14%, 20%, 47%, 53%, 80%, 86% { color: #08785c; background: #e8f8f2; border-color: #bfe4d7; } }
@keyframes mkp-enterprise-browser-click-action { 0%, 19%, 32%, 52%, 65%, 85%, 98%, 100% { color: #4c5d70; background: #fff; border-color: #e1e7ea; } 21%, 28%, 54%, 61%, 87%, 94% { color: #fff; background: #078566; border-color: #078566; } }
@keyframes mkp-enterprise-result-focus { 0%, 19%, 31%, 52%, 64%, 85%, 98%, 100% { border-color: #e3e9eb; box-shadow: 0 5px 15px rgba(29,55,47,.07); } 21%, 28%, 54%, 61%, 87%, 94% { border-color: #68cbaa; box-shadow: 0 0 0 3px rgba(3,199,90,.09), 0 8px 18px rgba(29,55,47,.1); } }
@keyframes mkp-enterprise-result-click { 0%, 20%, 29%, 53%, 62%, 86%, 95%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 23%, 56%, 89% { opacity: .8; transform: translate(-50%, -50%) scale(1); } 28%, 61%, 94% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes mkp-enterprise-success-cycle { 0%, 21%, 31%, 54%, 64%, 87%, 98%, 100% { opacity: 0; transform: translateY(7px); } 24%, 29%, 57%, 62%, 90%, 96% { opacity: 1; transform: translateY(0); } }
/* Each VPN notice stays fully visible for 1.92s, plus its entrance and exit. */
@keyframes mkp-vpn-auto-toast-cycle { 0%, 23%, 34%, 56%, 67%, 89%, 100% { opacity: 0; transform: translate(-50%, -42%) scale(.92); } 24%, 32%, 57%, 65%, 90%, 98% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes mkp-vpn-auto-icon-cycle { 0%, 23% { transform: rotate(0); } 32%, 56% { transform: rotate(360deg); } 65%, 89% { transform: rotate(720deg); } 98%, 100% { transform: rotate(1080deg); } }
@keyframes mkp-vpn-auto-progress { 0%, 23%, 34%, 56%, 67%, 89%, 100% { transform: scaleX(0); } 31%, 33%, 64%, 66%, 97%, 99% { transform: scaleX(1); } }

/* Fit the existing hero scenes to a program card without scaling down the whole UI. */
.program-animation-art { container-type: inline-size; width: 100%; min-width: 0; line-height: 1.5; }
.program-animation-art [inert] { user-select: none; }
.program-animation-art em { font-style: normal; }
.program-animation-caption { margin-top: 16px; font-size: 10px; line-height: 1.8; color: var(--sub); word-break: keep-all; }
.program-animation[data-playing=false] .program-animation-art *,
.program-animation[data-playing=false] .program-animation-art *::before,
.program-animation[data-playing=false] .program-animation-art *::after { animation-play-state: paused !important; }

.program-animation-blogon .app-window { min-height: 0; border-radius: 12px; box-shadow: 0 12px 30px #17263f12; }
.program-animation-blogon .app-titlebar { height: 36px; }
.program-animation-blogon .app-titlebar > strong { font-size: 11px; }
.program-animation-blogon .app-title-status { font-size: 9px; }
.program-animation-blogon .app-body { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); min-height: 380px; }
.program-animation-blogon .demo-rail, .program-animation-blogon .demo-settings { display: none; }
.program-animation-blogon .demo-queue, .program-animation-blogon .demo-browser { padding: 14px 12px 24px; }
.program-animation-blogon .demo-queue > header, .program-animation-blogon .demo-browser > header { font-size: 11px; }
.program-animation-blogon .demo-queue > header small, .program-animation-blogon .demo-browser > header small,
.program-animation-blogon .demo-queue > header small b { font-size: 8px; }
.program-animation-blogon .demo-ai-activity { height: 36px; font-size: 8px; grid-template-columns: 22px minmax(0,1fr) 22px; }
.program-animation-blogon .demo-ai-activity > i, .program-animation-blogon .demo-ai-activity > b { font-size: 8px; }
.program-animation-blogon .demo-job { min-height: 54px; grid-template-columns: 13px minmax(0,1fr) 23px; gap: 6px; }
.program-animation-blogon .demo-job-icon { display: none; }
.program-animation-blogon .demo-job strong { font-size: 10px; }
.program-animation-blogon .demo-job small, .program-animation-blogon .demo-job em { font-size: 8px; }
.program-animation-blogon .demo-job-check { font-size: 7px; }
.program-animation-blogon .demo-queue > footer { grid-template-columns: 24px 24px 24px 1fr; }
.program-animation-blogon .demo-queue > footer button, .program-animation-blogon .demo-queue > footer span { font-size: 7px; }
.program-animation-blogon .demo-phone { width: min(100%,190px); height: 310px; }
.program-animation-blogon .demo-phone-bar { font-size: 7px; }
.program-animation-blogon .demo-phone-kicker { font-size: 7px; }
.program-animation-blogon .demo-phone-content > strong { font-size: 10px; }
.program-animation-blogon .demo-phone-photo { height: 82px; }
.program-animation-blogon .demo-comment-trigger { font-size: 7px; height: 27px; }
.program-animation-blogon .demo-reactions { font-size: 11px; }
.program-animation-blogon .demo-ai-panel { top: 70px; min-height: 134px; padding: 9px 7px; }
.program-animation-blogon .demo-ai-panel > header { grid-template-columns: 22px minmax(0,1fr) 26px; }
.program-animation-blogon .demo-ai-panel > header strong { font-size: 8px; }
.program-animation-blogon .demo-ai-panel > header small { font-size: 6px; }
.program-animation-blogon .demo-ai-panel > header em { font-size: 7px; }
.program-animation-blogon .demo-ai-panel > p { height: auto; min-height: 32px; font-size: 8px; }
.program-animation-blogon .demo-ai-tags span { font-size: 6px; }
.program-animation-blogon .demo-comment-sheet { height: 122px; }
.program-animation-blogon .demo-comment-sheet > header { height: 24px; font-size: 9px; }
.program-animation-blogon .demo-comment-sheet > header > span small { font-size: 6px; }
.program-animation-blogon .demo-comment-input { font-size: 7px; }
.program-animation-blogon .demo-comment-form footer { font-size: 7px; }
.program-animation-blogon .demo-comment-form footer button { font-size: 7px; }
.program-animation-blogon .demo-comment-success { font-size: 9px; bottom: 20px; }
.program-animation-blogon .demo-live-badge { font-size: 9px; bottom: 8px; }

.program-animation-placeon .app-visual { width: 100%; min-width: 0; transform: none; border-radius: 12px; box-shadow: 0 12px 30px #0d4b3812; }
.program-animation-placeon .window-bar { height: 36px; border-radius: 12px 12px 0 0; padding: 0 12px; }
.program-animation-placeon .window-bar strong { font-size: 10px; }
.program-animation-placeon .traffic-lights { gap: 5px; }
.program-animation-placeon .traffic-lights i { width: 7px; height: 7px; }
.program-animation-placeon .app-body { height: 380px; border-radius: 0 0 12px 12px; }
.program-animation-placeon .app-sidebar, .program-animation-placeon .enterprise-app-visual .settings-card, .program-animation-placeon .float-badge { display: none; }
.program-animation-placeon .mock-topbar { height: 40px; padding: 0 12px; }
.program-animation-placeon .mock-topbar strong { font-size: 11px; }
.program-animation-placeon .mock-topbar span { font-size: 8px; padding: 3px 7px; }
.program-animation-placeon .mock-panels { height: calc(100% - 40px); grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); padding: 9px; }
.program-animation-placeon .mock-card { padding: 10px; }
.program-animation-placeon .mock-card h3 { font-size: 11px; }
.program-animation-placeon .card-heading span { font-size: 9px; }
.program-animation-placeon .enterprise-panel-caption { font-size: 8px; }
.program-animation-placeon .enterprise-group-list { --enterprise-group-row-height: 64px; --enterprise-group-step: 74px; --enterprise-group-step-double: 148px; min-height: 215px; }
.program-animation-placeon .rank-item { grid-template-columns: 20px minmax(0,1fr); gap: 6px; align-content: center; }
.program-animation-placeon .rank-item div { font-size: 10px; }
.program-animation-placeon .rank-item small { font-size: 7px; }
.program-animation-placeon .enterprise-bundle-card .rank-item > b { grid-column: 2; justify-self: start; font-size: 8px; padding: 2px 5px; }
.program-animation-placeon .bundle-summary { padding: 7px; }
.program-animation-placeon .bundle-summary span { font-size: 7px; }
.program-animation-placeon .browser-card { padding: 0; }
.program-animation-placeon .enterprise-browser-toolbar { padding: 0 7px; }
.program-animation-placeon .enterprise-browser-toolbar strong { font-size: 9px; }
.program-animation-placeon .enterprise-browser-toolbar > span { display: none; }
.program-animation-placeon .enterprise-browser-status { width: 52px; height: 22px; }
.program-animation-placeon .enterprise-browser-status i { font-size: 8px; }
.program-animation-placeon .enterprise-browser-url i { font-size: 7px; }
.program-animation-placeon .place-brand strong { font-size: 10px; }
.program-animation-placeon .place-brand small, .program-animation-placeon .place-tabs { font-size: 8px; }
.program-animation-placeon .place-search > span::after { font-size: 10px; }
.program-animation-placeon .enterprise-primary-result .place-result-copy strong::after { font-size: 11px; }
.program-animation-placeon .place-result-copy small { font-size: 8px; }
.program-animation-placeon .place-result-copy span,
.program-animation-placeon .enterprise-primary-result .place-result-copy em::after { font-size: 8px; }
.program-animation-placeon .enterprise-next-result .place-result-copy b::after { font-size: 10px; }
.program-animation-placeon .place-actions span { font-size: 8px; }
.program-animation-placeon .traffic-pulse { font-size: 9px; }
.program-animation-placeon .vpn-auto-toast { left: 50%; width: min(280px,calc(100% - 28px)); }
.program-animation-placeon .vpn-auto-toast strong { font-size: 11px; }
.program-animation-placeon .vpn-auto-toast small { font-size: 8px; line-height: 1.7; }

@container (max-width: 380px) {
    .program-animation-blogon .app-body { grid-template-columns: minmax(0,1fr); }
    .program-animation-blogon .demo-queue { display: none; }
    .program-animation-blogon .demo-phone { width: 210px; }
    .program-animation-placeon .mock-panels { grid-template-columns: minmax(0,1fr); }
    .program-animation-placeon .enterprise-app-visual .enterprise-bundle-card { display: none; }
    .program-animation-placeon .place-photo { height: 75px; }
}
@media (prefers-reduced-motion: reduce) {
    .program-animation-art *, .program-animation-art *::before, .program-animation-art *::after { transition: none !important; }
}