@charset "utf-8";
/* 로봇 PJ CSS - robot.css */

/* 외부 CSS합치기 */
@import url(./core.css);
@import url(./reset.css);

/* rem단위를 위한 HTML 글자크기 세팅 -> 한번에 수정하기 좋아! */
html {
  font-size: 10px;
  /* 1rem = 10px */

   /* 스크롤 위치 이동시 부드럽게 애니메이션 이동설정
  -> 이 설정은 전체 페이지이동일 경우 html에 셋팅함! */
    scroll-behavior: smooth;
}

/* 전체 배경 넣기 */
body {
  /* 배경이미지 스크롤해도 안움직이는 고정형 세팅 */
  background: url(../images/bg3.jpg) no-repeat fixed top/cover;
  /* font-size: 10px; */
  /* 바디 10px 했는데 왜 밑에 대사박스 rem해도 안됨?ㅠㅠㅠ
   왜냐면 바디가 아니라 html에 해야하니까ㅋㅋ 루트는 html이지!ㅋㅋㅋㅋ*/
}

/* 공사중 표시 */
/* body * {
  outline: 2px dashed #ccc;
} */

/*************** 1. 상단영역 ***************/
/* 1-1.로고 */
h1.logo{
  /* 위치 */
  /* 기준박스 정가운데오게 하기 */
  position: fixed;
  /* 정중앙 계산시 50%에서 기존 가로, 세로값의 절반을 뺀다: 즉 여기선 맥스(20vw,100px)를 기준으로 반띵 */
  /* top: calc(50% - max(20vw,100px)/2); */
  /* left: calc(50% - max(20vw,100px)/2); */

  top: 2vw;
  left: 2vw;
  /* max는 두값중 큰값을 출력함(결과적으로 최소값설정) */
  /* 백픽셀보다 안작아짐->즉 백픽셀이 최솟값임. 민 맥스 헷갈리지만 잘 생각해봐! */
  width: max(8vw,80px);

  height: max(8vw,80px);

  border-radius: 50%;
  z-index: 999;
  background: rgb(255, 255, 255) url(../images/KakaoTalk_20250818_120420582_04.png) no-repeat center/150% 150%;
  /* 그림자 */
  box-shadow: 
  inset 0 0 20px 5px #00000080,
  0 0 20px 5px rgb(233, 213, 248);

  /* 글자설정 */
  text-align: center;
  line-height: 10vw;
  font-family: 'Orbitron';
  font-size: max(20px,1.8vw);
  color: rgb(243, 141, 236);
  text-shadow: 0 0 10px #000;
}

/* 1-2.탑이동버튼 */
.btn-top{
  position: fixed;
  bottom: 2.3vw;
  right: 2.3vw;
  width: max(5vw,50px);
  height: max(5vw,50px);
  border-radius: 50%;
  border: 5px outset #fff;
  background-color: #ccc;
  z-index: 10;
  box-sizing: content-box;
  scale: 0.7;
}

/* a요소 확장 */
.btn-top a{
  display: block;
  width: 100%;
  height: 100%;
  
  /* 글자셋팅 */
  color: rgb(255, 255, 255);
  text-decoration: none;
  font: max(1.4vw,15px)/max(5vw,50px) 'Black Ops One';
  /* font: 스두크/줄체; */
}
/* 오버시 설정 */
.btn-top:hover{
  background-color: rgb(255, 68, 68);
  /* outset 나온버튼, inset 들어간 버튼 */
  border-style: inset;
}
.btn-top:hover a{
  color: rgb(0, 0, 0);
}
/*************** 2. 메인영역 ***************/

.main-area {
  padding-top: 250px;
}

/* 2-1-0. 로봇 말풍선 */
.link-title{
  position: absolute;
  top: 10%;
  left: 60%;
  /* 로봇머리로 부터 위치 일정하게 */
  transform: translateX(200px);

  /* 로봇쪽에서 커지게 하기위해
  트랜스폼 기준 변경(왼쪽아래) */
  transform-origin: left bottom;
  width: 20vw;
  height: 17vw;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  line-height: 1;
  text-decoration: none;
  color: rgb(76, 3, 3);
  font-size: 2.5rem;
  border: 5px solid rgb(37, 37, 37);
  box-sizing: border-box;

  /* 스케일 조정 및 위치 올리기 */
  scale: 0.6;
  z-index: 1;
}

/* 가상요소로 삼각형 만들기 */
.link-title::after{
  content: '';
  position: absolute;
 
  top: 79.7%;
    left: -4%;
    /* 왜%인가? 유동적인 부모를 기준한 위치값이다! */
    transform: rotate(45deg);
      /* 가로,세로 크기 0 *
    width: 0;
    height: 0;
     /* 보더탑 크기+색 설정 */
    border-top: 7vw solid rgb(37, 37, 37);
    /* 양쪽보더 크기+투명색 설정 */
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
}
/* 로봇 말풍선 오버시 */
.link-title:hover{
  color: #fff;
  background-image: 
  radial-gradient(circle,rgb(244, 68, 118) 10%,blue 30%,rgb(244, 32, 32));
}

/* 
    [ 원형 그라데이션 ]

    - 기본형, 영역지정형은 박스모양을 따라감!

    1) 기본형: 중앙중심, 모양은 박스크기에 맞춤
    background-image: 
        radial-gradient(색1,색2,색3,...);
    - 시작색으로부터 중앙에서 시작됨

    2) 영역 지정형:
    background-image: 
        radial-gradient(색1 몇%,색2 몇%,색3 몇%,...);
    - 색 뒤에 한칸 띄고 %수치로 영역지정함

    3) 그라데이션 모양을 원형으로 사용할 경우:
    background-image: 
        radial-gradient(circle,색1,색2,색3,...);
    - circle 키워드를 첫번째에 사용함

    4) 영역옵션 지정형: 중심점 변경
    background-image: 
        radial-gradient(옵션 at 가로위치 세로위치,색1,색2,색3,...);
    - 옵션4가지 : closest-side / farthest-side
                closest-corner / farthest-corner
                ___________________________________
                - closest는 중심점으로 좀더 모아진것
                - farthest는 중심점에서 멀리 퍼진것
                - side와 corner는 경계선과 끝부분옵션임
    - 가로위치, 세로위치 (중심점) - 단위는 px / %
*/

/* 토끼의 대사박스 */
/* 소리치는말풍선 */
.talk-box1{
  position: absolute;
  left: 15vw;
  top: 5vh;
  width: 400px;
  height: 200px;
  background: url(../images/소리치는말풍선.png) no-repeat center/100% 100%;
  text-align: center;

  display: flex;
  opacity: .7;

  /* 글자 */
  justify-content: center;
  align-items: center;

  font-size: 4rem;
  font-weight: bold;
  font-style: italic;
  color: #ff0505;
  text-shadow: 1px 1px 1px #ffffff;

}
/* 나레이션 말풍선 */
.talk-box2{
  position: absolute;
 left: 25vw;
  top: 18vh;
  width: 300px;
  height: 280px;
  background: #cccccc00 url(../images/불길한말풍선.png) no-repeat center/100% 100%;
 text-align: center;
  display: flex;
 justify-content: center;
 align-items: center;

 
  /* 글자 */
  
  font-size: 1.6rem;
  color: #ffffff;
  text-shadow: 2px 2px 10px #ff0000;

  z-index: 2;
}

/* 로봇토끼 박스 */
.robot-box {
  /* 하단 여백만들기- 다리가 앱솔로 튀어나올경우 필요함 */
  padding-bottom: 60px;
}

/* 로봇머리 */
.robot-head {
  /* 부모자격- 자식앱솔루트의 부모 */
  position: relative;

  width: 380px;
  height: 300px;
  /* 무대중간으로 마영오씨를 모셔 */
  margin: 0 auto;

  /* top: 50%;
    left: 50%;
    translate: -50% -50%; */
}
/* 자식요소 모두 앱솔루트 */
.robot-head > div {
  position: absolute;
}

/* 귀, 얼굴, 팔, 몸통, 발 테두리 */
.robot-body > .arm,
.leg {
  border: 5px solid #494949;
}
.robot-head > .ear,
.face {
  border: 5px solid #494949;
}

.face {
  width: 380px;
  height: 300px;
  /* 무대중간으로 마영오씨를 모셔 */
  margin: 0 auto;
  /* border-radius: 60px 60px 30px 30px; */
  border-radius: 60% 60% 45% 45%;
}

/* 눈공통 */
.eye {
  /* 같은 높이 */
  top: 83px;
  /* 크기 */
  width: 80px;
  height: 100px;
  /* border-radius: 50%; */
  outline: none;
  /* border: 0px double rgba(255, 255, 255, 0); */
  /* 배경공통 */
  background-color: #ffffff00;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 왼쪽눈 */
.eye1 {
  /* 지금은 이미지 크기가 멋대로라 직접 잡았는데 */
  /* 퍼센트로 잡기 */
  /* left: 50%;
    translate: -120%; */

  left: 20%;
  background-image: url(../images/토끼눈1.png);
}
/* 오른쪽눈 */
.eye2 {
  /* 퍼센트로 */
  /* right: 50%;
    translate: 120%; */

  right: 20%;
  background-image: url(../images/토끼눈2.png);
}

/* 코 */
.nose {
  top: 116%;
  left: 50%;
  translate: -50% -120%;

  width: 30px;
  height: 150px;
  background-image: url(../images/nose.png);
  background-color: #ffffff00;
  background-repeat: no-repeat;
  background-size: 100% 10%;
}

/* 입 */
.mouth {
  top: 63%;
  left: 43.5%;
  width: 50px;
  /* height: 500px; */
  height: 100px;
  /* background-image: url(../images/토끼입.png); */
  background-image: url(../images/고양이입.png);
  background-color: #ffffff00;
  background-repeat: no-repeat;
  background-size: 100% 10%;
}

/* 귀 */
.robot-head > .ear {
  top: -50%;
  width: 120px;
  height: 220px;
  /* border-radius: 60px 40px 0 0; */
  background: url(../images/fur.jpg) no-repeat center/cover;
  z-index: -2;
  /* scale */
}


/* 왼귀 */
.ear1 {
  left: 16%;
  border-radius: 60% 60%;
  rotate: -10deg;

  /* 기준축변경 : 가로 세로 */
  /* transform-origin: left bottom; */
  
  /* 애니 호출 */
  /* animation: ear1-moving-ani 0.5s ease-in-out 2s infinite alternate; */
}

/* 계속 왼귀 흔들기 */
/* @keyframes ear1-moving-ani {
  to{
    rotate: -12deg;
  }
} */

/* 오른귀 */
.ear2 {
  right: 16%;
  border-radius: 60% 60%;
  rotate: 10deg;

   /* 기준축변경 : 가로 세로 */
  /* transform-origin: right bottom; */
  
  /* 애니 호출 */
  /* animation: ear2-moving-ani 0.5s ease-in-out 2s infinite alternate; */
}
/* 계속 오른귀 흔들기 */
/* @keyframes ear2-moving-ani {
  to{
    rotate: 12deg;
  }
} */

/* 리본 */
.robot-head > .ribbon {
  position: absolute;
  width: 200px;
  height: 130px;
  top: 79%;
  left: 52%;
  translate: -50%;
  background-image: url(../images/ribbon.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 3;
}

/* 2-1-2. 로봇몸통 */
.robot-body {
  position: relative;
  top: -20px;
  /* 부모자격 */
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border-radius: 90% 90% 60% 60%;
  border: 5px solid #494949;

  /* margin-top: 50px; */
}

/* 로봇 리본 가상요소로 만들기 -> 구려서 그냥 이미지로 변경*/
/* 리본1 */
/* .robot-head::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 40%;
    top: 88%;
    left: 50%;
    translate: -50%;
    clip-path: polygon(10% 10%, 50% 25%, 90% 10%, 85% 65%, 50% 45%, 18% 65%);
    z-index: 3;
    background-image: linear-gradient(to bottom, rgb(145, 8, 8), rgb(62, 11, 55));
} */

/* 리본2 */
/* .robot-head::after{
    content: '';
    position: absolute;
        width: 17%;
    height: 22%;
    top: 97%;
    left: 46%;
    clip-path: polygon(0 54%, 19% -100%, 50% 51%, 0% 50%);
    
    z-index: 3;
    background-image: linear-gradient(to bottom, rgb(163, 0, 0), rgb(65, 24, 60));
   
} */
/* 리본3 */
/* .face::before{
    content: '';
    position: absolute;
        width: 30%;
    height: 50%;
    bottom: -52%;
    left: 32%;
    rotate: 10deg;
 clip-path: polygon(50% 0%, 50% 50%, 0% 50%);
    z-index: 3;
    background-image: linear-gradient(to bottom, rgb(145, 8, 8), rgb(62, 11, 55));
} */
/* 리본4 */
/* .face::after{
    content: '';
    position: absolute;
        width: 30%;
    height: 50%;
    bottom: -50%;
    left: 53%;
     rotate: -10deg;
    clip-path: polygon(0 0, 50% 50%, 0% 50%);
    
    z-index: 3;
    background-image: linear-gradient(to bottom, rgb(145, 8, 8), rgb(62, 11, 55));
} */

/* 몸통 직계자식 요소> 모두 앱솔루트 */
.robot-body > div {
  position: absolute;
}

/* 움직이는 팔다리관절 버전 그건 그냥 쌤버전꺼 복사해서 따로 두고 비교해보기
가상요소 사용함*/
/* 팔공통 */
.arm {
  width: 40%;
  height: 80%;
  border-radius: 40%;

  z-index: -1;
}
/* 왼팔 */
.arm1 {
  /* top: -7%;
  left: -15%;
  rotate: 60deg; */
    /* top: 20%;
    left: -4%;
    rotate: 64deg;
  transform-origin: 80% 10%; */

  top: 34%;
    left: -11%;
    rotate: 64deg;
    transform-origin: 103% 5%;
/* 애니 호출 */
  animation: hand1-moving-ani 0.5s ease-in-out 2s infinite alternate;
}

/* 계속 왼팔 흔들기 */
@keyframes hand1-moving-ani {
  to{
    rotate: 102deg;
  }
}


/* 오른팔 */
.arm2 {
      top: -48%;
    right: -32%;  
    rotate: 60deg;
}


/* 다리공통 */
.leg {
  width: 40%;
  height: 50%;
}
/* 왼다리 */
.leg1 {
  bottom: -7%;
  left: -15%;
  border-radius: 40% 50%;
  z-index: 2;
}
/* 오른다리 */
.leg2 {
  bottom: -7%;
  right: -15%;
  border-radius: 50% 40%;
  z-index: 2;
}
/* TV */
.tv {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 250px;
  height: 180px;
  background: url(../images/wacom.png) no-repeat 0/100%;
}
.pen {
  top: -50%;
  right: -68%;
  rotate: 80deg;
  width: 200px;
  height: 180px;
  background: url(../images/pen.png) no-repeat 0/100%;
  z-index: 2;
}

/* 스크린 */
.screen {
  position: absolute;
  top: 21px;
  left: 25px;
  width: 202px;
  height: 114px;
  border-radius: 2px;
  border-radius: 1px;
  background-color: #b4b4b4;
  /* 넘치는 자식 요소 숨기기 */
  overflow: hidden;
}
/* 아이프레임 */
.screen iframe {
  position: absolute;

  width: 202px;
  height: 118px;
  border-radius: 1px;
  /* 기본보더없앰 */
  border: none;
}

/* ************************************************************
위까지가 로봇토끼 꾸미기
********************************************************** */


/**************** 움직이는 큐브 추가 ***********************/
/* 큐브박스 만들기 */
.cube {
  /* 박스의 위치를 중앙으로 */
  position: absolute;
  top: 10%;
  right: 0%;
  translate: -50% -50%;
  /* 박스의 크기 */
  width: 100px;
  height: 100px;
  /* 입체가 잘보이도록 살짝 회전: x축 10도, y축 30도 회전 */
  /* transform: rotateX(x축각도) rotateY(y축각도); */
  transform: rotateX(10deg) rotateY(30deg);

  /* 입체설정 */
  /******************************************* 
        [ 입체로 설정하기 ]
        - 입체로 설정할 요소의 부모박스에
        아래와 같이 설정해준다!
        (부모는 싸고 있는 요소)
        transform-style 속성값은 아래 2가지
        1. flat (기본값) : 2D
        2. preserve-3d : 3D -> 이 값으로 설정함!
        -> z축을 사용가능하게 된다!
    *******************************************/
  transform-style: preserve-3d;
}
/* 양수를 쓰면 반시계방향으로 움직임 */

/* 큐브 각면 공통 */
.cube span {
  /* 앱솔은 자동블록! */
  position: absolute;
  /* 부모를 꽉 채우게 */
  width: 100%;
  height: 100%;

  border: 1px solid #515050f9;
  /* 보더만큼 커지는 걸 방지: 보더박스는 패딩, 보더 내부 포함 */
  box-sizing: border-box;

  /* 반투명 */
  opacity: 0.8;
}

/* 첫번째 큐브 앞면 */
.cube span:nth-child(1) {
  /* 화면 방향(z축)으로 이동하기 */
  transform: translateZ(50px);
  /* 배경이미지 */
  background: url(../images/민지.jpg) no-repeat
    center/cover;
}
/* 두번째 큐브 앞면 */
.cube span:nth-child(2) {
  /* y축 회전 + 화면 방향(z축)으로 이동하기  -> 순서가 중요함! 
    적용순서에 따라 결과가 달라짐
    - 회전부터 해라! */
  transform: rotateY(90deg) translateZ(50px);

  /* 배경이미지 */
  background: url(../images/하니.jpg) no-repeat
    center/cover;
}

/* 세번째 큐브 앞면 */
.cube span:nth-child(3) {

  transform: rotateY(180deg) translateZ(50px);
  /* 배경이미지 */
  background: url(../images/해린.jpg) no-repeat
    center/cover;
}
/* 네번째 큐브 앞면 */
.cube span:nth-child(4) {
  transform: rotateY(-90deg) translateZ(50px);
  /* 배경이미지 */
  background: url(../images/다니.jpg) no-repeat center/cover;
}
/* 큐브의 윗면: 5번째 큐브 앞면 */
.cube span:nth-child(5) {
  /* 윗면에 오도록: x축으로 절한다고 생각하면 양의 숫자가 윗면! */
  transform: rotateX(90deg) translateZ(50px);
  /* 배경이미지 */
  background: url(../images/혜인.jpg) no-repeat
    center/100% 100%;
}
/* 큐브의 아랫면: 6번째 큐브 앞면 */
.cube span:nth-child(6) {
  /* 아랫면에 오도록 */
  transform: rotateX(-90deg) translateZ(50px);
  /* 배경이미지 */
  background: url(../images/뉴진스.jpg) no-repeat
    center/100% 100%;
}

/* 애니 적용 클래스 - 애니메이션: 이시이지반방마 */
.rotate-cube {
  /* 애니메이션 적용 */
  animation: cube-ani 3s infinite linear;
}
/* 애니적용클래스 요소에 마우스오버시 애니 멈추기 */
.rotate-cube:hover {
  animation-play-state: paused;
}


/* 큐브 회전 키 프레임 */
@keyframes cube-ani {
  to {
    /* x축 10도, y축 30도 돌아간상태에서 시작했기 때문에 360에 +계산필요*/
    
    /* x축은 양의방향, y축은 음의방향으로 회전할경우 */
    transform: rotateX(370deg) rotateY(-330deg);
  }
}


/***************토끼 설명 구역********************/
/* 2-2. 설명박스 */
.text-box {
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
  background-color: #cfc3c367;
  border-radius: 20px;
  padding: 15px 30px;
  /* 박스 2중 글로우효과(그림자로줌) */
  box-shadow: inset 0 0 20px rgb(246, 177, 230),
    inset 0 0 50px 10px rgb(44, 127, 243);

  /* 백드롭 블러효과주기 */
  backdrop-filter: blur(6px);
  /* 
  [백드롭 필터효과] 
  - filter속성과 동일한 셋팅을 가지며
  적용대상이 겹쳐지는 하단의 그래픽을 변경한다!

  backdrop-filter: blur(2px); -> 흐림
  backdrop-filter: brightness(60%); -> 밝기
  backdrop-filter: contrast(40%); -> 대비
  backdrop-filter: drop-shadow(4px 4px 10px blue);->그림자
  backdrop-filter: grayscale(30%);-> 흑백
  backdrop-filter: hue-rotate(120deg); -> 색상변경
  backdrop-filter: invert(70%); -> 반전색
  backdrop-filter: opacity(20%); -> 투명도
  backdrop-filter: sepia(90%); -> 세피아효과
  backdrop-filter: saturate(80%); -> 채도

  -> 복합적용 가능!
  backdrop-filter: blur(4px) saturate(150%);
  */
}

/* 2-2-1. 제목 */
.text-box h2 {
  /* 스티키 포지션 */
  position: sticky;
  top: 10px;
  /* top값이 고정위치값임! */

  font-family: "Chakra Petch", sans-serif;
  font-size: 35px;
  text-align: center;
  background-color: #ffffff8d;
  color: rgb(255, 185, 185);
  text-shadow: 2px 2px 2px #0000007b;
  border-radius: 20px;
  /* 기존 두꺼운체 해제 : fwn */
  font-weight: normal;
}

.text-box h3{
  font-size: 20px;
  text-align: left;
  color: #d0d0d0;
  font-weight: normal;
}
/* 2-2-2. 출처 */
.text-box small {
  font-family: "dohyeon", sans-serif;
  font-size: 12px;
  text-shadow: 1px 1px 1px #00000077;
  color: rgb(232, 242, 254);

  /* 블록으로 변경해야 tac먹힘! */
  display: block;
  text-align: center;
  padding: 10px;
}

/* 2-2-3.내용단락 */
.text-box article {
  font-family: "Barlow", sans-serif;
  font-size: 17px;
  /* 줄간격 */
  line-height: 1.7;
  /* 자간 */
  letter-spacing: 1px;
  /* 단어간격 */
  word-spacing: 2px;

  /* 다단설정하기
    -> 다중열속성
    column-count : 다중열개수
    column-rule : 다중열구분선
    column-gap : 다중열사이간격
  */
  column-count: 2;
  column-rule: 5px double rgb(238, 156, 144);
  /* 다중열 구분선 값은 보더와 같음
  -> 두종색! -> 두께 종류 색상 */
  column-gap: 55px;

  /* 양쪽정렬 : justify */
  text-align: justify;
  /* 영문에서 양쪽 정렬일 경우
  단어단위로 줄바꿈이 되므로 중간에
  구멍이 생김. 따라서 단어깨기설정필요! */
  /* 단어깨기 : 모두깨기(break-all) */
  word-break: break-all;

  /* 첫줄 들여쓰기 : text-indent (ti) */
  text-indent: 40px;
}
/* 가상요소 첫글자 적용하기 */
.text-box article::first-letter {
  font-size: 30px;
  font-weight: bold;
  color: rgb(186, 231, 255);
}

/*************** 4. 하단영역 ***************/
/* 3-1. 회사정보 */
#bottom-area{
  position: relative;
  /* z-index적용위해 포지션줌! */
  z-index: 5;

  margin-top: 100px;
  margin-bottom: 100px;
  color: #fff;
  /* 글자크기 : 30px, 글자체 'Black Ops One' */
  /* font: 3rem 'Black Ops One'; */
  font-size: 3rem;
  /* 글자그림자 */
  text-shadow: 2px 2px 2px #000;
  /* 글자중앙 */
  text-align: center;
  /* 패딩 : 가로/세로중 작은 화면기준 7%
  -> vmin(작은쪽기준) , vmax(큰쪽기준) */
  padding: 7vmin;
  /* 반투명 배경넣기 : 검은색 반투명(0.5) 
    rgb(0 0 0 / 0.5) -> 요즘 더 많이사용함@@@@@@@@@@@@@@@@@@@
    rgba(0,0,0,0.5) ->옛날거..
  */
  background-color: rgb(0 0 0 / 0.5);

}