/* Lucian UX/UI Prompt #377 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#377 */
/* Page-scroll adaptation: responsive phone geometry, original motion, three steps.
   Original figures remain the static/no-JS fallback and accessible images. */
.u377 .u377-stage{display:none}
.u377.is-ready{position:relative;display:grid;grid-template-columns:minmax(158px,1fr) minmax(0,1.3fr);gap:32px;margin-block:64px;padding:0 24px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.u377.is-ready .u377-stage{display:grid;place-items:center;position:sticky;top:116px;height:300px;align-self:start}
.u377 .u377-device{position:relative;width:158px;height:300px}
.u377 .u377-ph{position:absolute;left:16px;top:50%;width:118px;height:236px;margin-top:-118px;border-radius:24px;background:var(--ux-ink);padding:6px;box-shadow:0 20px 30px -16px var(--ux-shadow-strong);transition:transform .5s var(--ux-spring)}
.u377 .u377-ph.tilt{transform:rotate(-4deg) scale(.97)}
.u377 .u377-scr{position:relative;width:100%;height:100%;border-radius:19px;overflow:hidden;background:var(--ux-surface-2)}
.u377 .u377-s{position:absolute;inset:0;padding:0;background:var(--ux-surface-2);transform:translateY(100%);transition:transform .55s cubic-bezier(.3,.9,.3,1)}
.u377 .u377-s.on{transform:none}
.u377 .u377-s.up{transform:translateY(-30%);opacity:.4;transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .55s}
.u377 .u377-s img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.u377 .u377-s picture{display:block;width:100%;height:100%}
.u377 .u377-st{position:absolute;left:142px;top:50%;width:3px;height:120px;margin-top:-60px;border-radius:3px;background:var(--ux-line)}
.u377 .u377-st i{position:absolute;left:0;top:0;width:3px;height:calc(100% / 3);border-radius:3px;background:var(--ux-accent);transition:transform .45s var(--ux-spring)}
.u377.is-ready .u377-sc{min-width:0;padding:0 16px 0 8px}
.u377.is-ready .u377-f{height:300px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;padding:0;margin:0;border:0;opacity:1;transition:opacity .4s;scroll-margin-block:120px}
.u377.is-ready .u377-f:first-child{height:400px;padding-top:100px}
.u377.is-ready .u377-f:last-child{height:420px;padding-bottom:120px}
.u377.is-ready .u377-f.on,.u377.is-ready .u377-f:focus-within{opacity:1}
.u377.is-ready .step-copy{padding-left:14px;border-left:3px solid transparent}
.u377.is-ready .u377-f.on .step-copy,.u377.is-ready .u377-f:focus-within .step-copy{border-left-color:var(--ux-accent)}
/* Fonday 10/28 대표 「추천 크기로 키워줘」: 원본 11/18/13px은 큰 폰 옆에서 너무 작음 → 폰 13/24/15, 데스크톱 14/32/17 */
.u377.is-ready .u377-f h2{display:block;margin-top:8px;font-size:24px;line-height:1.2;font-weight:650;letter-spacing:-.03em;color:var(--ux-ink-2)}
.u377.is-ready .u377-f.on h2,.u377.is-ready .u377-f:focus-within h2{font-weight:850;color:var(--ux-ink)}
.u377.is-ready .u377-f h2 span{display:block;width:auto;height:auto;margin-bottom:8px;border:0;border-radius:0;font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ux-accent)}
.u377.is-ready .u377-f p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--ux-ink-2)}
@media(min-width:601px){
  .u377.is-ready .u377-f h2{font-size:32px;margin-top:10px}
  .u377.is-ready .u377-f h2 span{font-size:14px;margin-bottom:10px}
  .u377.is-ready .u377-f p{font-size:17px;max-width:34em}
}
/* Keep the original image descriptions available to assistive technology. */
.u377.is-ready .step-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
@media(min-width:601px){
  /* 300px at 1440x900; shorter viewports prioritize the 70vh height cap. */
  .u377.is-ready{--u377-phone-width:min(320px,33.333333vh,32vw);grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .u377.is-ready .u377-stage{height:calc(var(--u377-phone-width) * 2.1)}
  .u377 .u377-device{width:calc(var(--u377-phone-width) + 24px);height:100%}
  .u377 .u377-ph{left:0;top:0;width:var(--u377-phone-width);height:100%;margin-top:0}
  .u377 .u377-st{left:calc(var(--u377-phone-width) + 12px)}
  /* Keep the 100/120px edge padding paired with the unchanged JS reading centers. */
  /* Fonday 10/28: with the larger sticky phone each step needs its own scroll room, otherwise the
     whole step column fits in one screen and the phone jumps between screens (01→03→01). */
  .u377.is-ready .u377-f{height:auto;min-height:max(150px,40vh);padding-block:16px}
  .u377.is-ready .u377-f:first-child{height:auto;min-height:max(250px,46vh);padding-top:100px}
  .u377.is-ready .u377-f:last-child{height:auto;min-height:max(270px,50vh);padding-bottom:120px}
}
@media(max-width:600px){
  .u377.is-ready{display:block;margin-block:40px;padding:0 16px}
  .u377.is-ready .u377-stage{top:76px;height:260px;z-index:3;background:var(--ux-surface);border-radius:30px}
  .u377 .u377-device{height:260px}
  .u377.is-ready .u377-sc{padding:0 8px}
  .u377.is-ready .u377-f{scroll-margin-top:352px;scroll-margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .u377 .u377-ph,.u377 .u377-s,.u377 .u377-st i,.u377.is-ready .u377-f{transition:none}
  .u377 .u377-ph.tilt{transform:none}
  .u377.is-ready .u377-f{opacity:1}
}
@media print{
  .u377.is-ready{display:block;box-shadow:none}
  .u377.is-ready .u377-stage{display:none}
  .u377.is-ready .u377-f,.u377.is-ready .u377-f:first-child,.u377.is-ready .u377-f:last-child{height:auto;min-height:0;opacity:1;padding:20px 0;break-inside:avoid}
  .u377.is-ready .step-visual{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
}