@charset "utf-8";
/* 도깨비 PJ 메인페이지 CSS - main.css
=>메인 페이지에만 나오는 디자인 */

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

/* 공사중 표시 */
/* body *{
    outline: 1px dotted red;
} */

/* 컨텐츠파트 최상위부모 */
body{
    /* 한번에 배경 주기 + 여러개 주기 */
    /* background : 색이반고윙/크 */
    /* 콤마로 구분해서 여러 배경 이미지를 넣을 수 있고,
    먼저 쓴 이미지가 위에 온다! */
    background: 
    url(../images/bg_logo_a_01.png) no-repeat fixed 10% 28%/10%,
    url(../images/bg_mainvisual.jpg) no-repeat fixed center/cover;
    /* 외부 CSS에서 이미지 경로를 잡을 때 주의사항!
    ->CSS파일 위치에서 이미지를 찾아가야함! */
    /* fixed는 기준이 화면이니까 화면에 보이게 고정시키는것임
    fixed인 배경이미지는 body의 높이값과 상관없이 보이는 화면을 기준하여 그 크기를 잡는다! */
}



/*********************** 메인영역 ***********************/
/* 메인영역 속박스 */
.cont{
    position: relative;
    /* 부모자격 - #mvtxt */
    overflow: hidden;
    /* 자식요소의 위아래 마진 포함 => 헤더?와 메인?이 붙어있게 됨 */
}

/* 전체 캐릭터 박스 */
.cbx{
    /* 가로크기 w */
    width: 90%;
    /* 마영오! */
    margin: 0 auto;
    /* 상단 마진 */
    margin-top: 470px;
    /* 이렇게 주면 헤더와 메인이 완전 떨어져있게 됨! 그러니까 부모박스(여기서는 .cont겠지)에 oh!설정하기 */
}

/* 자식요소의 float 해제 clear설정 가상요소로 하기 */
.cbx::after{
    content: '';
    display: block;
    clear: both;
}

/* 캐릭터 각각의 박스 공통 */
.cat{
    /* 블록박스 옆으로 흐르게 */
    float: left;
    /* 4등분할 가로크기 -> 25% - 마진값인 1% = 25% */
    width: 24%;
    /* 마진: 위아래 0, 양쪽 0.5% (전체 %에 0.5들어가니까 주의) */
    margin: 0 .5%;

}

/* 캐릭터 이미지 박스 */
.cat .ci{
    /* 트랜지션 : 속시이지 (trs) */
    transition: margin-top .4s;
}
/* .cat에 오버시 .ci박스 마진탑 변경하기 (흔들림이 없어지네) */
.cat:hover .ci{
    margin-top: -45%;
}

/* 캐릭터 이미지(.ci 직계 img에만 적용되게 만들기) */
.ci>img{
    /* 이미지 가로크기 박스 채우기 */
    width: 100%;
    /* 이미지 높이값은 자동(비율 유지) */
}

/* 캐릭터 이름 이미지 박스 */
.ci figcaption{
    /* 포지션 셋팅 없이 박스를 일반적으로 이동하는 방법은
    마진을 이용한 이동이다! (margin-top, margin-left)
    %단위를 쓸 경우 margin-top은 height, margin-left는 width값을 기준하여 상대적인 단위를 잡는다!*/
    margin-top: -21%;

    /* tac는 블록박스...??엥 설명놓침 */
    /* 글자 중앙 정렬 (인라인요소 모두 적용) */
    text-align: center;
}

/* 캐릭터 이름 이미지 */
.ci figcaption img{
    width: 40%;  /* 이걸 안 주면~ 브라우저의 가로 사이즈가 완전 줄어들면...이미지는 줄어드는데...이름크기는 그대로 있게 되니까~ 같이 줄어들게 만들려고 이걸 준 것임 */
    /* 단위가 %이면 질문을 하라!
    =>무엇을 기준한 %인가?
    답변: 여기서 기준은 싸고 있는 부모박스, 즉 figcaption 요소 박스의 가로 크기가 기준임!! */
}

/* 캐릭터 이름 이미지 중 첫번째 이미지 처음에 숨기기 (저번에 공부한 영변에 약산~~~) */
.ci figcaption img:first-child{  /* 자기들끼리만 있으니까 child써도 됨 */
    display: none;
}

/*
마우스오버시를 걸건데 어디에 거는지가 중요함!!
여기서는 cat클래스 박스에 마우스오버하면 되도록 만들 것임
=>호버는 마우스오버하는 그 박스?에 붙여써야함...
=>.cat:hover라고 써야함!
*/

/* .cat박스에 마우스오버시 진한 이미지 보이기 */
.cat:hover .ci figcaption img:first-child{
    display: inline;
    /* display: inline-block;???????????? */
}

/* .cat박스에 마우스오버시 흐린 이미지 숨기기 */
.cat:hover .ci figcaption img:last-child{
    display: none;
}

/* 캐릭터 설명 박스 */
.cd{
    /* 전체 높이 설정 */
    height: 0px;
    /* 넘치는 자식 요소 숨기기
    1)overflow-y:scroll; =>y축 스크롤 셋팅
    2)overflow:auto도 좋은 방법임!=>자동으로 y나 x축 스크롤 만들어줌 */
    overflow-y: scroll;
    /* h0을 안줘도 박스 일정부분 바깥에 있는 것들 다 잘려서 숨겨진 이유는, 배경?에다가 오버플로우히든 준게 있어서! */

    /* 배경넣기 */
    background: url(../images/eachBG.jpg) no-repeat bottom/cover;

    /* 둥근모서리 : 왼쪽위부터 시계방향으로  */
    border-radius: 20px 5px 5px 20px;

    /* 위쪽여백(캐릭터사진과 설명박스 사이) 주기 */
    margin-top: 20px;

    /* 트랜지션 
    -2가지 변화상태를 애니메이션해주는 속성
    transition: 속성(속성 이름을 굳이! 콕찝어서 써줄 수도 있음) 시간(0.4s 에서 0을 생략해도 되서 안 씀) 이징 지연 */
    transition: height .4s;

}

/* .cat에 마우스오버시 .cd 높이값 늘리기 */
.cat:hover .cd{
    height: 250px;
}

/* 중간 미디어쿼리 적용시 아래쪽 캐릭터 박스와 겹쳐지는 문제 때문에 위에 올라오도록 설정 주기  */
.cat:hover{
    z-index: 1;
}

/* 캐릭터 설명 타이틀 */
.cd h3{
    font-family: 'Gugi', cursive;
    /* 글자 크기 : 최대 24px, 화면 가로크기의 1.7% */
    font-size: min(24px, 1.7vw);
    font-weight: normal;
    padding: 15px 10px 5px;
    letter-spacing: -1px;
    /* 줄바꿈 방지 */
    white-space: nowrap;
}

/* 캐릭터 타이틀 앞 아이콘을 가상요소로 넣기 */
.cd h3::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 35px;
    /* 인라인요소간 세로정렬 */
    vertical-align: -6px;
    margin-right: 5px;
    background: url(../images/bg_logo_a_01.png) no-repeat -144px -181px;
    /* 배경이미지 위치값은 본 이미지를 그림판으로 열어서 마우스 커서 위치에 따라 표시되는 x,y축 좌표값에 마이너스 기호를 붙여서 가로,세로순으로 써주면 정확한 위치가 됨!(이미지는 오른쪽으로 갈수록, 아래로 내려갈수록 +임....) */
}

/* 캐릭터 설명 문단 */
.cd p{
    font-family: 'Single Day', 'ZCOOL KuaiLe', cursive;
    /* 글자크기 최대 18px, 화면 가로크기의 1.3% */
    font-size: min(1.3vw, 18px);
    line-height: 1.6;
    /* 패딩 사이즈 최대 15px, 화면 가로크기의 1% */
    padding: min(1vw, 15px);
    /* 양쪽정렬 text-align : justify (taj) */
    text-align: justify;
}

/* 캐릭터 첫번째 문단 첫글자 가상요소로 디자인 변경하기 */
.cd p:first-child::first-letter{
    /* 글자크기 최대 50px, 화면 가로크기의 3% */
    font-size: min(3vw, 50px);
    color: cyan;
    /* 그림자로 글자 테두리주기
    블러없는 그림자 4개사용 */
    text-shadow:
    1px 0 #000,
    -1px 0 #000,
    0 1px #000,
    0 -1px #000;

    /* 글자크기로 인해 줄간격 조정하기 (글자크기가 혼자 커지면서 아랫줄을 혼자서 너무 밀어대는 현상 발생) */
    line-height: 1;
}

/* 각 캐릭터 박스별로 첫글자 색상 변경하기 */
.cat:nth-child(2) .cd p:first-child::first-letter{
    color: lightgreen;
}

.cat:nth-child(3) .cd p:first-child::first-letter{
    color: lightsalmon;
}

.cat:nth-child(4) .cd p:first-child::first-letter{
    color: lightseagreen;
}


/* 등장 글자 이미지 */
#mvtxt{
    position: absolute;
    top: 15vh;
    right: 5vw;
    width: min(20vw, 327px);
}