/* 진입 화면 — 쇼릴 → 고객 유형 → 소속 → 로그인 → 승인 대기 (7-2) */
.entry{position:relative;min-height:100vh;background:#f6f8fb}
.step:not(.is-on){display:none}
.step.is-on{animation:fadeUp .36s var(--ease-out) both}
.step [tabindex="-1"]:focus{outline:0}

/* 1. 쇼릴 — 영상 프레임 하나가 단계에 따라 크기만 바뀐다 */
.entry[data-phase=reel]{background:#05060a}
.reel-media{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#05060a;
  transition:top .9s var(--ease-out),left .9s var(--ease-out),width .9s var(--ease-out),height .9s var(--ease-out),border-radius .9s var(--ease-out),box-shadow .9s}
.reel-media video{width:100%;height:100%;max-width:none;object-fit:cover}
.entry[data-phase=pick] .reel-media{top:calc(50vh - (50vw - 48px) * .28125);left:calc(50% + 16px);width:calc(50% - 48px);height:calc((50vw - 48px) * .5625);
  border-radius:24px;box-shadow:0 30px 80px -24px rgba(11,46,107,.45)}
.entry.is-instant .reel-media,.entry.is-instant .step{transition:none!important;animation:none!important}

.reel{position:fixed;inset:0;z-index:2;color:#fff;pointer-events:none}
.reel>*{pointer-events:auto}
.reel__skip{position:absolute;top:24px;right:24px;padding:6px 12px;border-radius:var(--radius-full);background:rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.8);backdrop-filter:blur(6px)}
.reel__skip:hover{background:rgba(255,255,255,.2);color:#fff}
.reel__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:96px 48px 40px;background:linear-gradient(180deg,rgba(5,6,10,0),rgba(5,6,10,.82))}
.reel__eyebrow{font-size:var(--text-micro);font-weight:700;letter-spacing:.16em;color:var(--blue-point)}
.reel__title{margin-top:8px;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.reel__title em{font-style:normal;color:#8cc8ff}
.reel__cta{flex:none;height:52px;padding:0 28px;font-size:var(--text-link)}
.reel__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.reel__progress span{display:block;height:100%;width:0;background:var(--blue-point)}

/* 쇼릴이 줄어든 뒤 단계 화면은 왼쪽 절반 */
.entry[data-phase=pick] .step.is-on{animation-delay:.35s}
.entry[data-phase=pick] .panel,.entry[data-phase=pick] .entry-foot{margin-left:max(24px,calc(25% - 280px));margin-right:0;max-width:min(560px,calc(50% - 40px))}
.entry[data-phase=pick] .entry-foot{text-align:left;padding-left:24px}

/* 2~5. 카드형 단계 */
.panel{max-width:560px;margin:0 auto;padding:72px 24px 96px}
.panel__brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:40px}
.panel__step{font-size:13px;font-weight:600;color:var(--blue-main)}
.panel__title{margin-top:6px;font-size:var(--text-title);font-weight:800;letter-spacing:-.025em;line-height:1.3;color:var(--ink-900)}
.panel__desc{margin-top:8px;color:var(--color-muted)}
.panel__body{margin-top:28px}
.panel__back{margin-bottom:20px;font-size:14px;font-weight:600;color:var(--ink-500)}
.panel__back:hover{color:var(--ink-900)}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick__card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px 22px;text-align:left;border-radius:var(--radius-lg);
  border:1px solid var(--color-hairline);background:#fff;box-shadow:var(--shadow-soft);transition:transform var(--dur-toggle) var(--ease-out),box-shadow var(--dur-toggle),border-color var(--dur-micro)}
.pick__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:var(--blue-point)}
.pick__icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#e8f1fe}
.pick__card b{font-size:var(--text-lg);color:var(--ink-900)}
.pick__card span{font-size:14px;color:var(--color-muted)}

.radios{display:grid;gap:10px;margin-bottom:22px}
.radio{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--color-hairline);background:#fff;cursor:pointer;
  transition:border-color var(--dur-micro),background var(--dur-micro)}
.radio:hover{border-color:var(--gray-200)}
.radio input{margin-top:4px;accent-color:var(--blue-cta)}
.radio b{display:block;color:var(--ink-900)}
.radio small{font-size:13px;color:var(--color-muted)}
.radio:has(input:checked){border-color:var(--blue-cta);background:#f3f8ff}

.login-who{padding:14px 16px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-hairline);font-size:14px;margin-bottom:20px}
.login-who b{color:var(--ink-900)}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:13px;color:var(--gray-400)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--color-hairline)}
.demo-btn{height:52px;background:var(--ink-900);color:#fff}
.demo-btn:hover{background:var(--ink-800)}

.wait{text-align:center}
.wait__icon{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#e8f1fe}
.wait__icon--no{background:#fdecee}
.wait__spin{width:28px;height:28px;border-radius:50%;border:3px solid #cfe2fd;border-top-color:var(--blue-cta);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wait .panel__body{display:grid;gap:10px}

.entry-foot{padding:0 24px 40px;text-align:center;font-size:13px;color:var(--ink-500)}
.entry-foot a{color:var(--ink-500);text-decoration:underline;text-underline-offset:3px}
.entry-foot a:hover{color:var(--ink-900)}

@media (max-width:1000px){
  .pick{grid-template-columns:1fr}
}
@media (max-width:768px){
  .panel{padding:40px 16px 72px}
  .reel-media{position:absolute}
  .entry[data-phase=reel] .reel-media video{object-fit:contain}
  .entry[data-phase=pick] .reel-media{top:16px;left:16px;width:calc(100% - 32px);height:calc((100vw - 32px) * .5625);border-radius:18px}
  .entry[data-phase=pick] .panel,.entry[data-phase=pick] .entry-foot{margin:0;max-width:none}
  .entry[data-phase=pick] .panel{padding-top:calc((100vw - 32px) * .5625 + 40px)}
  .entry[data-phase=pick] .entry-foot{padding-left:16px}
  .reel__bar{flex-direction:column;align-items:stretch;padding:72px 16px 28px}
  .reel__cta{width:100%}
  .reel__skip{top:16px;right:16px}
}

/* 가입 페이지(signup.html) — 쇼릴 없이 가운데 한 단 */
.entry--solo[data-phase=pick] .panel,.entry--solo[data-phase=pick] .entry-foot{margin-left:auto;margin-right:auto;max-width:600px}
.entry--solo[data-phase=pick] .entry-foot{text-align:center;padding-left:24px}
@media (max-width:768px){
  .entry--solo[data-phase=pick] .panel{padding-top:32px}
  .entry--solo[data-phase=pick] .entry-foot{padding-left:16px}
}