/* Extracted target-only styling from blog-on.co.kr; no site layout or external resources. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: #263548;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
#demo-viewport { position: fixed; inset: 0; overflow: hidden; }
#demo-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 635.4319px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
}
#demo-native {
  width: 683px;
  height: 434px;
  transform: scale(1.4641288433);
  transform-origin: top left;
}
.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); }
.app-titlebar { height: 32px; display: flex; align-items: center; padding: 0 12px; color: #fff; background: #102642; border-bottom: 1px solid #081a31; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; }
.window-dots i:nth-child(1) { background: #ff635f; }
.window-dots i:nth-child(2) { background: #ffc043; }
.window-dots i:nth-child(3) { background: #36c96f; }
.app-titlebar > strong { position: absolute; left: 50%; color: rgba(255,255,255,.84); font-size: 9px; letter-spacing: -.02em; transform: translateX(-50%); }
.app-title-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #c9d5e2; font-size: 7px; }
.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; }
.app-title-status b { font-weight: 700; }
.app-window[data-demo-step="7"] .app-title-status i { background: #46c77c; box-shadow: 0 0 0 3px rgba(70,199,124,.15); }
.app-body { display: grid; grid-template-columns: 40px minmax(145px,.9fr) minmax(175px,1.12fr) minmax(150px,.88fr); min-height: 362px; background: #fff; }
.demo-rail { display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 10px 5px; color: #9dafc3; background: #f6f8fb; border-right: 1px solid #e2e8ef; }
.demo-rail img { width: 25px; height: 25px; margin-bottom: 5px; border-radius: 7px; }
.demo-rail span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 800; }
.demo-rail span.is-active { color: #fff; background: #193b66; box-shadow: 0 5px 12px rgba(25,59,102,.2); }
.demo-settings, .demo-queue, .demo-browser { min-width: 0; padding: 14px 12px 12px; }
.demo-settings, .demo-queue { border-right: 1px solid #e3e8ee; }
.demo-settings > header, .demo-queue > header, .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; }
.demo-settings > header small, .demo-queue > header small, .demo-browser > header small { color: #9aa8b6; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.demo-queue > header small b { color: #da522f; font-size: 8px; }
.demo-settings > label { display: block; margin: 8px 0 4px; color: #657589; font-size: 7px; font-weight: 750; }
.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; }
.demo-select > i { width: 13px; height: 13px; background: linear-gradient(145deg, #f4a070, #e25b36); border-radius: 50%; }
.demo-select > i.is-keyword { display: grid; place-items: center; color: #fff; background: #3c7eb7; font-size: 7px; font-style: normal; font-weight: 900; }
.demo-select > b { color: #8795a4; font-size: 9px; }
.demo-option { height: 21px; display: flex; align-items: center; justify-content: space-between; color: #5e6e81; font-size: 6.5px; }
.demo-option span { display: flex; align-items: center; gap: 5px; }
.demo-option span i { width: 9px; height: 4px; background: #dce4eb; border-radius: 3px; }
.demo-switch { position: relative; width: 20px; height: 11px; background: #b8c5d1; border-radius: 7px; transition: background .25s ease; }
.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; }
.demo-switch.is-on { background: #183b65; }
.demo-switch.is-on::after { transform: translateX(9px); }
.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; }
.demo-keyword i { width: 5px; height: 5px; border: solid #9ca9b7; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-1px); }
.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; }
.demo-start i { font-size: 6px; font-style: normal; }
.app-window:not([data-demo-step="0"]) .demo-start { background: #d94b27; box-shadow: 0 5px 12px rgba(217,75,39,.19); }
.app-window[data-demo-step="7"] .demo-start { background: #299159; }
.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; }
.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); }
.app-window:not([data-demo-step="0"]) .demo-ai-activity::after { animation: demoAiShimmer 2.1s ease infinite; }
.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); }
.demo-ai-activity > span { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.demo-ai-activity > b { color: #6555b8; font-size: 5px; text-align: right; }
.app-window[data-demo-step="2"] .demo-ai-activity, .app-window[data-demo-step="3"] .demo-ai-activity { border-color: #aeb7eb; box-shadow: 0 4px 12px rgba(85,91,183,.12); }
.demo-progress { overflow: hidden; height: 3px; margin: 0 0 8px; background: #edf1f5; border-radius: 3px; }
.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); }
.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; }
.demo-job-check { display: grid; width: 11px; height: 11px; place-items: center; color: #9ba8b5; border: 1px solid #cbd4de; border-radius: 3px; font-size: 5px; }
.demo-job-icon { position: relative; width: 19px; height: 19px; background: #eaf0f5; border-radius: 4px; }
.demo-job-icon::after { position: absolute; inset: 5px; border: 1px solid #8ca0b3; border-radius: 1px; content: ""; }
.demo-job-icon.is-doc { background: #fff0e9; }
.demo-job-icon.is-doc::after { border-color: #e06c45; border-width: 0 0 0 4px; }
.demo-job-icon.is-photo::after { border-width: 0 0 6px 7px; border-style: solid; border-color: transparent transparent #7c9ab5 transparent; transform: rotate(0deg); }
.demo-job-icon.is-play { border-radius: 50%; }
.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; }
.demo-job-icon.is-link::after { inset: 5px 4px; border: 2px solid #7c9ab5; border-radius: 5px; transform: rotate(-35deg); }
.demo-job > span { overflow: hidden; line-height: 1.2; }
.demo-job strong, .demo-job small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.demo-job strong { color: #3d4e62; font-size: 6.5px; font-weight: 800; }
.demo-job small { margin-top: 4px; color: #9aa6b3; font-size: 5px; }
.demo-job em { color: #a1acb7; font-size: 5.5px; font-style: normal; text-align: right; }
.demo-job.is-current { background: #f0f7fd; border-color: #bcd6ea; box-shadow: 0 5px 13px rgba(45,108,158,.08); transform: translateX(2px); }
.demo-job.is-current em { color: #2473ab; font-weight: 800; }
.demo-job.is-current .demo-job-check { color: #fff; background: #2778b2; border-color: #2778b2; }
.demo-job.is-done { background: #f6fbf8; border-color: #cfe8d9; }
.demo-job.is-done em { color: #27915a; font-weight: 800; }
.demo-job.is-done .demo-job-check { color: transparent; background: #34a769; border-color: #34a769; }
.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); }
.demo-queue > footer { display: grid; grid-template-columns: 30px 30px 30px 1fr; gap: 5px; align-items: center; margin-top: 8px; }
.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; }
.demo-queue > footer button.is-primary { color: #fff; background: #183b65; border-color: #183b65; }
.demo-queue > footer span { overflow: hidden; color: #7e8d9e; font-size: 5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.demo-browser { background: #fbfcfd; }
.demo-browser > header small { color: #34a66a; }
.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); }
.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%); }
.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; }
.demo-phone-bar b { color: #03c75a; font-size: 13px; font-weight: 950; line-height: 1; }
.demo-phone-bar i { font-size: 5px; font-style: normal; letter-spacing: 1px; }
.demo-phone-content { position: relative; padding: 10px 9px 7px; transition: opacity .3s ease, filter .3s ease; }
.demo-phone-kicker { display: block; margin-bottom: 3px; color: #39a96e; font-size: 4px; font-weight: 800; }
.demo-phone-content > strong { overflow: hidden; display: block; color: #273c54; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s ease; }
.demo-phone-lines { display: grid; gap: 4px; margin-top: 8px; }
.demo-phone-lines i { height: 3px; background: #dce3e9; border-radius: 4px; transform-origin: left center; }
.demo-phone-lines i:nth-child(1) { width: 85%; }
.demo-phone-lines i:nth-child(2) { width: 68%; }
.demo-phone-lines i:nth-child(3) { width: 76%; }
.demo-phone-photo { overflow: hidden; position: relative; height: 70px; margin-top: 9px; background: linear-gradient(145deg, #dfe9ef, #bdcfdd); border-radius: 4px; }
.demo-phone-photo::before { position: absolute; right: 14px; top: 10px; width: 15px; height: 15px; background: rgba(255,255,255,.86); border-radius: 50%; content: ""; }
.demo-phone-photo i, .demo-phone-photo b { position: absolute; bottom: -8px; background: #86a7c1; transform: rotate(45deg); }
.demo-phone-photo i { left: 10px; width: 44px; height: 44px; }
.demo-phone-photo b { right: 3px; width: 38px; height: 38px; background: #9fb9cc; }
.demo-phone-lines.is-bottom { margin-top: 8px; }
.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; }
.demo-comment-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-comment-trigger i { flex: 0 0 auto; width: 5px; height: 5px; background: #9aa7b4; border-radius: 50%; }
.app-window[data-demo-step="4"] .demo-comment-trigger, .app-window[data-demo-step="5"] .demo-comment-trigger { color: #2674ac; background: #edf7ff; border-color: #b9d9ef; }
.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); }
.demo-ai-panel > header { display: grid; grid-template-columns: 22px minmax(0,1fr) 20px; align-items: center; gap: 5px; }
.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; }
.demo-ai-panel > header > i::after { position: absolute; inset: -3px; border: 1px solid rgba(100,91,205,.28); border-radius: 9px; content: ""; animation: demoAiOrbit 1.5s ease infinite; }
.demo-ai-panel > header span { min-width: 0; }
.demo-ai-panel > header strong, .demo-ai-panel > header small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.demo-ai-panel > header strong { color: #293b58; font-size: 6px; }
.demo-ai-panel > header small { margin-top: 2px; color: #8792a5; font-size: 4px; }
.demo-ai-panel > header em { color: #6759bb; font-size: 5px; font-style: normal; font-weight: 850; text-align: right; }
.demo-ai-track { overflow: hidden; height: 3px; margin-top: 8px; background: #edf0f7; border-radius: 3px; }
.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); }
.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; }
.demo-ai-tags { display: flex; gap: 3px; }
.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; }
.app-window[data-demo-step="2"] .demo-phone-content, .app-window[data-demo-step="3"] .demo-phone-content { opacity: .35; filter: blur(.4px); }
.app-window[data-demo-step="2"] .demo-ai-panel, .app-window[data-demo-step="3"] .demo-ai-panel { opacity: 1; transform: translateY(0) scale(1); }
.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); }
.demo-comment-sheet > header { height: 18px; display: flex; align-items: flex-start; justify-content: space-between; color: #263c54; font-size: 6px; }
.demo-comment-sheet > header > span { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 5px; color: #6558b5; }
.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; }
.demo-comment-sheet > header > span small { font-size: 4px; font-weight: 800; }
.demo-comment-sheet > header b { color: #8c99a6; font-size: 8px; font-weight: 500; }
.demo-comment-form { transition: opacity .2s ease, transform .2s ease; }
.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; }
.demo-comment-input span { overflow: hidden; display: block; width: 100%; white-space: nowrap; }
.demo-comment-input i { display: inline-block; width: 1px; height: 7px; margin-left: 1px; vertical-align: -1px; background: #2d74aa; opacity: 0; }
.demo-comment-form footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: #83909d; font-size: 4px; }
.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; }
.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; }
.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); }
.app-window[data-demo-step="4"] .demo-comment-sheet, .app-window[data-demo-step="5"] .demo-comment-sheet { opacity: 1; transform: translateY(0); }
.app-window[data-demo-step="4"] .demo-comment-input span { animation: demoCommentType 1.45s steps(24,end) .28s both; }
.app-window[data-demo-step="4"] .demo-comment-input i { opacity: 1; animation: demoCaret .55s steps(1,end) infinite; }
.app-window[data-demo-step="5"] .demo-comment-form { opacity: 0; transform: translateY(-4px); }
.app-window[data-demo-step="5"] .demo-comment-success { opacity: 1; transform: scale(1); }
.demo-reactions { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 3px; color: #8794a2; font-size: 7px; }
.demo-reactions span { transition: color .25s ease, transform .25s ease; }
.app-window[data-demo-step="6"] .demo-reactions span:first-child, .app-window[data-demo-step="7"] .demo-reactions span:first-child { color: #ef5b50; transform: scale(1.3); }
.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); }
.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: demoPulse 1.2s ease infinite; }
@keyframes demoCommentType { from { width: 0; } to { width: 100%; } }
@keyframes demoCaret { 50% { opacity: 0; } }
@keyframes demoPulse { 50% { box-shadow: 0 0 0 5px rgba(75,199,121,0); } }
@keyframes demoAiShimmer { to { transform: translateX(230px); } }
@keyframes demoAiOrbit { 50% { opacity: .25; transform: scale(1.12) rotate(10deg); } }
/* The source component is given the supplied 683:434 frame, then scaled as a 1000px reference canvas. */
.app-window { width: 683px; height: 434px; min-height: 0; display: flex; flex-direction: column; }
.app-body { min-height: 0; flex: 1 1 auto; }

/* Semantic pause control: visually silent until keyboard focus so it does not change the reference screenshot. */
#demo-toggle {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
#demo-toggle span { opacity: 0; }
#demo-toggle:focus-visible {
  color: #fff;
  background: rgba(16, 38, 66, .9);
  outline: 2px solid #fff;
  outline-offset: -4px;
}
#demo-toggle:focus-visible span { opacity: 1; font-size: 14px; }
#demo-viewport.is-paused .app-window *,
#demo-viewport.is-paused .app-window *::before,
#demo-viewport.is-paused .app-window *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .app-window *, .app-window *::before, .app-window *::after {
    animation: none !important;
    transition: none !important;
  }
}