/*
Theme Name: PL
Author: Kim, Minwook by Sweater Interactive
Author URI: http://michinid.com
Version: 1.0
*/
@charset "UTF-8";

body { margin: 0; }
img { border: 0 none; }

body { background-color: #fafafa; font-family: Helvetica, Arial, "나눔 고딕", "맑은 고딕", "돋움", sans-serif; }

.clear { clear: both; }

header { position: relative; margin: 0 auto; width: 100%; max-width: 900px; }
#header_wrap { margin: 0; padding: 30px 20px 28px; border-bottom: 2px solid #ccc; }
.logo { margin: 0; }
.logo a { display: block; width: 53px; height: 77px; }
.logo img { display: block; width: 100%; height: 100%; }
.buttons { display: block; position: absolute; right: 20px; bottom: 27px; text-align: center; font-weight: bold; color: #999; text-decoration: none; }
.menu { margin-left: 10px; text-align: center; font-weight: bold; color: #999; text-decoration: none; }
.menu.home { margin-left: 0; }
.menu:hover { color: #3c3; text-decoration: underline; }
.menu.home { height: 58px; }
.menu.home img { display: block; top: 0; left: 0; margin: 0 auto 5px; width: 34px; height: 34px; }

section { position: relative; margin: 0 auto; width: 100%; max-width: 900px; }
.home section { max-width: 1120px; }
section.thumbnail { margin: 20px auto; width: 220px; }
section.list .lists { border-top: 1px solid #ccc; list-style: none; padding: 0; }
section.list .lists > li { position: relative; padding: 20px; border-bottom: 1px solid #ccc; color: #999; font-size: 12px; }
section.list .lists > li h3 { margin: 0; color: #999; font-size: 12px; }
section.list .lists > li h3 a { display: block; width: 70%; color: #999; text-decoration: none; }
section.list .lists > li h3 a:hover { color: #3c3; text-decoration: underline; }
section.list .lists > li h3 a.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
section.list .lists > li.selected h3 a { color: #3c3; text-decoration: underline; }
section.list .lists > li .date { position: absolute; top: 20px; right: 20px; color: #999; font-size: 12px; }
section.list .lists > li .content { display: none; margin-top: 20px; }
section.list .lists > li .content img { display: block; width: 100%; height: auto; }
section.list .lists > li .content .iframe { position: relative; display: block; width: 100%; height: 0; padding-bottom: 56%; }
section.list .lists > li .content .iframe iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

#section_wrap > p { text-align: center; }

.thumbnail_wrap { float: left; position: relative; width: 220px; height: 320px; }
.thumbnail_wrap .frame { position: absolute; top: 0; left: 0; display: block; width: 220px; height: 220px; z-index: 999; }
.thumbnail_wrap .thumb_img { position: relative; display: block; margin: 10px; width: 200px; height: 200px; }
.thumbnail_wrap .thumb_img img { display: block; width: 200px; height: 200px; }
.thumbnail_wrap .name { display: none; margin: 0 10px; padding: 15px 0 10px; width: 200px; height: 40px; text-align: center; color: #fff; font-size: 14px; position: absolute; bottom: 10px; left: 0; background-color: rgba(0,0,0,0.5); }
.thumbnail_wrap .name p { margin: 0; font-weight: normal; color: #ccc; }
.thumbnail_wrap:hover .name { display: block;}

.main .thumbnail_wrap { height: 240px; margin-bottom: 50px; }
.main .thumbnail_wrap .frame { height: 240px; }
.main .thumbnail_wrap .thumb_img { height: 220px; }
.main .thumbnail_wrap .thumb_img img { height: 220px; }

.page_title { margin: 30px 0; text-align: center; font-size: 25px; color: #999; font-weight: normal; }

.single #section_wrap { margin: 20px; }
.single #section_wrap .post_title { color: #999; font-weight: normal; font-size: 14px; height: 30px; }
.single #section_wrap .date { display: block; position: absolute; top: 60px; right: 20px; color: #999; font-weight: normal; font-size: 14px; }
.single #section_wrap .content { padding-bottom: 20px; }
.single #section_wrap .content img { display: block; width: 100%; height: auto; }
.single #section_wrap .content .iframe { position: relative; display: block; width: 100%; height: 0; padding-bottom: 56%; }
.single #section_wrap .content .iframe iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

.news_link { display: block; text-align: right; text-decoration: none; color: #999; font-size: 12px; float: right; }
.news_link:hover { color: #666; }

.wp-pagenavi { margin: 60px 0; font-weight: normal; font-size: 12px; text-align: center; }
.wp-pagenavi a { margin: 0 5px; text-decoration: none; color: #999; }
.wp-pagenavi a:hover { color: #333; }
.wp-pagenavi span { margin: 0 5px; color: #333; font-weight: bold; }

footer { position: relative; margin: 0 auto; width: 100%; max-width: 900px; }
#footer_wrap { padding: 18px 20px 40px; border-top: 2px solid #ccc; }
#footer_wrap address, #footer_wrap address a { font-style: normal; color: #999; font-size: 11px; text-decoration: none; }
#footer_wrap address a:hover { color: #3c3; }

@media all and (min-width: 480px){
#header_wrap { margin: 30px 20px; padding: 0; padding-bottom: 28px; }
section.thumbnail { width: 460px; }
section.list .lists > li { padding: 20px 0; }
section.list .lists > li .date { right: 0; }
section.list .lists > li h3 a { width: 80%; }
#section_wrap { margin: 10px; }
section.list #section_wrap { margin: 20px; }
#footer_wrap { margin: 20px 20px 40px; padding: 18px 0 0; }
#footer_wrap address.copyright { position: absolute; right: 20px; top: 20px; text-align: right; }
}

@media all and (min-width: 700px){
section.list .lists > li h3 a { width: 90%; }
section.thumbnail { width: 680px; }
}

@media all and (min-width: 920px){
section.thumbnail { width: 900px; }
}

@media all and (min-width: 920px){
section.thumbnail { width: 900px; }
}
/* home: responsive (was fixed 1120px). Columns follow section.thumbnail widths above; 5 columns from 1140px. */
.home header, .home footer { max-width: 1120px; }
@media all and (min-width: 1140px){
.home section.thumbnail { width: 1120px; }
}
/* phones: two fluid columns; percentages keep the frame/photo proportions (10px of 220px = 4.545%) */
@media all and (max-width: 479px){
.home section.thumbnail { width: auto; margin: 20px 10px; }
.home .thumbnail_wrap { width: 50%; height: auto; margin-bottom: 10px; }
.home .thumbnail_wrap > div { position: relative; display: flow-root; } /* flow-root keeps the photo margins inside, so the frame height matches */
.home .thumbnail_wrap .frame { width: 100%; height: 100%; }
.home .thumbnail_wrap .thumb_img { margin: 4.545%; width: auto; height: auto; aspect-ratio: 200 / 220; }
.home .thumbnail_wrap .thumb_img img { width: 100%; height: 100%; }
.home .thumbnail_wrap .name { width: auto; height: auto; left: 0; right: 0; bottom: 4.545%; margin: 0 4.545%; padding: 8px 4px; font-size: 12px; }
}
/* touch screens have no hover: always show the artist name */
@media (hover: none){
.thumbnail_wrap .name { display: block; }
}

/* transitions (main site). Cards are hidden only when js/reveal.js adds .js-reveal, so no-JS visitors still see them. */
.menu, .news_link, .wp-pagenavi a, #footer_wrap address a, section.list .lists > li h3 a { transition: color .2s ease; }
.thumbnail_wrap .thumb_img { overflow: hidden; }
.thumbnail_wrap .thumb_img img { transition: transform .4s ease; }
.thumbnail_wrap:hover .thumb_img img { transform: scale(1.04); }
.thumbnail_wrap .name { display: block; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.thumbnail_wrap:hover .name { opacity: 1; transform: none; }
@media (hover: none){ .thumbnail_wrap .name { opacity: 1; transform: none; } }
.js-reveal .home .thumbnail_wrap { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .home .thumbnail_wrap.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }