/* Theme Name: Gongjeon
   Author: Gongjeon
   Author URI: http://gongjeon.com/
   Version: 1.2 */


/* 글꼴 불러오기 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");


/* 변수 지정 */
:root {
    --text-default: rgba(0, 0, 0, 0.9);
    --text-secondary: rgb(120, 120, 120);
    --text-tertiary: rgb(0, 0, 255);
    --bg-default: rgb(255, 255, 255);
    --trans-func-default: cubic-bezier(.1, .6, .4, 1);
    --trans-func-ease-out: cubic-bezier(0, .23, .07, 1); /* ease-out default: cubic-bezier(0, 0, 0.58, 1) */
    --trans-func-ease-in-out: cubic-bezier(.55, .08, 0, 1); /* ease-in-out default: cubic-bezier(.42, 0, .58, 1) */    
    --circle-diameter: 21px;
    --padding-desktop: 36px;
    --padding-mobile: 24px;
}


html {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
body, button, input, select, textarea {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text-default);
    background-color: var(--bg-default);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1.5xp;
}
a {
    color: var(--text-default);
    text-decoration-line: none;
}
a:hover {
    color: inherit;
    transition: color .25s var(--trans-func-ease-in-out);
}


/* 레이아웃 설정 */  
.site-header {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: fixed;
    width: 320px;
    padding: 42px var(--padding-desktop);
    padding-bottom: var(--padding-mobile);
    background-color: var(--bg-default);
}
.main {
    display: flex;
    box-sizing: border-box;
    margin-left: 320px;
    width: 900px; /* 본문폭 기준 900px */  
    padding-top: var(--padding-desktop);
    padding-bottom: var(--padding-desktop);
    z-index: 0;
}
.site-footer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    padding-left: var(--padding-desktop);
    font-size: 12px;
}
.copy-right {
    flex-wrap: wrap;
}


/* 로고 안에 공전하는 애니메이션 */  
.branding {
    display: flex;
    vertical-align: center;
}
.branding a {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60px;
    height: var(--circle-diameter);
    vertical-align: middle;
    text-indent: -1000px;
}
.circle {
    position: absolute;
	width: var(--circle-diameter);
	height: var(--circle-diameter);
	border-radius: 50%;
	background-color: var(--text-default);
	animation: ease-in-out;
}
.left-circle {
	left: 0;
	animation-name: left;
	animation-duration: 2.4s;
	animation-iteration-count: 6;
}
.right-circle {
	left: var(--circle-diameter);
	animation-name: right;
	animation-duration: 2.4s;
	animation-iteration-count: 6;
}
@keyframes left {
    0%    { left: 0; }
    100%  { left: var(--circle-diameter); }
}
@keyframes right {
    0%    { left: var(--circle-diameter); }
    100%  { left: 0; }
}


.navigation,
.menu {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-item {
    display: flex;
    vertical-align: center;
    padding-right: 8px;
    padding-top: 1px;
    padding-bottom: 8px;
}
.menu-item a {
    height: var(--circle-diameter);
    line-height: var(--circle-diameter);
}
.site-navigation {
    font-size: 17px;
}
.sns-navigation {
    margin-left: 60px;
    margin-top: 90px;
}
.menu-item > a,
.current-menu-item > a {
    display: block;
    box-sizing: inherit;
    position: relative;
    clear: both;
}
/* 메뉴 위에 마우스 올리면 밑줄 */
.menu-item > a:hover::after,
.current-menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin: 0;
    border-bottom: 3px solid var(--text-tertiary);
}
/* 현재 메뉴는 밑줄은 검은색으로 */
.current-menu-item > a::after {
    border-bottom: 3px solid var(--text-default);
}
.sns-navigation .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.5px;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin: 0;
    /* border-bottom: 1.5px solid var(--text-default); */
}
.sns-navigation .menu-item > a:hover::after {
    border-bottom: 3px solid var(--text-tertiary);
}
.email-mobile {
    display: none;
}
.main-menu .home {
    display: block;
    background-image: url(images/logo.svg);
    background-size: 133px;
    background-repeat: no-repeat;
    width: 133px;
    height: 22px;
    margin-top: 3px;
    text-indent: -1000px;
}


/* 화면 폭 1800px이상부터 여백조정
   320:1200:320 비율 */  
@media all and ( min-width: 1800px ) {
    .main {
        width: 65.22%;
        max-width: 1200px;
        margin: auto;
    }
}


/* 화면 폭 1540px이상부터 여백조정
   320:900-1200:320 비율 */  
@media all and ( min-width: 1540px ) {
    .main {
        width: 58.44%;
        margin: auto;
    }
}
    

/* 폭 1256px 이하일 때 메뉴 상단으로 변경
   메뉴 320px + 본문 900px + 여백 36px */  
@media all and ( max-width: 1256px ) {
    .site-header {
        flex-direction: row;
        width: 100%;
    }
    .branding a {
        width: 55px;
    }
    .navigation,
    .menu {
        display: flex;
        flex-direction: row;
        margin: 0;
    }
    .sns-navigation {
        margin-left: auto;
    }
    .site-footer {
        position: relative;
    }
    .main {
        margin-left: auto !important;
        margin-right: auto;
        padding-top: 132px;
    }
    .main-menu .home {
        display: none;
    }
}


/* 폭 960px 이하일 때 여백조정
   기준폭은 900px이지만 양쪽 여백을 위해 60px 더함 */  
@media all and ( max-width: 960px ) {
    .main {
        width: auto;
        padding-top: 132px;
        padding-left: var(--padding-desktop);
        padding-right: var(--padding-desktop);
    }
}


/* 폭 600px 이하일 때 상단이메일 표시 가리기 
   여백을 30px에서 24px로 조정 */  
@media all and ( max-width: 600px ) {
    .site-header {
        padding: var(--padding-mobile);
    }
    .site-footer {
        padding-left: var(--padding-mobile);
    }
    .email-desktop {
        display: none;
    }
    .email-mobile {
        display: block;
    }
    .main {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
    }
}


/* 아카이브, 목록 공통스타일 */
.main-archive {
    display: flex;
    flex-direction: column;
}
.article {
    padding-bottom: 24px;
}
.article .thumbnail {
    padding: 0;
    margin: 0;
    width: 100%;
}
.article .thumbnail img {
    width: 100%;
    height: auto;
}


/* 프로젝트 아카이브에서 썸네일 하부에 선 생기게 */
.article-archive-works picture img {
    border-bottom: 1.5px solid var(--text-secondary);
}
/* 프로젝트 아카이브에서 썸네일 하부에 마우스 올리면 선 진하게 */
.article-archive-works picture img:hover {
    -webkit-filter: sepia(12%);
    filter: sepia(12%);
    border-bottom: 1.5px solid var(--text-tertiary);
    transition: .15s var(--trans-func-ease-in-out);
}


/* 문의하기 폼 강제로 변경하기 */
#wpforms-submit-356 {
    background-color: var(--text-secondary) !important;
}
#wpforms-submit-356:hover {
    background-color: var(--text-tertiary) !important;
}
.wpforms-field-textarea textarea {
    min-width: 600px !important;
}
@media all and ( max-width: 600px ) {
    .wpforms-field-textarea textarea {
        min-width: 400px !important;
    }
}


/* 글 목록 */
.type-post .entry-header {
    display: flex;
    width: auto;
    height: auto;
    flex-direction: row;
    vertical-align: top;
    border-bottom: 1.5px dashed var(--text-default);
    z-index: 1000;
}
.type-post .entry-header h1,
.type-post .entry-header h2,
.type-post .entry-header p {
    display: flex;
    margin: 0;
}
.type-post .entry-header h1,
.type-post .entry-header h2 {
    margin-right: 24px;
}


/* 소식 post-type: news
   소식은 archive와 single구분 없음 */
.main-archive-news article {
    display: flex;
    flex-direction: row;
    vertical-align: top;
}
.main-archive-news article .entry-header {
    position: relative;
    width: 90px;
    height: 100%;
    margin-right: 24px;
    flex-shrink: 0;
}
.main-archive-news article .entry-header p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin: 0;
    border-bottom: 1.5px solid var(--text-secondary);
}
.main-archive-news article .entry-header p {
    margin: 0;
}
.main-archive-news article .entry-content p {
    margin: 0;
}


/* 제목 숨기기 */
.article-single-works .entry-header .date,
#post-48 .entry-header,
#post-89 .entry-header {
    display: none;
}


/* 싱글페이지 제목 하부에 여백주기 */
.article-single .entry-title {
    margin-bottom: 12px;;
}


/* 싱글페이지 단어 단위로 줄바꿈 */
.article .entry-content p {
    word-break: keep-all;
}
    

/* 싱글페이지 링크 */
.main-single article .entry-content a,
.main-page article .entry-content a,
.main-archive-news article .entry-content a {
    color: var(--text-secondary);
    border-bottom: 1.5px solid var(--bg-default); /* 링크 아랫줄 흰색으로, hover후 아래쪽 제목 위치 변동되는 걸 막기 위해서 */
} 
.main-single article .entry-content a:hover,
.main-page article .entry-content a:hover,
.main-archive-news article .entry-content a:hover {
    -webkit-filter: sepia(12%);
    filter: sepia(12%);
    color: var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    transition: .05s var(--trans-func-ease-in-out);
}