/***************************************** 
 * Webfont 정의
 */
@font-face {
    font-family: NanumGothic;
    src: url("/_webfonts/NanumGothic.woff") format("woff");
}
@font-face {
    font-family: NanumGothicBold;
    src: url("/_webfonts/NanumGothicBold.woff") format("woff");
}
@font-face {
    font-family: NanumGothicExtraBold;
    src: url("/_webfonts/NanumGothicExtraBold.woff") format("woff");
}


/***************************************** 
 * 초기화
 */
* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
}
body {
    margin: 0;
    background: #D4D0C4;
    font-family: NanumGothic;
}
.header-navi-wrapper {
    display: none;
}


/**************************************************************************
 * 다이어리
 */
.main {
    position: relative;
}
.diary {
    width: 100%;
    min-width: 1000px;
    position: absolute;
    right: 0;
}
.diary-scene-frame {
    position: relative;
}
/* 배경으로 보이는 다이어리 이미지 */
.diary-sceneframe > img {
    width: 100%;
    height: 100%;
    /* 비율을 유지하면서 가리는곳 없이 보이게 */
    object-fit: contain;
}
@keyframes gradient {
    0% {
        filter: drop-shadow(0 0 2px #FFF);
    }
    50% {
        filter: drop-shadow(0 0 5px #FFF);
    }
    100% {
        filter: drop-shadow(0 0 2px #FFF);
    }
}
.diary-preloading::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("http://joo.popol.website/images/icon_pen.png"),
                        url("http://joo.popol.website/images/icon_diary.png");
    background-repeat: no-repeat;
    background-position: center 20%;
    z-index: 1;
    animation: gradient 0.5s infinite, jumping 0.5s infinite;
}
/* 로딩비율 표시 */
.diary-preloading::after {
    content: attr(data-preload);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    white-space: pre;
    text-align: center;
}

/* 다이어리 안의 콘텐츠 div */
.diary-contents {
    position: absolute;
    left: 20%;
    top: 5%;
    /* 콘텐츠 크기 지정 */
    width: 64%;
    height: 86%;
    /* background: rgba(0, 0, 0, 0.5); */
    display: none;
}
/* 해당 페이지가 보이기 전까진 콘텐츠가 보이면 안됨 */
.diary-contents > * {
    display: none;
}

/* position 재정의 */
.diary {
    position: relative;
}


/**************************************************************************
 * 다이어리 콘텐츠 - 공통
 */
@keyframes jumping {
    0% {
         top: auto;
    }
    15% {
         top: -3%;
    }
    100% {
         top: auto;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 양쪽 페이지 (자스로 추가) ----------------------------------*/
.contents-wrap {
    width: 100%;
    height: 100%;
    display: grid;
    grid: "contents-navi contents-navi" 10%
            "left right" / 48% 52%;
}
/* 왼쪽 페이지 ----------------------------------*/
.contents-l {
    grid-area: left;
    padding-left: 7%;
    padding-right: 10%;
}
/* 오른쪽 페이지 ----------------------------------*/
.contents-r {
    grid-area: right;
    padding-left: 13%;
    padding-right: 5%;
}

/* 메뉴 ----------------------------------*/
.contents-navi {
    grid-area: contents-navi;
    display: flex;
    list-style: none;
    margin: 0;
    margin-right: 2%;
    padding: 0;
    gap: 8px;
    justify-content: flex-end;
    align-items: start;
    font-family: NanumGothicBold;
}
.contents-navi > li {
    border-radius: 6px 6px 0 0;
    padding: 1% 2% 4% 2%;
    cursor: pointer;
}

/* 표지 ----------------------------------*/
.contents-cover {
    font-size: 2rem;
    font-family: NanumGothicBold;
    color: #FFF;
    filter: drop-shadow(0 0 1px #000);
    text-align: center;
}
.contents-cover > span {
    position: relative;
    animation: jumping 0.7s infinite;
}
.contents-cover > span:nth-of-type(1) {
    animation-delay: 0s;
}
.contents-cover > span:nth-of-type(2) {
    animation-delay: 0.1s;
}
.contents-cover > span:nth-of-type(3) {
    animation-delay: 0.2s;
}
.contents-cover > span:nth-of-type(4) {
    animation-delay: 0.3s;
}
.contents-cover > span:nth-of-type(5) {
    animation-delay: 0.4s;
}
.contents-cover > span:nth-of-type(6) {
    animation-delay: 0.5s;
}
.contents-cover > span:nth-of-type(7) {
    animation-delay: 0.6s;
}

/* 돋보기 아이콘 ----------------------------------*/
.magnifier {
    position: absolute;
    width: 7%;
    cursor: pointer;
    animation: blink 0.5s infinite;
}

/************************************************************************** 
 * 다이어리 콘텐츠 - Profile
 */

/* 메뉴 ----------------------------------*/
.profile-navi > li:nth-of-type(1) {
    background: #FF84BA;
}
.profile-navi > li:nth-of-type(2) {
    background: #FFDD00;
}
.profile-navi > li:nth-of-type(3) {
    background: #F3C5E1;
}

/* 표지 ----------------------------------*/
.profile-cover {
    transform: rotate(5deg);
    padding-top: 82%;
    padding-left: 13%;
}

/* 소개 - 왼쪽 ----------------------------------*/
.profile-iam-l > div {
    background: #FEFDA7;
    width: 44%;
    height: 41%;
    margin-left: 31%;
    margin-top: 29%;
    overflow: hidden;
}
.profile-iam-l > div > div {
    width: 84%;
    height: 80%;
    margin-left: 8%;
    padding-top: 9%;
    overflow: hidden;
}
.profile-iam-l > div > div > img {
    width: 100%;
}

/* 소개 - 오른쪽 ----------------------------------*/
.profile-iam-r {
    font-size: 1.1rem;
    line-height: 1.7rem;
    display: grid;
    grid: auto / auto;
}
.date {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    display: flex;
    gap: 8%;
    font-family: NanumGothicBold;
    font-size: 1.3rem;
    padding-left: 8%;
    padding-top: 7%;
}
.profile-iam-r > div:nth-of-type(1) {
    transform: rotate(5deg);
    overflow: hidden;
    width: 85%;
    height: 71%;
    margin-left: 14%;
    margin-top: 5%;
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.profile-iam-r > div:nth-of-type(1) > img {
    width: 100%;
}
.profile-iam-r > ul:nth-of-type(2) {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}
.profile-iam-r > ul:nth-of-type(2) > li:nth-child(1) {
    font-family: "NanumGothicBold";
}
.profile-iam-r > ul:nth-of-type(2) > li:nth-child(1) > span:nth-of-type(1) {
    font-size: 1.5rem;
}
.profile-iam-r > ul:nth-of-type(2) > li:nth-child(1) > span:nth-of-type(2) {
    font-size: 1rem;
}
.profile-iam-r > div:nth-of-type(2) {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
}

/* 자격증 - 왼쪽 ----------------------------------*/
.profile-license-l {
    display: grid;
    grid: auto / 65% 35%;
    padding-top: 21%;
    padding-bottom: 41%;
}
.profile-license-l > div:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.profile-license-l > div:nth-of-type(2) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.profile-license-l > div:nth-of-type(3) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.profile-license-l > div:nth-of-type(4) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

/* 자격증 - 오른쪽 ----------------------------------*/
.profile-license-r {
    position: relative;
}
.profile-license-r > .magnifier {
    right: 20%;
    bottom: 49%;
}
/* 카드 공통 ----------------------------------*/
.license {
    width: 75%;
    height: 30%;
    border-radius: 10px;
    display: grid;
    grid: auto / auto;
    gap: 3%;
    padding: 5%;
    font-family: NanumGothicBold;
    font-size: 0.7rem;
}
.license > div:nth-of-type(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    overflow: hidden;
}
.license > div:nth-of-type(1) > img {
    height: 100%;
}
.license > div:nth-of-type(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.license > ul {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* ITQ */
.license-itq {
    background: #EAEAEA;
    transform: rotate(7deg);
    cursor: pointer;
    margin-left: 4%;
    margin-top: 32%;
}
.license-itq > div:nth-of-type(2) > span:nth-of-type(1) {
    font-family: NanumGothicExtraBold;
    font-size: 1rem;
    color: #FF0000;
}
.license-itq > div:nth-of-type(2) > span:nth-of-type(2) {
    white-space: nowrap;
}
.license-itq > ul {
    display: grid;
    grid: auto / auto;
    gap: 5%;
    text-align: center;
}
.license-itq > ul > li:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.license-itq > ul > li:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.license-itq > ul > li:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.license-itq > ul > li:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.license-itq > ul > li:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.license-itq > ul > li:nth-child(6) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.license-itq > ul > li:nth-child(7) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
.license-itq > ul > li:nth-child(8) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

/* GTQ */
.license-gtq {
    background: #D5F5CE;
    transform: rotate(-7deg);
    margin-left: 20%;
    margin-top: 15%;
}
.license-gtq > div:nth-of-type(2) {
    font-family: NanumGothicExtraBold;
    font-size: 1.3rem;
    color: #4CB336;
}
.license-gtq > ul {
    line-height: 1.3rem;
}

/* ITQ - 팝업 */
.license-itq-popup {
    position: absolute;
    left: 14%;
    top: calc((100% - 40%) / 2);
    width: 80%;
    height: 40%;
    font-size: 0.7rem;
    background: #EAEAEA;
    cursor: pointer;
    display: none;
}
.license-itq-popup > div:nth-of-type(2) > span:nth-of-type(1) {
    font-family: NanumGothicExtraBold;
    font-size: 1.5rem;
    color: #FF0000;
}
.license-itq-popup > ul {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid: auto / auto;
    gap: 5%;
}
.license-itq-popup > ul > li:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.license-itq-popup > ul > li:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-content: center;
}
.license-itq-popup > ul > li:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.license-itq-popup > ul > li:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.license-itq-popup > ul > li:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-content: center;
}
.license-itq-popup > ul > li:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.license-itq-popup > ul > li:nth-child(7) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.license-itq-popup > ul > li:nth-child(8) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.license-itq-popup > ul > li:nth-child(9) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
.license-itq-popup > ul > li:nth-child(10) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    justify-content: center;
}
.license-itq-popup > ul > li:nth-child(11) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}
.license-itq-popup > ul > li:nth-child(12) {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

/* 스킬 ----------------------------------*/
.skill-text {
    list-style: none;
    padding: 0 10%;
    margin: 0;
    font-size: 1.6rem;
    display: grid;
    grid: auto / auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30%;
    height: 75%;
}
.skill-text > li {
    border: 2px dashed #D7BEEF;
    border-radius: 10px;
    padding: 5%;
    opacity: 0;
    animation: fadein 1s both;
}
.skill-text > li:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.skill-text > li:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    animation-delay: 0.2s;
}
.skill-text > li:nth-of-type(3) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    animation-delay: 0.4s;
}
.skill-text > li:nth-of-type(4) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    animation-delay: 0.6s;
}
.skill-text > li:nth-of-type(5) {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    animation-delay: 0.8s;
}

/************************************************************************** 
 * 다이어리 콘텐츠 - Works
 */

/* 메뉴 ----------------------------------*/
.works-categories {
    font-size: 0.8rem;
}
.works-categories > li {
    padding: 1% 1% 3% 1%;
}
.works-categories > li:nth-of-type(n) {
    background: #F3C5E1;
}
.works-categories > li:nth-of-type(2n) {
    background: #D7BEEF;
}
.works-categories > li:nth-of-type(1) {
    background: #FFDD00;
}
.works-categories > li > a:link, .works-categories > li > a:visited {
    text-decoration: none;
    color: #000;
}

/* 표지 ----------------------------------*/
.works1 > .works {
    display: none;
}
.works1 > .works-paging-wrap {
    display: none;
}
.works-cover {
    transform: rotate(-2.5deg);
    padding-top: 26%;
    padding-left: 17%;
}

/* 콘텐츠 목록 ----------------------------------*/
#works-contents {
    display: grid;
    grid: "works"
            "paging" 7% / 100%;
    padding-top: 7%;
}
.works {
    grid-area: works;
    display: grid;
    grid: "odd"
            "even" / 100%;
}
.works-item {
    width: 80%;
    margin-left: 10%;
}
.works-item:nth-of-type(odd) {
    grid-area: odd;
    margin-top: 8%;
}
.works-item:nth-of-type(even) {
    grid-area: even;
}
.works-item > h1 {
    margin: 2%;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
}
.works-item > img {
    width: 100%;
    cursor: pointer;
}

/* 페이징 ----------------------------------*/
.works-paging-wrap {
    grid-area: paging;
}
.works-paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8%;
    font-size: 0.8rem;
}
.mypogal-ui-paging-currentpage {
    background: #FF84BA;
    color: #FFF;
    padding: 1%;
}
.mypogal-ui-paging-page > a:link, .mypogal-ui-paging-page > a:visited {
    text-decoration: none;
    color: #000;
}


/************************************************************************** 
 * 다이어리 콘텐츠 - Works Detail
 */
.dialog {
    /* 팝업창 전체가 안보이게 */
    /* X 버튼까지 안보이게 하려면 dialog 자체에 opacity: 0 줘야함 */
    opacity: 0;
}
/* 팝업창 (자스로 추가) ----------------------------------*/
.dialog-open {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    background: #FFFAEB;
    overflow-y: scroll;
    padding: 10% 0;
    z-index: 11;
    /* opacity를 대상으로 트랜지션 효과 적용 */
    transition: opacity 0.3s;
}
.dialog > .close-btn {
    fill: #666;
    position: fixed;
    right: 30px;
    top: 30px;
    cursor: pointer;
}

/* 상세페이지 ----------------------------------*/
.work-title {
    text-align: center;
    margin: 0;
}
.work-info {
    list-style: none;
    margin: 0;
    padding: 6% 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    border-bottom: 1px solid #666;
}
.work-info > li > a:link,
.work-info > li > a:visited {
    color: #000;
}
.work-content {
    text-align: center;
}
.work-content > p {
    margin-bottom: 5%;
    font-size: 1.5rem;
}
.work-content > p:nth-of-type(1) {
    margin-top: 5%;
}
.work-content > p > img {
    width: 56% !important;
    height: 56% !important;
}
.work-content > ul {
    text-align: left;
    list-style: none;
    padding: 0;
    width: 50%;
    margin-left: calc(50% - 25%);
}
.work-content > ul > li:nth-of-type(odd) {
    padding-bottom: 3%;
    font-family: NanumGothicBold;
    font-size: 1.2rem;
}
.work-content > ul > li:nth-of-type(even) {
    padding-bottom: 7%;
}



/************************************************************************** 
 * 다이어리 콘텐츠 - Contact
 */
.contact-navi > li {
    background: #FF84BA;
}

/* 표지 ----------------------------------*/
.contact-cover {
    transform: rotate(0.5deg);
    padding-top: 85%;
    padding-left: 14%;
}

/* 문의 - 왼쪽 ----------------------------------*/
.contact-l > .date {
    padding-left: 4%;
}
.greeting {
    list-style: none;
    padding: 0;
    margin-top: 12%;
    margin-right: 5%;
}
.greeting > li {
    line-height: 1.5rem;
}
.greeting > li:nth-of-type(2) {
    padding-bottom: 1.5rem;
}
.greeting > li:nth-of-type(6) {
    padding-bottom: 1.5rem;
}

/* 문의 - 오른쪽 ----------------------------------*/
#fContact {
    display: grid;
    grid: "input"
            "button" 6%;
    margin-top: 15%;
    margin-left: 6%;
    height: 82%;
}
#fContact > dl {
    margin: 0;
    grid-area: input;
    display: grid;
    grid: auto / auto;
}
#fContact > dl > dt {
    grid-column: 1 / 3;
}
#fContact > dl > dd {
    margin: 0;
    grid-column: 1 / 3;
}
#fContact > dl > dt:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-items: start;
    text-align: right;
    font-size: 72%;
    opacity: 0;
}
#fContact > dl > dd:nth-of-type(1) {
    grid-row: 2 / 3;
    margin-bottom: 23%;
}
#fContact > dl > dt:nth-of-type(2) {
    grid-row: 3 / 4;
    display: none;
}
#fContact > dl > dd:nth-of-type(2) {
    grid-row: 3 / 4;
}
#fContact > dl > dt:nth-of-type(3) {
    grid-row: 4 / 5;
    display: none;
}
#fContact > dl > dd:nth-of-type(3) {
    grid-row: 4 / 5;
    padding-top: 22%;
}
#fContact > dl > dd > input, #fContact > dl > dd > textarea {
    width: 91%;
    border-radius: 5px;
    border: 1px solid #8990CC;
    background: #EDEBF7;
    padding: 10px;
    font-family: NanumGothic;
    outline: none;
}
#fContact > dl > dd > input {
    height: 40px;
}
#fContact > dl > dd > textarea {
    height: 100px;
    text-align: left;
}
#commandbar {
    grid-area: button;
}
#commandbar > button {
    border: none;
    border-radius: 3px;
    background: #8990CC;
    padding: 4px 8px;
    margin-left: 70%;
    font-family: NanumGothicBold;
    color: #FFF;
    cursor: pointer;
}


/* 문의 - 팝업 ----------------------------------*/
.send-popup > div {
    position: fixed;
    left: 30%;
    right: 30%;
    top: 30%;
    bottom: 30%;
    background: #FFF;
    filter: drop-shadow(0 0 2px #666);
    border-radius: 10px;
    display: grid;
    grid: ". . close" 15%
            ". icon ." 50%
            ". comment ." 35% / 15% 70% 15%;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    display: none;
}
.send-popup > div > svg:nth-of-type(1) {
    width: 30px;
    height: 30px;
    grid-area: close;
    margin-left: calc(50% - 18px);
    cursor: pointer;
}
.send-popup > div > svg:nth-of-type(2) {
    grid-area: icon;
    margin-left: calc(50% - 50px);
}
.send-popup > div > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-area: comment;
    text-align: center;
}

.blink-ani {
    animation: blink 0.5s 3;
}