@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

.clearfix {
  content: "";
  clear: both;
  display: table;
}

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  outline: none;
}

button,
input {
  /* 1 */
  overflow: visible;
}

button,
select {
  /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* common */
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

body {
  font-family: Pretendard-Regular, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}

/* html */
html, body {
  position: relative;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  color: #333;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#wrap {
  position: relative;
  overflow: hidden;
}

/**-------------------------------------
*						media query - pc
-------------------------------------**/
@media screen and (min-width: 1061px) {

  /* wrap-right */
  .wrap-right .main {
    display: flex;
    justify-content: space-between;
  }

  .wrap-right .area-aside {
    margin: 32px 0 0 80px;
  }


  /* wrap-drawer */
  .wrap-drawer .header {
    padding-top: 80px;
  }

  .wrap-drawer .header.border-none {
    border-bottom: none;
  }

  .wrap-drawer .header .inner-header {
    position: initial;
    max-width: 780px;
  }

  .wrap-drawer .header .title-logo {
    position: absolute;
    top: -1px;
    left: 80px;
  }

  .wrap-drawer .header .area-align {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .wrap-drawer .header .area-slogun {
    width: 780px;
    margin: 30px 0 -3px 0;
  }

  .wrap-drawer .header .area-gnb {
    position: absolute;
    top: 31px;
    width: 100%;
    max-width: 780px;
  }

  .wrap-drawer .header .area-gnb>nav>ul {
    text-align: center;
  }

  .wrap-drawer .header .tt_category .category_list {
    text-align: center;
  }

  .wrap-drawer .header .button-menu {
    display: block;
  }

  .wrap-drawer .header .box-log {
    display: none;
  }

  .wrap-drawer .area-main {
    max-width: 780px;
    margin: 0 auto;
  }

  .wrap-drawer .area-promotion .inner-promotion {
    max-width: 780px;
  }

  .wrap-drawer .article-type-poster {
    width: 25%;
    max-width: 180px;
    margin-right: 16px;
  }

  .wrap-drawer .article-type-poster:nth-of-type(3n) {
    margin-right: 17px;
  }

  .wrap-drawer .article-type-poster:nth-of-type(4n) {
    margin-right: -3px;
  }

  .wrap-drawer .area-cover>.article-type-poster:nth-of-type(4n) {
    margin-right: 0;
  }

  .wrap-drawer .area-aside {
    position: fixed;
    top: 0;
    right: -381px;
    width: 381px;
    height: 100%;
    padding: 0 40px;
    border-left: 1px solid #efefef;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 20;
  }

  .wrap-drawer .area-aside .box-profile {
    border-left: none;
    border-right: none;
  }


  .wrap-drawer .area-aside .box-profile .img-profile {
    margin: 80px 0 13px 0;
  }

  .wrap-drawer .area-aside .box-profile-invert {
    position: relative;
    height: 430px;
    margin: 0 -40px 43px -41px;
    z-index: 21;
  }

  .wrap-drawer .area-aside .box-log {
    display: table;
    margin-top: 55px;
    margin-bottom: 47px;
    text-align: center;
  }

  .wrap-drawer .area-aside-on {
    right: 0;
    transition: .2s ease-out;
  }

  .wrap-drawer .article-related .item-related {
    width: 25%;
  }

  .wrap-drawer .article-related .item-related:last-child {
    display: block;
  }

  .wrap-right #footer .inner-footer {
    max-width: 1060px;
  }

  .wrap-drawer .article-header .inner-header {
    max-width: 780px;
  }
}

/* tt-body */
#tt-body-tag:not(.wrap-drawer) .header,
#tt-body-page:not(.wrap-drawer) .header,
#tt-body-category:not(.wrap-drawer) .header,
#tt-body-search:not(.wrap-drawer) .header,
#tt-body-archive:not(.wrap-drawer) .header {
  border-bottom: 1px solid #efefef;
}



#tt-body-index #container,
#tt-body-tag #container,
#tt-body-page #container,
#tt-body-category #container,
#tt-body-search #container,
#tt-body-archive #container,
#tt-body-guestbook #container {
  margin-top: 0;
}

#tt-body-page .area-promotion {
  display: none;
}

#tt-body-tag .area-main,
#tt-body-page .area-main,
#tt-body-category .area-main,
#tt-body-search .area-main,
#tt-body-archive .area-main {
  margin-top: 0;
}


#tt-body-page .area-slogun {
  display: none;
}

#tt-body-page .main {
  padding-top: 470px;
}

#tt-body-page .area-view img {
  display: inline-block;
  max-width: 100% !important;
  margin: 0;
  height: auto;
}

#tt-body-page .area-view .map_attach img {
  max-width: none !important;
}

#tt-body-page .area-paging {
  display: block;
}

@media screen and (max-width: 1060px) {
  #tt-body-page .main {
    padding-top: 440px;
  }
}

#tt-body-page .area-aside {
  margin-top: 0px;
}

/* // tt-body-page */
/* 미디어 로그 티스토리 스타일 수정 */
#mediaLogNest {
  max-width: 106x;
  height: auto !important;
  margin: 0 auto 0 auto;
  padding: 0 20px;
}

/* 카테고리의 다른글 티스토리 스타일 수정 */
.another_category {
  margin-bottom: 56px !important;
}

.article-view .another_category table,
.article-view .another_category table * {
  border: none;
}

#article-view .another_category table td {
  font-size: 11px;
}

/* area_paging */
/* media query - pc 페이징 스타일 제어 */
@media screen and (min-width: 1061px) {
  .listmorebutton .area-paging {
    display: none;
  }

  .listmorenumber .area-paging-more {
    display: none;
  }
}

/* media query - 모바일 페이징 스타일 제어 */
@media screen and (max-width: 1060px) {
  .listmorebuttonmobile .area-paging {
    display: none;
  }

  .listmorenumbermobile .area-paging-more {
    display: none;
  }
}

.paging-more {
  display: block;
  width: 100%;
  height: 42px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  line-height: 42px;
  color: #777;
  text-align: center;
  text-decoration: none;
}

.area-paging {
  text-align: center;
}

.area-paging a {
  text-decoration: none;
}

.area-paging .link_page {
  display: inline-block;
  font-size: 24px;
  color: #000;
}

.area-paging .link_page:hover {
  color: #ef402f;
}

.area-paging .paging_num {
  display: inline-block;
  vertical-align: top;
}

.area-paging .link_num span {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  margin: 0 2px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 400;
  font-family: Arial;
  line-height: 26px;
  text-align: center;
  letter-spacing: -0.3px;
  color: #333;
}

.area-paging .link_num:hover span {
  border-radius: 999em;
  background: #ddd;
  color: #333;
}

.area-paging .selected {
  display: block;
  border-radius: 999em;
  background: #000;
  color: #fff !important;
  font-size: 13px;
  line-height: 32px;
}

.area-paging .link_num:hover .selected {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.area-paging .paging_slash {
  display: none;
}

.area-paging .link_page.no-more-prev,
.area-paging .link_page.no-more-next {
  display: none;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1023px) {
  .area-paging .link_page {
    color: rgba(0, 0, 0, 0.75);
  }

  .area-paging .link_page.no-more-prev,
  .area-paging .link_page.no-more-next {
    color: rgba(0, 0, 0, 0.15);
  }

  .area-paging .link_page span {
    font-size: 24px;
    font-weight: 600;
  }

  .area-paging .link_num {
    font-size: 14px;
    font-weight: 900;
  }

  .area-paging .link_num span {
    position: relative;
  }

  .area-paging .selected {
    position: relative;
    width: auto;
    font-size: 14px;
    color: #fff;
  }

  .area-paging .link_num:last-child span:before {
    content: '/';
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 29px;
  }

  .area-paging .link_num:last-child span.selected:before {
    content: '';
  }

  .area-paging .link_num span:not(.selected) {
    display: inline-block;
  }

  .area-paging .link_num:last-child span {
    display: inline-block;
  }

  .area-paging .link_ellipsis {
    display: none;
  }

  .area-paging .selected {
    margin-right: 8px !important;
    color: #fff !important;
  }
}

/* // area_paging */
/* media query - only mobile */
@media screen and (max-width: 768px) {
  .area_common {
    margin-top: 36px;
  }
}



/* header */
.header {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #efefef;
  z-index: 10;
  transition: top 0.2s ease-in-out;
}

.header .inner-header {
  position: relative;
  max-width: 1020px;
  margin: 0 auto;
}

/* .header .box-header:after {
  content:'';
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 1px;
  margin-left: -50vw;
  border-bottom: 1px solid #efefef;}
.header .borderbottomline:after {
  border-bottom: none;} */
.header .title-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px 0;
}

.header .link_logo {
  display: block;
  max-width: 220px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 22px;
}

.header .link_logo img {
  max-height: 18px;
}

.header .box-log {
  position: absolute;
  top: -1px;
  right: 0;
}

.header .button-menu {
  display: none;
  position: absolute;
  top: 21px;
  right: 80px;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 1;
}

.header .button-menu:hover {
  opacity: .7;
  transition: .2s ease-out;
}

.header .area-slogun {
  padding-top: 33px;
  padding-bottom: 36px;
}

.header .area-slogun strong {
  margin-bottom: 9px;
  font-size: 36px;
  font-family: Arial;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 82px;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
}

.header .area-slogun p {
  width: 500px;
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: #999;
  word-break: keep-all;
}

.header .area-gnb .topnavnone {
  display: none;
}

.header .tt_category {
  margin: 0;
  padding: 0;
}

.header .tt_category ul {
  padding: 0;
  list-style: none;
}

.header .tt_category li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header .tt_category .link_tit {
  display: none;
}

.header .tt_category .category_list,
.header .topnavmenu>ul {
  font-size: 0;
  text-align: left;
  margin: 0;
  margin-bottom: -3px;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.header .tt_category .category_list li,
.header .topnavmenu>ul>li {
  display: inline-block;
  margin-right: 61px;
}

.header .topnavmenu>ul>li {
  /* padding-bottom: 32px; */
}

.header .tt_category .category_list li:last-child,
.header .topnavmenu>ul>li:last-child {
  margin-right: 0;
}

.header .tt_category .category_list .link_item,
.header .topnavmenu>ul>li>a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #333 !important;
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
}

.header .tt_category .category_list .c_cnt {
  display: none;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .header .category_list li:hover .sub_category_list {
    display: flex;
  }

  .header .tt_category .category_list .sub_category_list {
    position: absolute;
    display: none;
    top: 258px;
    left: 0;
    width: 100%;
    height: 94px;
    padding-top: 36px;
    font-size: 13px;
    color: #333;
    z-index: 100;
  }

  .header .tt_category .category_list .sub_category_list:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 94px;
    margin-left: -50vw;
    border-top: 1px solid #efefef;
    background: #fff;
    z-index: -1;
  }

  .header .link_sub_item {
    font-size: 13px;
    text-decoration: none;
    color: #333;
  }

  .header .link_sub_item:hover {
    text-decoration: underline;
  }

  .wrap-right .header .category_list>li,
  .wrap-right .header .t_menu_home,
  .wrap-right .header .t_menu_guestbook,
  .wrap-right .header .t_menu_tag,
  .wrap-right .header .t_menu_link_1,
  .wrap-right .header .t_menu_category {
    padding: 32px 0 32px 0;
  }

  .wrap-drawer .header .tt_category .category_list .sub_category_list {
    top: 49px;
  }

  #tt-body-tag.headerslogundisplayon .wrap-right .sub_category_list,
  #tt-body-archive.headerslogundisplayon .wrap-right .sub_category_list,
  #tt-body-category.headerslogundisplayon .wrap-right .sub_category_list,
  #tt-body-search.headerslogundisplayon .wrap-right .sub_category_list,
  #tt-body-guestbook.headerslogundisplayon .wrap-right .sub_category_list {
    top: 263px;
  }

  #tt-body-page .wrap-right .sub_category_list {
    top: 103px;
  }

  .header .tt_category .category_list>li:hover>a:after,
  .header .topnavmenu>ul>li:hover>a:after {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 4px;
    background: #ef402f;
    z-index: 1;
  }

  .wrap-drawer .header .tt_category .category_list .link_item,
  .wrap-drawer .header .topnavmenu>ul>li>a {
    padding-bottom: 40px;
  }
}

.header .topnavmenu .tt_category {
  display: none;
}

.header .topnavmenu>ul {
  margin: 0;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .wrap-right .header .topnavmenu>ul {
    padding: 0 0 37px 0;
  }
}

.header .slogun-use .area-slogun:before, .header .slogun-use nav:before {
  border-top: none !important;
}

.header .slogun-use .tt_category .category_list,
.header .slogun-use .topnavmenu>ul {
  margin-top: -1px;
  padding-top: 0;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .headerslogundisplayoff.headerbannerdisplayoff .wrap-right .sub_category_list {
    top: 134px;
  }

  .headerslogundisplayoff.headerbannerdisplayoff .wrap-right .slogun-use .sub_category_list {
    top: 290px;
  }

  .wrap-right .header .area-gnb .topnavmenu:before {
    content: '';
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 1px;
    margin-left: -50vw;
    border-top: 1px solid #efefef;
  }
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .header .inner-header {
    max-width: initial;
    padding-top: 50px;
  }

  .header .title-logo {
    position: absolute;
    top: 15px;
    left: 20px;
    margin: 0;
  }

  .header .link_logo {
    font-size: 16px;
  }

  .header .area-slogun {
    display: none;
    padding: 0 20px 0 20px;
  }

  .header .area-slogun strong {
    display: block;
    overflow: inherit;
    max-height: 100%;
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1.05;
  }

  .header .area-slogun p {
    width: auto;
    font-size: 12px;
  }

  .header .area-slogun.slogunmobileoff {
    display: block;
  }

  .header .area-promotion {
    display: none;
  }

  .header .area-promotion.bannermobile-on {
    display: block;
  }

  .header .area-gnb {
    width: 100%;
    margin-bottom: 0;
    border-top: 1px solid #efefef;
    margin-top: 30px;
  }

  .header .tt_category .category_list,
  .header .topnavmenu>ul {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .header .tt_category .category_list li,
  .header .topnavmenu>ul>li {
    margin-right: 24px;
  }

  .header .tt_category .category_list li:first-child,
  .header .topnavmenu>ul>li:first-child {
    margin-left: 20px;
    float: left;
  }

  .header .tt_category .category_list li:last-child,
  .header .topnavmenu>ul>li:last-child {
    margin-right: 20px;
  }

  .header .tt_category .category_list .link_item,
  .header .topnavmenu>ul>li>a {
    padding: 20px 0 19px 0;
    font-size: 13px;
    font-weight: 400;
  }

  .header .button-menu {
    display: block;
    top: 5px;
    right: 10px;
  }

  .header .button-menu svg {
    width: 17px;
    height: 12px;
  }

  .header .box-log {
    display: none;
  }

  .header .topnavmenu>ul {
    padding: 0;
  }

  .wrap-right .header .topnavmenu>ul {
    padding: 0;
  }
}

/* // header */
/* footer */
#footer {
  margin-top: 120px;
  padding: 35px 0 60px 0;
  border-top: 1px solid #efefef;
}

#footer .inner-footer {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

#footer .box-policy {
  margin-bottom: 36px;
}

#footer .link-footer {
  position: relative;
  display: inline-block;
  margin-right: 17px;
  font-size: 13px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

#footer .link-footer:hover {
  text-decoration: underline;
}

#footer .link-footer:before {
  content: '';
  position: absolute;
  top: 7px;
  left: -13px;
  width: 2px;
  height: 2px;
  background: #999;
  border-radius: 2px;
}

#footer .link-footer:first-child:before {
  width: 0;
}

#footer .text-info,
#footer address {
  font-size: 13px;
  color: #999;
}

#footer .text-info {
  margin: 0 0 9px 0;
  line-height: 18px;
  padding-top: 2px;
}

#footer address {
  font-style: normal;
}

#footer .box-site {
  position: absolute;
  top: -5px;
  right: 20px;
}

#footer .box-site button {
  position: relative;
  width: 140px;
  height: 32px;
  padding-left: 12px;
  background: url(./images/icon-more.svg) no-repeat 116px center;
  border: 1px solid #efefef;
  font-size: 13px;
  text-align: left;
  color: #999;
  cursor: pointer;
}

#footer .box-site button.on {
  background: url(./images/icon-close.svg) no-repeat 116px center;
}

#footer .box-site ul {
  position: absolute;
  bottom: 31px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #efefef;
  font-size: 13px;
  line-height: 32px;
  list-style: none;
  opacity: .0;
  overflow: hidden;
}

#footer .box-site ul li {
  margin: 0;
  padding-left: 13px;
}

#footer .box-site ul li a {
  display: block;
  background: #fff;
  color: #999;
  text-decoration: none;
}

#footer .box-site ul li a:hover {
  color: #333;
}

#footer .box-site ul.on {
  opacity: 1;
  transition: opacity .2s ease-out;
}

/* ----- media query - tablet ----- */
@media screen and (max-width: 1060px) {
  #footer {
    margin-top: 40px;
    padding: 36px 0 26px 0;
  }

  #footer .box-policy {
    margin-top: 34px;
    margin-bottom: 21px;
  }

  #footer .link-footer {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
  }

  #footer .link-footer:before {
    width: 0;
  }

  #footer .text-info,
  #footer address {
    font-size: 11px;
  }

  #footer .box-site {
    top: -71px;
    left: 0;
    width: 100%;
  }

  #footer .box-site button {
    width: 100%;
    height: 40px;
    padding-left: 20px;
    border-left: none;
    border-left: right;
    background-position: calc(100% - 20px) center;
  }

  #footer .box-site button.on {
    background-position: calc(100% - 20px) center;
  }

  #footer .box-site ul {
    top: 37px;
    bottom: auto;
  }

  #footer .box-site ul li {
    padding-left: 20px;
  }
}

/* // footer */
/* area-promotion */
.area-promotion {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 11;
}

.area-promotion:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(58, 58, 58, 0.3);
  z-index: 1;
}

.area-promotion .inner-promotion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 1020px;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
}

.area-promotion .inner-promotion strong {
  display: block;
  word-break: keep-all;
  width: 760px;
  font-size: 48px;
  font-family: Arial;
  line-height: 1.08;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: keep-all;
}

.area-promotion .inner-promotion .link-promotion {
  display: block;
  width: 160px;
  height: 40px;
  border-radius: 40px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  color: #333;
  margin-top: 32px;
}

.area-promotion .box-promotion {
  margin-top: -4px;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .area-promotion.height200 {
    height: 200px;
  }

  .area-promotion.height300 {
    height: 300px;
  }

  .area-promotion.height400 {
    height: 400px;
  }

  .area-promotion.height500 {
    height: 500px;
  }
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1061px) {
  .area-promotion {
    height: 350px;
  }

  .area-promotion .inner-promotion {
    position: relative;
    padding: 0 20px;
  }

  .area-promotion .inner-promotion .box-promotion {
    position: absolute;
    bottom: 40px;
  }

  .area-promotion .inner-promotion strong {
    width: 270px;
    font-size: 30px;
    line-height: 33px;
    -webkit-line-clamp: 3;
  }

  .area-promotion .inner-promotion .link-promotion {
    width: 120px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    margin-top: 22px;
  }
}

/* // area-promotion */
/* container */
#container {
  position: relative;
  margin-top: 78px;
}

/* main */
.main {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

/* area-main */
.area-main {
  width: 100%;
  max-width: 640px;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1061px) {
  #container {
    margin-top: 0;
  }

  .area-main {
    max-width: 100%;
    padding: 0 20px;
  }
}

/* area-aside */
.area-aside {
  width: 300px;
  /* box-profile */
  /* box-category */
  /* box-tag */
  /* box-recent */
  /* box-plugin */
  /* plugin */
  /* box-calendars */
  /* box-visit */
  /* box-search */
}

.area-aside>div {
  margin-bottom: 43px;
}

.area-aside ul {
  margin: 0;
  padding: 0;
}

.area-aside li {
  list-style: none;
  padding: 0;
}

.area-aside .item-sidebar {
  margin-bottom: 6px;
}

.area-aside .link-sidebar {
  display: block;
  font-size: 13px;
  line-height: 1.69;
  color: #777;
  text-decoration: none;
}

.area-aside .link-sidebar span {
  display: block;
  font-size: 12px;
  line-height: 1.67;
  color: #999;
}

.area-aside .title-sidebar {
  display: block;
  margin: 0 0 7px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #333;
}

.area-aside .box-profile {
  position: relative;
  margin-bottom: 43px;
  border: 1px solid #e8e8e8;
  border-bottom: 2px solid #333;
  text-align: center;
}

.area-aside .box-profile .img-profile {
  width: 140px;
  height: 140px;
  margin: 49px 0 14px 0;
  border-radius: 140px;
}

.area-aside .box-profile .text-profile {
  max-width: 210px;
  margin: 0 auto 33px auto;
  font-size: 14px;
  line-height: 1.54;
  color: #777;
  word-wrap: break-word;
}

.area-aside .box-profile .button-subscription {
  width: 84px;
  height: 30px;
  margin: 0 auto 28px auto;
  background: none;
  border: 1px solid #ddd;
  border-radius: 50px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.area-aside .box-profile .box-sns {
  font-size: 0;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 34px;
}

.area-aside .box-profile .link-sns {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #ddd;
  border-radius: 36px;
  vertical-align: top;
}

.area-aside .box-profile .link-sns:last-child {
  margin-right: 0;
}

.area-aside .box-profile .link-facebook {
  line-height: 48px;
}

.area-aside .box-profile .link-youtube {
  line-height: 44px;
}

.area-aside .box-profile .link-insta {
  line-height: 49px;
}

.area-aside .box-profile .link-twitter {
  line-height: 46px;
}

.area-aside .box-profile-invert {
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #fff;
  ;
  background-size: cover;
  background-position: 50% 50%;
}

.area-aside .box-profile-invert:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.area-aside .box-profile-invert .inner-box {
  position: relative;
  height: 100%;
  z-index: 2;
}

.area-aside .box-profile-invert .text-profile {
  color: #fff;
}

.area-aside .box-profile-invert .button-subscription {
  color: #fff;
}

.area-aside .box-profile-invert .link-sns {
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.area-aside .box-profile-invert .svg path {
  fill: #fff !important;
}

.area-aside .box-category {
  margin-bottom: 40px;
  padding-bottom: 33px;
  border-bottom: 1px solid #e8e8e8;
}

.area-aside .box-category .tt_category a {
  display: block;
  text-decoration: none;
}



.area-aside .box-category .tt_category .c_cnt {
  display: inline-block;
  font-size: 12px;
  vertical-align: 1px;
}

.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item {
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.64;
  color: #777;
}

.area-aside .box-category .tt_category .link_tit:hover,
.area-aside .box-category .tt_category .category_list .link_item:hover {
  font-size: 14px;
  font-weight: 500;
  color: #333 !important;
  text-decoration: underline;
}

.area-aside .box-category .tt_category .category_list .link_sub_item.selected,
.area-aside .box-category .tt_category .category_list .link_item.selected {
  font-weight: 500;
  color: #333;
}

.area-aside .box-category .tt_category .category_list .link_sub_item {
  position: relative;
  display: none;
  margin-bottom: 5px;
  margin-left: 22px;
  font-size: 13px;
  line-height: normal;
  color: #999;
}

.area-aside .box-category .tt_category .category_list .link_sub_item:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -13px;
  width: 7px;
  height: 1px;
  background: #999;
}

.area-aside .box-category .tt_category .category_list .link_sub_item:hover {
  font-weight: 600;
  color: #333;
}

.area-aside .box-category .tt_category .category_list .sub_category_list li:last-child a {
  margin-bottom: 10px;
}

.area-aside .box-category-2depth .tt_category .category_list .link_sub_item {
  display: block;
}

.area-aside .sub_category_list {
  margin-top: -4px;
  margin-bottom: 12px;
}

.area-aside .box-tag a {
  position: relative;
  display: inline-block;
  max-width: 300px;
  margin-right: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.69;
  text-decoration: none;
  text-overflow: ellipsis;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
}

.area-aside .box-tag a:last-child:after {
  content: '';
  position: absolute;
  top: 14px;
  right: -2px;
  width: 5px;
  height: 5px;
  background: #fff;
}

.area-aside .box-recent .tab-recent {
  display: flex;
  margin-bottom: 13px;
}

.area-aside .box-recent .tab-recent li {
  position: relative;
  margin-right: 20px;
}

.area-aside .box-recent .tab-recent li span {
  display: block;
}

.area-aside .box-recent .tab-recent li:last-child {
  margin-right: 0;
}

.area-aside .box-recent .tab-recent li:last-child:before {
  content: '';
  position: absolute;
  top: 9px;
  left: -10px;
  width: 2px;
  height: 10px;
  background: url(./images/bullet-tab.svg) no-repeat;
}

.area-aside .box-recent .tab-recent li.on a {
  color: #333;
  font-weight: 500;
}

.area-aside .box-recent .tab-recent li a {
  display: block;
  font-size: 14px;
  line-height: 1.64;
  color: #999;
  text-decoration: none;
}

.area-aside .box-recent .list-recent li {
  margin-bottom: 20px;
}

.area-aside .box-recent .list-recent li:last-child {
  margin-bottom: 0;
}

.area-aside .box-recent .list-recent .link-recent {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  text-decoration: none;
}

.area-aside .box-recent .list-recent .thumbnail {
  width: 64px;
  height: 64px;
  margin: 0 12px 0 0;
  background-size: cover;
  background-position: 50% 50%;
}

.area-aside .box-recent .list-recent .thumbnail+.box-recent {
  width: 70%;
}

.area-aside .box-recent .list-recent .box-recent {
  width: 100%;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.54;
  color: #333;
}

.area-aside .box-recent .list-recent .box-recent strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 400;
}

.area-aside .box-recent .list-recent .box-recent span {
  color: #999;
}

/** -- media query mobile -- **/
@media screen and (max-width: 1061px) {
  .area-aside .box-recent .list-recent .box-recent strong {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
  }

  .box-notice .link-sidebar a,
  .box-reply .link-sidebar strong {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
  }

}



.area-aside .box-plugins {
  padding-bottom: 44px;
  border-bottom: 1px solid #e8e8e8;
}

.area-aside .box-plugins .tab-sns {
  display: flex;
  margin-bottom: 12px;
}

.area-aside .box-plugins .tab-sns li {
  position: relative;
  margin-right: 20px;
}

.area-aside .box-plugins .tab-sns li span {
  display: block;
}

.area-aside .box-plugins .tab-sns li:last-child {
  margin-right: 0;
}

.area-aside .box-plugins .tab-sns li:last-child:before {
  content: '';
  position: absolute;
  top: 9px;
  left: -10px;
  width: 2px;
  height: 10px;
  background: url(./images/bullet-tab.svg) no-repeat;
}

.area-aside .box-plugins .tab-sns li.on a {
  color: #333;
  font-weight: 500;
}

.area-aside .box-plugins .tab-sns li a {
  display: block;
  font-size: 14px;
  line-height: 1.64;
  color: #999;
  text-decoration: none;
}

.area-aside .box-plugins .plugin-facebook {
  max-height: 410px;
  overflow: hidden;
}

.area-aside .box-plugins .plugin-twitter {
  max-height: 410px;
  overflow: auto;
}

.area-aside .box-calendar .inner-calendar {
  padding: 23px 28px 24px 28px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
}

.area-aside .box-calendar .inner-calendar table caption a {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.57;
  color: #333;
  text-decoration: none;
}

.area-aside .box-calendar .inner-calendar table th,
.area-aside .box-calendar .inner-calendar table td {
  font-weight: 400;
  line-height: 1.81;
  color: #999;
  text-align: center;
}

.area-aside .box-calendar .inner-calendar table th {
  margin-bottom: 10px;
}

.area-aside .box-visit .text-total {
  margin: -10px 0 3px 0;
  line-height: 1.64;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.area-aside .box-visit .item-visit {
  font-size: 13px;
  line-height: 1.71;
  color: #999;
}

.area-aside .box-search {
  width: 100%;
  margin-top: -3px;
  border-bottom: 2px solid #333;
}

.area-aside .box-search .inp-search {
  display: inline-block;
  width: calc(100% - 34px);
  padding-bottom: 7px;
  border: none;
  font-size: 14px;
  color: #999;
}

.area-aside .box-search .button-search {
  display: inline-block;
  width: 24px;
  height: 16px;
  background: url(./images/icon-search.svg) no-repeat center;
  border: none;
  cursor: pointer;
}

.area-aside .box-log {
  display: none;
}

.box-reply .list-sidebar li {
  margin-bottom: 8px;
}

.box-reply .link-sidebar strong {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.54;
}

.box-reply .list-sidebar p {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.box-notice .list-sidebar li {
  margin-bottom: 8px;
}

.box-calendar .cal_click {
  font-weight: 700;
  color: #333;
}

.area-aside .box-calendar .inner-calendar .cal_month {
  position: relative;
  margin-bottom: -6px;
}

.area-aside .box-calendar .inner-calendar .cal_month a {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.area-aside .box-calendar .inner-calendar .cal_month a:first-child:before {
  content: '〈';
  position: absolute;
  top: -3px;
  left: 60px;
  width: 30px;
  height: 24px;
  background-color: transparent;
  font-size: 12px;
  padding-top: 5px;
}

.area-aside .box-calendar .inner-calendar .cal_month a:last-child:before {
  content: '〉';
  position: absolute;
  top: -3px;
  right: 60px;
  width: 34px;
  height: 24px;
  background-color: transparent;
  font-size: 12px;
  padding-top: 5px;
}

.area-aside .box-calendar .inner-calendar thead tr th {
  padding-bottom: 8px;
}

/* ----- media query - tablet ----- */
@media screen and (max-width: 1060px) {
  .area-aside {
    position: fixed;
    top: 0;
    right: -100%;
    width: calc(100% - 104px);
    max-width: 380px;
    height: 100%;
    padding: 0 24px;
    border-left: 1px solid #efefef;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 20;
    /* box-tag */
  }

  .area-aside .box-profile {
    width: 100%;
    border-left: none;
    border-right: none;
  }

  .area-aside .box-profile .img-profile {
    width: 100px;
    height: 100px;
  }

  .area-aside .box-profile .link-sns {
    width: 30px;
    height: 30px;
  }

  .area-aside .box-profile .link-facebook {
    line-height: 43px;
  }

  .area-aside .box-profile .link-facebook .svg {
    width: 12px;
    height: 14px;
  }

  .area-aside .box-profile .link-youtube {
    line-height: 40px;
  }

  .area-aside .box-profile .link-youtube .svg {
    width: 14px;
    height: 11px;
  }

  .area-aside .box-profile .link-insta {
    line-height: 42px;
  }

  .area-aside .box-profile .link-insta .svg {
    width: 14px;
    height: 14px;
  }

  .area-aside .box-profile .link-twitter {
    line-height: 42px;
  }

  .area-aside .box-profile .link-twitter .svg {
    width: 14px;
    height: 11px;
  }

  .area-aside .box-profile-invert {
    position: relative;
    margin: 0 -40px 40px -41px;
    z-index: 21;
    width: auto;
  }

  .area-aside .box-profile-invert .img-profile {
    margin: 50px 0 10px 0;
  }

  .area-aside .box-log {
    display: table;
    margin-top: 55px;
    text-align: center;
  }

  .area-aside .box-tag a {
    max-width: 100%;
  }

  .area-aside-on {
    right: 0;
    transition: .2s ease-out;
  }

  .area-aside .box-profile .text-profile {
    margin-bottom: 22px;
  }
}

.bg-dimmed:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  background: rgba(255, 255, 255, 0.8);
  z-index: 19;
}

/* // area-aside */
/* box-log */
.box-log a {
  display: inline-block;
  margin-right: 12px;
  font-size: 13px;
  text-decoration: none;
  color: #777;
  float: left;
}

.box-log .last {
  margin-right: 0;
}

.box-log .link-log {
  position: relative;
  margin-left: 25px;
  margin-right: 0;
}

.box-log .link-log:before {
  content: '';
  position: absolute;
  top: 1px;
  left: -15px;
  width: 1px;
  height: 12px;
  background: #ddd;
}

/* article-type-common */
.article-type-common {
  width: 100%;
}

.article-type-common .thumbnail {
  margin: 0;
  background-image: url(./images/no-image.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.article-type-common .thumbnail .img-thumbnail {
  display: none;
}

.article-type-common .link-article {
  text-decoration: none;
}

.article-type-common .title {
  display: block;
  max-height: 54px;
  margin-bottom: 13px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  overflow: hidden;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.article-type-common .summary {
  margin: 0 0 12px 0;
  color: #777;
}

.article-type-common .link-category {
  margin-right: 14px;
  font-size: 12px;
  line-height: 1.67;
  color: #333;
  text-decoration: none;
}

.article-type-common .date {
  position: relative;
  margin-right: 15px;
  font-size: 12px;
  line-height: 1.67;
  color: #999;
}

.article-type-common .date:before {
  content: '';
  position: absolute;
  top: 9px;
  left: -10px;
  width: 2px;
  height: 2px;
  background: #999;
  border-radius: 2px;
}

.article-type-common .reply {
  position: relative;
  padding-left: 19px;
  background: url(./images/icon-reply.svg) no-repeat left center;
  font-size: 12px;
  line-height: 1.67;
  color: #999;
}

.article-type-common .reply:before {
  content: '';
  position: absolute;
  top: 9px;
  left: -10px;
  width: 2px;
  height: 2px;
  background: #999;
  border-radius: 2px;
}

.article-type-common:hover .title {
  text-decoration: underline;
}

.box-cover-title {
  display: flex;
  justify-content: space-between;
}

.box-cover-title .link-title {
  position: relative;
  padding-right: 10px;
  padding-bottom: 16px;
  font-size: 13px;
  text-decoration: none;
  color: #999;
  line-height: 14px;


}

.box-cover-title .link-title:after {
  content: '';
  position: absolute;
  top: 6.3px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  transform: rotate(135deg);
}

.area-cover-thumbnail .box-cover-title {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 28px;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-type-common .title {
    max-height: 24px;
    margin-bottom: 7px;
    font-size: 21px;
    font-weight: 400;
    -webkit-line-clamp: 1;
  }

  .article-type-common .summary {
    margin-bottom: 7px;
  }
}

/* // article-type-common */
/* article-type-crop */
.article-type-crop {
  margin-bottom: 58px;
}

.article-type-crop .thumbnail {
  height: 460px;
  margin-bottom: 20px;
}

.article-type-crop .link-article {
  display: block;
}

.article-type-crop .title {
  height: 28.5px;
  margin-top: -4px;
  -webkit-line-clamp: 1;
}

.article-type- .title>img,
.article-type-thumbnail .title>img,
.article-type-resize .title>img,
.article-type-poster .title>img,
.article-type-crop .title>img {
  width: 15px !important;
}

.article-type-crop .summary {
  max-height: 69px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-type-crop {
    margin-bottom: 28px;
  }

  .article-type-crop .thumbnail {
    height: auto;
    padding-top: 59.4%;
  }

  .article-type-crop .title {
    margin-bottom: 8px;
  }

  .article-type-crop .summary {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* // article-type-crop */
/* article-type-resize */
.article-type-resize {
  margin-bottom: 57px;
}

.article-type-resize .thumbnail {
  margin-bottom: 20px;
  padding-top: 0;
  background: none;
}

.article-type-resize .thumbnail .img-thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.article-type-resize .title {
  height: 28px;
  -webkit-line-clamp: 1;
}



.article-type-resize .summary {
  max-height: 69px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-type-resize {
    margin-bottom: 28px;
  }

  .article-type-resize .summary {
    font-size: 13px;
    line-height: 1.38;
  }
}

.article-type-,
.article-type-thumbnail {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 28px;
}

.article-type- .thumbnail,
.article-type-thumbnail .thumbnail {
  width: 160px;
  height: 108px;
  margin-left: 40px;
}

.article-type- .article-content,
.article-type-thumbnail .article-content {
  width: 100%;
  padding-top: 4px;
}

.article-type- .title,
.article-type-thumbnail .title {
  word-break: break-all;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.67;
}

.article-type- .summary,
.article-type-thumbnail .summary {
  max-width: 620px;
  max-height: 40px;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.53;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.article-type- .reply,
.article-type-thumbnail .reply {
  display: none;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {

  .article-type-,
  .article-type-thumbnail {
    margin-bottom: 19px;
  }

  .article-type- .thumbnail,
  .article-type-thumbnail .thumbnail {
    width: 80px;
    height: 80px;
    margin-left: 18px;
  }

  .article-type- .article-content,
  .article-type-thumbnail .article-content {
    padding-top: 2px;
  }

  .article-type- .title,
  .article-type-thumbnail .title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.27;
  }

  .article-type- .summary,
  .article-type-thumbnail .summary {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.42;
  }
}

.article-type-poster {
  display: inline-block;
  width: 33%;
  margin-right: 16px;
  margin-bottom: 30px;
  vertical-align: top;
}

.article-type-poster .thumbnail {
  position: relative;
  margin-bottom: 10px;
  padding-top: 132.5%;
}

.article-type-poster .thumbnail:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
}

.article-type-poster .title {
  width: 95%;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  white-space: initial;
  word-break: keep-all;
}

.article-type-poster .date:before {
  position: relative;
}

.article-type-poster .summary,
.article-type-poster .link-category,
.article-type-poster .reply {
  display: none;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .article-type-poster {
    max-width: 200px;
  }

  .wrap-right .area-cover>.article-type-poster:nth-child(3n),
  .wrap-right .area-view>.article-type-poster:nth-child(3n) {
    margin-right: 0;
  }
}

/* ----- media query - tablet ----- */
@media screen and (min-width: 761px) and (max-width: 1060px) {
  .article-type-poster {
    width: calc(33.3% - 13px);
  }

  .article-type-poster:nth-of-type(3n) {
    margin-right: 0;
  }
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 760px) {
  .article-type-poster {
    width: calc(50% - 5px);
    max-width: initial;
    margin-right: 6px;

  }

  .article-type-poster:nth-of-type(2n) {
    margin-right: 0;
  }
}


.box-cover-poster {
  margin-bottom: -40px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .box-cover-poster {
    white-space: inherit;
  }
}


/* ----- media query - mobile ----- */
@media screen and (max-width: 850px) {
  .box-cover-poster .article-type-poster {
    width: 190px;
    margin-right: 6px;
  }

  .box-cover-poster .article-type-poster .thumbnail {
    width: 190px;
    height: 250px;
    padding-top: 0;
  }
}

/* // article-type-poster */
/* article-type-text */
.article-type-text {
  margin-bottom: 10px;
}

.article-type-text .thumbnail {
  display: none;
}

.article-type-text .title {
  height: auto;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.57;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  font-weight: 400;
}

.article-type-text .date:before {
  position: relative;
}

.article-type-text .summary,
.article-type-text .link-category,
.article-type-text .reply {
  display: none;
}

/* area-cover */
.area-cover {
  margin-bottom: 56px;
}

.area-cover:last-of-type {
  margin-bottom: 0;
}

.area-cover .title-cover {
  margin: 0;
  padding: 0 0 16px 0;
  font-size: 14px;
  color: #333;
}


.area-cover .button-more {
  display: none;
  width: 100%;
  height: 42px;
  background: none;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  color: #777;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.area-cover .article-type-crop:nth-child(n+4) {
  display: none;
}

.area-cover .article-type-resize:nth-child(n+4) {
  display: none;
}



.category-list {
  display: none;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .area-cover {
    margin-bottom: 36px;
  }

  .area-cover .title-cover {
    font-size: 13px;
    font-weight: 500;
    padding: 0 0 11px 0;
  }

  .title-search {
    margin: 10px 0 10px 0;
  }

  .title-search.title-border {
    margin-bottom: 19px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e8e8e8;
    margin-top: 0;
  }
}

/* // area-cover */
/* area-tag */
.area-tag {
  min-height: 350px;
}

.area-tag .title-other {
  margin: 0 0 14px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.area-tag .box-tag a {
  display: inline-block;
  max-width: 100%;
  margin: 0 12px 9px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: #777;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.area-tag .box-tag a:hover {
  font-weight: 600;
  color: #ef402f;
  text-decoration: underline;
}

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 400px;
  margin-left: -50vw;
  padding: 0 20px;
  background-size: cover;
  background-position: 50% 50%;
}

.article-header:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.article-header .inner-header {
  max-width: 1020px;
  margin: 0 auto;
  color: #fff;
}

.article-header .box-meta {
  position: absolute;
  bottom: 56px;
  width: 100%;
  max-width: 780px;
  z-index: 2;
}

.article-header .box-meta p {
  margin: 0;
}

.article-header .box-meta .category {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.article-header .title-article {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 0 33px 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: keep-all;
}

.article-header .box-info {
  font-size: 13px;
  line-height: 1.54;
  opacity: .7;
}

.article-header .box-info .writer {
  margin-right: 15px;
}

.article-header .box-info .date {
  position: relative;
}

.article-header .box-info .date:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

@media screen and (max-width: 1060px) {
  .article-header .box-meta {
    bottom: 36px;
  }

  .article-header .box-meta .category {
    font-size: 12px;
    font-weight: 400;
  }

  .article-header .title-article {
    padding-right: 30px;
    font-size: 30px;
  }

  .article-header .box-info {
    font-size: 11px;
    font-weight: 400;
  }

  .article-header .box-info .date:before {
    top: 8px;
  }
}

/* // article-header */
/* article-footer */
.article-footer .title-footer {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

@media screen and (max-width: 1060px) {
  .article-footer .title-footer {
    font-size: 13px;
  }
}

/* // article-footer */
/* article-tag - 상세페이지 태그  */
.article-tag {
  display: flex;
  margin-bottom: 46px;
  padding-bottom: 43px;
  border-bottom: 2px solid #333;
}

.article-tag .title-footer {
  margin-right: 30px;
  padding-top: 8px;
}

.article-tag .box-tag {
  font-size: 0;
}

.article-tag .box-tag a {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 5px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 50px;
  font-size: 13px;
  line-height: 1.69;
  color: #777;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.article-tag .box-tag a:after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: -10px;
  width: 5px;
  height: 5px;
  background: #fff;
}

.article-tag .box-tag a:hover {
  text-decoration: underline;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-tag {
    display: block;
    margin-bottom: 38px;
    padding-bottom: 30px;
  }

  .article-tag .title-footer {
    margin: 0 0 10px 0;
  }

  .article-tag .box-tag a {
    margin: 0 8px 9px 0;
    padding: 3px 10px;
    font-size: 12px;
  }

  .article-tag .box-tag a:after {
    bottom: 4px;
    right: -7px;
  }
}

/* // article-tag */
/* article-page - 상세페이지 이전다음글  */
.article-page {
  margin-bottom: 46px;
  border-bottom: 1px solid #e8e8e8;
}

.article-page .title-footer {
  margin-bottom: 15px;
}

.article-page ul {
  list-style: none;
  margin: 0 0 45px 0;
  padding: 0;
}

.article-page ul li {
  position: relative;
  margin-bottom: 7px;
  padding: 0;
  font-size: 13px;
  line-height: 1.69;
  color: #999;
}

.article-page ul li:nth-child(2) {
  color: #333;
}

.article-page ul li:nth-child(2):after {
  content: ':';
  position: absolute;
  top: 3px;
  left: 45px;
  font-size: 9px;
  opacity: .7;
}

.article-page ul li:last-child {
  margin-bottom: 0;
}

.article-page ul li span {
  padding-right: 23px;
}

.article-page ul li a {
  color: #999;
  text-decoration: none;
}

.article-page ul li a:hover {
  text-decoration: underline;
}

.article-page ul li strong {
  font-weight: 400;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-page {
    margin-bottom: 39px;
  }

  .article-page .title-footer {
    margin-bottom: 10px;
  }

  .article-page ul {
    margin: 0 0 36px 0;
  }

  .article-page ul li {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .article-page ul li a {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* //article-page - 상세페이지 이전다음글  */
/* article-related - 상세페이지 관련글 */
.article-related {
  margin-bottom: 42px;
}

.article-related a {
  text-decoration: none;
}

.article-related .title-footer {
  margin-bottom: 16px;
}

.article-related .list-related {
  display: flex;
  list-style: none;
  margin: 0 -10px;
  padding: 0;
  border: none;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-related .item-related {
  width: 33.3%;
}

.article-related .item-related:last-child {
  display: none;
}

.article-related .thumnail {
  display: block;
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: 50% 50%;
}

.article-related .link-related {
  display: block;
  margin: 0 10px;
}

.article-related .link-related strong {
  display: block;
  max-height: 40px;
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: keep-all;
}

.article-related .date {
  display: block;
  font-size: 12px;
  line-height: 1.83;
  color: #999;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 760px) {
  .article-related {
    margin-bottom: 34px;
  }

  .article-related .title-footer {
    margin-bottom: 11px;
  }

  .article-related .item-related {
    min-width: 145px;
  }

  .article-related .link-related {
    margin: 0 5px;
  }

  .article-related .thumnail {
    margin-bottom: 8px;
  }

  .article-related .link-related strong {
    margin-bottom: 0;
    font-size: 13px;
  }
}

.article-related .thumnail {
  height: auto;
  padding-top: 60%;
}

/* // article-related */
/* article-reply - 상세페이지 댓글*/
.article-reply {
  width: 100%;
  margin-bottom: 32px;
}

.article-reply ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-reply a {
  text-decoration: none;
}

.article-reply .box-total {
  margin: 0 0 3px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  font-weight: 500;
}

.article-reply .box-total a {
  color: #333;
}

.article-reply .box-total span {
  color: #ef402f;
}

.article-reply .tt_more_preview_comments_wrap {
  width: 100%;
  height: 42px;
  margin-top: -14px;
  margin-bottom: 4px;
  background-color: transparent;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  font-weight: 400;
  line-height: 39px;
  color: #777;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .article-reply .box-meta strong {
    display: block;
  }

  .article-reply .box-total {
    font-size: 13px;
  }

  .article-reply .tt_more_preview_comments_wrap {
    height: 32px;
    font-size: 12px;
    line-height: 30px;
  }
}

/* area-reply - 상세페이지 댓글*/
.area-reply {
  margin-bottom: 60px;
}


.area-reply .item-reply {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 25px 0 24px 0;
  border-bottom: 1px solid #eee;
}

.area-reply .thumbnail {
  display: block;
  width: 48px;
  height: 48px;
  margin-right: 10px;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 50px;
}

.area-reply .box-content {
  width: calc(100% - 64px);
}

.area-reply .box-content .box-meta {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.69;
}

.area-reply .box-content .box-meta strong a {
  font-weight: 400;
  color: #333;
}

.area-reply .box-content .box-meta .date {
  position: relative;
  padding-left: 18px;
  color: #909090;
}

.area-reply .box-content .box-meta .date:before {
  content: '';
  position: absolute;
  top: 9px;
  left: 7px;
  width: 2px;
  height: 2px;
  background: #c5c5c5;
}

.area-reply .box-content .box-meta .date a {
  position: relative;
  padding-left: 18px;
  color: #909090;
}

.area-reply .box-content .box-meta .date a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 7px;
  width: 2px;
  height: 2px;
  background: #c5c5c5;
}

.area-reply .box-content .text {
  margin: 0 100px 9px 0;
  font-size: 14px;
  line-height: 1.43;
  color: #777;
  word-break: break-all;
}

.area-reply .list-reply-comment .box-content .text {}

.area-reply .box-content .link-comment {
  font-size: 13px;
  line-height: 1.69;
  color: #909090;
}

.area-reply .box-content .box-modify {
  position: absolute;
  top: 24px;
  right: -9px;
  font-size: 13px;
}

.area-reply .box-content .button-modify {
  width: 20px;
  height: 20px;
  padding: 10px 0 10px 10px;
  background: url(./images/icon-modify.svg) no-repeat;
  background-size: 14px;
  background-position: 50% 50%;
  border: none;
  cursor: pointer;
}

.area-reply .box-content .list-modify {
  display: none;
  position: absolute;
  top: 6px;
  left: -76px;
  width: 80px;
  border: 1px solid #e8e8e8;
}

.area-reply .box-content .list-modify li {
  border-bottom: 1px solid #e8e8e8;
}

.area-reply .box-content .list-modify li:last-child {
  border-bottom: none;
}

.area-reply .box-content .list-modify a {
  display: block;
  line-height: 29px;
  text-align: center;
  color: #333;
  background-color: #fff;
}

.area-reply .list-reply-comment {
  width: 100%;
  margin: 30px 0 -30px 0;
  padding: 40px 0 28px 60px;
  background-color: #fafafa;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.area-reply .list-reply-comment .item-reply {
  margin-bottom: 28px;
  padding: 0;
  border-bottom: none;
}

.area-reply .list-reply-comment .item-reply:last-child {
  margin-bottom: 0;
}

.area-reply .list-reply-comment .box-modify {
  top: -4px;
  right: 15px;
}

.area-reply .list-reply-other {
  margin-bottom: 20px;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .area-reply {
    margin-bottom: 30px;
  }

  .area-reply .item-reply {
    padding: 25px 0 19px 0;
  }

  .area-reply .thumbnail {
    width: 38px;
    height: 38px;
    margin-right: 10px;
  }

  .area-reply .box-content {
    margin-top: -3px;
  }

  .area-reply .box-content .box-meta {
    line-height: 1.59;
  }

  .area-reply .box-content .box-meta strong a {
    font-size: 12px;
  }

  .area-reply .box-content .box-meta .date {
    padding-left: 0;
    font-size: 12px;
  }

  .area-reply .box-content .box-meta .date:before {
    background: none;
    ;
  }

  .area-reply .box-content .text {
    width: 100%;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .area-reply .box-content .list-modify {
    background: #fff;
  }

  .area-reply .list-reply-comment {
    width: 100vw;
    margin: 20px -20px -20px -20px;
    padding: 20px 20px 13px 68px;
  }

  .area-reply .list-reply-comment .box-modify {
    right: -9px;
  }

  .area-reply .list-reply-comment .box-meta {
    margin-top: 6px;
  }
}

/* // area-reply - 상세페이지 댓글*/
/* area-write - 상세페이지 댓글 입력 부분*/
.area-write .box-account {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.area-write .box-account input {
  width: calc(50% - 6px);
  padding: 11px 20px 12px 20px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  color: #999;
}

.area-write .box-account input:hover {
  border-color: #333;
}

.area-write .box-homepage {
  margin-bottom: 12px;
}

.area-write .box-homepage input {
  width: 100%;
  padding: 11px 20px 12px 20px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  color: #999;
}

.area-write .box-homepage input:hover {
  border-color: #333;
}

.area-write .box-textarea {
  margin-bottom: 14px;
}

.area-write .box-textarea textarea {
  width: 100%;
  height: 122px;
  padding: 21px 70px 19px 19px;
  border: 1px solid #e8e8e8;
  font-size: 13px;
  color: #999;
}

.area-write .box-textarea textarea:hover {
  border-color: #333;
}

.area-write .box-write {
  display: flex;
  justify-content: space-between;
}

.area-write .box-write .xe-label {
  display: flex;
  position: relative;
  margin-top: 5px;
  min-width: 20px;
  min-height: 20px;
  text-align: left;
  cursor: pointer;
}

.area-write .box-write .xe-label input[type="checkbox"] {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  left: -9999px;
}

.area-write .box-write .xe-label>input[type="checkbox"]+.xe-input-helper {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #BEBFC5;
  border-radius: 2px;
}

.area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper:after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 11px;
  margin-top: -7px;
  margin-left: -3px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  content: "";
}

.area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper {
  border-color: transparent;
  background-color: #333;
}

.area-write .box-write .xe-label .xe-label-text {
  display: block;
  padding: 3px 0 0 27px;
  font-size: 13px;
  color: #333;
}

.area-write .box-write .btn_register {
  width: 68px;
  height: 30px;
  background: #000;
  border: none;
  border-radius: 30px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

.area-write .box-write .btn_register:hover {
  background: #ef402f;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .area-write .box-textarea textarea {
    height: 140px;
    font-size: 12px;
  }
}

/* // area-write */
/* area-protected */
.area-protected {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}

.area-protected .text-protected {
  margin: 0 0 21px 0;
  padding-top: 112px;
  background: url(./images/icon-exclamation.svg) no-repeat center top;
  font-size: 18px;
  color: #333;
}

.area-protected .text-protected span {
  font-size: 14px;
  line-height: 2;
  color: #777;
}

.area-protected input {
  width: 100%;
  height: 42px;
  margin-bottom: 10px;
  font-size: 13px;
  padding-left: 20px;
  border: 1px solid #e8e8e8;
}

.area-protected input:hover, .area-protected input:focus {
  border: 1px solid #333;
}

.area-protected input.active+button {
  background: #333;
  color: #fff;
  cursor: pointer;

}

.area-protected button {
  display: block;
  width: 100%;
  height: 42px;
  background: #ddd;
  border: none;
  font-size: 13px;
}

.article-header-noimg {
  background: none !important;
  background-size: 50% 50% !important;
}

.article-header-protected {
  background: url(./images/icon-exclamation.svg) no-repeat center !important;
  background-size: 50% 50% !important;
}

.title-other {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.article-view {
  margin-bottom: 12px;
  word-break: break-word;
}

.article-view p {
  font-size: 16px;
  line-height: 26px;
  color: #222;
}

.article-view h1,
.article-view h2,
.article-view h3,
.article-view h4 {
  margin-bottom: 24px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.87);
}

.article-view h1 {
  font-size: 32px;
  line-height: 1.33;
}

.article-view h2 {
  font-size: 24px;
  line-height: 1.38;
}

.article-view h3 {
  font-size: 20px;
  line-height: 1.4;
}

.article-view h4 {
  font-size: 18px;
  line-height: 1.33;
}

.article-view blockquote {
  margin: 0;
  padding-left: 19px;
  border-left: 1px solid;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.54);
}

.article-view ul,
.article-view ol {
  margin: 0;
  padding: 0 0 0 19px;
}

.article-view ul {
  margin-top: 18px;
}

.article-view ul li {
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-all;
}

.article-view ol {
  margin-bottom: 32px;
}

.article-view ol li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-all;
}

.article-view table {
  border-collapse: collapse;
}

.article-view table thead tr {
  background: rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: #000;
}

.article-view table tr th,
.article-view table tr td {
  padding: 7px;
}

.article-view pre {
  background: rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: rgba(34, 85, 51, 0.87);
  white-space: pre-wrap;
}

.article-view .cap1 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
}

.article-view hr {
  margin: 30px 0;
}

.article-view a {
  display: inline-block;
  color: #3d62ce;
}

.article-view a:hover {
  opacity: 0.7;
}

.article-view .moreless_fold span,
.article-view .moreless_top span {
  font-size: 16px;
  line-height: 2.5;
}

.article-view .moreless_content {
  padding-top: 40px;
}

.article-view .moreless_top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.article-view .moreless_bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.article-view .moreless_bottom span {
  display: none;
}

.article-view .footnote a {
  color: #4167d9 !important;
  text-decoration: none;
}

.article-view .footnotes li {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.38);
}

.article-view .table-overflow {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-view .table-overflow {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-view img {
  max-width: 100%;
}

/* area_view - 유튜브 사이즈 제어 */
@media screen and (max-width: 743px) {
  .article-view iframe {
    width: 100%;
    height: 56vw;
    -ms-height: 56vmax;
  }
}

/* media query - only mobile */
@media screen and (max-width: 768px) {
  .article-view {
    margin-top: 0px;
  }
}


.container_postbtn {
  padding: 43px 0 36px 0 !important;
}

@media screen and (max-width: 1060px) {
  .container_postbtn {
    padding: 36px 0 18px 0 !important;
  }
}

@media screen and (max-width: 1060px) {

  /* 검색리스트 타이틀 간격 */
  #tt-body-tag .title-search {
    font-size: 13px;
  }

  #tt-body-tag .title-search.title-search.title-border {
    padding-bottom: 11px;
  }
}


/* area-search */
.title-search {
  margin: 10px 0 0 0;
  padding-bottom: 14px;
  font-size: 14px;
}

.title-search span {
  color: #ef402f;
}

.title-search.title-border {
  margin-bottom: 29px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.article-title-crop,
.article-title-resize,
.article-title-poster {
  margin-bottom: 0px;
  border-bottom: none;

}


/* 검색 결과 없을때 */
.box-no-search {
  display: none;
  margin-bottom: 40px;
  font-size: 14px;

  color: rgba(51, 51, 51, 0.5);
}

.box-no-search span {
  position: relative;
  display: block;
  padding-left: 7px;
  line-height: 2;
  vertical-align: middle;
}

.box-no-search span:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 2px;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

#tt-body-search .type-search {
  display: block;
}

#tt-body-search .title-search .search {
  display: inline !important;
}

#tt-body-category .type-category {
  display: block;
}

#tt-body-tag .type-tag {
  display: block;
}

#tt-body-tag .title-search .tag {
  display: inline !important;
}

#tt-body-archive .type-archive {
  display: block;
}

#tt-body-archive .title-search .search {
  display: inline !important;
}


/* additional style */
#tt-body-archive .archives:before {
  content: "'";
}

#tt-body-archive .archives:after {
  content: "'에 등록된 글";
}

#tt-body-tag .archives:before {
  content: "#";
}

#tt-body-search .archives:before {
  content: "'";
}

#tt-body-search .archives:after {
  content: "'의 검색결과";
}


/* Search box */
.util {
  position: absolute;
  top: 0;
  right: 0;
}

.util .search {
  position: relative;
  float: left;
  overflow: hidden;
  background-color: #fff;
  box-sizing: border-box;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

.util .search input {
  width: 100%;
  padding-bottom: 7px;
  background: url(./images/icon-search.svg) no-repeat 98% 0;
  border: none;
  border-bottom: 2px solid #333;
  font-size: 14px;
  color: #999;
}

.util .search input::placeholder {
  color: #969696;
}

.util .search button {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 20;
  width: 30px;
  height: 30px;
  text-indent: -999em;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
  vertical-align: top;
  outline: none;
  cursor: pointer;
}



/**-----------------------------
*           SearchBox
*-----------------------------*/

.util.use-sidebar {
  position: initial;
  margin: 0 auto;
  float: none;
  margin: 24px auto;
}

.util.use-sidebar .search {
  float: none;
}

.util.use-top {
  width: 222px;
  margin-top: -6px;
}

.util.use-top .search {
  width: 100%;
}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .util:not(.use-top) {
    display: none
  }

  .wrap-drawer .util.use-sidebar {
    display: block
  }

  .wrap-drawer .util.use-top {
    display: none
  }

  .article-type-poster:nth-of-type(3n) {
    margin-right: 0;
  }
}

/* ----- media query - tablet ----- */
@media screen and (max-width: 1060px) {
  .util:not(.use-sidebar) {
    display: none
  }

  .wrap-drawer .util.use-sidebar {
    display: block
  }

  .wrap-drawer .util.use-top {
    display: none
  }
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
  .util:not(.use-sidebar) {
    display: none
  }

  .wrap-drawer .util.use-sidebar {
    display: block
  }

  .wrap-drawer .util.use-top {
    display: none
  }

  .util.use-sidebar .searchInput {
    font-size: 11px
  }
}



/* ----- 404 페이지 ----- */
.absent_post {
  display: none;
}

.notfoundpage .absent_post {
  display: block;
}

.notfoundpage#tt-body-page.notfoundpage .main {
  padding-top: 39px;
}

.notfoundpage .absent_post:before {
  content: "혹시 다른 글이지 않을까요?";
  display: block;
  margin-bottom: 25px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.285714285714286;
  color: #555;
  white-space: pre;
  background: url(./images/icon-no-img.svg) no-repeat center !important;
  height: 90px;
  padding-top: 122px;
}

.notfoundpage .absent_post {
  padding: 0px 0px 98px 0 !important;
  background: none !important;
  font-weight: normal !important;
  font-size: 14px !important;
  line-height: 1.75;
  color: #999 !important;
}



/* -- 슬로건 섹션, 메뉴, 배너 노출 위치 -- */
/* 공통 */
#tt-body-category.headerslogundisplayon .area-slogun,
#tt-body-search.headerslogundisplayon .area-slogun,
#tt-body-archive.headerslogundisplayon .area-slogun,
#tt-body-tag.headerslogundisplayon .area-slogun,
#tt-body-media.headerslogundisplayon .area-slogun,
#tt-body-location.headerslogundisplayon .area-slogun,
#tt-body-guestbook.headerslogundisplayon .area-slogun,
#tt-body-page.headerslogundisplayon .area-slogun {
  display: none;
}

#tt-body-category.headerbannerdisplayon .area-promotion,
#tt-body-search.headerbannerdisplayon .area-promotion,
#tt-body-archive.headerbannerdisplayon .area-promotion,
#tt-body-tag.headerbannerdisplayon .area-promotion,
#tt-body-media.headerbannerdisplayon .area-promotion,
#tt-body-location.headerbannerdisplayon .area-promotion,
#tt-body-guestbook.headerbannerdisplayon .area-promotion,
#tt-body-page.headerbannerdisplayon .area-promotion {
  display: none;
}



#tt-body-index .main,
#tt-body-category .main,
#tt-body-search .main,
#tt-body-tag .main,
#tt-body-archive .main,
#tt-body-guestbook .main {
  padding-top: 56px;
}


/* ------------------ 2단형 ------------------ */
.wrap-right .title-search {
  margin: 2px 0 0 0;
}

.wrap-right .title-search.article-title-thumbnail {
  margin-bottom: 28px;
}


.use-slogan-wrp .wrap-right .area-slogun.topnavmenu {
  padding-bottom: 0px;
}


/* ------------------ 1단형 ------------------ */
.wrap-drawer .header {
  border: none;
}


#tt-body-page .wrap-drawer .main {
  margin-top: 0px;
}


/* media query - only pc */
@media screen and (min-width: 1061px) {

  .wrap-drawer .header .line-bottom {
    top: 80px;
    display: block;
    width: 100%;
    position: absolute;
    border-bottom: solid 1px #efefef;
  }

  .wrap-drawer .header .area-slogun,
  .wrap-drawer .header .topnavmen {
    margin-top: 0px;
    padding-top: 0px;
  }

  .wrap-drawer .header .area-slogun {
    margin-top: 65px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }


  .wrap-drawer .main {
    margin-top: 56px;
  }
}

/* media query - only mobile */
@media screen and (max-width: 768px) {

  .header .line-bottom {
    display: none;
  }

  .header .area-gnb {
    margin-top: 0px;
  }

  .header .area-gnb .topnavmenu {
    border-bottom: 1px solid #efefef;
  }

  .header .area-slogun {
    padding-top: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  #tt-body-tag .main,
  #tt-body-media .main,
  #tt-body-index .main,
  #tt-body-category .main,
  #tt-body-search .main,
  #tt-body-archive .main,
  #tt-body-guestbook .main {
    padding-top: 0px;
    margin-top: 36px;
  }

}

/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {

  #tt-body-index .wrap-drawer .main,
  #tt-body-category .wrap-drawer .main,
  #tt-body-search .wrap-drawer .main,
  #tt-body-tag .wrap-drawer .main,
  #tt-body-archive .wrap-drawer .main,
  #tt-body-location .wrap-drawer .main,
  #tt-body-guestbook .wrap-drawer .main {
    padding-top: 0;
  }
}


/* ----- media query - tablet ----- */
@media screen and (max-width: 1060px) {

  #tt-body-tag .header,
  #tt-body-media .header,
  #tt-body-search .header,
  #tt-body-location .header,
  #tt-body-guestbook .header,
  #tt-body-archive .header,
  #tt-body-page .header,
  #tt-body-category .header {
    margin-bottom: 0;
  }

  #tt-body-page .header .title-logo,
  #tt-body-category .header .title-logo,
  #tt-body-archive .header .title-logo,
  #tt-body-search .header .title-logo {
    margin: 0;
  }
}



/* no 이미지 */
.not-found-img .thumbnail {
  text-align: center;
}

.not-found-img .img-thumbnail {
  content: url(./images/no-image.jpg);
}




/* --- 보호글 Image & Not found Image --- */
.protected-img .thumbnail {
  background-color: #fafafa;
  background-image: url(./images/icon-exclamation.svg);
  background-repeat: no-repeat;
  background-size: inherit;
}

.protected-img .img-thumbnail {
  content: url(./images/icon-exclamation.svg);
}


.article-type-resize .not-found-img .thumbnail {
  background-image: url(./images/no-image.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.article-type- .protected-img .thumbnail,
.article-type-thumbnail .protected-img .thumbnail {
  background-size: 50%;
}

.article-type-resize .protected-img .thumbnail {
  background-image: none;
  background-color: #fafafa;
  height: 200px;
  line-height: 200px;

}

.article-type-resize .not-found-img:not(.protected-img) .img-thumbnail {
  display: none;
}

.article-type-resize .protected-img .img-thumbnail {
  display: inline-block;
  vertical-align: middle;
}

.article-type-resize .not-found-img:not(.protected-img) .thumbnail,
.article-type-crop .not-found-img .thumbnail {
  height: 200px;
}

.article-type-resize .not-found-img .thumbnail .img-thumbnail {
  width: 77px;
}

.article-type-resize .protected-img .thumbnail .img-thumbnail {
  height: 90px;
}


/* --- 보호글 Form --- */

#tt-body-page.protected-view .article-header,
#tt-body-page.protected-view .area-paging,
#tt-body-page.protected-view .area-aside {
  display: none
}

#tt-body-page.protected-view .area-main {
  max-width: 100%;
}

#tt-body-page.protected-view .article-view {
  margin-bottom: 310px;
}

#tt-body-page.protected-view .main {
  padding-top: 70px;
}

/* -- spinner -- */
.area-paging-more {
  position: relative;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.paging-more-loading {
  color: #fff;
  pointer-events: none;
}

.paging-more-loading:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -15px;
  border-radius: 50%;
  border: 1px solid #ccc;
  border-top-color: #07d;
  animation: spinner .6s linear infinite;
}


/* -- init display none */
.display-none {
  display: none;
}

/* -- category style -- */
.use-category-banner .category-banner-wrp {
  display: block;
}

.use-category-banner .category-banner:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(58, 58, 58, 0.3);
  z-index: 1;
}


#tt-body-category.use-category-banner #container {
  margin-top: 400px;
}

.use-category-banner .category-banner-wrp {
  display: block;
  width: 100%;
  height: 400px;
  position: absolute;
  top: -400px;
  left: 0px;
}

.use-category-banner .category-banner {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 11;
}

.use-category-banner .category-banner .category-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 1020px;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
}

.use-category-banner .category-banner .category-description-box {
  margin-top: -4px;
}

.use-category-banner .category-banner .category-description-box strong {
  font-weight: bolder;
  width: 760px;
  font-size: 48px;
  font-family: Arial;
  line-height: 1.10;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: keep-all;
}


/* 1단형 카테고리*/
.use-category-banner .wrap-drawer .category-banner .category-banner-inner {
  max-width: 780px;
}



/* ----- media query - pc ----- */
@media screen and (min-width: 1061px) {
  .use-category-banner .wrap-drawer .category-banner-wrp {
    top: -456px;
  }

  #tt-body-category.use-category-banner .wrap-drawer #container {
    margin-top: 456px;
  }

  #tt-body-category.use-slogan-wrp.headerslogundisplayoff.use-category-banner .wrap-drawer #container {
    margin-top: 512px;
  }
}


/* ----- media query - mobile ----- */
@media screen and (max-width: 1061px) {
  #tt-body-category.use-category-banner #container {
    margin-top: 386px;
  }

  .use-category-banner .category-banner-wrp {
    height: 350px;
    top: -386px;
  }

  .use-category-banner .category-banner .category-description-box {
    position: absolute;
    bottom: 40px;
  }

  .use-category-banner .category-banner .category-banner-inner {
    position: relative;
    padding: 0 20px;
  }

  .use-category-banner .category-banner .category-description-box strong {
    width: 270px;
    margin-bottom: 22px;
    font-size: 30px;
    line-height: 30px;
    -webkit-line-clamp: 3;
  }

  .border-none {
    border: none;
  }
}

/* --- 공지 --- */
#tt-body-index.notice-index .area-view .notice-title:first-child {
  display: block;
}


/* --- no-image --- */
.article-type-common.article-type- .thumbnail:not([has-thumbnail]),
.article-type-common.article-type-thumbnail .thumbnail:not([has-thumbnail]) {
  display: none;
}


/* --- 방명록 Header --- */
#tt-body-guestbook .title-search {
  border-bottom: 1px solid #e8e8e8;
}

/* --- Cover Title --- */
.area-cover .title-cover {
  min-height: 32px;
}

.area-cover .title-cover:empty {
  min-height: auto;
  padding-bottom: 0px;
}


@media screen and (min-width: 1061px) {
  .wrap-right .area-cover:first-child .title-cover:empty {
    min-height: 32px;
  }
}


@media screen and (max-width: 760px) {
  .area-cover .box-cover-poster {
    margin-bottom: 0px;
  }

  .area-cover .article-type-poster {
    margin-bottom: 0px;

  }
}


#tt-body-guestbook .area-reply form {
  padding-top: 20px;
}


#tt-body-guestbook .area-reply .list-reply+form {
  padding-top: 0;
}

.revenue_unit_wrap.position_list {
  max-width: 1020px;
  margin: 30px auto
}

.my_edit .ico_more {
  fill: #fff !important;
}

/* 전체 공통 */
#article-view {
  margin: 0;
  padding: 20px 20px 50px;
  word-wrap: break-word;
  color: #333;
  min-height: 370px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

.contents_style>* {
  margin: 20px 0 0 0;
}

/* 텍스트 관련 */
#article-view h2[data-ke-size] {
  font-size: 1.62em;
  line-height: 1.46;
}

#article-view h3[data-ke-size] {
  font-size: 1.44em;
  line-height: 1.48;
}

#article-view h4[data-ke-size] {
  font-size: 1.25em;
  line-height: 1.55;
}

#article-view p[data-ke-size='size18'] {
  font-size: 1.12em;
  line-height: 1.67;
}

#article-view p[data-ke-size='size16'] {
  line-height: 1.75;
}

#article-view p[data-ke-size='size14'] {
  font-size: 0.87em;
  line-height: 1.71;
}

#article-view h2,
#article-view h3,
#article-view h4 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #000;
  margin: 1em 0 20px;
}

#article-view p+p, #article-view p {
  margin-bottom: 30px;
}

#article-view h2+h2,
#article-view h3+h3,
#article-view h4+h4 {
  margin: 0;
}

#article-view h2+h3,
#article-view h2+h4,
#article-view h3+h4 {
  margin-top: 10px;
}

#article-view h2+p,
#article-view h3+p,
#article-view h4+p,
#article-view h5+p,
#article-view h6+p {
  margin-top: 10px;
}

#article-view div[data-ke-type='moreLess'] {
  caret-color: auto;
  background-color: #fafafa;
  padding: 20px 20px 22px;
  margin: 20px 0;
  border: 1px dashed #dddddd;
  color: #333333;
}

#article-view a {
  color: #0070d1;
  text-decoration: underline;
}

#article-view figure[data-ke-type='contentSearch'] a {
  text-decoration: none;
}

/* 인용문 */
#article-view blockquote[data-ke-style='style1'] {
  text-align: center;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
  padding: 34px 0 0 0;
  font-size: 1.12em;
  color: #333;
  line-height: 1.67;
  border: 0 none;
  font-family: "Noto Serif KR";
}

#article-view blockquote[data-ke-style='style2'] {
  border-color: #d0d0d0;
  border-width: 0 0 0 4px;
  border-style: solid;
  padding: 1px 0 0 12px;
  color: #666;
  line-height: 1.75;
  font-size: 1em;
  text-align: left;
}

#article-view blockquote[data-ke-style='style3'] {
  border: 1px solid #dddddd;
  background-color: #fcfcfc;
  text-align: left;
  padding: 21px 25px 20px 25px;
  color: #666;
  font-size: 1em;
  line-height: 1.75;
}

#article-view blockquote {
  display: block;
  margin: 20px auto 0;
  letter-spacing: 0px;
}

/* 첨부: 공통 */

/* 이미지 클릭 관련 - lightbox */
#article-view span[data-lightbox] {
  cursor: pointer;
}

/* 첨부: 파일 */
#article-view figure.fileblock {
  width: 470px;
  height: 73px;
  box-sizing: border-box;
  position: relative;
  border-radius: 1px;
  margin-top: 20px;
  margin-bottom: 0px;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 7%);
  border: solid 1px rgba(0, 0, 0, 0.1);
}

#article-view figure.fileblock a {
  display: block;
}

#article-view figure.fileblock .image {
  float: left;
  width: 30px;
  height: 30px;
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  margin: 22px 17px 21px 22px;
  background-position: 0 0;
}

#article-view figure.fileblock .desc {
  position: absolute;
  left: 70px;
  right: 60px;
  top: 4px;
  bottom: 0;
}

#article-view figure.fileblock .filename {
  color: #333333;
  font-size: 14px;
  text-overflow: ellipsis;
  width: 100%;
  height: 20px;
  margin: 16px 0 0;
}

#article-view figure.fileblock .size {
  font-family: Pretendard-Regular;
  font-size: 12px;
  color: #777;
  height: 16px;
}

#article-view figure[data-ke-align=alignCenter].fileblock {
  margin-left: auto;
  margin-right: auto;
}

#article-view figure[data-ke-align=alignRight].fileblock {
  margin-left: auto;
}

#article-view figure.fileblock .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 272px;
  height: 20px;
  display: block;
}

#article-view figure.fileblock a::after {
  content: '';
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  background-position: -40px 0;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 24px;
  top: 19px;
}

/* 첨부: 이미지 */
#article-view figure.imageblock {
  display: table;
  position: relative;
}

#article-view figure.imageblock.alignLeft {
  text-align: left;
}

#article-view figure.imageblock.alignCenter {
  margin: 20px auto 0;
  text-align: center;
}

#article-view figure.imageblock.alignRight {
  text-align: right;
  margin-left: auto;
}

#article-view figure.imageblock.floatLeft {
  float: left;
  margin-right: 20px;
}

#article-view figure.imageblock.floatRight {
  float: right;
  margin-left: 20px;
}

#article-view figure.imageblock.widthContent {
  display: block;
}

#article-view figure.imageblock.widthContent img {
  width: 100%;
}

#article-view figure.imageblock.floatLeft figcaption,
#article-view figure.imageblock.floatRight figcaption {
  text-align: left;
}

#article-view figure.imageblock img {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  height: auto;
}

#article-view iframe,
#article-view figure img,
#article-view figure iframe {
  max-width: 100%;
}

#article-view figure img:not([width]),
#article-view figure iframe:not([width]) {
  width: 100%;
}

#article-view figure {
  max-width: 100%;
  clear: both;
}

#article-view figure img {
  display: inline-block;
}

#article-view figure.imagegridblock+figure.imagegridblock,
#article-view figure.imagegridblock+figure.imageblock,
#article-view figure.imageblock+figure.imagegridblock {
  margin-top: 10px;
}

/* 캡션 텍스트 */
#article-view figure figcaption {
  font-size: 13px;
  color: #777;
  word-break: break-word;
  padding-top: 10px;
  min-height: 20px;
  caption-side: bottom;
  text-align: center;
  caret-color: auto;
  width: 100%;
  box-sizing: content-box;
}

/* 첨부: 이미지 그리드 */
#article-view figure.imagegridblock {
  position: relative;
  caret-color: transparent;
  background-color: transparent;
  width: 100%;
  height: auto;
  margin: 20px 0 0 0;
}

#article-view figure.imagegridblock .image-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

#article-view figure.imagegridblock .image-container>span {
  margin-right: 0;
  margin-top: 2px;
}

#article-view figure.imagegridblock img {
  margin: 0;
  height: inherit;
}

#article-view figure.imagegridblock span img {
  width: 100%;
}

hr[data-ke-style],
#article-view hr[data-ke-style] {
  border: none;
  font-size: 0;
  line-height: 0;
  margin: 20px auto;
  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);
  background-size: 200px 420px;
  cursor: default !important;
}

hr[data-ke-style='style1'],
#article-view hr[data-ke-style='style1'] {
  background-position: center 0;
  width: 64px;
  height: 4px;
  padding: 20px;
}

hr[data-ke-style='style2'],
#article-view hr[data-ke-style='style2'] {
  background-position: center -48px;
  width: 64px;
  height: 3px;
  padding: 20px;
}

hr[data-ke-style='style3'],
#article-view hr[data-ke-style='style3'] {
  background-position: center -96px;
  width: 64px;
  height: 8px;
  padding: 18px 20px;
}

hr[data-ke-style='style4'],
#article-view hr[data-ke-style='style4'] {
  background-position: center -144px;
  width: 2px;
  height: 60px;
  padding: 0 51px;

}

hr[data-ke-style='style4']+hr[data-ke-style='style4'],
#article-view hr[data-ke-style='style4']+hr[data-ke-style='style4'] {
  margin-top: 0;
}

hr[data-ke-style='style5'],
#article-view hr[data-ke-style='style5'] {
  background-position: center -208px;
  background-repeat: repeat-x;
  height: 2px;
  padding: 21px 0;
}

hr[data-ke-style='style6'],
#article-view hr[data-ke-style='style6'] {
  background-position: center -256px;
  background-repeat: repeat-x;
  height: 2px;
  padding: 21px 0;
}

hr[data-ke-style='style7'],
#article-view hr[data-ke-style='style7'] {
  background-position: center -304px;
  width: 200px;
  height: 19px;
  padding: 18px 20px 17px 20px;
}

hr[data-ke-style='style8'],
#article-view hr[data-ke-style='style8'] {
  background-position: center -362px;
  width: 200px;
  height: 19px;
  padding: 18px 20px 17px 20px;
}

/* 테이블 */
#article-view table[data-ke-style] {
  margin-bottom: 0px;
}

#article-view table {
  border-color: #ddd;
  margin-bottom: 0px;
}

#article-view table tbody tr {
  box-sizing: content-box;
}

#article-view table td {
  word-break: break-word;
  padding: 8px;
  font-size: 15px;
}

#article-view table[data-ke-style='style1'] tr:first-child td {
  border-bottom: 1px solid #6ed3d8;
}

#article-view table[data-ke-style='style2'] tr:first-child td {
  border-bottom: 1px solid #008300;
}

#article-view table[data-ke-style='style3'] tr:first-child td {
  border-bottom: 1px solid #006dbe;
}

#article-view table[data-ke-style='style4'] tr:nth-child(2n) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style5'] tr:nth-child(2n) td {
  background-color: #f8fbfb;
}

#article-view table[data-ke-style='style6'] tr:nth-child(2n) td {
  background-color: #f5f7f5;
}

#article-view table[data-ke-style='style7'] tr:nth-child(2n) td {
  background-color: #f6f8fb;
}

#article-view table[data-ke-style='style8'] tr:first-child td {
  border-bottom: 2px solid #797979;
}

#article-view table[data-ke-style='style8'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style8'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style9'] tr:first-child td {
  border-bottom: 2px solid #6ed3d8;
}

#article-view table[data-ke-style='style9'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style9'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style10'] tr:first-child td {
  border-bottom: 2px solid #008300;
}

#article-view table[data-ke-style='style10'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style10'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style11'] tr:first-child td {
  border-bottom: 2px solid #2780d4;
}

#article-view table[data-ke-style='style11'] {
  border-left: 0 none;
  border-right: 0 none;
}

#article-view table[data-ke-style='style11'] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

#article-view table[data-ke-style='style12'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style12'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style12'] tr:first-child td {
  background-color: #9b9b9b;
  border: 1px solid #888;
  color: #fff;
}

#article-view table[data-ke-style='style13'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style13'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style13'] tr:first-child td {
  background-color: #6ed3d8;
  border: 1px solid #5cbcc1;
  color: #fff;
}

#article-view table[data-ke-style='style14'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style14'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style14'] tr:first-child td {
  background-color: #008300;
  border: 1px solid #006d00;
  color: #fff;
}

#article-view table[data-ke-style='style15'] tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

#article-view table[data-ke-style='style15'] tr td:first-child {
  background-color: #efefef;
}

#article-view table[data-ke-style='style15'] tr:first-child td {
  background-color: #2780d4;
  border: 1px solid #1568b7;
  color: #fff;
}

#article-view table[data-ke-style='style16'],
#article-view table[data-ke-style='style16'] tr,
#article-view table[data-ke-style='style16'] tr td {
  border-color: transparent;
}

/* 오픈 그래프 */
#article-view figure[data-ke-type='opengraph'] {
  margin: 10px 0;
}

#article-view figure[data-ke-type='opengraph'] a {
  box-sizing: initial;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
  border: solid 1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #000;
}

#article-view figure[data-ke-type='opengraph'] a:hover {
  opacity: 1;
}

#article-view figure[data-ke-type='opengraph'] div.og-image {
  border-right: solid 1px rgba(0, 0, 0, 0.06);
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
}

#article-view figure[data-ke-type='opengraph'] div.og-image button {
  display: none;
}

#article-view figure[data-ke-type='opengraph']:hover div.og-image button {
  cursor: pointer;
  border: none;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #000;
  width: 15px;
  height: 15px;
}

#article-view figure[data-ke-type='opengraph'] p.og-title {
  color: #000000;
  font-size: 22px;
  padding-bottom: 10px;
  max-width: 467px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0px;
  overflow: hidden;
  font-family: Pretendard-Regular;
}

#article-view figure[data-ke-type='opengraph'] .og-desc {
  margin: 0px;
  max-width: 467px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: Pretendard-Regular;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #909090;
  max-height: 42px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

@media (max-width: 600px) {
  #article-view figure[data-ke-type='opengraph'] a {
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] a::before {
    left: 44px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-image {
    width: 90px;
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text {
    padding: 13px 12px 0 20px;
    height: 90px;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-title {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-desc {
    display: none;
  }

  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-host {
    bottom: 10px;
  }
}

/* 비디오 첨부 */
#article-view figure[data-ke-type='video'] {
  display: block;
  table-layout: fixed;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 30px;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignLeft'] {
  text-align: left;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignCenter'] {
  margin: 20px auto 0;
  text-align: center;
}

#article-view figure[data-ke-type='video'][data-ke-style='alignRight'] {
  text-align: right;
  margin-left: auto;
}

#article-view figure[data-ke-type='video'] img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

#article-view figure[data-ke-type='video'][data-video-host] iframe {
  margin: 0px;
  display: block;
}

#article-view figure[data-ke-type='video']>iframe[width='0'][height='0'] {
  width: 860px;
  height: 484px;
  max-width: 100%;
}

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 14px;
  padding: 20px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  border: solid 1px #ebebeb;
  line-height: 1.71;
  overflow: auto;
}

/* 접은 글 */
#article-view .moreless-content :first-child {
  margin-top: 0;
  margin-bottom: 0;
}

#article-view div[data-ke-type='moreLess'] .moreless-content {
  display: none;
}

#article-view div[data-ke-type='moreLess'].open .moreless-content {
  display: block;
}

#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {
  color: #909090;
  font-size: 16px;
  line-height: 26px;
  font-family: Pretendard-Regular, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

/* 리스트 */
#article-view ul li,
#article-view ol li {
  margin: 0 0 3px 22px;
  line-height: 1.7;
}

#article-view ul,
#article-view ol {
  margin: 14px auto 24px;
  padding: 0 0 0 10px;
}

/* 이모티콘 */
#article-view figure[data-ke-type=emoticon][data-ke-align=alignCenter] {
  text-align: center;
}

#article-view figure[data-ke-type=emoticon][data-ke-align=alignLeft] {
  text-align: left;
}

#article-view figure[data-ke-type=emoticon][data-ke-align=alignRight] {
  text-align: right;
}

/* 지도 */
#article-view figure[data-ke-type='map'],
#article-view iframe[data-ke-type='map'] {
  display: block;
  margin: 0 auto;
}

/* 첨부: 이미지 슬라이드 */
#article-view figure.imageslideblock {
  clear: both;
  position: relative;
  font-size: 0;
  outline: 0 none;
}

#article-view figure.imageslideblock .btn {
  display: none;
  outline: none;
}

#article-view figure.imageslideblock.ready .btn {
  display: inline-block;
}

#article-view figure.imageslideblock.ready .mark {
  opacity: 1;
}

#article-view figure.imageslideblock div.image-container {
  position: relative;
  min-width: 480px;
  max-width: 100%;
  min-height: 300px;
  max-height: 860px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}

#article-view figure.imageslideblock div.image-container span.image-wrap {
  display: none;
}

#article-view figure.imageslideblock div.image-container span.image-wrap.selected {
  display: inline;
}

#article-view figure.imageslideblock div.image-container img {
  max-width: 100%;
  max-height: 100%;
}

#article-view figure.imageslideblock div.image-container .btn {
  position: absolute;
  border: 0;
  background: transparent;
  width: 60px;
  height: 60px;
  top: 50%;
  margin-top: -20px;
}

#article-view figure.imageslideblock div.image-container .btn-prev {
  left: 0;
}

#article-view figure.imageslideblock div.image-container .btn-next {
  right: 0;
}

#article-view figure.imageslideblock div.image-container:hover .btn span {
  opacity: 0.3;
}

#article-view figure.imageslideblock div.image-container .btn span {
  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');
  text-indent: -10000px;
  overflow: hidden;
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  display: inline-block;
}

#article-view figure.imageslideblock div.image-container .btn:hover span {
  opacity: 1;
}

#article-view figure.imageslideblock div.image-container .btn .ico-prev {
  background-position: -220px 0;
}

#article-view figure.imageslideblock div.image-container .btn .ico-next {
  background-position: -260px 0;
}

#article-view figure.imageslideblock div.mark {
  display: block;
  height: 44px;
  text-align: center;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

#article-view figure.imageslideblock div.mark span {
  width: 30px;
  height: 4px;
  display: inline-block;
  margin: 20px 1px;
  background-color: #d6d6d6;
  text-indent: -10000px;
  overflow: hidden;
  cursor: pointer;
}

#article-view figure.imageslideblock div.mark span:first-child {
  background-color: #000;
  margin-left: 0;
}

#article-view figure.imageslideblock div.mark span:last-child {
  margin-right: 0;
}

#article-view figure.imageslideblock figcaption {
  text-align: center;
  color: #666;
  font-size: 14px;
}

#article-view figure.imageslideblock.alignLeft {
  text-align: left;
}

#article-view figure.imageslideblock.alignCenter {
  margin: 0 auto 20px;
  text-align: center;
}

#article-view figure.imageslideblock.alignRight {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 600px) {
  #article-view figure.imageslideblock div.image-container {
    min-width: 100%;
    width: 100%;
    max-height: 100%;
  }

  #article-view figure.imageslideblock div.image-container .btn span {
    opacity: 0.3;
  }
}

/* 구 에디터 속성 */
.btn_more, .btn_less {
  border: 0;
  background: transparent;
  display: block;
  height: 21px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 14px;
  color: #888;
  position: relative;
  width: 100%;
  text-align: left;
}

.btn_less::before,
.btn_more::before {
  content: "...";
  display: inline-block;
  padding-right: 5px;
  font-size: 14px;
  line-height: 6px;
  vertical-align: top;
}

.box-timeline-content {
  word-break: break-all;
}

.area-aside .box-profile .btn_subscription,
.btn-g {
  display: inline-block;
  min-width: 120px;
  height: 40px;
  padding: 0 23px;
  border-radius: 20px;
  border: 1px solid #D0D0D0;
  font-weight: 400;
  font-size: 13px;
  color: #222;
  line-height: 38px;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
  -webkit-transition: background-color .1s linear,border-color .1s linear;
  -moz-transition: background-color .1s linear,border-color .1s linear;
  transition: background-color .1s linear,border-color .1s linear;
}

.area-aside .box-profile .btn_subscription:hover,
.btn-g:hover {
  color: #fff;
  background-color: #f54;
  border: 1px solid #f54;
  text-decoration: none;
}

.area-aside .box-profile .btn_subscription:active,
.btn-g:active {
  color: #fff;
  background-color: #cc4436;
  border: 1px solid #cc4436;
  text-decoration: none;
}

.area-aside .box-profile .btn_subscription:not(.following),
.btn-primary {
  border-color: #000;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.group-btn {
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.btn_subscription strong {
  display: none;
}

.btn_subscription em {
  font-style: normal;
  font-weight: normal;
}

.area-aside .box-profile {
  border-bottom: 1px solid #e8e8e8;
}

.area-aside .box-profile .img-profile {
  margin: 40px 0 16px;
}

.area-aside .box-profile .tit-g {
  display: block;
  padding: 0 40px;
  font-weight: 600;
  font-size: 14px;
  word-break: break-word;
  margin: 0 0 10px 0;
}

.area-aside .box-profile .btn_tool + .profile-btn-group.member {
 margin-top: 33px;
}

.area-aside .box-profile .profile-btn-group:not(.member) {
  display: none;
}

.area-aside .box-profile .btn-g {
  min-width: 125px;
}

.area-aside .box-profile .btn_subscription:only-of-type {
  width: calc(100% - 40px);
}

.area-aside .box-profile .btn-g + .btn-g {
  margin-left: 10px;
}

.area-aside .box-profile .group-btn {
  padding: 33px 0 40px;
}

.cont-empty {
  text-align: center;
}

.cont-empty .tit-g {
  display: block;
  margin-top: 78px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  color: #000000;
  letter-spacing: -1.2px;
}

.cont-empty .desc-g {
  margin: 9px 0 0 0;
  font-size: 13px;
  line-height: 1.15;
  color: #777;
}

.cont-empty .group-btn {
  margin-top: 30px;
}

/* =====================================================================
   2. CSS  —  스킨 편집 → CSS 탭

   [붙여넣을 위치] 기존 CSS 맨 아래, 제일 끝줄 다음.

     기존 CSS의 마지막은 이렇게 끝납니다:
         .cont-empty .group-btn {
           margin-top: 30px;
         }
     ← 그 아래에 이 파일 전체를 그대로 붙이세요.

   [왜 맨 아래냐] CSS는 같은 우선순위면 '나중에 온 것'이 이깁니다.
                 위에 붙이면 기존 스타일에 덮여서 아무것도 안 바뀝니다.

   ⚠️ 기존 CSS는 한 줄도 지우지 마세요. 이 블록만 추가하면 됩니다.
   ⚠️ 폰트 <link>는 CSS가 아니라 HTML <head>에 들어갑니다 (1-HTML-수정분.html ①)

   [되돌리기] 이 주석부터 파일 끝까지 지우면 원래 스킨으로 완전 복구됩니다.
   ===================================================================== */

/* ▼▼▼▼▼▼▼▼▼▼ 여기부터 복사 ▼▼▼▼▼▼▼▼▼▼ */

:root{
  --fs-ink:#1c1c1c;      /* 본문 */
  --fs-dark:#1a1a1a;     /* 다크 배경 */
  --fs-muted:#6b6b6b;
  --fs-faint:#9a9a9a;
  --fs-line:#e5e2dd;
  --fs-cream:#f7f5f2;

  --fs-serif:"Lora","Gowun Batang",Georgia,serif;
  --fs-sans:"Pretendard Variable","Pretendard",
            -apple-system,"Apple SD Gothic Neo",sans-serif;
}

/* ---------- 1. 폰트 전역 교체 ---------- */
body,
.article-view,
#article-view{
  font-family:var(--fs-sans);
  color:var(--fs-ink);
}

/* 제목류는 전부 세리프 */
.header .link_logo,
.article-type-common .title,
.article-header .title-article,
.area-promotion .inner-promotion strong,
.use-category-banner .category-banner .category-description-box strong,
.header .area-slogun strong,
#article-view h2,
#article-view h3,
#article-view h4{
  font-family:var(--fs-serif) !important;
  font-weight:500 !important;   /* 400=가늘게(Fashionise) / 500=중간 / 600=굵게(Medium 느낌) */
  letter-spacing:-.005em;
}

/* 원본 스킨이 제목에 Arial을 박아둔 곳들 되돌리기 */
.area-promotion .inner-promotion strong,
.header .area-slogun strong,
.use-category-banner .category-banner .category-description-box strong{
  font-family:var(--fs-serif) !important;
}

/* ---------- 2. 포인트컬러 #ef402f 제거 ---------- */
/* 원본은 주황빨강이 링크·호버·강조에 박혀 있음 → 무채색으로 */
.area-paging .link_page:hover,
.area-tag .box-tag a:hover,
.article-reply .box-total span,
.title-search span{
  color:var(--fs-ink) !important;
}
.header .tt_category .category_list>li:hover>a:after,
.header .topnavmenu>ul>li:hover>a:after{
  background:var(--fs-ink) !important;
  height:1px !important;   /* 두꺼운 4px 바 → 얇은 밑줄 */
  top:auto !important;
  bottom:-1px !important;
}
.area-write .box-write .btn_register:hover,
.btn-g:hover,
.area-aside .box-profile .btn_subscription:hover{
  background-color:var(--fs-ink) !important;
  border-color:var(--fs-ink) !important;
}

/* ---------- 3. 로고 ---------- */
.header .link_logo{
  font-size:28px !important;
  letter-spacing:.02em;
  color:var(--fs-ink) !important;
  max-width:320px !important;   /* 원본 220px — 제목 잘림 방지 */
}

/* ---------- 4. 상단 메뉴 — 작은 대문자 + 넓은 자간 ---------- */
.header .tt_category .category_list .link_item,
.header .topnavmenu>ul>li>a{
  font-family:var(--fs-sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}
.header .tt_category .category_list li,
.header .topnavmenu>ul>li{
  margin-right:34px !important;   /* 61px는 너무 벌어짐 */
}

/* ---------- 5. 히어로 (헤더 배너) ---------- */
/* 관리자 → 스킨 설정에서 배너 이미지/제목 넣으면 여기 스타일이 적용됨 */
.area-promotion:before{
  background-color:rgba(0,0,0,.34) !important;  /* 원본 .3 회색 → 검정 */
}
.area-promotion .inner-promotion{
  justify-content:center !important;   /* 원본 좌측정렬 → Fashionise는 중앙 */
  text-align:center;
}
.area-promotion .inner-promotion strong{
  width:auto !important;
  max-width:16ch;
  margin:0 auto;
  font-size:44px !important;
  line-height:1.32 !important;
}
.area-promotion .inner-promotion .link-promotion{
  margin:24px auto 0 !important;
  border-radius:0 !important;          /* 둥근 버튼 → 각진 */
  font-size:11px !important;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ---------- 6. 커버 섹션 라벨 ---------- */
.area-cover .title-cover,
.title-search{
  font-family:var(--fs-sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
  color:var(--fs-ink) !important;
}

/* ---------- 7. 글 카드 ---------- */
.article-type-common .title{
  font-size:23px !important;
  line-height:1.4 !important;
}
.article-type-common .summary{
  font-size:15px !important;
  line-height:1.7 !important;
}
.article-type-common:hover .title{
  text-decoration:none !important;   /* 밑줄 → 흐려지기 */
  opacity:.6;
}
.article-type-common .link-category,
.article-type-common .date{
  font-family:var(--fs-sans);
  font-size:10px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fs-faint) !important;
}
/* 카테고리·날짜 사이 점 구분자 제거 (Fashionise는 여백으로 구분) */
.article-type-common .date:before,
.article-type-common .reply:before{
  display:none !important;
}

/* 썸네일 없는 글 — no-image.jpg 대신 크림색 단색
   (원본 스킨은 ./images/no-image.jpg 를 깔지만, 그 파일이 없어도 이게 이깁니다.
    has-thumbnail 속성은 '이미지가 있는 글'에만 붙으므로 진짜 썸네일은 안 건드림) */
.article-type-common .thumbnail:not([has-thumbnail]){
  background-image:none !important;
  background-color:var(--fs-cream) !important;
  border:1px solid var(--fs-line);
}
.article-type-common .thumbnail:not([has-thumbnail]) .img-thumbnail{
  display:none !important;
}

/* poster 카드 = 프로젝트 섹션용. 세로 포스터(132.5%) → 가로 4:3 */
.article-type-poster .thumbnail{
  padding-top:75% !important;
}
.article-type-poster .title{
  font-family:var(--fs-serif) !important;
  font-size:17px !important;
  line-height:1.4 !important;
}

/* ---------- 8. 글 상세 헤더 ---------- */
.article-header:before{
  background-color:rgba(0,0,0,.42) !important;
}
.article-header .box-meta .category{
  font-family:var(--fs-sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.article-header .title-article{
  font-size:42px !important;
  line-height:1.34 !important;
}
.article-header .box-info{
  font-family:var(--fs-sans);
  font-size:11px !important;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---------- 9. 본문 읽기 ---------- */
#article-view p[data-ke-size='size16'],
.article-view p,
.article-view li,
#article-view li{
  font-size:19px !important;      /* 원본 16px · Medium이 21px */
  line-height:1.85 !important;
  color:#2a2a2a !important;
}
/* 본문 소제목도 같이 키움 */
/* ⚠️ 여백까지 여기서 잡습니다.
   티스토리 기본 스킨이 h2/h3 margin 을 자기 값으로 덮어써서,
   본문에 인라인 style 을 줘도 안 먹습니다. 반드시 여기서 !important 로 지정할 것. */
#article-view h2{
  font-size:34px !important;
  margin:112px 0 30px !important;  /* 구분선을 쓰지 않으므로 이 여백이 곧 섹션 구분입니다 */
  line-height:1.35 !important;
}
#article-view h3{
  font-size:25px !important;
  margin:52px 0 18px !important;
  line-height:1.4 !important;
}
#article-view h4{ font-size:21px !important; margin:36px 0 14px !important; }

/* 목록 — 앞뒤 문단과 붙지 않게. 빈 문단(<p>&nbsp;</p>)으로 띄우지 말고 여기서 잡습니다 */
#article-view ul,
#article-view ol{ margin:32px 0 !important; padding-left:1.5em !important; }
#article-view li{ margin:10px 0 !important; }

#article-view a,
.article-view a{
  color:var(--fs-ink) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* ---------- 10. 푸터 다크 ---------- */
#footer{
  margin-top:0 !important;
  padding:62px 0 48px !important;
  border-top:none !important;
  background:var(--fs-dark);
}
#footer .link-footer{ color:#cfcfcf !important; }
#footer .link-footer:hover{ color:#fff !important; }
#footer .link-footer:before{ background:#5a5a5a !important; }
#footer .text-info,
#footer address{ color:#8f8f8f !important; }
#footer .box-site button{
  background-color:transparent !important;
  border-color:#3a3a3a !important;
  color:#8f8f8f !important;
}
#footer .box-site ul,
#footer .box-site ul li a{
  background:#242424 !important;
  border-color:#3a3a3a !important;
  color:#8f8f8f !important;
}

/* ---------- 11. 다크 상단바 ---------- */
/* HTML 편집에서 <body> 바로 뒤에 아래 마크업을 넣어야 작동:
   <div class="fs-topbar"><div class="fs-topbar-inner">
     <span class="fs-tag">한 줄 소개</span>
     <nav><a href="#">About</a><a href="#">GitHub</a><a href="#">Portfolio</a></nav>
   </div></div>
*/
.fs-topbar{ background:var(--fs-dark); }
.fs-topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1020px; margin:0 auto; padding:0 20px;
  height:38px; gap:16px;
}
.fs-topbar .fs-tag{
  font-size:11px; color:#8d8d8d;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fs-topbar nav{ display:flex; gap:22px; }
.fs-topbar nav a{
  font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#cfcfcf; text-decoration:none;
}
.fs-topbar nav a:hover{ color:#fff; }

@media screen and (max-width:1060px){
  .fs-topbar .fs-tag{ display:none; }
  .fs-topbar-inner{ justify-content:flex-end; }
}

/* ---------- 12. 서랍형 레이아웃 보정 ---------- */
/* ※ 스킨 설정 → 사이드바 형태 = '서랍형' 일 때만 적용됩니다.
      2단 우측으로 두면 이 블록은 아무 효과가 없습니다. */

@media screen and (min-width:1061px){

  /* 12-1. 본문 폭 780 → 960 (Fashionise가 더 넓음) */
  .wrap-drawer .area-main,
  .wrap-drawer .header .inner-header,
  .wrap-drawer .header .area-gnb,
  .wrap-drawer .header .area-slogun,
  .wrap-drawer .area-promotion .inner-promotion,
  .wrap-drawer .article-header .inner-header{
    max-width:960px !important;
  }

  /* 12-2. PC에서 햄버거 버튼 숨김
     Fashionise엔 없는 버튼. 사이드바를 안 볼 거라 PC에선 불필요.
     ⚠️ 모바일(1060px 이하)은 그대로 둡니다 —
        모바일은 검색창이 사이드바 안에 있어서 햄버거를 없애면 검색을 못 합니다. */
  .wrap-drawer .header .button-menu{
    display:none !important;
  }

  /* 12-3. 메뉴 중앙정렬 → 우측정렬 (Fashionise는 로고 좌 / 메뉴 우) */
  .wrap-drawer .header .area-gnb>nav>ul,
  .wrap-drawer .header .tt_category .category_list,
  .wrap-drawer .header .topnavmenu>ul{
    text-align:right !important;
  }
}

/* ---------- 13. 사이드바 톤 정리 (2단 우측일 때) ---------- */
/* ※ 사이드바를 쓰기로 했으면 이 블록이 필요합니다.
      기본 사이드바는 티스토리 느낌이 강해서 Fashionise 톤과 안 맞습니다. */

/* 13-1. 사이드바 제목 → 작은 대문자 라벨 (Fashionise 시그니처) */
.area-aside .title-sidebar{
  font-family:var(--fs-sans) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
  color:var(--fs-ink) !important;
  margin-bottom:14px !important;
}

/* 13-2. 프로필 박스 — 두꺼운 검정 밑줄(2px) 제거 */
.area-aside .box-profile{
  border:1px solid var(--fs-line) !important;
}
.area-aside .box-profile .tit-g{
  font-family:var(--fs-serif) !important;
  font-size:18px !important;
  font-weight:400 !important;
}
.area-aside .box-profile .img-profile{
  border-radius:0 !important;   /* 원형 → 각진 사각 (에디토리얼 톤) */
}

/* 13-3. 카테고리 목록 */
.area-aside .box-category{
  border-bottom:1px solid var(--fs-line) !important;
}
.area-aside .box-category .tt_category .link_tit:hover,
.area-aside .box-category .tt_category .category_list .link_item:hover{
  color:var(--fs-ink) !important;
  text-decoration:none !important;
  font-weight:400 !important;   /* 호버 시 굵어지며 흔들리는 것 방지 */
}

/* 13-4. 최근글 제목 세리프 */
.area-aside .box-recent .list-recent .box-recent strong{
  font-family:var(--fs-serif) !important;
}

/* 13-5. 둥근 버튼 → 각지게 */
.area-aside .box-profile .btn_subscription,
.btn-g{
  border-radius:0 !important;
}

/* 13-6. 검색창 밑줄 얇게 */
.util .search input{
  border-bottom:1px solid var(--fs-ink) !important;
  font-family:var(--fs-sans);
}


/* 12-4. 로고를 본문 폭(960px)에 맞춰 정렬
   원본은 화면 왼쪽에서 80px 고정이라, 본문이 가운데 정렬되면 로고만 튀어나옵니다.
   ⚠️ 화면이 충분히 넓을 때만 적용 (좁으면 원래대로 80px) */
@media screen and (min-width:1160px){
  .wrap-drawer .header .title-logo{
    left:calc((100% - 960px) / 2) !important;
  }
}

/* =====================================================================
   14. 타입 스케일 & 여백  — 크기 조절은 전부 여기서
   =====================================================================
   ※ 이 블록이 앞의 값들을 덮어씁니다. 크기 바꾸고 싶으면 여기만 고치세요.
   ※ "시원하게 크다"는 느낌은 글자 크기가 아니라 '여백'에서 나옵니다.
      크기만 키우면 오히려 답답해져요. 그래서 둘을 같이 올렸습니다.
   ===================================================================== */

/* 14-1. 로고 — 크되 두껍지 않게 (우아한테크식 굵은 로고와 반대 방향) */
.header .link_logo{
  font-size:34px !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
  max-width:420px !important;
}
.header .title-logo{
  margin:38px 0 !important;   /* 원본 30px */
}

/* 14-2. 상단 메뉴 — 살짝 키우고 간격 넓힘 */
.header .tt_category .category_list .link_item,
.header .topnavmenu>ul>li>a{
  font-size:12px !important;
  letter-spacing:.18em !important;
}
.header .tt_category .category_list li,
.header .topnavmenu>ul>li{
  margin-right:40px !important;
}

/* 14-3. 섹션 라벨 (Latest Posts 자리) */
.area-cover .title-cover,
.title-search{
  font-size:12px !important;
  letter-spacing:.24em !important;
  padding-bottom:20px !important;
}

/* 14-4. 글 목록 — 제목 키우고 카드 사이를 넉넉하게 */
.article-type-common .title{
  font-family:"Pretendard Variable","Pretendard",var(--fs-sans) !important;  /* 세리프→산세리프 (볼드가 확 삶) */
  font-size:26px !important;
  font-weight:800 !important;    /* 목록 제목 볼드. 살짝 줄이려면 700 */
  line-height:1.38 !important;
  max-height:none !important;    /* 원본은 54px에서 잘림 → 해제 */
}
.article-type-common .summary{
  font-size:15px !important;
  line-height:1.75 !important;
}
.article-type-common .link-category,
.article-type-common .date{
  font-size:11px !important;
}

/* 목록 항목 사이 여백 (원본 19~28px → 넉넉하게) */
.article-type-,
.article-type-thumbnail{
  margin-bottom:46px !important;
}
.article-type-crop,
.article-type-resize{
  margin-bottom:64px !important;
}

/* 썸네일도 조금 크게 */
.article-type- .thumbnail,
.article-type-thumbnail .thumbnail{
  width:200px !important;
  height:135px !important;
  margin-left:32px !important;
}

/* 14-5. 글 상세 제목 */
.article-header .title-article{
  font-size:48px !important;
  line-height:1.3 !important;
}

/* 14-6. 사이드바 */
.area-aside .title-sidebar{
  font-size:11px !important;
  margin-bottom:18px !important;
}
.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item{
  font-size:15px !important;
  margin-bottom:13px !important;
}
.area-aside .box-recent .list-recent .box-recent strong{
  font-size:14px !important;
}

/* 14-7. 슬로건 섹션 = 사진 없는 히어로
   배너 이미지를 안 쓰는 대신 여기가 상단을 채웁니다. */
.header .area-slogun{
  padding-top:56px !important;
  padding-bottom:56px !important;
}
.header .area-slogun strong{
  font-size:46px !important;      /* 원본 36px */
  line-height:1.28 !important;
  max-height:none !important;     /* 원본은 82px에서 잘림 → 해제 */
  margin-bottom:16px !important;
}
.header .area-slogun p{
  width:auto !important;
  max-width:52ch !important;
  font-size:15px !important;
  line-height:1.7 !important;
  color:var(--fs-muted) !important;
}

/* 14-8. 위아래 숨 쉴 공간 */
#tt-body-index .main,
#tt-body-category .main,
#tt-body-search .main,
#tt-body-tag .main,
#tt-body-archive .main{
  padding-top:72px !important;   /* 원본 56px */
}

/* ----- 모바일에서는 조금 줄임 (안 그러면 글자가 화면을 잡아먹음) ----- */
@media screen and (max-width:1060px){
  .header .link_logo{ font-size:24px !important; }
  .header .title-logo{ margin:0 !important; }
  .header .area-slogun{ padding:32px 20px !important; }
  .header .area-slogun strong{ font-size:28px !important; }
  .header .area-slogun p{ font-size:13px !important; }
  .article-type-common .title{ font-size:20px !important; }
  .article-header .title-article{ font-size:30px !important; }
  .article-type-,
  .article-type-thumbnail{ margin-bottom:30px !important; }
  .article-type- .thumbnail,
  .article-type-thumbnail .thumbnail{
    width:96px !important; height:96px !important; margin-left:18px !important;
  }
}

/* =====================================================================
   15. 글쓰기용 컴포넌트 — 본문에서 class 이름만 쓰면 됩니다
   =====================================================================
   ※ 왜 여기에 정의하나: 본문에 style="..." 인라인으로 쓰면 :hover가 안 됩니다.
      클래스로 빼둬야 마우스 올렸을 때 반응하는 효과를 쓸 수 있어요.
   ※ 사용법은 `5-글쓰기-템플릿.md` 참고
   ===================================================================== */

/* 15-0. 본문은 전부 읽기 좋은 sans로 (Lora는 제목에만) */
#article-view,
#article-view h2,
#article-view h3,
#article-view h4,
#article-view p,
#article-view li{
  font-family:var(--fs-sans) !important;
}
#article-view h2,
#article-view h3,
#article-view h4{
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--fs-ink) !important;
}

/* 15-1. 리드문 — 글 첫 문단, 조금 크게 */
/* ⚠️ 아래 fs-* 규칙들이 `p.fs-xxx` 로 클래스 앞에 p 를 붙인 이유
   ─────────────────────────────────────────────────────────────────
   티스토리 에디터는 문단에 data-ke-size="size16" 을 자동으로 붙입니다.
   그런데 섹션 9 에 이런 규칙이 있습니다.

       #article-view p[data-ke-size='size16']{ font-size:19px !important; }

   선택자 점수를 따지면
       #article-view p[data-ke-size='size16']  → (1, 1, 1)   ← 속성이 붙어 더 구체적
       #article-view .fs-lead                  → (1, 1, 0)
   이라서 !important 를 줘도 19px 쪽이 이깁니다.
   실제로 작업일 줄이 12px 대신 19px 로 나오면서, fs-date 의 넓은 자간(.16em)까지
   같이 적용돼 유독 커 보였습니다.

   `p` 를 하나 붙여 (1,1,1) 로 맞추고, 섹션 9 보다 뒤에 오게 두어 이기게 합니다.
   ⚠️ 이 `p.` 를 빼면 글자 크기가 다시 19px 로 튑니다. */

#article-view p.fs-lead,
#article-view .fs-lead{
  font-size:21px !important;
  line-height:1.75 !important;
  color:#3a3a3a !important;
  padding-bottom:8px;
}

/* 15-1a. 날짜 배지 — 글 맨 위. "언제 한 일인가"를 표시
   발행일(티스토리 자동)과 별개로, 실제 공부·작업 시점을 남깁니다.
   옛 세미나 글을 지금 올릴 때 특히 유용 (설계문서 0장·7장) */
#article-view p.fs-date,
#article-view .fs-date{
  margin:0 0 18px !important;
  padding-bottom:0;
  border-bottom:none !important;   /* 작업시기 밑줄 제거 */
  font-size:11px !important;       /* 헤더의 발행일(11px)과 같은 크기로 맞춤 */
  font-weight:600;
  letter-spacing:.14em;
  color:var(--fs-faint) !important;
  line-height:1.6 !important;
  text-align:center;               /* 헤더가 가운데정렬이라 이어지게 */
}
/* 날짜도 연하게. 예전엔 --fs-ink(#1c1c1c) 라 이 줄만 유독 진했습니다.
   사진 위에 놓이는 보조 정보라 튀면 안 됩니다.
   더 진하게 하려면 var(--fs-ink), 더 연하게는 var(--fs-faint) */
#article-view .fs-date b{
  color:var(--fs-muted);
  font-weight:600;
}
/* "작업일" 라벨 — 티스토리가 발행일을 따로 찍어주기 때문에,
   이게 없으면 날짜가 두 개 보여서 어느 쪽이 뭔지 헷갈립니다. */
#article-view .fs-date .label{
  margin-right:12px;
  color:var(--fs-faint);
  font-weight:600;
}
#article-view .fs-date .sep{
  margin:0 10px;
  color:var(--fs-line);
}

/* 15-1c. 사진 아래위 여백
   글에 사진을 넣으면 [##_Image##] 가 figure.imageblock 으로 펼쳐집니다.
   원본 스킨은 margin:20px auto 0 — 즉 아래 여백이 0이라
   사진과 바로 다음 문단이 달라붙습니다. 숨 쉴 공간을 줍니다.
   ※ 더 띄우려면 숫자만 올리세요. */
#article-view figure.imageblock,
#article-view figure.imagegridblock,
#article-view figure.imageslideblock{
  margin-top:64px !important;
  margin-bottom:64px !important;
}
/* 캡션은 사진에 붙어 있어야 '이 사진의 설명'으로 읽힙니다 */
#article-view figure figcaption{
  padding-top:12px !important;
  color:var(--fs-faint) !important;
}

/* 15-1b. 메타 줄 — 기간 · 팀 · 역할 (프로젝트 글 상단) */
#article-view .fs-meta{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px 34px;
  margin:22px 0 !important;
  padding:0;
  border:none !important;   /* 메타 위아래 구분선 제거 */
}
#article-view .fs-meta span{
  font-size:14px;
  color:var(--fs-ink);
  line-height:1.6;
}
#article-view .fs-meta b{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fs-faint);
  margin-bottom:4px;
}

/* 15-2. 콜아웃 — 진한 왼쪽 바만 (배경 색 없음) */
#article-view .fs-callout{
  margin:48px 0 !important;
  padding:2px 0 2px 20px !important;
  background:none !important;
  border-left:3px solid var(--fs-ink) !important;
  font-size:17px;
  line-height:1.8;
  color:var(--fs-ink);
}
#article-view .fs-callout strong{ font-weight:700; }
#article-view .fs-callout.warn{
  background:none !important;
  border-left-color:var(--fs-ink) !important;   /* 경고도 색 대신 진한 바 */
}

/* 15-3. 작은 참고 */
#article-view p.fs-note,
#article-view .fs-note{
  margin:32px 0 !important;
  padding-left:16px;
  border-left:2px solid var(--fs-line);
  font-size:16px !important;
  line-height:1.7 !important;
  color:var(--fs-muted) !important;
}

/* 15-3-1. "궁금했던 것" 접이식 블록 (<details>)
   ⚠️ 브라우저 기본 삼각형(marker)은 안 뜨는 환경이 있어서, 감추고 직접 그립니다.
      인라인 style 로는 ::before 와 [open] 상태를 못 잡기 때문에 반드시 여기서 처리할 것. */
#article-view details > summary{
  list-style:none;
  display:block;            /* 기본 marker 자리 제거 */
}
#article-view details > summary::-webkit-details-marker{ display:none; }
#article-view details > summary::before{
  content:"▶";
  display:inline-block;
  margin-right:10px;
  font-size:15px;
  color:#9ca3af;
  vertical-align:0;
}
#article-view details[open] > summary::before{ content:"▼"; }

/* 궁금! 블록 글자 크기 — 본문 인라인 style 을 이기려고 !important 를 씁니다.
   글 HTML 을 안 고쳐도 이미 올린 글까지 같이 커집니다. */
#article-view details > summary{ font-size:18px !important; }
#article-view details > div{
  font-size:17px !important;
  line-height:1.85 !important;
  color:#33393f !important;
}

/* 15-4. 기술스택 칩 */
#article-view .fs-chips{ margin:20px 0 !important; }
#article-view .fs-chip{
  display:inline-block;
  margin:0 6px 6px 0;
  padding:5px 12px;
  border:1px solid var(--fs-line);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--fs-muted);
  white-space:nowrap;
}

/* 15-5. 링크 버튼 (GitHub·데모) — hover 있음 */
#article-view .fs-links{ margin:26px 0 !important; }
#article-view .fs-btn{
  display:inline-block;
  margin:0 8px 8px 0;
  padding:11px 22px;
  border:1px solid var(--fs-ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--fs-ink) !important;
  text-decoration:none !important;
  transition:background-color .18s, color .18s;
}
#article-view .fs-btn:hover{
  background:var(--fs-ink);
  color:#fff !important;
  opacity:1;
}

/* 15-6. 이미지 + 캡션 */
#article-view .fs-figure{ margin:34px 0 !important; }
#article-view .fs-figure img{
  width:100%;
  border:1px solid var(--fs-line);
}
#article-view .fs-cap{
  display:block;
  margin-top:10px;
  font-size:13px !important;
  color:var(--fs-faint) !important;
  text-align:center;
}

/* 15-7. 지표 — 숫자 강조 */
#article-view .fs-stats{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:30px 0 !important;
}
#article-view .fs-stat{
  flex:1 1 150px;
  padding:20px;
  border:1px solid var(--fs-line);
  text-align:center;
}
#article-view .fs-stat b{
  display:block;
  font-family:var(--fs-serif);
  font-size:34px;
  font-weight:500;
  line-height:1.2;
  margin-bottom:6px;
}
#article-view .fs-stat span{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--fs-faint);
}

/* 15-8. 구분선 */
/* 섹션 구분선 — 반드시 '실선 한 줄'.
   ⚠️ border 로 그리면 티스토리 에디터/브라우저 설정에 따라 점선으로 보일 수 있어서,
      border:0 으로 죽이고 background 로 칠합니다. */
#article-view .fs-hr,
#article-view hr{
  height:1px !important;
  border:0 !important;
  border-top:0 !important;
  background:#d9d5cf !important;
  margin:88px 0 !important;   /* 섹션 사이를 넉넉하게. 위 h2 margin-top 과 합쳐져 한 화면 쉬어감 */
}

@media screen and (max-width:1060px){
  #article-view p.fs-lead,
  #article-view .fs-lead{ font-size:18px !important; }
  #article-view .fs-callout{ padding:16px 18px !important; font-size:15px; }
  #article-view .fs-stat b{ font-size:26px; }
}

/* =====================================================================
   16. 글 상세 헤더를 "미리보기 스타일"로  — 선택 블록
   =====================================================================
   원본 스킨: 400px 배경이미지 + 검은 오버레이 + 흰 글씨 (Fashionise 히어로형)
   이 블록:   흰 배경 + 중앙정렬 + 검은 세리프 제목 (Medium·엘랜서형)

   ⚠️ 둘 중 하나만 고르세요. 이 블록을 통째로 지우면 원래(이미지 헤더)로 돌아갑니다.
   ⚠️ 원본이 position:absolute + 아래 본문에 큰 padding-top 을 주는 구조라
      이 블록은 그걸 풀어냅니다. 붙인 뒤 실제 글에서 위쪽 여백을 꼭 확인하세요.
   ===================================================================== */

/* 16-1. 절대배치 해제 → 일반 흐름으로 */
.article-header,
.article-header-noimg{
  position:static !important;
  left:auto !important;
  width:100% !important;
  height:auto !important;
  margin-left:0 !important;
  padding:70px 0 0 !important;
  background-image:none !important;
  background-color:transparent !important;
}
/* 어두운 오버레이 제거 */
.article-header:before{
  display:none !important;
}
/* 본문을 밀어내던 여백 제거 */
#tt-body-page .main,
#tt-body-entry .main{
  padding-top:0 !important;
}

/* 16-2. 중앙정렬 + 검은 글씨 */
.article-header .inner-header{
  max-width:720px !important;   /* 680→720: 한 줄에 더 들어가 늦게 줄바꿈 */
  margin:0 auto !important;
  color:var(--fs-ink) !important;
  text-align:center;
}
.article-header .box-meta{
  position:static !important;
  bottom:auto !important;
  max-width:none !important;
  padding-bottom:24px;
  border-bottom:none !important;   /* 헤더 밑 구분선 제거 */
}

/* 16-3. 카테고리 = kicker */
.article-header .box-meta .category{
  font-family:var(--fs-sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
  color:var(--fs-faint) !important;
  margin-bottom:18px !important;
}

/* 16-4. 제목 — Pretendard 블랙(800). 세리프로 되돌리려면 font-family를 var(--fs-serif), weight 700 */
.article-header .title-article{
  font-family:"Pretendard Variable","Pretendard",var(--fs-sans) !important;
  font-size:46px !important;         /* 크게. 빨리 줄바꿈되면 44↓, 더 크게면 50↑ */
  font-weight:800 !important;        /* 블랙 볼드 */
  line-height:1.35 !important;       /* 줄간격 넉넉히 (2줄 제목 안 답답하게) */
  letter-spacing:-.025em !important;
  color:#1a1a1a !important;          /* 진한 검정 */
  word-break:keep-all !important;    /* 한글 단어 중간에 안 끊김 */
  text-wrap:balance;                 /* 줄바꿈 시 줄 길이 균형 (가운데정렬 예쁘게) */
  max-width:none !important;
  margin:0 auto 20px !important;
  -webkit-line-clamp:unset !important;   /* 원본은 2줄에서 잘림 → 해제 */
  display:block !important;
}

/* 16-5. 작성자·날짜 */
.article-header .box-info{
  font-family:var(--fs-sans) !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:var(--fs-faint) !important;
  opacity:1 !important;
}
.article-header .box-info .date:before{
  background:var(--fs-faint) !important;
}

@media screen and (max-width:1060px){
  .article-header{ padding:44px 0 0 !important; }
  .article-header .title-article{ font-size:28px !important; padding-right:0 !important; }
  .article-header .box-meta{ padding-bottom:30px; }
}

/* 17. 뷰페이지: 옆 카테고리(사이드바) 제거 + 본문 가운데 풀폭 */
#tt-body-page .area-aside,
#tt-body-entry .area-aside{ display:none !important; }

#tt-body-page .area-main,
#tt-body-entry .area-main{
  float:none !important;
  width:100% !important;
  max-width:840px !important;   /* 읽기 편한 폭. 넓히려면 숫자만 올리기 (720→840) */
  margin:0 auto !important;
  padding-left:16px !important;   /* 좌우 여백 축소 — 넓은 도식이 덜 잘림 */
  padding-right:16px !important;
}

/* 17-2. 커버 이미지 (fs-cover) + 왼쪽 바 소제목 (fs-bar) */
.fs-cover{ margin:0 0 44px !important; }
.fs-cover img{ width:100% !important; display:block !important;
  border-radius:14px !important; border:none !important; }
.fs-bar{ border-left:4px solid var(--fs-ink) !important; padding-left:16px !important; }

/* 18. 목록(전체 글·카테고리): 대표사진 왼쪽 + 제목 볼드 (가로 카드)
   ─────────────────────────────────────────────────────────────────
   ⚠️ 선택자의 `:not(.area-cover *)` 를 지우지 마세요.
      `.article-type-common` 은 목록 글만 쓰는 클래스가 아닙니다.
      홈 커버 섹션 카드(crop·resize·poster·thumbnail·text)에도 똑같이 붙어 있습니다.
      (skin.html 523·557·598·638·673번 줄)
      그냥 `.article-type-common` 으로 쓰면 홈의 세로 포스터 카드까지
      가로로 눕고, 아래 thumbnail 높이 150px 이 원본의 padding-top 비율을
      덮어써서 커버 이미지 비율이 통째로 깨집니다.

      목록  : .area-common > article                              ← 여기만 잡아야 함
      홈커버: .area-common > .area-cover > .box-article > article  ← 제외 대상
   ───────────────────────────────────────────────────────────────── */
.area-common .article-type-common:not(.area-cover *){
  display:flex !important;
  flex-direction:row !important;
  gap:26px !important;
  align-items:flex-start !important;
}
/* 왼쪽 썸네일 (고정폭) */
.area-common .article-type-common:not(.area-cover *) > .link-article{
  flex:0 0 220px !important;
  max-width:220px !important;
  margin:0 !important;
}
.area-common .article-type-common:not(.area-cover *) .thumbnail{
  width:100% !important; height:150px !important; margin:0 !important;
  background-size:cover !important; background-position:center !important;
  background-color:var(--fs-cream) !important;
  border-radius:12px !important; overflow:hidden !important;
}
.area-common .article-type-common:not(.area-cover *) .thumbnail .img-thumbnail{ display:none !important; }
/* 대표사진 없는 글이면 왼쪽 칸 빼고 텍스트만 풀폭 */
.area-common .article-type-common:not(.area-cover *):has(.thumbnail:not([has-thumbnail])) > .link-article{
  display:none !important;
}
/* 오른쪽 텍스트 */
.area-common .article-type-common:not(.area-cover *) .article-content{
  flex:1 1 auto !important; min-width:0 !important;
}
.area-common .article-type-common:not(.area-cover *) .article-content .title{
  font-weight:800 !important;      /* 제목 더 볼드 */
  font-size:21px !important;
  letter-spacing:-.02em !important;
}

/* 18-2. 요약문이 둘째 줄에서 '반쯤' 잘리던 것 수정
   ─────────────────────────────────────────────────────────────────
   원인: 원본 style.css 가 요약문 높이를 픽셀로 못박아 뒀습니다.

       .article-type- .summary, .article-type-thumbnail .summary{
         max-height:40px;  font-size:13px;  line-height:1.53;
       }                   ← 13 × 1.53 × 2줄 ≈ 40px. 딱 맞게 계산된 값

   그런데 위 14-4 에서 font-size:15px / line-height:1.75 로 키웠습니다.
   → 2줄이면 15 × 1.75 × 2 = 52.5px 인데 max-height 는 40px 그대로
   → 12.5px 가 넘쳐서 둘째 줄 아랫부분이 가로로 싹둑 잘림.
     (같은 문제를 제목은 14-4 에서 max-height:none 으로 이미 풀어놨는데
      요약문만 빠져 있었습니다.)

   해법: 픽셀 높이를 풀고 line-clamp 로 '줄 단위' 로 끊습니다.
        글자 크기를 나중에 또 바꿔도 다시 안 깨집니다.

   ※ 한 줄만 보이게 하려면 아래 -webkit-line-clamp 를 2 → 1 로.
     (썸네일이 150px 이라 2줄일 때 좌우 높이가 얼추 맞습니다) */
.area-common .article-type-common:not(.area-cover *) .summary{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  max-height:none !important;      /* ★ 원본 40px 해제 — 잘림의 직접 원인 */
  height:auto !important;
  margin-top:10px !important;
  color:var(--fs-muted) !important;
}

/* 18-3. 카테고리 · 날짜 진하기
   ─────────────────────────────────────────────────────────────────
   섹션 7 에서 --fs-faint(#9a9a9a) 로 깔아둔 게 너무 흐려서 여기서 덮어씁니다.
   카테고리를 날짜보다 한 단계 진하게 둡니다 —
   카테고리는 '분류'라 눈에 걸려야 하고, 날짜는 보조 정보라서요.

   ※ 더 진하게: 아래 색을 var(--fs-ink)(#1c1c1c) 로
   ※ 더 연하게: var(--fs-faint)(#9a9a9a) 로 (원래대로)
      중간값 --fs-muted 는 #6b6b6b 입니다 */
.area-common .article-type-common:not(.area-cover *) .link-category{
  color:#3f3f3f !important;
  font-weight:600 !important;
}
.area-common .article-type-common:not(.area-cover *) .date,
.area-common .article-type-common:not(.area-cover *) .reply{
  color:var(--fs-muted) !important;   /* #6b6b6b */
}
/* 마우스 올리면 카테고리만 완전히 진해짐 (클릭 가능하다는 신호) */
.area-common .article-type-common:not(.area-cover *) .link-category:hover{
  color:var(--fs-ink) !important;
}

@media screen and (max-width:640px){
  .area-common .article-type-common:not(.area-cover *){ gap:16px !important; }
  .area-common .article-type-common:not(.area-cover *) > .link-article{
    flex-basis:110px !important; max-width:110px !important;
  }
  .area-common .article-type-common:not(.area-cover *) .thumbnail{ height:84px !important; }
  .area-common .article-type-common:not(.area-cover *) .article-content .title{ font-size:18px !important; }
  .area-common .article-type-common:not(.area-cover *) .summary{ font-size:13px !important; }
}

/* =====================================================================
   19. 본문 비교표(.fs-table) + 코드블록 — 개발글용
   =====================================================================
   ※ 왜 필요한가: 티스토리 기본 표는 테두리도 헤더 강조도 없어서
      "A vs B" 비교표가 그냥 글자 뭉치처럼 보입니다.
      개발글은 표로 정리하는 일이 많아서 따로 잡아둡니다.
   ※ 사용법: 본문에서 <table class="fs-table"> 로만 쓰면 됩니다.
      (표가 넓으면 모바일에서 좌우 스크롤됩니다 — 잘리지 않아요)
   ===================================================================== */

#article-view .fs-table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:44px 0 !important;
  font-size:17px !important;
  color:#24292f !important;
  display:block !important;      /* 모바일에서 가로 스크롤 되게 */
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}
#article-view .fs-table th,
#article-view .fs-table td{
  border:1px solid var(--fs-line, #e5e7eb) !important;
  padding:10px 13px !important;
  text-align:left !important;
  vertical-align:top !important;
  line-height:1.65 !important;
  color:#24292f !important;
}
#article-view .fs-table th{
  background:#f6f8fa !important;
  font-weight:700 !important;
  white-space:nowrap !important;   /* 헤더는 줄바꿈 없이 */
}
/* 첫 열은 항목 이름인 경우가 많아 살짝 강조 */
#article-view .fs-table td:first-child{ font-weight:600 !important; }

/* 코드블록 — 티스토리 기본 <pre> 가 밋밋해서 보정 */
#article-view pre{
  background:#f6f8fa !important;
  border:1px solid var(--fs-line, #e5e7eb) !important;
  border-radius:10px !important;
  padding:16px 18px !important;
  overflow-x:auto !important;
  font-size:15px !important;
  line-height:1.7 !important;
  margin:44px 0 !important;
}
#article-view code{
  background:#f6f8fa !important;
  border-radius:5px !important;
  padding:2px 6px !important;
  font-family:Consolas,Menlo,"D2Coding",monospace !important;
  font-size:.9em !important;
  color:#b4285f !important;        /* 본문 속 인라인 코드는 색으로 구분 */
}
#article-view pre code{
  background:none !important;
  padding:0 !important;
  color:var(--fs-ink, #24292f) !important;   /* 코드블록 안은 기본 글자색 */
}

@media screen and (max-width:640px){
  #article-view .fs-table{ font-size:14px !important; }
  #article-view .fs-table th,
  #article-view .fs-table td{ padding:8px 10px !important; }
  #article-view pre{ font-size:13px !important; padding:14px !important; }
}

/* ▲▲▲▲▲▲▲▲▲▲ 여기까지 복사 ▲▲▲▲▲▲▲▲▲▲ */
/* =====================================================================
   2b. CSS 추가분 — 갤러리 목록 + 카테고리 드롭다운   (2026-08-07)
   =====================================================================
   [이 파일은 뭔가] 2-CSS-추가분.css 의 섹션 20 만 떼어낸 것입니다.
                    1~19 번은 이미 티스토리에 들어가 있으므로 다시 붙일 필요가 없습니다.

   [붙여넣을 위치] 스킨 편집 → CSS 탭 → 맨 아래(제일 끝줄 다음)에 이 파일 전체를 붙입니다.
                    지울 코드는 0줄입니다. 그냥 뒤에 덧붙이기만 하세요.

   [HTML 도 한 줄] 드롭다운을 쓰려면 1-HTML-수정분.html ③ 블록도 넣어야 합니다.
                  (헤더에 카테고리 데이터가 없어서 CSS 만으로는 불가능합니다)

   [주의] 이 파일은 위쪽 CSS 에 있는 :root 변수(--fs-ink, --fs-line, --fs-cream,
          --fs-muted)를 씁니다. 기존 CSS 를 지우고 이것만 붙이면 색이 안 나옵니다.
          반드시 '기존 CSS 뒤에 추가' 여야 합니다.

   [되돌리기] 이 주석부터 파일 끝까지 지우면 붙이기 전 상태로 돌아갑니다.
   ===================================================================== */

/* =====================================================================
   20. 갤러리 목록 + 카테고리 드롭다운
   =====================================================================
   ※ 목표: 커버 이미지가 크게 보이는 2열 갤러리. 사이드바는 그대로 둡니다.
   ※ 섹션 18(가로 카드)을 여기서 덮어씁니다. 18을 지우지 마세요 —
      :has() 를 모르는 옛 브라우저에서는 18이 그대로 살아 가로 카드로 보입니다.
      즉 18이 안전망입니다. (:has() 는 섹션 18에서 이미 쓰고 있어 새 의존성은 아닙니다)

   [열 수 바꾸기] 아래 grid-template-columns 의 repeat(2, ...) 에서 숫자만.
   [카드 비율]   .thumbnail 의 aspect-ratio. 커버가 3072×2048 이라 3/2 입니다.
   ===================================================================== */

/* ---------- 20-1. 목록 컨테이너를 그리드로 ----------
   구조 주의: 티스토리는 <s_list> 를 지우고 렌더하므로
   제목(h2.title-search)과 글(article)이 .area-common 의 형제로 나란히 옵니다.
   그래서 제목·배너·안내문은 grid-column:1/-1 로 한 줄을 다 쓰게 합니다. */
.area-common:has(> .article-type-common){
  display:grid !important;
  /* 열 수를 못박습니다. auto-fill 은 컨테이너 폭을 재서 알아서 정하는데,
     본문이 생각보다 좁으면 2개로 떨어져 버립니다. 그래서 숫자로 고정했습니다.
     [열 수 바꾸기] 아래 repeat(3, ...) 의 3 만 고치세요. 4로 하면 4개씩 뜹니다. */
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:34px 14px !important;
}
.area-common:has(> .article-type-common) > .title-search,
.area-common:has(> .article-type-common) > .notice-title,
.area-common:has(> .article-type-common) > .category-banner-wrp,
.area-common:has(> .article-type-common) > .box-no-search{
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;   /* 간격은 위 gap 이 담당 */
}

/* 홈 커버 섹션(썸네일·크롭·리사이즈)도 같은 그리드로.
   포스터 섹션(.box-cover-poster)은 가로 스크롤 구조라 건드리지 않습니다. */
.area-cover .box-article:not(:has(.box-cover-poster)){
  display:grid !important;
  /* 열 수를 못박습니다. auto-fill 은 컨테이너 폭을 재서 알아서 정하는데,
     본문이 생각보다 좁으면 2개로 떨어져 버립니다. 그래서 숫자로 고정했습니다.
     [열 수 바꾸기] 아래 repeat(3, ...) 의 3 만 고치세요. 4로 하면 4개씩 뜹니다. */
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:34px 14px !important;
}

/* ---------- 20-2. 카드를 세로형으로 ----------
   섹션 18 이 목록 카드를 가로 flex 로 눕혀놨습니다. 그걸 세웁니다.
   포스터는 제외 — 프로젝트 섹션 고유의 모양을 유지합니다. */
.area-common > .article-type-common:not(.article-type-poster),
.area-cover .article-type-common:not(.article-type-poster){
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;          /* 카드 사이 여백은 grid gap 으로 */
}

/* 썸네일 — 카드 폭 100%, 커버 비율 그대로 */
.area-common > .article-type-common:not(.article-type-poster) > .link-article,
.area-cover .article-type-common:not(.article-type-poster) > .link-article{
  display:block !important;
  flex:none !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 14px !important;
}
.area-common > .article-type-common:not(.article-type-poster) .thumbnail,
.area-cover .article-type-common:not(.article-type-poster) .thumbnail{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3 / 2 !important;   /* 커버 3072×2048 = 3:2 */
  margin:0 !important;
  padding-top:0 !important;        /* 원본이 비율을 padding 으로 잡던 것 해제 */
  border-radius:12px !important;
  overflow:hidden !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:var(--fs-cream) !important;
}

/* 대표사진 없는 글: 섹션 18 은 썸네일 칸을 통째로 숨겼지만,
   갤러리에서는 칸이 사라지면 카드 높이가 들쭉날쭉해집니다.
   크림색 빈 칸으로 자리를 지킵니다. */
.area-common > .article-type-common:has(.thumbnail:not([has-thumbnail])) > .link-article{
  display:block !important;
}

/* 리사이즈형 커버만 <img> 가 실제 주소를 갖습니다(나머지는 배경이미지).
   그 경우에만 img 를 채워 넣습니다. src 가 빈 img 를 켜면 깨진 아이콘이 뜹니다. */
.area-cover .article-type-resize .thumbnail .img-thumbnail{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* 카드 본문 */
.area-common > .article-type-common:not(.article-type-poster) .article-content,
.area-cover .article-type-common:not(.article-type-poster) .article-content{
  width:100% !important;
  padding:0 !important;
}
/* ⚠️ .article-content 를 반드시 끼워 넣을 것.
   섹션 18 에 `.area-common .article-type-common:not(.area-cover *) .article-content .title`
   (클래스 5개) 가 21px 로 박혀 있어서, 이걸 빼면 그 규칙이 이겨서 크기가 안 먹습니다. */
.area-common > .article-type-common:not(.article-type-poster) .article-content .title,
.area-cover .article-type-common:not(.article-type-poster) .article-content .title{
  /* 카드가 200px 언저리라 제목이 크면 카드를 잡아먹습니다.
     [키우기/줄이기] font-size 만 조절하세요. 12~14px 사이가 무난합니다.
     굵기도 600 까지 낮췄습니다. 작은 글자에 800 은 뭉개져서 실제보다 커 보입니다. */
  font-size:14.5px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  max-height:none !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  /* 제목이 1줄이든 2줄이든 항상 2줄 자리를 차지하게 →
     카드 높이가 같아져서 짧은 카드 아래가 비지 않습니다. */
  min-height:calc(14.5px * 1.5 * 2) !important;
  margin-bottom:6px !important;
}
/* 카테고리·날짜를 한 줄에 고정. 카테고리 이름이 길면 … 로 자릅니다.
   (이게 2줄로 접히면 그 카드만 키가 커져서 줄이 어긋납니다) */
.area-common > .article-type-common:not(.article-type-poster) .box-meta,
.area-cover .article-type-common:not(.article-type-poster) .box-meta{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.area-common > .article-type-common:not(.article-type-poster) .box-meta .link-category,
.area-cover .article-type-common:not(.article-type-poster) .box-meta .link-category{
  min-width:0 !important;
  margin-right:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.area-common > .article-type-common:not(.article-type-poster) .box-meta .date,
.area-cover .article-type-common:not(.article-type-poster) .box-meta .date{
  flex:none !important;
  margin-right:0 !important;
}
/* 카드를 위쪽으로 정렬 — 아래 여백이 카드 안에서 늘어나지 않게 */
.area-common > .article-type-common:not(.article-type-poster),
.area-cover .article-type-common:not(.article-type-poster){
  align-self:start !important;
}
/* 카테고리·날짜도 제목에 맞춰 한 단계 낮춤 */
.area-common > .article-type-common:not(.article-type-poster) .link-category,
.area-common > .article-type-common:not(.article-type-poster) .date,
.area-cover .article-type-common:not(.article-type-poster) .link-category,
.area-cover .article-type-common:not(.article-type-poster) .date{
  font-size:10px !important;
  letter-spacing:.1em !important;
}
.area-common > .article-type-common:not(.article-type-poster) .summary,
.area-cover .article-type-common:not(.article-type-poster) .summary{
  /* 카드가 좁아 요약문까지 넣으면 답답합니다. 제목 + 날짜만 남깁니다.
     다시 보이게 하려면 아래 display 줄만 지우세요. */
  display:none !important;
  font-size:13px !important;
  line-height:1.6 !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  max-height:none !important;
  margin:0 0 8px !important;
}

/* ---------- 20-3. 네브바 카테고리 드롭다운 (PC) ----------
   원본은 하위 카테고리를 '화면 전체 폭 흰 띠'로 펼칩니다(top:258px, height:94px).
   그걸 메뉴 바로 아래 붙는 작은 상자로 바꿉니다.

   ⚠️ 상단 메뉴가 두 가지 모드로 나옵니다. 둘 다 되게 해뒀습니다.
      · 카테고리 모드 : .tt_category 가 그대로 보임 → 아래 규칙이 바로 먹습니다
      · 메뉴 모드     : 원본이 `.header .topnavmenu .tt_category{display:none}` 으로
                        카테고리를 감추고 손으로 만든 메뉴만 보여줍니다.
                        → 바로 아래 20-3a 가 카테고리를 살려냅니다. */

/* 20-3a. 헤더에 넣은 카테고리(.fs-navcat) 살리기
   ⚠️ 확인된 사실: [##_blog_menu_##] 는 카테고리 트리를 뿌리지 않습니다.
      트리는 [##_category_list_##] 에서만 나오고, 원본 스킨은 그걸 사이드바에만 씁니다.
      그래서 헤더에 하위 카테고리 데이터 자체가 없었고, CSS 로는 드롭다운을 만들 수 없었습니다.
      → 1-HTML-수정분.html ③ 으로 헤더에 카테고리를 하나 더 심고, 여기서 보이게 합니다.

   :has() 로 "카테고리가 실제로 심어졌을 때만" 기존 메뉴를 감춥니다.
   HTML 을 안 붙였으면 조건이 안 맞아 아무 일도 안 일어납니다(메뉴 사라짐 사고 방지). */
.header .area-gnb .fs-navcat,
.header .area-gnb .fs-navcat .tt_category{
  display:block !important;   /* 원본의 .topnavmenu .tt_category{display:none} 을 이깁니다 */
}
.header .area-gnb nav:has(.fs-navcat .category_list) > ul{
  display:none !important;    /* 손으로 만든 메뉴는 숨기고 카테고리로 대체 */
}
/* 헤더 카테고리에서는 '분류 전체보기'와 글 개수를 뺍니다. 메뉴가 지저분해져요 */
.header .area-gnb .fs-navcat .link_tit,
.header .area-gnb .fs-navcat .c_cnt{ display:none !important; }

/* 드롭다운 본체.
   641px 까지 적용합니다. 창을 줄여도 마우스가 있으면 뜹니다.
   ⚠️ 좁은 화면에서 원본이 메뉴에 overflow-x:auto 를 걸어 둡니다.
      그러면 펼쳐진 상자가 그 스크롤 영역에 잘려서 안 보입니다.
      아래에서 그 clipping 을 풀어 줍니다. */
@media screen and (min-width:641px){
  .header .tt_category .category_list > li{
    position:relative !important;   /* 드롭다운의 기준점 */
  }
  /* 잘림 방지 — 카테고리가 많으면 가로 스크롤 대신 다음 줄로 넘깁니다 */
  .header .tt_category .category_list{
    overflow:visible !important;
    white-space:normal !important;   /* nowrap 이면 한 줄에 밀어넣느라 스크롤이 생깁니다 */
  }
  /* 좁은 화면용으로 원본이 걸어둔 float 해제 — 줄바꿈이 어긋납니다.
     margin-left 도 같이 지웁니다. 여백은 바로 아래 20-3b 가 컨테이너에서 냅니다. */
  .header .tt_category .category_list li:first-child{
    float:none !important;
    margin-left:0 !important;
  }
  .header .area-gnb,
  .header .inner-header,
  .header .area-align{ overflow:visible !important; }

  .header .tt_category .category_list .sub_category_list{
    position:absolute !important;
    top:100% !important;            /* 메뉴 바로 밑에 붙임 */
    left:-14px !important;          /* 글자와 왼쪽 선을 맞춤 */
    display:none !important;
    flex-direction:column !important;
    width:max-content !important;
    min-width:170px !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 0 !important;
    background:#fff !important;
    border:none !important;                          /* 테두리 없이 그림자만 — 더 담백합니다 */
    box-shadow:0 10px 30px rgba(0,0,0,.10) !important;
    z-index:200 !important;
  }
  .header .tt_category .category_list > li:hover .sub_category_list{
    display:flex !important;
  }
  /* 원본이 깔던 전체 폭 흰 배경 띠 제거 */
  .header .tt_category .category_list .sub_category_list:before{
    display:none !important;
  }
  .header .tt_category .category_list .sub_category_list li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }
  /* 하위 항목 — 상단 메뉴의 대문자·넓은 자간을 물려받으면 못생겨집니다. 전부 되돌립니다. */
  .header .link_sub_item{
    display:block !important;
    padding:7px 16px !important;
    font-family:var(--fs-sans) !important;
    font-size:13px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;         /* 상위 메뉴의 .18em 상속 끊기 */
    text-transform:none !important;      /* 대문자 변환 끊기 */
    line-height:1.5 !important;
    color:#4a4a4a !important;
    white-space:nowrap !important;
    text-decoration:none !important;
  }
  .header .link_sub_item:hover{
    background:var(--fs-cream) !important;
    color:var(--fs-ink) !important;
  }
  .header .link_sub_item:before{ display:none !important; }   /* 사이드바용 앞 대시 제거 */

  /* 화살표(˅)는 넣지 않습니다.
     원본 스킨이 같은 .link_item:after 를 '호버 시 밑줄 바'로 쓰고 있어서,
     여기에 content 를 넣으면 그 바 안에 글자가 얹혀 지저분해집니다. */
}

/* 20-3b. 좁은 창(641~1060px)에서 상단 메뉴 줄 좌우 여백
   ⚠️ 증상: 창을 651px 언저리로 줄이면 메뉴 줄만 여백이 사라지고
      첫 카테고리(AI·비전)가 화면 왼쪽 끝에 붙습니다.

   원인 — 원본 style.css 를 대조해 확인했습니다. 원본은 이 구간에서 .area-gnb 에
   좌우 padding 을 주지 않고, 항목의 margin 으로 양쪽 여백을 만듭니다.

       @media screen and (max-width:1060px){
         .header .area-gnb{ width:100%; border-top:1px solid #efefef; }
         .header .tt_category .category_list li:first-child{ margin-left:20px; float:left; }
         .header .tt_category .category_list li:last-child { margin-right:20px; }
       }

   여기서 양쪽이 다 어긋났습니다.
     · 왼쪽 0px  — 위 20-3a 가 float 을 풀면서 first-child 의 margin-left:20px 까지 지웠습니다
     · 오른쪽 40px — 섹션 4·14-2 의 `li{ margin-right:40px !important }` 가
                     원본 last-child 의 20px(!important 없음)을 이깁니다

   고침: 여백을 항목 margin 이 아니라 컨테이너 padding 한 곳에서 냅니다.
     · margin 은 첫 줄 첫 항목만 밀지만 padding 은 줄바꿈된 둘째 줄도 같이 들여씁니다.
       카테고리가 많으면 두 줄이 되므로(20-3a 에서 white-space:normal) 이쪽이 맞습니다.
     · border-top 은 .area-gnb 자신에 있으므로 선은 화면 끝까지 가고 글자만 들여써집니다.
       원본이 의도한 모양 그대로입니다.
     · box-sizing 은 원본이 html{box-sizing:border-box} 로 전역 지정해 둬서 따로 안 겁니다.

   [값] 20px 은 같은 구간의 슬로건과 검은 상단바가 쓰는 값입니다.
        셋이 같아야 왼쪽 선이 맞습니다. 하나 고치면 셋 다 고치세요.
   [구간] 641~1060px 만. 1061px 위는 원본이 알아서 여백을 주고,
          640px 이하는 원본의 모바일 스타일이 따로 있습니다. */
@media screen and (min-width:641px) and (max-width:1060px){
  .header .area-gnb{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  /* 마지막 항목의 꼬리 여백 제거.
     안 지우면 오른쪽만 padding 20 + margin 40 = 60px 이 됩니다.
     (섹션 4·14-2 가 모든 li 에 margin-right:40px !important 를 걸어 둡니다) */
  .header .tt_category .category_list li:last-child,
  .header .topnavmenu>ul>li:last-child{
    margin-right:0 !important;
  }
}

/* 진짜 모바일(≤640px) — 손가락에는 hover 가 없어서 드롭다운이 의미가 없습니다.
   상위 카테고리만 가로로 훑고, 하위는 사이드바(햄버거)에서 봅니다. */
@media screen and (max-width:640px){
  .header .tt_category .category_list .sub_category_list{ display:none !important; }
}

/* ---------- 20-4. 모바일 ---------- */
/* 태블릿·좁은 창 — 3열은 답답하니 2열로 */
@media screen and (min-width:641px) and (max-width:1060px){
  .area-common:has(> .article-type-common),
  .area-cover .box-article:not(:has(.box-cover-poster)){
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}

@media screen and (max-width:640px){
  /* 폭이 좁아 2열이면 커버 안 글씨가 안 읽힙니다 */
  .area-common:has(> .article-type-common),
  .area-cover .box-article:not(:has(.box-cover-poster)){
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .area-common > .article-type-common:not(.article-type-poster) .article-content .title,
  .area-cover .article-type-common:not(.article-type-poster) .article-content .title{
    font-size:16px !important;
    min-height:0 !important;
  }
}