/* ============================================================
   v8.0.0 : 시작 인트로 — 로그인 화면에 들어올 때마다 재생
   v8.0.2 (담당자 선택 «시안 C · 파티클 집결») : 흰 벽에 왼쪽 30° 기울어진 틈이 열리고, 입자 수천 개가
   쏟아져 나와 기울어진 채 CI 로 모이며 바로 서고(바닥 그림자), 선명한 벡터 CI 로 바뀌는 순간 충격파,
   반사광이 왼쪽 → 오른쪽으로 한 번 지나갑니다. 로고는 고해상도 벡터(chemtros-ci-hd.svg).
   클릭(또는 Esc · Enter · Space)하면 곧바로 마지막 장면(로고 위 · 배경 음영)으로 건너뛰고
   로그인 카드가 나타납니다.
   · 업무보고서 작성양식(시작 인트로)과 같은 연출 · 같은 수치를 옮겨 왔습니다.
   · 자바스크립트가 없으면 이 층은 hidden 그대로라 예전 로그인 화면이 그대로 보입니다.
   ============================================================ */
.ds-intro{position:fixed; inset:0; z-index:71; overflow:hidden; background:#fff; cursor:pointer;
  --lw:min(60vw, 560px);
  /* 마지막 장면에서 로고가 올라갈 거리 — 화면이 낮으면 덜 올라갑니다 (위 여백 최소 70px) */
  --lift:calc(-1 * min(210px, 50vh - 70px))}
.ds-intro{display:none}
html.intro-on .ds-intro{display:block}
.ds-intro .in-wall{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%, #FFFFFF 0%, #FAFBFC 45%, #EEF1F4 100%)}
.ds-intro .in-shade{position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0) 0%, rgba(120,134,152,.16) 45%, rgba(52,64,80,.46) 100%)}
/* v8.0.2 시안 C «파티클 집결» : 벽의 기울어진 틈에서 입자가 쏟아져 CI 로 모이는 캔버스 */
/* v8.0.3 : 캔버스는 로고 둘레만 (화면 전체가 아님) — 그릴 면적이 절반 이하라 저사양 PC 에서도 부드럽게.
   크기(px)는 intro.js 가 정합니다. */
.ds-intro .in-canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none}
/* 입자가 선명한 CI 로 바뀌는 순간 퍼지는 충격파 */
.ds-intro .in-ring{position:absolute; left:50%; top:50%; width:calc(var(--lw) * .5); aspect-ratio:1; border-radius:50%; opacity:0;
  border:2px solid rgba(0,85,165,.35); transform:translate(-50%,-50%) scale(.2); pointer-events:none}
.ds-intro .in-shadow{position:absolute; left:50%; top:calc(50% + var(--lw) * .2); width:calc(var(--lw) * .8); height:calc(var(--lw) * .085);
  border-radius:50%; background:radial-gradient(ellipse at center, rgba(28,36,48,.42) 0%, rgba(28,36,48,.16) 45%, rgba(28,36,48,0) 72%);
  filter:blur(5px); opacity:0; transform:translateX(-50%) scale(.35,.5)}
/* 로고 판 — 고해상도 벡터 CI (static/chemtros-ci-hd.svg · 가로세로 5223:1520) */
.ds-intro .in-rig{position:absolute; left:50%; top:50%; width:var(--lw); aspect-ratio:5223/1520; transform:translate(-50%,-50%)}
.ds-intro .in-l{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; user-select:none}
.ds-intro .in-color{filter:drop-shadow(5px 10px 12px rgba(30,40,55,.20))}
/* 반사광 — 완성된 로고 위를 왼쪽 → 오른쪽으로 지나간다 (로고 모양 안에서만 · 벡터 마스크라 가장자리가 매끄러움) */
.ds-intro .in-glint{-webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background-size:300% 100%; background-position:100% 0;
  background-image:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 45.5%,
    rgba(255,255,255,1) 50%, rgba(255,255,255,.5) 54.5%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%)}
.ds-intro .in-skip{position:absolute; left:0; right:0; bottom:28px; text-align:center; font-size:12px; color:#9AA5B1; letter-spacing:.04em}

/* ── 마지막 장면 : 로고는 위로 · 배경 음영 · 반사광 끝 ── */
.ds-intro.final{cursor:default}
.ds-intro.final .in-shade{opacity:1}
.ds-intro.final .in-color{opacity:1}
.ds-intro.final .in-rig{transform:translate(-50%,-50%) translateY(var(--lift)) scale(.6); transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.ds-intro.final .in-shadow{opacity:.5; transform:translateX(-50%) translateY(calc(var(--lift) - var(--lw) * .08)) scale(.56,.6);
  transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.ds-intro.final .in-skip{display:none}
.ds-intro.final .in-canvas, .ds-intro.final .in-ring{display:none}
.ds-intro.instant .in-rig, .ds-intro.instant .in-shadow{transition:none}

/* ── 로그인 화면 층 : 재생 중에는 숨기고, 마지막 장면에서 로고 아래에 나타난다 ── */
html.intro-on .ds-header{visibility:hidden}
html.intro-on .ds-login-page{position:fixed; inset:0; z-index:72; margin:0; max-width:none; overflow:auto;
  display:flex; flex-direction:column; align-items:center;
  /* 로고 중심(50vh + lift) 아래로 로고 반 높이 + 여백 */
  padding:calc(50vh + var(--lift, -210px) + 74px) 16px 24px;
  --lift:calc(-1 * min(210px, 50vh - 70px));
  opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s ease .25s, transform .55s cubic-bezier(.22,.8,.24,1) .25s, visibility 0s linear .7s}
html.intro-on.intro-final .ds-login-page{opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .45s ease .25s, transform .55s cubic-bezier(.22,.8,.24,1) .25s, visibility 0s}
html.intro-on.intro-instant .ds-login-page{transition:none}
html.intro-on .ds-login-page > .ds-flash{width:100%; max-width:420px; margin:0 0 10px}
html.intro-on .ds-auth{margin:0; width:100%}
html.intro-on .ds-auth .ds-card{box-shadow:0 10px 30px rgba(28,40,58,.18), 0 1px 3px rgba(28,40,58,.08)}
/* 로고가 위에 크게 있으므로 카드 위 시스템 심벌 대신 시스템 이름만 한 줄 */
html.intro-on .ds-auth-brand img{display:none}
.ds-auth-sys{display:none}
html.intro-on .ds-auth-sys{display:block; font-size:14px; font-weight:600; color:#34507A; letter-spacing:.06em}

/* v8.0.1 : 움직임 줄이기 설정이어도 인트로는 재생합니다 (담당자 지시 «매번 영상부터») — 클릭으로 건너뛰기 */
@media print{ .ds-intro{display:none !important} }