/* 하이센스 책갈피 + 시작 연출 막. 하이센스 화면 안은 보라 계열만(홈페이지 빨강 섞지 않음). 글꼴은 하이센스 앱과 같은 시스템 글꼴 */
:root{--hs-purple:#6c3be8;--hs-deep:#4f22c4;--hs-soft:#f3eeff;--hs-paper:#f6f1ff;--hs-line:#d8c8fc;--hs-ink:#251d3d;--hs-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;--hs-out:cubic-bezier(.215,.61,.355,1)}

/* ── 책갈피: 오른쪽 가장자리, 손 + «적성테스트» 세로 글씨, 아래 끝은 책갈피 리본처럼 V 홈 */
/* 적성테스트 책갈피 — 10-22 원장 «하이센스 얼굴 튀어나오는 책갈피 아마추어적, 깔끔해야 해»: 얼굴·손 흔들기·제비꼬리 빼고
   오른쪽 끝에 붙은 보라 탭 하나(하이센스 색 + 흰 세로 글씨 + 작은 화살표). 모서리는 사이트 카드와 같은 12px, 그림자는 아래로 부드럽게 */
.hs-side{position:fixed;right:0;top:28%;z-index:65;display:flex;flex-direction:column;align-items:center;gap:10px;width:40px;padding:16px 0 12px;box-sizing:border-box;border-radius:12px 0 0 12px;background:var(--hs-purple);color:#fff;text-decoration:none;font:700 14px/1 var(--f-disp,var(--hs-font));box-shadow:0 8px 20px -8px #3b1f8a80;transition:transform .5s var(--hs-out),opacity .3s,background-color .2s;-webkit-tap-highlight-color:transparent}
.hs-side[hidden]{display:none}
.hs-side-t{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.12em;line-height:1}
.hs-side-i{display:block;width:14px;height:14px;opacity:.85}
.hs-side:hover{transform:translateX(-4px);background:var(--hs-deep)}
.hs-side:active{transform:scale(.96)}
.hs-side:focus-visible{outline:3px solid #9c77ff;outline-offset:2px}
/* 첫 화면 영상(hold) 동안은 숨었다가, 상단 바가 나올 때 오른쪽에서 쏙 */
.bar.hold~.hs-side{opacity:0;transform:translateX(110%);pointer-events:none;visibility:hidden;transition:none}
@media(max-width:760px){.hs-side{top:auto;bottom:calc(30svh + 80px + env(safe-area-inset-bottom,0px));width:32px;gap:8px;padding:12px 0 10px;border-radius:10px 0 0 10px;font-size:12px}.hs-side-i{width:12px;height:12px}.hs-side::after{content:"";position:absolute;inset:0 0 0 -16px}}  /* 휴대폰은 폭 32(접힘 28) + 왼쪽 16px 누름 여유 = 44 이상 */
/* 유리판(시트)이 화면을 덮은 뒤(.mini)에는 한 단계 더 가늘게 — 캠퍼스 카드·푸터 버튼 오른쪽을 덜 가리게(10-16). 글씨는 남긴다(무엇인지 읽혀야 하니까) */
.hs-side.mini{width:32px;gap:8px;padding:12px 0 10px;font-size:12px}
@media(max-width:760px){.hs-side.mini{width:28px}}

/* ── 시작 연출 막 */
.hsi{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;background:var(--hs-paper);background-image:radial-gradient(circle at 50% 42%,#fff 0,#fff0 55%),radial-gradient(#6c3be80d 1px,transparent 1.4px);background-size:auto,14px 14px;color:var(--hs-ink);font-family:var(--hs-font);overscroll-behavior:contain;touch-action:none}
.hsi[hidden]{display:none}
/* 막이 다 펼쳐진 동안 뒤 홈페이지는 그리지 않는다(가려진 캔버스·층을 매 프레임 합성하던 비용). 펼침·걷힘 동안엔 보인다 */
html.hs-full body>:not(.hsi){visibility:hidden}
.hsi-center{display:grid;justify-items:center;gap:14px;grid-template-rows:auto auto minmax(232px,auto);width:min(560px,calc(100vw - 32px));padding:0 0 env(safe-area-inset-bottom,0px)}
.hsi-logo{width:min(520px,82vw,58svh*1.43);aspect-ratio:1498/1050}
.hsi-svg{width:100%;height:100%;display:block;overflow:visible}
.hsi-title{margin:6px 0 0;font-size:clamp(21px,5.6vw,30px);font-weight:900;letter-spacing:-.8px;color:var(--hs-deep);text-align:center;word-break:keep-all}
.hsi .hs-say{display:grid}.hsi .hs-say>span{grid-area:1/1;min-width:0}.hs-ghost{visibility:hidden}
.hsi-title:not(.on){visibility:hidden}
.hs-typed::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--hs-purple);animation:hs-caret 1s steps(1) infinite}
.done .hs-typed::after,.hs-say.done .hs-typed::after{display:none}
@keyframes hs-caret{50%{opacity:0}}
.hsi-stage{display:grid;align-content:start;justify-items:center;gap:12px;width:100%}
.hsi-load{display:grid;justify-items:center;gap:8px;font-size:14px;font-weight:700;color:#5b4a86}
.hsi-load[hidden]{display:none}
.hsi-bar{display:block;width:140px;height:4px;border-radius:4px;background:#e2d6ff;overflow:hidden}
.hsi-bar i{display:block;height:100%;background:var(--hs-purple);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hs-out)}
.hsi-chat{display:grid;gap:8px;width:100%;max-width:440px}
.hsi-chat:empty{display:none}
.hsi-row{display:flex;align-items:flex-start;gap:8px;animation:hsi-in .32s var(--hs-out) both}
@keyframes hsi-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hsi-face{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--hs-line);display:grid;place-items:center;overflow:hidden}
.hsi-face svg{width:34px;height:34px}
.hsi-face.blank{visibility:hidden}
.hsi-bubble{flex:1;min-width:0;margin:0;padding:10px 15px 12px;background:#fff;border:1.5px solid var(--hs-line);border-radius:4px 18px 18px 18px;font-size:16px;line-height:1.6;font-weight:650;letter-spacing:-.3px;word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 4px 14px #6c3be812}
.hsi-bubble b{display:block;font-size:11px;font-weight:800;color:var(--hs-purple);letter-spacing:.02em}
.hsi-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;min-width:min(100%,260px);padding:0 26px;border:0;border-radius:14px;background:var(--hs-purple);color:#fff;font:800 16px/1.2 var(--hs-font);cursor:pointer;box-shadow:0 8px 20px #6c3be840;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s;animation:hsi-in .32s var(--hs-out) both}
.hsi-go[hidden]{display:none}
.hsi-go:hover{background:var(--hs-deep)}.hsi-go:active{transform:scale(.97)}
.hsi-go:focus-visible,.hsi-skip:focus-visible,.hsi-x:focus-visible{outline:3px solid #9c77ff;outline-offset:3px}
.hsi-skip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;min-width:44px;min-height:44px;padding:0 16px;border:1.5px solid var(--hs-line);border-radius:22px;background:#ffffffcc;color:#5b4a86;font:700 14px/1 var(--hs-font);cursor:pointer}
.hsi-skip:active{transform:scale(.97)}
/* «× 닫기»: 왼쪽 위, 검사로 가지 않고 홈페이지로(Esc 와 같음). «바로 검사로»(오른쪽 위)와 모양을 달리해 헷갈리지 않게 */
.hsi-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px 0 10px;border:0;border-radius:22px;background:var(--hs-soft);color:var(--hs-deep);font:800 14px/1 var(--hs-font);cursor:pointer}
.hsi-x b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hs-purple);color:#fff;font-size:17px;line-height:1}
.hsi-x:active{transform:scale(.97)}
.hsi-skip{z-index:1}
.hsi .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){.hsi-center{gap:12px}.hsi-bubble{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hsi-row,.hsi-go{animation:none}.hs-side{transition:none}}

/* 하이센스 시그널: 닫기·바로 검사와 겹치지 않는 하단 소리 선택 */
.hsi-sound{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:1;min-height:44px;padding:0 16px;border:1px solid var(--hs-line);border-radius:22px;background:#ffffffcc;color:var(--hs-deep);font:700 13px/1 var(--hs-font);cursor:pointer}
.hsi-sound:focus-visible{outline:3px solid #9c77ff;outline-offset:3px}
.hsi-sound[hidden]{display:none}

/* 인사 다음도 같은 공간: 안내자 → 개인정보 → 검사·결과 */
.hsi.in-flow{display:block;overflow-y:auto;touch-action:pan-y;padding:76px 16px 80px;box-sizing:border-box}
.hsi.in-flow[hidden]{display:none}
.hsi.in-flow .hsi-x,.hsi.in-flow .hsi-skip{position:fixed}
.hsi.in-flow .hsi-sound{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);bottom:auto}
.hsi.in-flow .hsi-center{width:min(680px,100%);margin:0 auto 22px;padding:0;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;gap:14px;align-items:center}
.hsi.in-flow .hsi-logo{width:92px;grid-column:1;grid-row:1}
.hsi.in-flow .hsi-title{grid-column:2;grid-row:1;margin:0;text-align:left;font-size:clamp(20px,4vw,27px)}
.hsi.in-flow .hsi-stage{grid-column:1/-1;grid-row:2;min-width:0}
.hsi.in-flow .hsi-chat{max-width:none}
.hsi.in-flow .hsi-row{width:100%}
.hsi-flow{width:min(1080px,100%);margin:auto;--red:var(--hs-purple);--red-deep:var(--hs-deep);--red-tint:var(--hs-soft);--ink:var(--hs-ink);--ink-soft:#625575;--line:var(--hs-line)}
.hsi-flow[hidden]{display:none}
.hsi-flow .qd:not(:modal){position:static;inset:auto;margin:0 auto 20px;width:min(640px,100%);max-width:none;max-height:none;overflow:visible;padding:0;border:0;background:transparent;transform:none}
.hsi-flow .qd:not([open]){display:none}
.hsi-flow .qd:not(:modal) .qd-box{border:1px solid var(--hs-line);border-radius:22px;background:#fff;box-shadow:0 10px 35px #6c3be80a;padding:24px}
.hsi-flow .qd:not(:modal) [data-close]{display:none}
.hsi-flow .qd:not(:modal) .qd-sub{display:none}
.hsi-flow #qd-t{font-family:var(--hs-font);font-size:21px;letter-spacing:-.5px;margin:0 0 18px}
.hsi-flow #hs-section{display:grid;gap:18px}
.hsi-flow:has(.qd[open]:not(:modal)) #hs-section{display:none}
.hsi-flow .btn{font-family:var(--hs-font)}
.hsi-flow .btn.main{background:var(--hs-purple);border-color:var(--hs-purple);color:#fff;box-shadow:none}
.hsi-flow #hs-frame{border-color:var(--hs-line)}
.hsi-x:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){.hsi.in-flow{padding-inline:12px}.hsi.in-flow .hsi-center{grid-template-columns:76px minmax(0,1fr);gap:12px}.hsi.in-flow .hsi-logo{width:76px}.hsi-flow .qd:not(:modal) .qd-box{padding:20px 16px}}

/* 스크롤 중에도 닫기·소리 버튼 뒤로 입력 글자가 겹치지 않도록 상단을 가린다. */
.hsi.in-flow::after{content:"";position:fixed;inset:0 0 auto;height:68px;background:#f7f3ff;z-index:3;pointer-events:none}
.hsi.in-flow .hsi-x,.hsi.in-flow .hsi-sound{z-index:4}

/* 제목은 초점만 받고(화면 읽기 프로그램용) 테두리는 그리지 않는다 — 원장 10-10 «빨간 박스 거슬림» */
.hsi-title:focus{outline:none}
.hsi-okrow{justify-content:center}
.hsi-ok{font:inherit;font-family:var(--hs-font);font-size:17px;font-weight:800;min-height:48px;padding:0 28px;border:0;border-radius:999px;background:var(--hs-purple);color:#fff;cursor:pointer;box-shadow:0 6px 18px #6c3be833}
.hsi-ok:focus-visible{outline:3px solid #9c77ff;outline-offset:3px}
.hsi-bubble,.hsi-title{text-wrap:pretty}
/* 돋보기 전환 때 지금 화면을 덮는 정지 복제본: 들어오기 애니메이션이 다시 돌지 않게(intro.js lensGo) */
.hsi-still,.hsi-still *{animation:none!important;transition:none!important}