@charset "UTF-8";


:root {

  --white: #ffffff;
  --off-white: #fcfbf8;

  --black: #181713;

  --gray-900: #2d2c28;
  --gray-700: #625f58;
  --gray-500: #96928a;
  --gray-300: #cbc7bf;
  --gray-200: #e5e2db;
  --gray-100: #f5f3ee;

  --yellow: #f2b800;
  --yellow-soft: #fff4c9;

  --green: #657362;

  --max-width: 1140px;
  --article-width: 760px;

}


/* =========================================================
   RESET
========================================================= */


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


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background: var(--white);
  color: var(--black);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Pretendard",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


a {
  color: inherit;
  text-decoration: none;
}


img {
  display: block;
  max-width: 100%;
}


button,
input,
textarea {
  font-family: inherit;
}


button {
  cursor: pointer;
}


ul,
ol {
  margin: 0;
}


#site {
  min-height: 100vh;
}



/* =========================================================
   HEADER
========================================================= */


.header {

  position: relative;
  z-index: 100;

  width: 100%;

  border-bottom:
    1px solid var(--gray-200);

  background:
    rgba(255, 255, 255, .98);

}


.header-inner {

  display: flex;

  align-items: center;

  width: 100%;
  max-width: var(--max-width);

  height: 68px;

  margin: 0 auto;

  padding: 0 18px;

}



/* LOGO */


.logo {

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

  gap: 9px;

  height: 68px;

}


.logo img {

  width: 40px;
  height: 40px;

  border-radius: 50%;

  object-fit: cover;

}


.logo strong {

  font-size: 19px;

  font-weight: 850;

  line-height: 1;

  letter-spacing: -.055em;

  white-space: nowrap;

}



/* =========================================================
   HEADER NAV
========================================================= */


.nav {

  display: flex;

  align-items: center;

  min-width: 0;

  height: 68px;

  gap: 26px;

  margin-left: 50px;

}


.nav-home {

  position: relative;

  display: flex;

  align-items: center;

  flex: 0 0 auto;

  height: 68px;

  color: #514f49;

  font-size: 12px;

  font-weight: 650;

  white-space: nowrap;

}


.nav-home::after {

  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background: var(--yellow);

  opacity: 0;

  transform: scaleX(.35);

  transition: .15s ease;

}


.nav-home:hover::after,
#tt-body-index
.nav-home::after {

  opacity: 1;

  transform: scaleX(1);

}



/* =========================================================
   TISTORY CATEGORY NAV
========================================================= */


.category-nav {

  display: flex;

  align-items: center;

  height: 68px;

}


.category-nav
.tt_category {

  display: flex;

  align-items: center;

  height: 68px;

  margin: 0 !important;

  padding: 0 !important;

  list-style: none;

}


.category-nav
.link_tit {

  display: none !important;

}


.category-nav
.category_list {

  display: flex !important;

  align-items: center !important;

  flex-wrap: nowrap !important;

  gap: 26px;

  height: 68px;

  margin: 0 !important;

  padding: 0 !important;

  list-style: none !important;

  white-space: nowrap;

}


.category-nav
.category_list > li {

  display: flex !important;

  align-items: center !important;

  flex: 0 0 auto;

  height: 68px;

  margin: 0 !important;

  padding: 0 !important;

}


.category-nav
.link_item {

  position: relative;

  display: flex !important;

  align-items: center;

  height: 68px;

  margin: 0 !important;

  padding: 0 !important;

  color: #514f49;

  font-size: 12px;

  font-weight: 650;

  line-height: 1;

  white-space: nowrap !important;

}


.category-nav
.link_item::after {

  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background: var(--yellow);

  opacity: 0;

  transform: scaleX(.35);

  transition: .15s ease;

}


.category-nav
.link_item:hover,
.category-nav
.link_item.selected {

  color: var(--black);

}


.category-nav
.link_item:hover::after,
.category-nav
.link_item.selected::after {

  opacity: 1;

  transform: scaleX(1);

}


.category-nav img,
.category-nav .c_cnt,
.category-nav .sub_category_list {

  display: none !important;

}



/* =========================================================
   HEADER ACTION
========================================================= */


.header-actions {

  display: flex;

  align-items: center;

  margin-left: auto;

}


.search-button,
.menu-button {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: transparent;

}


.search-button:hover,
.menu-button:hover {

  background: var(--gray-100);

}


.search-button svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: var(--black);

  stroke-width: 1.8;

}


.menu-button {

  display: none;

  flex-direction: column;

  gap: 5px;

}


.menu-button span {

  width: 17px;
  height: 1.5px;

  background: var(--black);

}



/* =========================================================
   SEARCH
========================================================= */


.search-area {

  display: none;

  border-top:
    1px solid var(--gray-200);

}


.search-area.open {

  display: block;

}


.search-inner {

  display: flex;

  max-width:
    var(--max-width);

  margin: 0 auto;

  padding: 18px;

}


.search-inner input {

  flex: 1;

  height: 46px;

  padding: 0 15px;

  border:
    1px solid var(--gray-200);

  border-right: 0;

  outline: none;

}


.search-inner input:focus {

  border-color: var(--yellow);

}


.search-inner button {

  width: 70px;

  border: 0;

  background: var(--black);

  color: var(--white);

}



/* =========================================================
   INTRO
========================================================= */


.intro {
  display: none;
}


#tt-body-index
.intro {

  display: block;

}


.intro {

  border-bottom:
    1px solid var(--gray-200);

  background: var(--off-white);

}


.intro-inner {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    260px;

  align-items: center;

  gap: 70px;

  max-width:
    var(--max-width);

  margin: 0 auto;

  padding:
    43px
    18px
    39px;

}


.intro-eyebrow {

  display: block;

  margin-bottom: 11px;

  color: #a97f00;

  font-size: 9px;

  font-weight: 800;

}


.intro-main h1 {

  max-width: 640px;

  margin:
    0
    0
    14px;

  font-size:
    clamp(
      38px,
      4.2vw,
      52px
    );

  font-weight: 900;

  line-height: 1.08;

  letter-spacing: -.065em;

}


.intro-description {

  max-width: 620px;

  margin: 0;

  color: var(--gray-700);

  font-size: 12px;

  line-height: 1.75;

}



/* SOCIAL */


.intro-social {

  display: flex;

  gap: 8px;

  margin-top: 21px;

}


.social-button {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  height: 36px;

  padding: 0 13px;

  border:
    1px solid var(--gray-200);

  border-radius: 999px;

  background: var(--white);

  color: var(--gray-700);

  font-size: 10px;

  font-weight: 750;

}


.social-button:hover {

  border-color: var(--gray-300);

  color: var(--black);

}


.social-icon {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  font-size: 8px;

}


.youtube-icon {

  background: #ff0033;

  color: #fff;

}


.tiktok-icon {

  background: #171717;

  color: #fff;

}


.social-arrow {

  color: var(--gray-500);

}



/* INTRO SIDE */


.intro-side {

  display: flex;

  gap: 18px;

}


.intro-accent {

  width: 1px;

  min-height: 75px;

  background:
    linear-gradient(
      to bottom,
      var(--yellow) 0,
      var(--yellow) 28px,
      var(--gray-200) 28px
    );

}


.intro-side span {

  display: block;

  margin-bottom: 8px;

  color: #a17a00;

  font-size: 9px;

}


.intro-side p {

  margin: 0;

  color: var(--gray-700);

  font-size: 11px;

  line-height: 1.7;

}



/* =========================================================
   MAIN
========================================================= */


.main-inner {

  max-width:
    var(--max-width);

  margin: 0 auto;

  padding:
    40px
    18px
    20px;

}



/* =========================================================
   NOTICE
========================================================= */


.home-notice {

  display: none;

}


#tt-body-index
.home-notice {

  display: block;

  margin-bottom: 29px;

}


#tt-body-index
.home-notice ~ .home-notice {

  display: none;

}


.home-notice-link {

  display: flex;

  align-items: center;

  min-height: 46px;

  border-top:
    1px solid var(--gray-200);

  border-bottom:
    1px solid var(--gray-200);

}


.home-notice-badge {

  margin-right: 13px;

  padding:
    5px 9px;

  border-radius: 999px;

  background: var(--yellow-soft);

  color: #8f6c00;

  font-size: 9px;

}


.home-notice-title {

  overflow: hidden;

  font-size: 11px;

  text-overflow: ellipsis;

  white-space: nowrap;

}


.home-notice-date {

  margin-left: auto;

  color: var(--gray-500);

  font-size: 9px;

}


.home-notice-arrow {

  margin-left: 13px;

}



/* =========================================================
   POSTS HEADER
========================================================= */


.posts-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 22px;

  padding-bottom: 13px;

  border-bottom:
    1px solid var(--gray-200);

}


.posts-header h2 {

  margin: 0;

  font-size: 22px;

  font-weight: 850;

}


.posts-count {

  color: var(--gray-500);

  font-size: 10px;

}


.index-list-title {

  display: none;

}


#tt-body-index
.index-list-title {

  display: inline;

}


#tt-body-index
.context-list-title {

  display: none;

}



/* =========================================================
   POST GRID
========================================================= */


.post-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    38px
    24px;

}


.post-card {

  min-width: 0;

}



/* =========================================================
   THUMBNAIL
========================================================= */


.post-thumbnail {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  border-radius: 8px;

  background: var(--gray-100);

}


/*
  티스토리가 만들어준 정상 대표 이미지
*/


.post-thumbnail-image {

  position: relative;

  z-index: 4;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .25s ease;

}


/*
  JS가 본문 첫 이미지 가져왔을 때
*/


.post-auto-image {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: none;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .25s ease;

}


/*
  이미지 가져오기에 성공한 경우
*/


.post-thumbnail.has-auto-image
.post-auto-image {

  display: block;

}


/*
  이미지 성공하면 로고 placeholder 제거
*/


.post-thumbnail.has-auto-image
.thumbnail-fallback,

.post-thumbnail.has-image
.thumbnail-fallback {

  display: none;

}


.post-card:hover
.post-thumbnail-image,

.post-card:hover
.post-auto-image {

  transform:
    scale(1.025);

}



/* FALLBACK */


.thumbnail-fallback {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    #f3f1eb;

}


.thumbnail-fallback > img {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  opacity: .55;

}



/* =========================================================
   POST CONTENT
========================================================= */


.post-content {

  padding-top: 13px;

}


.post-meta {

  display: flex;

  gap: 9px;

  margin-bottom: 8px;

}


.post-category {

  color: var(--green);

  font-size: 9px;

  font-weight: 800;

}


.post-date {

  color: var(--gray-500);

  font-size: 9px;

}


.post-title-link h3 {

  display: -webkit-box;

  margin:
    0
    0
    8px;

  overflow: hidden;

  color: var(--black);

  font-size: 18px;

  font-weight: 820;

  line-height: 1.4;

  letter-spacing: -.04em;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}


.post-summary {

  display: -webkit-box;

  margin:
    0
    0
    11px;

  overflow: hidden;

  color: var(--gray-700);

  font-size: 11px;

  line-height: 1.65;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}


.read-more {

  color: var(--gray-700);

  font-size: 9px;

  font-weight: 700;

}



/* =========================================================
   EMPTY
========================================================= */


.empty-state {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 30px;

  border-radius: 12px;

  background: #faf9f6;

}


.empty-icon {

  margin-bottom: 13px;

}


.empty-state strong {

  margin-bottom: 6px;

}


.empty-state p {

  color: var(--gray-500);

  font-size: 10px;

}



/* =========================================================
   ARTICLE
========================================================= */


.article-header {

  max-width: 880px;

  margin: 0 auto;

  padding-bottom: 28px;

  border-bottom:
    1px solid var(--gray-200);

}


.article-category {

  display: inline-block;

  margin-bottom: 14px;

  color: var(--green);

  font-size: 10px;

}


.article-header h1 {

  max-width: 790px;

  margin:
    0
    0
    16px;

  font-size:
    clamp(
      32px,
      3.7vw,
      46px
    );

  line-height: 1.24;

  letter-spacing: -.06em;

}


.article-meta {

  color: var(--gray-500);

  font-size: 10px;

}



/* =========================================================
   ARTICLE BODY
========================================================= */


.article-content,
#article-view {

  max-width:
    var(--article-width);

  margin:
    32px
    auto
    44px;

  font-size: 16px;

  line-height: 1.95;

}


.article-content p,
#article-view p {

  margin-bottom: 28px;

  font-size: 16px;

  line-height: 1.95;

}


.article-content h2,
#article-view h2 {

  margin-top: 45px;

  font-size: 25px;

}


.article-content h3,
#article-view h3 {

  margin-top: 38px;

  font-size: 20px;

}


.article-content img,
#article-view img {

  max-width: 100%;

  height: auto;

}


#article-view figure {

  max-width: 100%;

  margin:
    30px
    0;

}


#article-view
figure.imageblock.alignCenter {

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}


#article-view figure img {

  display: inline-block;

  max-width: 100%;

}



/* =========================================================
   AUTHOR
========================================================= */


.author-box {

  display: flex;

  align-items: center;

  gap: 15px;

  max-width:
    var(--article-width);

  margin:
    50px
    auto;

  padding:
    21px
    0;

  border-top:
    1px solid var(--gray-200);

  border-bottom:
    1px solid var(--gray-200);

}


.author-box img {

  width: 54px;

  height: 54px;

  border-radius: 50%;

}



/* =========================================================
   TAG
========================================================= */


.article-tags {

  max-width:
    var(--article-width);

  margin:
    22px
    auto;

}


.article-tags a {

  display: inline-flex;

  padding:
    6px
    9px;

  border:
    1px solid var(--gray-200);

  border-radius: 999px;

}



/* =========================================================
   PREV NEXT
========================================================= */


.prev-next {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

  max-width:
    var(--article-width);

  margin:
    34px
    auto;

}


.prev-next a {

  padding: 16px;

  border:
    1px solid var(--gray-200);

}



/* =========================================================
   COMMENTS
========================================================= */


.comments {

  max-width:
    var(--article-width);

  margin:
    48px
    auto;

}



/* =========================================================
   PAGINATION
========================================================= */


.pagination {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 48px;

}


.pagination > div {

  display: flex;

  gap: 5px;

}


.page-arrow,
.page-number {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 31px;

  height: 31px;

  border:
    1px solid var(--gray-200);

  border-radius: 50%;

}



/* =========================================================
   FOOTER
========================================================= */


.footer {

  margin-top: 80px;

  border-top:
    1px solid var(--gray-200);

  background: var(--gray-100);

}


.footer-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  max-width:
    var(--max-width);

  min-height: 112px;

  margin: 0 auto;

  padding:
    28px
    18px;

}


.footer-logo {

  display: flex;

  align-items: center;

  gap: 8px;

}


.footer-logo img {

  width: 34px;

  height: 34px;

  border-radius: 50%;

}


.footer-brand p {

  color: var(--gray-500);

  font-size: 9px;

}


.footer-right {

  display: flex;

  align-items: center;

  gap: 25px;

}


.footer-category
.link_tit {

  display: none !important;

}


.footer-category
.category_list {

  display: flex !important;

  gap: 18px;

  padding: 0;

  list-style: none;

}


.footer-category
.link_item {

  color: var(--gray-700);

  font-size: 9px;

}


.footer-category img,
.footer-category .c_cnt,
.footer-category
.sub_category_list {

  display: none !important;

}


.footer-divider {

  width: 1px;

  height: 16px;

  background: var(--gray-300);

}


.footer-social {

  display: flex;

  gap: 16px;

}


.footer-social a {

  font-size: 9px;

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  max-width:
    var(--max-width);

  margin: 0 auto;

  padding:
    14px
    18px;

  border-top:
    1px solid var(--gray-200);

  color: var(--gray-500);

  font-size: 8px;

}



/* =========================================================
   TABLET
========================================================= */


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

  .post-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .footer-right {

    flex-wrap: wrap;

  }

}



/* =========================================================
   MOBILE
========================================================= */


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

  .nav {

    position: absolute;

    top: 62px;

    right: 0;

    left: 0;

    display: none;

    flex-direction: column;

    height: auto;

    margin: 0;

    background: var(--white);

  }


  .nav.open {

    display: flex;

  }


  .nav-home {

    width: 100%;

    height: auto;

    padding:
      14px
      16px;

  }


  .category-nav {

    width: 100%;

    height: auto;

  }


  .category-nav
  .category_list {

    display: block !important;

    height: auto;

  }


  .category-nav
  .category_list > li {

    height: auto;

  }


  .category-nav
  .link_item {

    width: 100%;

    height: auto;

    padding:
      14px
      16px !important;

  }


  .menu-button {

    display: flex;

  }


  .intro-inner {

    grid-template-columns:
      1fr;

  }


  .intro-side {

    display: none;

  }

}



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

  .intro-main h1 {

    font-size: 32px;

  }


  .main-inner {

    padding:
      30px
      15px;

  }


  .post-grid {

    grid-template-columns:
      1fr;

  }


  .article-header h1 {

    font-size: 31px;

  }


  .footer-inner {

    display: block;

  }


  .footer-right {

    display: block;

    margin-top: 25px;

  }


  .footer-category
  .category_list {

    flex-wrap: wrap;

  }


  .footer-divider {

    display: none;

  }


  .footer-social {

    margin-top: 20px;

  }

}