@charset "utf-8";

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

@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 {
    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;
    overflow-wrap: anywhere;
}

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 {
    font-family: inherit;
    color: var(--main);
}

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

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px auto var(--sub);
}

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

header a {
    text-decoration: none;
}

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

/* 로고 */
.blog-title {
    max-width: 385px;
    margin: 0;
    padding: 0;
    font-size: 0;
    align-items: flex-end;
    user-select: none;
    -webkit-user-select: none;
    overflow-wrap: break-word;
}

.blog-title a {
    display: block;
    font-family: inherit;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--sub);
}

.blog-title img {
    vertical-align: bottom;
    width: auto;
    max-width: 100%;
    max-height: 60px;
}

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

.search-box input {
    width: 144px;
    padding: 0 0 0 10px;
    border: none;
    background: none;
    outline: none;
}

.search-box button {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0;
    border: none;
    background-color: transparent;
    line-height: 0;
    cursor: pointer;
}

.search-box button:focus-visible {
    outline-color: var(--main);
}

/* 수납 요소 */
header .drawer {
    display: none;
    user-select: none;
    -webkit-user-select: none;
}

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

header .toggle {
    display: block;
    width: 100%;
    height: 18px;
    padding: 0 0 2px;
    border: none;
    background: none;
    text-align: center;
    line-height: 0;
    color: var(--sub);
    cursor: pointer;
}

.top-menu, .top-tag, .top-category {
    display: none;
}

/* 블로그 메뉴 & 태그 클라우드 */
.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;
    line-height: 1;
    color: var(--sub);
}

.top-menu a:hover, .top-tag a:hover,
.top-menu a:focus-visible, .top-tag a:focus-visible {
    font-weight: 700;
    outline: none;
}

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

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

.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,
.tt_category a:focus-visible {
    font-weight: 700;
    outline: none;
}

.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 ***** */
main {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    min-height: 180px;
    margin: 0 auto;
    padding: 35px 32px;
    border-radius: 6px;
    background-color: var(--sub);
}

main *:focus-visible {
    outline-color: var(--main);
}

/* 제목 영역 */
.title-wrap {
    display: grid;
    margin-bottom: 13px;
    grid-template-columns: 30px auto 24px 29px;
}

.title-wrap .title-heading h1 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2em;
}

.title-heading time {
    display: inline-block;
    font-size: .6em;
    font-weight: 400;
    line-height: 1;
    opacity: .5;
}

.title-wrap .admin {
    width: 16px;
    height: 16px;
    margin: 4px 0 auto auto;
    line-height: 0;
}

.title-wrap .admin.btn {
    padding: 0;
    border: none;
    background: none;
    line-height: initial;
    cursor: pointer;
}

.title-wrap.visitor { grid-template-columns: 30px auto; }
.title-wrap.visitor .admin { display: none; }
.title-wrap .login { display: none; }

/* 글 목록 - 텍스트 */
.text-style .thumb-list,
.text-style .thumb-icon {
    display: none;
}

.text-list ol {
    margin: 0;
    padding: 5px 0;
    list-style: none;
}

.text-list li {
    display: block;
}

.text-list .hr {
    box-sizing: content-box;
    height: 2px;
    background-color: var(--main);
    opacity: .12;
}

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

.text-list .title {
    display: block;
    margin: 0 10px 0 110px;
    line-height: 19px;
}

.text-list .box {
    display: block;
    position: relative;
    padding: 7px 0;
}

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

.text-list a:hover > li .box::before,
.text-list a:focus-visible > li .box::before {
    width: 100%;
    transition: width .3s;
}

.text-list a:focus-visible {
    outline: none;
}

/* 글 목록 - 썸네일 */
.thumb-style .text-list,
.thumb-style .text-icon {
    display: none;
}

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

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

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

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

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

.thumb-list .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;
}

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

.thumb-list .play-text {
    position: absolute;
    right: .3em;
    bottom: .2em;
    font-weight: 700;
    opacity: 0;
}

.thumb-list .play-text svg {
    position: relative;
    top: 2px;
}

.thumb-list .title {
    font-weight: 500;
}

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

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

.thumb-list a:hover > li .thumb::before,
.thumb-list a:focus-visible > li .thumb::before {
    background-position-y: 20%;
    transition: background-position-y .3s;
}

.thumb-list a:hover > li .play-text,
.thumb-list a:focus-visible > li .play-text {
    opacity: 1;
    transition: opacity .3s;
}

.thumb-list a:focus-visible {
    outline: none;
}

/* 페이징 */
.paging {
    margin-top: 20px;
    font-size: .95em;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.paging .numbox {
    margin: 0 6px;
    font-size: .95em;
}

.paging .num {
    margin: 0 3px;
    padding: 0 4px;
}

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

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

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

.taglog li {
    display: inline-block;
}

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

.taglog button:hover,
.taglog button:focus-visible {
    background-color: var(--main);
    color: var(--sub);
    outline: none;
    transition: background-color .2s, color .2s;
}

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

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

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

.protected form {
    margin-top: 1em;
    text-align: center;
}

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

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

/* 컨트롤러 */
.wide-ctrl-anchor {
    position: sticky;
    top: 30px;
}

.wide-ctrl-box {
    position: absolute;
    top: 20px;
    left: -68px;
    width: 37px;
    height: 124px;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* 잔상 제거 */
}

.wide-ctrl {
    position: relative;
    left: 36px;
}

.wide-ctrl .box-top {
    position: relative;
    top: 10px;
    left: 30px;
    width: 12px;
    line-height: 0;
    overflow: hidden;
}

.wide-ctrl .box-middle {
    border-top-left-radius: 6px;
    background-color: var(--sub);
}

.wide-ctrl .box-btn {
    width: 100%;
    padding: 0 0 0 4px;
    border: none;
    background: none;
    font: inherit;
    font-weight: 900;
    text-align: center;
    line-height: 32px;
    color: var(--main);
    opacity: .75;
    cursor: pointer;
    white-space: nowrap;
}

.wide-ctrl .box-btn:hover,
.wide-ctrl .box-btn:focus-visible {
    opacity: 1;
    outline: none;
}

.wide-ctrl .box-btn.font-up {
    height: 36px;
    padding-top: 2px;
    font-size: 20px;
}

.wide-ctrl .box-btn.font-down {
    position: relative;
    top: 4px;
    height: 16px;
    padding-bottom: 4px;
    font-size: 16px;
    z-index: 1;
}

.wide-ctrl .box-bottom {
    position: relative;
    top: -1px;
}

.wide-move {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(335px);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.wide-move.to-top { top: 10px; }
.wide-move.to-bottom { bottom: 10px; }

/* 본문 */
article {
    margin-top: 1em;
    padding: 0;
    overflow: hidden;
}

/* 이미지 블럭 */
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-radius: 6px 0 0 6px;
}

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

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

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 {
    width: 80%;
    margin-top: .8em;
    margin-bottom: .8em;
    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;
    cursor: default !important;
}

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;
    border-radius: 6px;
    background-color: var(--main);
    font-size: .875em !important;
    font-weight: 700;
    color: var(--sub) !important;
}

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;
    font-size: .8em !important;
    font-weight: 700;
    text-align: right;
    color: var(--main) !important;
}

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 {
    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 .postbtn_like::before,
.container_postbtn .postbtn_like .wrap_btn button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--main);
    opacity: .12;
}

.container_postbtn .postbtn_like .wrap_btn button::before { display: none; }
.container_postbtn .postbtn_like .wrap_btn button:focus { outline: none !important; }
.container_postbtn .postbtn_like .wrap_btn button:hover::before,
.container_postbtn .postbtn_like .wrap_btn button:focus::before { display: block; }

.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; }
.container_postbtn .postbtn_ccl { padding: 7px 4px !important; }
.bundle_ccl .ico_ccl1 { mask-position: -130px -200px; }
.bundle_ccl .ico_ccl2 { mask-position: -146px -200px; }
.bundle_ccl .ico_ccl3 { mask-position: -162px -200px; }
.bundle_ccl .ico_ccl4 { mask-position: -178px -200px; }

/* 카테고리 글 더 보기 */
.related-articles {
    margin: 20px 0;
    padding: 12px;
    border-top: 2px solid var(--main);
    border-bottom: 2px solid var(--main);
    font-size: 1em;
    color: var(--main);
}

.related-articles .category {
    display: grid;
    line-height: 1.2;
    grid-template-columns: 22px auto;
}

.related-articles .category-icon {
    margin-top: 1px;
}

.related-articles .view-more {
    display: inline-block;
    font-size: .875em;
    font-weight: 500;
}

.related-articles .view-more-icon {
    position: relative;
    top: 2px;
    left: 5px;
    opacity: 0;
}

.related-articles .category:hover > div .view-more .view-more-icon,
.related-articles .category:focus-visible > div .view-more .view-more-icon {
    opacity: 1;
    transition: opacity .2s;
}

.related-articles ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: .875em;
}

.related-articles li {
    display: grid;
    margin: 5px 0;
    line-height: 1.2;
    grid-template-columns: 17px auto;
}

.related-articles li svg {
    position: relative;
    top: 2px;
    opacity: 0;
}

.related-articles ul a:hover > li svg,
.related-articles ul a:focus-visible > li svg {
    opacity: 1;
    transition: opacity .2s;
}

.related-articles a:hover { text-decoration: none; }
.related-articles a:focus-visible { outline: none; }

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

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

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

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

/* 모바일 컨트롤러 */
.slim-ctrl {
    display: none;
    position: fixed;
    top: 25%;
    right: -32px;
    opacity: .7;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    transition: right .3s;
}

.slim-ctrl.open {
    right: 0;
    transition: right .3s;
}

.slim-ctrl.scroll-down {
    right: -58px;
    transition: right .3s;
}

.slim-ctrl.fixation {
    right: 0 !important;
}

.slim-ctrl .handle-box {
    margin: 0 0 auto;
    cursor: pointer;
}

.slim-ctrl .handle {
    position: relative;
    left: 2px;
    width: 23px;
    height: 18px;
    margin: 0 0 auto;
    padding: 4px 0 0 4px;
    border-top-left-radius: 6px;
    background-color: var(--main);
    line-height: 0;
}

.slim-ctrl .box-bottom {
    position: relative;
    top: -1px;
    left: 2px;
}

.slim-ctrl .box-middle {
    padding: 4px;
    border-bottom-left-radius: 6px;
    background-color: var(--main);
    line-height: 0;
}

.slim-ctrl .box-btn {
    height: 30px;
    margin: 20px 0;
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    line-height: 30px;
    color: var(--sub);
    cursor: pointer;
    white-space: nowrap;
}

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

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

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

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

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

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

@media all and (max-width: 649px) {
    ::-webkit-scrollbar { display: none; }
    header { margin: 30px auto 0; padding: 0 5%; }
    .blog-title { max-width: 40%; }
    .category_list { grid-template-columns: repeat(auto-fill, 50%); }
    main { padding: 25px 5%; }
    .text-list .category { display: none; }
    .text-list .title { margin-left: 10px; }
    .thumb-list ol { grid-template-columns: repeat(auto-fill, 48%); column-gap: 4%; }
    .slim-ctrl { display: flex; }
    footer { margin: 20px auto 30px; }
}

@media all and (max-width: 340px) {
    .blog-title { max-width: 100%; }
    .search-box { display: none; }
    .category_list { grid-template-columns: repeat(auto-fill, 100%); }
    .admin { display: none; }
    .thumb-list ol { grid-template-columns: repeat(auto-fill, 100%); }
}

@media all and (max-height: 300px) {
    .wide-ctrl { display: none; }
}