[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif}
.aict{max-width:1920px;margin:0 auto}
/* font-size 는 JS가 가로폭/100 px 로 지정 → 1em = 화면 가로폭의 1% */
.aict-stage{position:relative;width:100%;aspect-ratio:16/9;background:#38b3ff;overflow:hidden}
.aict-bg{display:block;width:100%;height:100%;object-fit:cover}
 
/* 첫 화면 투명 버튼 (이미지 속 '시작하기' 위치) */
.aict-hot{position:absolute;left:32.1%;top:84.2%;width:35.6%;height:9.9%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:999px}
.aict-hot:focus-visible,.aict-cta:focus-visible,.aict-opt:focus-visible{outline:.3em solid #fff;outline-offset:.2em}
 
/* 문항 선택지 */
.aict-opts{position:absolute;inset:0;pointer-events:none}
.aict-opt{pointer-events:auto;position:absolute;left:33.4%;width:33.2%;height:8%;border:0;border-radius:.5em;
  display:flex;align-items:center;justify-content:center;padding:0 1em;color:#fff;cursor:pointer;
  font:700 2.1em/1.15 'Pretendard',-apple-system,'Malgun Gothic',sans-serif;word-break:keep-all;text-align:center;
  transition:filter .15s}
.aict-opt:nth-child(1){background:#049cf8}   /* 1번째 보기 */
.aict-opt:nth-child(2){background:#33ccff}   /* 2번째 보기 */
.aict-opt:hover{filter:brightness(1.06)}
.aict-opt.sel{filter:brightness(.88)}
/* 질문이 1줄인 화면 / 2줄인 화면 */
.aict-opts.l1 .aict-opt:nth-child(1){top:58.9%}
.aict-opts.l1 .aict-opt:nth-child(2){top:68.9%}
.aict-opts.l2 .aict-opt:nth-child(1){top:65.5%}
.aict-opts.l2 .aict-opt:nth-child(2){top:75.6%}
 
/* 성공/실패 화면 버튼 */
.aict-cta{position:absolute;left:35.3%;top:82.8%;width:29.4%;height:9.7%;border:.25em solid rgba(255,255,255,.55);border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#2f3dff,#0a14e6);box-shadow:0 .6em 1.4em rgba(0,20,160,.35);
  font:800 3em/1 'Pretendard',-apple-system,'Malgun Gothic',sans-serif}
.aict-cta:hover{filter:brightness(1.1)}
 
/* ===== 스마트폰 세로: 모바일 이미지 사용 ===== */
  .aict-stage.is-m{max-width:600px;margin:0 auto}
.is-m .aict-hot{left:15%;width:70%;top:84%;height:8%}                       /* 첫 화면 '시작하기' */
.is-m .aict-opt{left:8%;width:84%;height:6.5%;font-size:4.2em}              /* 문항 보기 버튼 */
.is-m .aict-opts.l1 .aict-opt:nth-child(1){top:66%}                         /* 질문 1줄: 1번째 보기 */
.is-m .aict-opts.l1 .aict-opt:nth-child(2){top:75%}                         /* 질문 1줄: 2번째 보기 */
.is-m .aict-opts.l2 .aict-opt:nth-child(1){top:70%}                         /* 질문 2줄: 1번째 보기 */
.is-m .aict-opts.l2 .aict-opt:nth-child(2){top:79%}                         /* 질문 2줄: 2번째 보기 */
/* 성공/실패: 모바일 이미지에 버튼이 이미 그려져 있어서, 코드 버튼은 투명하게 그 위에 얹기만 함 */
.is-m .aict-cta{font-size:0;color:transparent;background:transparent;border:0;box-shadow:none;border-radius:999px;height:7.2%}
.is-m[data-screen="fail"] .aict-cta{left:20.7%;width:58.6%;top:72.9%}      /* 실패: 다시 도전하기 */
.is-m[data-screen="pass"] .aict-cta{left:18.7%;width:62.6%;top:82.9%}      /* 성공: 이미지 다운받기 */
 
/* ===== 모바일 이미지가 없을 때 대체: PC 이미지를 90도 돌려서 표시 ===== */
.aict-hint{display:none}
html.aict-rot,html.aict-rot body{background:#0b5fb3;height:100%;overflow:hidden}
.aict-stage.is-rot{position:fixed;top:50%;left:50%;
  width:min(100vh,177.78vw);width:min(100dvh,177.78vw);
  transform:translate(-50%,-50%) rotate(90deg)}
.is-rot .aict-hint{display:block;position:absolute;left:0;right:0;bottom:1.2%;margin:0;text-align:center;
  color:#fff;font:600 2.2em/1.2 'Pretendard',sans-serif;text-shadow:0 .1em .3em rgba(0,60,140,.7);pointer-events:none}
 
/* 구글폼 바로가기: 이미지 속 버튼 위 투명 링크 (PC 1920x1080 / 모바일 940x1672 기준) */
.aict-form{position:absolute;display:block;left:35.3%;width:29.3%;top:82%;height:9.8%;border-radius:999px;background:transparent;cursor:pointer}
.aict-form:focus-visible{outline:.3em solid #fff;outline-offset:.2em}
.is-m .aict-form{left:23%;width:54.3%;top:74%;height:5.8%}

/* 테스트 시작하기: 이미지 속 버튼 위 투명 버튼 (PC 1920x1080 / 모바일 940x1672 기준) */
.aict-next{position:absolute;display:block;left:35.1%;width:29.3%;top:82%;height:9.8%;border:0;padding:0;border-radius:999px;background:transparent;cursor:pointer}
.aict-next:focus-visible{outline:.3em solid #fff;outline-offset:.2em}
.is-m .aict-next{left:23%;width:54.3%;top:74%;height:5.8%}

 
/* 디버그(위치 확인용) */
.dbg .aict-hot,.dbg .aict-cta,.dbg .aict-opt,.dbg .aict-form,.dbg .aict-next{outline:2px solid red!important;background:rgba(255,0,0,.3)!important;color:#fff!important}