/* Full-width 1920 x 500 artwork; scaled with the existing PC artboard. */
.quick-guide { width:1920px; height:500px; margin:0 auto; background:#fff; color:#111; overflow:hidden; }
.quick-guide-inner { position:relative; width:100%; height:100%; transform:translateX(-100px); }
.quick-guide-backdrop { position:absolute; inset:0 auto 0 0; width:1104px; background:url('../attached_assets/video background.png') left center / 1104px 500px no-repeat; }
.quick-guide-copy { position:absolute; left:1100px; top:50px; width:792px; }
#quick-guide-title { margin:0 0 18px; font-size:42px; line-height:1.22; font-weight:400; letter-spacing:-.025em; }
#quick-guide-title strong { font-weight:700; }
.quick-guide-intro { margin:0 0 39px; color:#858585; font-size:21px; line-height:1.4; }
.quick-guide-steps { display:grid; grid-template-columns:repeat(3,240px); gap:36px; padding:0; margin:0; list-style:none; }
.quick-guide-step-image { width:240px; height:148px; overflow:hidden; border-radius:3px; }
.quick-guide-step-image img { display:block; width:100%; height:100%; object-fit:cover; }
.quick-guide-steps li p { margin:10px 0 7px; font-size:20px; line-height:1.3; font-weight:500; }
.quick-guide-steps strong { font-weight:500; }
.quick-guide-steps small { display:block; color:#929292; font-size:17px; line-height:1.35; word-break:keep-all; }
.quick-guide-watch { position:absolute; left:180px; bottom:27px; display:flex; align-items:center; gap:25px; height:70px; padding:0 20px; border:0; border-radius:0; color:#111; background:rgba(255,255,255,.45); font-family:'Pretendard',sans-serif; cursor:pointer; transition:background .2s; }
.quick-guide-watch:hover { background:rgba(255,255,255,.72); }
.quick-guide-youtube { display:flex; align-items:center; justify-content:center; width:46px; height:32px; border-radius:8px; background:#ed1610; color:#fff; font-size:21px; }
.quick-guide-instruction { font-size:28px; letter-spacing:.18em; white-space:nowrap; }
.quick-guide-instruction b { margin-left:10px; font-weight:750; }
.quick-guide-watch-label { border-left:1px solid #777; padding-left:28px; font-size:23px; white-space:nowrap; }
.quick-guide-watch:focus-visible,.quick-guide-close:focus-visible { outline:3px solid #007fff; outline-offset:4px; }
.quick-guide-dialog { position:fixed; inset:0; margin:auto; width:min(1100px,90vw,160vh); max-width:90vw; max-height:90vh; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:22px; box-shadow:0 28px 90px rgba(0,0,0,.45); background:#000; color:#fff; overflow:hidden; }
.quick-guide-dialog::backdrop { background:rgba(9,18,28,.78); }
.quick-guide-dialog-heading { position:absolute; top:10px; right:10px; z-index:2; }
#quick-guide-video-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.quick-guide-close { display:grid; place-items:center; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:28px; line-height:1; cursor:pointer; width:36px; height:36px; }
.quick-guide-video-frame { aspect-ratio:16 / 9; background:#101010; }
.quick-guide-video-frame iframe { display:block; width:100%; height:100%; border:0; }

/* One quiet entrance per element, only once it is actually in view. */
.quick-guide .qg-reveal {
    opacity:0;
    transform:translateY(12px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1), background .2s ease;
    transition-delay:var(--qg-delay,0ms),var(--qg-delay,0ms),0ms;
}
.quick-guide .qg-reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) {
    .quick-guide .qg-reveal { opacity:1; transform:none; transition:none; }
}

/* A small forward cue between the three process images. */
.quick-guide-steps li { position:relative; }
.quick-guide-steps li:not(:last-child)::after {
    content:'›';
    position:absolute;
    top:57px;
    right:-29px;
    width:22px;
    text-align:center;
    color:#7693ab;
    font:400 30px/34px 'Pretendard',sans-serif;
    opacity:.45;
    pointer-events:none;
}
.quick-guide-steps li.is-visible:not(:last-child)::after {
    animation:qg-forward 1.15s ease-out both;
    animation-delay:calc(var(--qg-delay,0ms) + 300ms);
}
@keyframes qg-forward {
    0% { opacity:0; transform:translateX(-4px); }
    45% { opacity:.8; transform:translateX(3px); }
    100% { opacity:.45; transform:translateX(0); }
}
@media (prefers-reduced-motion:reduce) {
    .quick-guide-steps li.is-visible:not(:last-child)::after { animation:none; }
}

.quick-guide-step-image { transition:box-shadow .3s ease; }
.quick-guide-step-image img { transition:transform .45s cubic-bezier(.22,1,.36,1); }
@media (hover:hover) {
    .quick-guide-step-image:hover { box-shadow:0 5px 16px rgba(20,40,60,.14); }
    .quick-guide-step-image:hover img { transform:scale(1.035); }
}
@media (prefers-reduced-motion:reduce) {
    .quick-guide-step-image, .quick-guide-step-image img { transition:none; }
    .quick-guide-step-image:hover img { transform:none; }
}