@charset "utf-8";

/* ------------------------------------------------ */
/* Rollstory20 skin stylesheet v2.0.3 */
/* ------------------------------------------------ */

@font-face {
    font-family: "Pretendard Variable";
    src: url('images/PretendardVariable.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard Variable";
    src: url('images/PretendardVariable.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard Variable";
    src: url('images/PretendardVariable.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard Variable";
    src: url('images/PretendardVariable.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

/* 기본 설정 */
html {
    -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
    -moz-text-size-adjust: none; /*Firefox*/
}

body {
    overflow-wrap: anywhere;
    margin: 0;
    padding: 0;
    background-color: var(--back);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 16px;
    color: var(--main);
    word-break: keep-all;
}

body::after {
	content: '';
	position: fixed;
    height: 100vh;
	top: 0;
	left: 0;
    right: 0;
	z-index:-1;
}	

::selection {
    background-color: var(--main);
    color: var(--sub);
}

a {
    color: var(--main);
    text-decoration: none;
}

input {
    color: var(--main);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

input::placeholder {
    color: var(--main);
    opacity: .5;
}

/* 원클릭 스크롤 */
#top {
    display: none;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(335px);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

#bottom {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(335px);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* ***** Header ***** */
#headerBox {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 100px auto 0;
    padding: 0 32px;
}

#header {
    display: flex;
    margin: 0;
    padding: 0 0 6px;
    justify-content: space-between;
    align-items: flex-end;
}

#headerBox a {
    text-decoration: none;
}

/* 로고 */
#logo {
    max-width: 385px;
    margin: 0;
    padding: 0;
    font-size: 0;
    align-items: flex-end;
    word-wrap: break-word;
}

#logo a {
    display: block;
    color: var(--sub);
    font-family: "Pretendard Variable";
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

#logo img {
    width: auto;
    max-width: 100%;
    max-height: 60px;
    vertical-align: bottom;
}

/* 검색 상자 */
#searchBox {
    display: flex;
    width: 180px;
    height: 30px;
    padding-right: 5px;
    background-color: var(--sub);
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
}

#searchBox input {
    width: 144px;
    padding: 0 0 0 10px;
    background: none;
    border: none;
    outline: none;
}

#searchBox .submit {
    width: 24px;
    height: 24px;
    padding: 2px 0 0 4px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/* 수납 요소 */
#drawer {
    display: none;
}

#drawer a {
    color: var(--sub);
}

#slider {
    height: 14px;
    padding-bottom: 4px;
    color: var(--sub);
    text-align: center;
    cursor: pointer;
}

/* 블로그 메뉴 & 태그 클라우드 */
#top_menu ul,
#top_tag ul {
    margin: 0;
    padding: 15px 2px;
    text-align: center;
}

#top_menu li,
#top_tag li {
    display: inline-block;
    margin: 2px 4px;
    font-size: .875em;
    color: var(--sub);
    line-height: 1;
}

#top_menu li:hover,
#top_tag li:hover {
    font-weight: 700;
}

#top_menu,
#top_tag,
#top_category {
    display: none;
}

/* 카테고리 목록 */
.tt_category {
    padding-left: 0;
}

.tt_category li {
    text-align: center;
    line-height: 1.4;
    list-style: none;
}

.tt_category a {
    display: block;
    width: 14em;
    max-width: 60%;
    margin: 0 auto;
    padding: 0 1em .6em;
    border-bottom: 1px solid var(--sub);
    font-weight: 500;
}

.tt_category a:hover {
    font-weight: 700;
}

.category_list {
    display: grid;
    margin-top: 1em;
    padding-left: 0;
    font-size: 1em;
    grid-template-columns: repeat(auto-fill, 33%);
    row-gap: 1em;
}

.category_list li {
    padding: 0 .6em;
    text-align: left;
}

.category_list a {
    width: auto;
    max-width: none;
    padding: 0 0 .2em;
    border-bottom: none;
}

.sub_category_list {
    padding: .4em .2em;
    font-size: .8em;
}

.sub_category_list li {
    border-left: none;
}

.sub_category_list li::marker {
    content: '-';
    color: var(--sub);
}

.sub_category_list a {
    padding-left: 0;
    font-weight: 400;
}

/* ***** content ***** */
#content {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 35px 32px;
    background-color: var(--sub);
    border-radius: 6px;
}

/* 제목 파트 */
.titleWrap {
    display: flex;
    margin-bottom: 10px;
}

.icon {
    float: left;
    width: 14px;
    margin-right: 16px;
    vertical-align: bottom;
}

.name {
    margin-right: 8px;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2em;
}

.admin {
    box-sizing: content-box;
    display: flex;
    width: 45px;
    margin: 4px 0 0 auto;
    justify-content: space-between;
}

.admin .first {
    margin-right: 13px;
}

.admin.visitor {
    display: none;
}

/* 글 목록 - 타이틀형*/
#textList #img_list,
#textList .img_ico {
    display: none;
}

#textList ol {
    margin: 0;
    padding: 5px 0;
    list-style: none;
}

#textList li {
    display: block;
}

#textList .line {
    box-sizing: content-box;
    height: 2px;
    background-color: var(--main);
    opacity: .12;
}

#textList .category {
    overflow: hidden;
    float: left;
    width: 80px;
    margin-left: 10px;
    font-size: .9em;
    white-space: nowrap;
    opacity: .5;
}

#textList .title {
    display: block;
    margin-right: 10px;
    margin-left: 110px;
    line-height: 19px;
}

#textList .hoverline {
    display: block;
    position: relative;
    padding: 7px 0;
}

#textList .hoverline::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--main);
    opacity: .06;
}

#textList li:hover > .hoverline::before {
    width: 100%;
    transition: width .3s;
}

/* 글 목록 - 썸네일형 */
#imgList #text_list,
#imgList .text_ico {
    display: none;
}

#imgList ol {
    display: grid;
    margin: 0;
    padding: 5px 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, 30%);
    column-gap: 5%;
    row-gap: 30px;
}

#imgList .thumb {
    position: relative;
    width: 100%;
    max-height: 120px;
    margin-bottom: .5em;
    overflow: hidden;
}

#imgList .thumb img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

#imgList .replace {
    display: none;
    position: relative;
    width: 100%;
    height: 70px;
    padding: 25px 0 0;
    text-align: center;
    opacity: .3;
}

#imgList .replace::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main);
    opacity: .2;
}

#imgList .thumb::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 30%, var(--sub) 50%);
    background-size: 100% 200%;
    background-position-y: 0;
    z-index: 1;
}

#imgList .play {
    display: inline;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 2;
}

#imgList .play_text {
    position: absolute;
    right: .3em;
    bottom: .2em;
    font-weight: 700;
    opacity: 0;
}

#imgList .play_text svg {
    position: relative;
    top: 2px;
}

#imgList .title {
    font-weight: 500;
}

#imgList .line {
    width: 20%;
    height: 2px;
    margin-top: .4em;
    background-color: var(--main);
    opacity: .12;
}

#imgList .category {
    margin-top: .4em;
    padding: 0;
    font-size: .9em;
    opacity: .5;
}

#imgList a:hover > li .square .thumb::before {
    background-position-y: 20%;
    transition: background-position-y .3s;
}

#imgList a:hover > li .square .play_text {
    opacity: 1;
    transition: opacity .3s;
}

/* 페이징 */
#paging {
    padding-top: 20px;
    font-size: .95em;
    text-align: center;
}

#paging .numbox {
    margin-left: 6px;
    padding-left: 6px;
    font-size: .95em;
}

#paging .num {
    margin-right: 5px;
    padding-right: 8px;
}

#paging .selected {
    font-weight: 700;
}

#paging .no-more-prev,
#paging .no-more-next {
    opacity: 0;
}

/* 태그 목록 */
#taglog ul {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

#taglog li {
    display: inline-block;
}

#taglog .tag_button {
    margin: 4px 2px;
    padding: 2px 4px;
    background-color: var(--sub);
    border: 1px solid var(--main);
    border-radius: 6px;
    color: var(--main);
    font-size: 1em;
    font-family: "Pretendard Variable";
    cursor: pointer;
}

#taglog .tag_button:hover {
    background-color: var(--main);
    color: var(--sub);
    transition: all .2s;
}

/* 방명록 - 접근 제한 */
.restricted {
    display: flex;
    height: 300px;
    font-size: 1.3em;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.restricted svg {
    margin-right: 8px;
}

/* 보호글 */
.entryProtected p {
    line-height: 1.75;
    text-align: center;
}

.entryProtected input {
    width: 160px;
    height: 30px;
    padding: 0 10px;
    background-color: var(--sub);
    border: 1px solid var(--main);
    border-radius: 6px;
    outline-color: var(--main);
}

.entryProtected .submit {
    width: 45px;
    height: 32px;
    padding: 1px 0 0;
    background-color: var(--main);
    border: none;
    border-radius: 6px;
    vertical-align: bottom;
    cursor: pointer;
}

/* 본문 */
.name h1 {
    margin: 0;
    font-size: inherit;
}

.article {
    overflow: hidden;
    margin-top: 1em;
    padding: 0;
}

/* 이미지 블럭 */
figure.imageblock,
figure.imagegridblock {
    margin: .8em 0;
}

figure.imageblock.alignCenter {
    margin: .8em auto;
}

figure figcaption {
    min-height: 0;
    padding-top: .1em;
    opacity: .7;
}

/* 일반 텍스트 */
h2[data-ke-size="size26"] {
    margin: 1.25em 0 .375em;
    font-size: 1.75em;
    line-height: 1.2;
}

h3[data-ke-size="size23"] {
    margin: 1.25em 0 .375em;
    font-size: 1.5em;
    line-height: 1.2;
}

h4[data-ke-size="size20"] {
    margin: 1.2em 0 .3em;
    font-size: 1.25em;
    line-height: 1.3125;
}

p[data-ke-size="size18"] {
    margin: 0;
    padding: 0;
    font-size: 1.125em;
    line-height: 1.75;
}

p[data-ke-size="size16"] {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.75;
}

p[data-ke-size="size14"] {
    margin: 0;
    padding: 0;
    font-size: .875em;
    line-height: 1.75;
}

/* 인용구 */
blockquote,
blockquote p {
    font-size: 1.125em;
    color: var(--main);
}

blockquote[data-ke-style='style1']::before {
    content: '“ ';
    font-family: 'Noto Serif KR';
    font-size: 1.8em;
}

blockquote[data-ke-style='style1']::after {
    content: ' ”';
    font-family: 'Noto Serif KR';
    font-size: 1.8em;
}

blockquote[data-ke-style='style1'] {
    text-align: center;
}

blockquote[data-ke-style='style2'] {
    padding-left: 1.5em;
    border-left: 6px solid var(--main);
}

blockquote[data-ke-style='box'],
blockquote[data-ke-style='style3'] {
    border: 1px solid var(--main);
    border-radius: 6px;
    background: none;
    color: var(--main);
}

/* 링크 */
.article a {
    text-decoration: underline;
}

figure[data-ke-type='opengraph'] {
    margin-top: .8em;
    margin-bottom: .8em;
    background-color: var(--sub);
}

figure[data-ke-type='opengraph'] a {
    border: none;
}

figure[data-ke-type='opengraph'] div.og-image {
    border: 1px solid var(--main);
    border-right: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

figure[data-ke-type=opengraph] a div.og-image::before {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

figure[data-ke-type='opengraph'] div.og-text {
    border: 1px solid var(--main);
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title,
figure[data-ke-type='opengraph'] div.og-text p.og-desc,
figure[data-ke-type='opengraph'] div.og-text p.og-host {
    color: var(--main);
    text-indent: 0;
}

figure[data-ke-type='opengraph'] div.og-text p.og-desc,
figure[data-ke-type='opengraph'] div.og-text p.og-host {
    opacity: .7;
}

/* 첨부 파일 */
figure.fileblock {
    margin-top: .8em;
    margin-bottom: .8em;
    width: 80%;
    border: 1px solid var(--main);
    border-radius: 6px;
    background-color: var(--sub);
}

figure.fileblock .image {
    background: var(--main);
    mask-image: url(./images/Rollstory_ico.svg);
    mask-position: 0 -200px;
}

figure.fileblock .filename {
    color: var(--main);
}

figure.fileblock .size {
    color: var(--main);
    opacity: .5;
}

figure.fileblock a::after {
    background: var(--main);
    mask-image: url(./images/Rollstory_ico.svg);
    mask-position: -30px -200px;
}

/* 동영상, 슬라이드쇼 */
figure[data-ke-type='video'],
figure[data-ke-type='video'][data-ke-style='alignCenter'],
figure.imageslideblock,
figure.imageslideblock.alignCenter {
    margin: .8em auto;
}

figure[data-ke-type='video'] figcaption,
figure.imageslideblock figcaption {
    color: var(--main);
}

/* 리스트 */
.article ul,
.article ol {
    margin: 0;
    line-height: 1.5;
}

.article ul li,
.article ol li {
    margin: .25em;
}

/* 구분선 */
hr[data-ke-style] {
    background: var(--main) !important;
    mask-image: url(./images/Rollstory_ico.svg);
    mask-size: 200px 230px;
    mask-repeat: no-repeat;
}

hr[data-ke-style='style1'] { mask-position: 0 0; }
hr[data-ke-style='style2'] { mask-position: 0 -19px; }
hr[data-ke-style='style3'] { mask-position: 0 -40px; }
hr[data-ke-style='style4'] { mask-position: 0 -60px; }
hr[data-ke-style='style5'] { mask-position: 0 -120px; mask-repeat: repeat-x; }
hr[data-ke-style='style6'] { mask-position: 0 -140px; mask-repeat: repeat-x; }
hr[data-ke-style='style7'] { mask-position: 0 -160px; }
hr[data-ke-style='style8'] { mask-position: 0 -180px; }

/* 본문 더보기 */
.btn-toggle-moreless,
.btn_more,
.btn_less {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 1.85em;
    background-color: var(--main);
    border-radius: 6px;
    color: var(--sub) !important;
    font-size: .875em !important;
    font-weight: 700;
}

div[data-ke-type='moreLess'] {
    position: relative;
    margin: .8em 0;
    text-align: center;
}

div[data-ke-type='moreLess']::after {
    content: '';
    position: absolute;
}

.btn-toggle-moreless::after,
.btn_more:before {
    content: '✚';
    margin-left: .3em;
}

.open .btn-toggle-moreless::after,
.btn_less:before {
    content: '✖';
    margin-left: .3em;
}

.moreless-content {
    margin: .8em 0;
    border-bottom: 2px solid var(--main);
    text-align: initial;
}

.moreless-content::after {
    content: '▲';
    display: block;
    color: var(--main) !important;
    text-align: right;
    font-size: .8em !important;
    font-weight: 700;
}

a.btn-toggle-moreless::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.15em;
}

/* 공감 버튼 */
.container_postbtn {
    margin-top: 60px;
    padding: 0 !important;
}

.container_postbtn .postbtn_like::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main);
    border-radius: 6px;
    opacity: .12;
}

.container_postbtn .postbtn_like .wrap_btn button:focus {
    outline: none !important;
}

.container_postbtn .postbtn_like {
    position: relative;
    padding: 0 3px !important;
    border: none !important;
}

.container_postbtn .ico_postbtn {
    background: var(--main) !important;
    mask-image: url(./images/Rollstory_ico.svg);
    mask-size: 200px 230px;
    mask-repeat: no-repeat;
}

.container_postbtn .ico_like { mask-position: -60px -201px; }
.container_postbtn .like_on .ico_like { mask-position: -75px -201px; }
.container_postbtn .ico_share { mask-position: -90px -199px; }
.container_postbtn .ico_statistics { mask-position: -103px -199px; }
.container_postbtn .ico_etc { height: 14px !important; mask-position: -116px -200px; }

.container_postbtn .btn_post {
    padding: 0 4px !important;
}
.container_postbtn .btn_post .txt_like {
    margin: 0 !important;
}

.container_postbtn .ico_arrbt {
    background: url(//t1.daumcdn.net/tistory_admin/static/admin/editor/ico_postbtn_190118.png) no-repeat !important;
    background-position: -140px 0 !important;
    mask-image: none;
}

.container_postbtn .btn_menu_toolbar {
    display: none !important;
}

/* 카테고리의 다른 글 목록 */
.area_related {
    margin: 20px 0;
    padding: 12px;
    border-top: 2px solid var(--main);
    border-bottom: 2px solid var(--main);
    color: var(--main);
    font-size: 1em;
}

.area_related .icon {
    margin-right: .5em;
    padding-top: 2px;
}

.area_related svg {
    position: relative;
    top: 2px;
    margin-right: 1px;
}

.area_related .link_more {
    font-size: .875em;
    font-weight: 500;
}

.area_related .link_go {
    margin-left: 2px;
    opacity: 0;
}

.area_related .link_more:hover > .link_go {
    opacity: 1;
    transition: opacity .2s;
}

.area_related ul {
    margin: 10px 0 0;
    padding: 0;
    font-size: .875em;
}

.area_related li {
    margin: 5px 0;
    list-style: none;
}

.area_related .related {
    display: flex;
}

.area_related .shape {
    float: left;
    margin-right: 4px;
    opacity: 0;
}

.area_related a:hover {
    text-decoration: none;
}

.area_related .related:hover > .shape {
    opacity: 1;
    transition: opacity .2s;
}

/* BACK */
.back {
    margin-top: 20px;
    font-size: 1em;
    text-align: right;
    font-weight: 500;
}

.back svg {
    position: relative;
    top: 2px;
}

.back a:hover {
    color: var(--main);
    text-decoration: none;
}

.entry .back {
    margin-top: 0;
}

/* ***** footer ***** */
#footer {
    margin: 25px auto 75px;
    font-size: .8em;
    color: var(--sub);
    text-align: center;
}

#footer a {
    color: var(--sub);
    text-decoration: none;
}

/* ***** scroll bar ***** */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main);
    border: 2px solid var(--sub);
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--sub);
}

/* ------------------------------------------------ */
/* 반응형 */
/* ------------------------------------------------ */

@media all and (max-width: 649px) {
    ::-webkit-scrollbar { display: none; }
    #headerBox { margin: 30px auto 0; padding: 0 5%; }
    #logo { max-width: 40%; }
    .category_list { grid-template-columns: repeat(auto-fill, 50%); }
    #content { padding: 25px 5%; }
    #textList .category { display: none; }
    #textList .title { margin-left: 10px; }
    #imgList ol { grid-template-columns: repeat(auto-fill, 48%); column-gap: 4%; }
    #footer { margin: 20px auto 30px; }
}

@media all and (max-width: 340px) {
    #logo { max-width: 100%; }
    #searchBox { display: none; }
    .category_list { grid-template-columns: repeat(auto-fill, 100%); }
    .admin { display: none; }
    #imgList ol { grid-template-columns: repeat(auto-fill, 100%); }
}