@charset "utf-8";
@layer theme, fonts, base, components, utilities;

@layer components {
  :root{
    --main-width:768px;
    --rside-width:300px;
    --lside-width-1:14.25rem; /* 228px */
    --lside-width-2:14.75rem; /* 236px */
  }
  html,html.light{
    --bg-category-1: #ff974d;
    --bg-category-2: #e26a86;
    --bg-category-3: #6b6dae;
    --bg-category-4: #499ee9;
    --bg-category-5: #89b14e;
    --bg-category-6: #8f81b1;

    --svg-stroke-color:#000000;
    --svg-sidepoint-color:#ee4433;
    --svg-fill-color:#000000;
  }
  html.dark{
    --bg-category-1: #803500;
    --bg-category-2: #6a1629;
    --bg-category-3: #2d2e52;
    --bg-category-4: #0d4372;
    --bg-category-5: #37471f;
    --bg-category-6: #2e273f;

    --svg-stroke-color:#fffeff;
    --svg-sidepoint-color:#eb6047;
    --svg-fill-color:#fffeff;    
  }
  /* 모바일 우선 */
  /*
  #__KeEpF0rN__{grid-template-columns:0 1fr;animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-duration:.64s;transition:grid-template-columns 0.64s cubic-bezier(.215,.61,.355,1)}
  aside{position:absolute;width:16.25rem;height:100%;background:transparent;transform:translateX(-100%);transition:transform 0.64s cubic-bezier(.215,.61,.355,1)}
  #__KeEpF0rN__.open aside{transform:translateX(0)}
  

  #__KeEpF0rN__ #leftSide{display:none;overflow-x:hidden;flex-direction:column;margin-left:-260px;width:260px;tanimation-timing-function:cubic-bezier(.215,.61,.355,1);animation-duration:.64s;transition:grid-template-columns 0.64s cubic-bezier(.215,.61,.355,1)}
  #__KeEpF0rN__.open #leftSide{margin-left:0px}*/
  /* 기본적으로 #leftSide는 숨김 상태 */

  
  /* 티스토리 기본 스타일 변경 */
  .tt_box_namecard{min-height:140px!important;background-color:transparent!important}
  .tt-box-textarea .tt-inner-g{border-radius:5px!important}
  .tt_category a.link_tit{display:none!important}
  html.dark .tt-wrap-cmt .tt-link-user,
  html.dark .tt-wrap-cmt .tt_desc,
  html.dark .tt-box-textarea textarea, 
  html.dark .tt-box-textarea div,
  html.dark .tt_box_namecard .tt_btn_subscribe .tt_txt_g{color:var(--text-1st)!important}
  html.dark .tt_box_namecard .tt_tit_cont{color:var(--text-2st)!important}

  .icon-primary{opacity:.9}
  .icon-secondary{opacity:.75}
  .icon-tertiary{opacity:.5}
  .icon-quaternary{opacity:.25}
  
  #__KeEpF0rN__ #leftSide {
      display: none;
      overflow-x: hidden;
      flex-direction: column;
      width: 260px;
      margin-left: -260px; /* 숨김 상태 */
      transition: margin-left 0.5s ease-in-out, opacity 0.5s ease-in-out;
      opacity: 0;
  }

  #__KeEpF0rN__.open #leftSide {
      margin-left: 0px;
      opacity: 1;
  }

  .text-k1{font-size:1.125rem;line-height:1.7499375rem;letter-spacing:-.01em;font-weight:400}

  #side-button{display:none}
  #header .logo svg{width:110px}
  #header .logo svg path{stroke:none;fill:var(--svg-fill-color)}
  #header .category-nav li a{color:var(--default);position:relative}
  #header .category-nav li.selected a,
  #header .category-nav li a:hover{color:var(--link-hover-color)}

  /* 마우스 오버 시 영어 표시 - 글짜 출력 */
  #header .category-nav li a::after {
      content: attr(data-english); /* data-english 속성 값 가져오기 */
      position: absolute;
      left: 50%;
      top: 100%; /* 원래 글자 아래에 배치 */
      transform: translateX(-50%) scaleX(0); /* 처음에는 가로 0으로 숨김 */
      background-color: var(--link-color); /* 반투명 검은색 배경 */
      color: var(--content-bg-color);
      text-transform: uppercase;
      padding: 1px 4px 0;
      font-size: 9px;
      letter-spacing: .5px;
      white-space: nowrap;
      border-radius: 5px;
      opacity: 0;
      visibility: hidden;
      transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* 마우스 오버 시 영어 텍스트가 중앙에서 확장 */
  #header .category-nav li.selected a:after,  
  #header .category-nav li a:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scaleX(1); /* 가로 크기 확장 */
  }
  .index,.index-side{display:none}
  #tt-body-index .index,
  #tt-body-index .index-side{display:block}
  .index-side .side-h2,#sidebar-zones .side-h2{margin:2rem 0 .75rem;color:var(--text-1st);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:4px;display:flex;column-gap:.5rem;align-items:center}
  .index-side .side-h2 svg,#sidebar-zones .side-h2 svg{width:22px}
  /*
  .index-side .side-h2 svg path,#sidebar-zones .side-h2 svg path{stroke:var(--svg-stroke-color);fill:none}
  .index-side .side-h2 svg path.sidepoint,#sidebar-zones .side-h2 svg path.sidepoint{stroke:var(--svg-sidepoint-color)}
  */
  .index-side .side-h2 svg path,#sidebar-zones .side-h2 svg path{fill:var(--link-color)}
  .index-side>ul{list-style:none;padding:0;margin:0;display:grid;grid-gap:32px;grid-template-columns:repeat(auto-fit,minmax(var(--item-size),1fr))}
  .index-side ul li ul,#sidebar-zones ul li ul{padding: 0 0 0 24px;list-style:disc}
  .index-side ul li ul li,#sidebar-zones ul li ul li{padding:0}
  .index-side ul li ul li::marker,#sidebar-zones ul li ul li::marker{color:var(--link-color)}
  .index-side ul li ul li a,#sidebar-zones ul li ul li a{color:var(--text-1st)}
  .index-side ul li ul li a:hover,#sidebar-zones ul li ul li a:hover{color:var(--link-color)}
  #sidebar-zones>ul{list-style:none;padding:0;margin:0;display:grid;grid-gap:32px}
  #sidebar-zones .side-h2{margin:0;font-size:var(--text-xs);line-height:1}
  #sidebar-zones ul li ul li a,
  #sidebar-zones ul li ul li .cnt{font-size:var(--text-sm);line-height:var(--text-sm--line-height)}
  #tt-body-page #sidebar-zones .pProject{display:none}

  .list-header-inner p{padding:0;margin:0}

  /* 글 */
  .article-title{margin:1rem 0 2rem}
  .admin-area-inner{font-size:15px;color:var(--text-4th)}
  .admin-area-inner a{color:var(--text-1st)}
  .info-text svg,.admin-area-inner svg{stroke:var(--text-3rd);height:15px;width:1px}

  h1.list-title,
  h1.article-title,
  h1.index-title{font-size:calc(2.875rem + 1.5vw)!important;letter-spacing:-.085em;line-height:.9;color:transparent;font-weight:600;margin:1rem 0 2rem}
  h1.list-title span,
  h1.article-title span,
  h1.index-title span{color:transparent;-webkit-text-stroke:.2px var(--text-1st);opacity:0;animation:strokeAndFill 1s forwards}
  @keyframes strokeAndFill{0%{opacity:0;color:transparent}50%{opacity:1;color:transparent}100%{opacity:1;color:var(--text-1st)}}

  h1.index-title,
  .index-desc,
  #tt-body-index .list-header{display:none}
  .list-header,
  #tt-body-index h1.index-title,
  #tt-body-index .index-desc{display:block}

  .list-ul{--list-width:calc(95vw - 64px - 16px);--list-width-desc:70vw;display:grid;grid-template-columns:1fr;gap:20px;margin-top:calc(var(--spacing)*24)}
  #tt-body-index .list-ul{margin-top:calc(var(--spacing)*0)}
  .list-image{position:relative;width:100%;height:calc((var(--list-width)* 6) / 11);overflow:hidden;border-radius:1rem}
  .list-image-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;transition:transform 0.3s ease}
  .list-category-name{background-color:var(--content-bg-color);position:absolute;top:15px;left:14px;z-index:55;padding:0 .5rem;letter-spacing:.5px;border-radius:9px;text-transform:uppercase;font-size:11px;line-height:17px;height:17px}
  .list-card-inner{padding:.5rem;--tk-shadow:0px 0px 0px 1px rgba(0,0,0,0.06),0px 1px 1px -0.5px rgba(0,0,0,0.06),0px 3px 3px -1.5px rgba(0,0,0,0.06),0px 6px 6px -3px rgba(0,0,0,0.06),0px 12px 12px -6px rgba(0,0,0,0.06),0px 24px 24px -12px rgba(0,0,0,0.06);--tk-ring-offset-shadow:0 0 #0000;--tk-ring-shadow:0 0 #0000;box-shadow:var(--tk-ring-offset-shadow,0 0 #0000),var(--tk-ring-shadow,0 0 #0000),var(--tk-shadow);background:var(--content-bg-color);border-radius:1.5rem;transition:transform 0.2s ease,box-shadow 0.2s ease}
  .list-card-inner:hover{--tk-shadow:0px 0px 0px 1px rgba(0,0,0,0.05),0px 1px 1px 0px rgba(0,0,0,0.05),0px 2px 2px 0px rgba(0,0,0,0.05),0px 4px 4px 0px rgba(0,0,0,0.05),0px 8px 8px 0px rgba(0,0,0,0.05),0px 16px 16px 0px rgba(0,0,0,0.05);
  box-shadow: var(--tk-shadow);transform:translateY(0); /* 2px 위로 이동 */}
  .list-card-inner:hover .list-image-bg{transform:scale(1.1);border-radius:1rem}
  .list-title{font-size:var(--text-lg)!important;font-weight:bold;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:var(--list-width-desc);margin:1rem 0 .5rem}
  .list-description{font-size:var(--text-sm);color:#666;line-height:var(--text-xs--line-height);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:var(--list-width-desc);white-space:normal;margin-bottom:0}
  .list-date{font-size:var(--text-xs);color:var(--text-4th);line-height:var(--text-xs--line-height);text-align:right;margin-top:.5rem;margin-bottom:.25rem}
  .list-category-name.일상기록-categoryclass{background-color:var(--bg-category-1);color:var(--content-bg-color)}
  .list-category-name.좋아하는것-categoryclass{background-color:var(--bg-category-2);color:var(--content-bg-color)}
  .list-category-name.배움지식-categoryclass{background-color:var(--bg-category-3);color:var(--content-bg-color)}
  .list-category-name.멀티미디어-categoryclass{background-color:var(--bg-category-4);color:var(--content-bg-color)}
  .list-category-name.기타-categoryclass{background-color:var(--bg-category-5);color:var(--content-bg-color)}
  html.dark .list-category-name.일상기록-categoryclass,
  html.dark .list-category-name.좋아하는것-categoryclass,
  html.dark .list-category-name.배움지식-categoryclass,
  html.dark .list-category-name.멀티미디어-categoryclass,
  html.dark .list-category-name.기타-categoryclass{color:var(--default)}

  .not_found{display:block;width:100%;margin:1rem 0 1rem}
  .not_found ul{font-size:var(--text-2xl);line-height:var(--text-2xl--line-height)}
  .not_found .smile{font-family:'Segoe UI';font-weight:500;font-size:10rem;padding-bottom:3rem}
  .not_found .tag,
  .not_found .category,
  .not_found .archive,
  #tt-body-tag .not_found ul,
  #tt-body-category .not_found ul,
  #tt-body-archive .not_found ul{display:none}
  #tt-body-tag .not_found .tag,
  #tt-body-category .not_found .category,
  #tt-body-archive .not_found .archive{display:block}

  #TableOfContents{display:none;position:sticky;top:80px;right:20px;min-width:250px;margin-top:1rem;/*z-index:99;*/}
  #TableOfContents .inner{border-width:1px;border-radius:.75rem;padding:1rem .5rem .5rem;margin-bottom:2rem}
  #TableOfContents .tk-header{padding-bottom:.25rem;padding-left:.5rem;margin-top:0.5rem;font-size:.875rem;display:flex;justify-content:space-between;align-items:center;color:var(--text-1st);font-weight:500}
  #TableOfContents .tk-header button{font-size:12px;color:var(--text-4th)}
  #TableOfContents .tk-list{list-style:none;margin:0}
  #TableOfContents .inner > .tk-list{padding:0;/*border-left-width:1px;padding-left:12px*/}
  #TableOfContents .tk-item{margin:3px 0}
  #TableOfContents .tk-link{font-weight:400;text-decoration:none;color:var(--text-2st);display:block;padding:.25rem .5rem;line-height:1.2;font-size:.875rem}
  #TableOfContents .tk-link span{--toc-list-width:;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:var(--toc-list-width)}
  #TableOfContents .tk-link:hover,
  #TableOfContents .tk-link.active{color:var(--text-1st);display:flex;align-items:center;justify-content:space-between;background-color:var(--border-color);padding:.25rem .5rem;border-radius:.5rem}
  #TableOfContents .tk-list{display:none}
  #TableOfContents .tk-list.show{display:block}
  #TableOfContents .tk-footer{display:none;padding:.25rem 0 .25rem .5rem}
  #TableOfContents .tk-footer .side-to-top{font-size:12px;color:#999;font-weight:500;cursor:pointer}
  #TableOfContents .tk-footer .side-to-top:hover{color:var(--link-text-color)}

  .main-article h2,.main-article h3,.main-article h4{letter-spacing:-.02em;-moz-column-break-after:avoid;break-after:avoid;margin-top:3rem;margin-bottom:1rem;font-weight:500;font-size:1.392rem;line-height:1.5;position:relative}
  .main-article h2{font-size: 2rem;line-height: 1.05;
      counter-increment: h2-counter; /* 각 h2에만 대해 증가 */
  }
  .main-article h3,.main-article h4{font-size:1.5rem;line-height:1.05}
  .tt_article_useless_p_margin>p{padding-bottom:.5rem!important}

  .tk-H2{text-align:center;width:4rem;margin-left:-5rem;position:absolute;top:0;left:0}
  .tk-H2 a{position:relative;font-weight:400;color:var(--text-1st);text-decoration:none;font-size:1rem;line-height:1.6;border:1px solid var(--bg-active);border-radius:9999px;display:flex;width:3rem;height:3rem;margin-top:-.5rem;margin-left:auto;margin-right:auto}
  html.dark .tk-H2 a{border:1px solid var(--content-bg-color)}
  .tk-H2 a:hover{border-color:var(--link-color);border-width:2px}
  html.dark .tk-H2 a:hover{border-color:var(--link-color)}
  .tk-H2 a > span{counter-increment:h2;flex:none;margin:auto}
  .tk-H2 a > span:before {
      content: counter(h2-counter, upper-roman); /* 'Ⅰ', 'Ⅱ'와 같은 형식으로 표시 */
  }
  .tk-H3H4{text-align:center;width:3rem;position:absolute;top:0;left:-4.5rem}
  .tk-H3H4 a{font-weight:400;border:2px solid transparent;border-radius:9999px;justify-content:center;align-items:center;display:flex;width:2.5rem;height:2.5rem;margin-top:-.5rem;margin-left:auto;margin-right:auto;position:relative;text-decoration:none}
  .tk-H3H4 a:hover{color:rgb(22 163 74 / 1);border-color:var(--link-color);border-width:2px}
  .tk-H3H4 svg{width:1rem;height:1rem;display:block;vertical-align:middle;color:var(--text-3rd)}
  .tk-H3H4 svg:after,
  .tk-H2 a:after{position:absolute;inset:-1rem;display:block;background-color:var(--text-1st);opacity:0;content:""}
  .tk-list{padding-left:20px;margin-top:5px}
  .tk-item > ul{padding-left:0px}
  .tk-item.tk-depth-1 > ul li a span{padding-left:0px}
  .tk-item.tk-depth-2 > ul li a span{padding-left:4px}
  .tk-item.tk-depth-3 > ul li a span{padding-left:8px}
  .tk-item.tk-depth-4 > ul li a span{padding-left:12px}
  .tk-Heading .tk-H2,.tk-Heading .tk-H3H4{display:none}
  .realtext{font-weight:600}

  .tag-content a{color:var(--text-3rd)}
  .tag-content a:hover{color:var(--text-1st)}

  .article-gopage{max-width:100%;padding-bottom:40px;border-bottom-width:1px}
  .article-gopage .article-gotitle{margin-bottom:40px}
  .article-gopage ul{display:flex;justify-content:space-between;margin-top:15px;padding-top:10px;padding-left:0;list-style:none;gap:10px;flex-wrap:wrap}
  .article-gopage ul li a{color:var(--text-3rd);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .article-gopage ul li a:hover{color:var(--text-1st)}
  .article-gopage .article-goprev,
  .article-gopage .article-gonext{position:relative;display:flex;align-items:center;flex:1;gap:.5rem;padding-top:30px}
  .article-gopage .article-goprev{margin-right:0}
  .article-gopage .article-gonext{margin-left:0;justify-content:flex-end}
  :where(.article-gopage .article-goprev,.article-gopage .article-gonext) a{font-size:1.125rem}
  .article-gopage .article-gonext a{text-align:right}
  .article-gopage .article-goprev em,
  .article-gopage .article-gonext em{font-size:14px;margin-top:-3px;color:var(--text-1st)}
  .article-gopage .article-goprev:before,
  .article-gopage .article-gonext:after{font-weight:600;position:absolute;top:0;font-size:13px;line-height:1.2em;letter-spacing:0.5px;text-transform:uppercase}
  .article-gopage .article-goprev:before{content:"Previous";left:0}
  .article-gopage .article-gonext:after{content:"Next";right:0}
  .newer-posts,.older-posts{color:var(--content-bg-color);background-color:var(--text-1st);padding:.5rem .75rem;border-radius:.75rem;font-size:90%}
   html.dark .newer-posts,html.dark .older-posts{color:var(--text-1st);background-color:var(--content-bg-color)}
  .newer-posts:hover,.older-posts:hover{color:var(--content-bg-color);background-color:var(--text-2st)}
   html.dark .newer-posts:hover,html.dark .older-posts:hover{color:var(--text-2st);background-color:var(--content-bg-color)}

   /* main_관련글 */
  .area-related{margin:2rem 5px 4rem;border-bottom-width:1px;padding-bottom:4rem}
  .area-related .subtitle-related{font-size:14px;letter-spacing:0.5px;line-height:15px;margin:0 0 4px 1px}
  .title-related{margin:0 0 1.25rem;font-size:1.5rem;line-height:2rem}
  .area-related .list-related{margin:0 auto;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));list-style:none}
  .area-related .list-related li{cursor: pointer}
  html.dark .area-related .item-related{box-shadow:0 3px 4px rgb(0 0 0 / 50%)}
  .area-related .item-related a{text-decoration:none;position:relative}
  .area-related .item-related{position:relative;overflow:hidden;cursor:pointer;max-width:400px;margin:0 auto;white-space:normal;background-color:var(--content-bg-color);padding:.5rem;border-radius:1.5rem;--tk-shadow:0 0 0 1px rgb(30 35 40 / .1),0 1px 2px rgba(195,199,206,0.5),0 4px 6px rgba(195,199,206,0.3);box-shadow:var(--tk-shadow);transition:transform 0.2s ease,box-shadow 0.2s ease}
  .list-related .item-related:active,.list-related .item-related:hover{--tk-shadow:0 0 0 1px rgba(30,35,40,0.1),0 6px 8px rgba(195,199,206,0.9);box-shadow:var(--tk-shadow);transform:translateY(0)}
  .list-related .item-related:hover .thumb-img{transform:scale(1.1)}
  .area-related .related-thumb{overflow:hidden;width:100%;height:90px;position:relative;background-position:center center;background-size:cover;text-align:center;z-index:1;border-radius:1rem}
  /* 이미지가 없는 경우 배경 이미지 표시 */
  .area-related .related-thumb{background-image:url(//tistory1.daumcdn.net/tistory/7678655/skin/images/no-image.png)}
  .area-related .related-thumb .thumb-img{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;transition:transform 0.3s ease}
  .area-related .related-cont-inner{display:-webkit-box;margin:1rem 1rem 0;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .area-related .related-cont-inner span{display:block;max-height:54px;margin-bottom:6px;font-size:16px;font-weight:500;line-height:16px;color:var(--text-1st);text-overflow:ellipsis;overflow:hidden;transition:.25s;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .area-related .related-cont-top{position:relative;height:16px;margin:.5rem 1rem .75rem;font-size:12px;line-height:16px;display:flex;justify-content:flex-end}
  .area-related .related-cont-top span{font-size:var(--text-xs);color:var(--text-4th);line-height:var(--text-xs--line-height);text-align:right}


  #search{position:fixed;top:-100%;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:top 0.5s ease-in-out,opacity 0.5s ease-in-out;z-index:103}
  .search-area{background-color:var(--content-bg-color);width:100%;padding:16px;margin:0 auto}

  #main{filter:none;transform:scale(1);transform-origin:50% 0;opacity:1;transition-property:opacity,transform,filter;transition-timing-function:cubic-bezier(.33,1,.68,1);transition-duration:0.8s}
  #__KeEpF0rN__ #leftSide .leftSide-inner{transition:transform .3s ease, filter .3s ease}
  #header{transition: opacity .3s ease, transform .3s ease, filter .3s ease}
  body.open-search #main,
  body.open-search #__KeEpF0rN__ #leftSide .leftSide-inner{filter:blur(50px) saturate(2);transform:matrix(0.96,0,0,0.96,0,75);opacity:0.8}
  body.open-search #header{filter:blur(50px) saturate(2);transform:scale(1);transform-origin:50% 0;opacity:0.8;transition-property:opacity,transform,filter;transition-timing-function:cubic-bezier(.33,1,.68,1);transition-duration:0.8s;transform:matrix(0.96,0,0,0.96,0,75);}

  #search [class^="icon-"]{margin-top:-4px}
  .search-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb;margin-bottom:8px;background-color:#f6f6f6;padding:10px;border-radius:10px}
  html.dark .search-bar{border-color:#2f3437;background-color:#3b4145;}
  .search-bar input{flex-grow:1;border:none;outline:none;color:#4b5563;font-size:16px;margin-left:8px;width:calc(100% - 1.5rem)}
  .search-bar input::placeholder{color:#9ca3af}
  .search-bar button{background:none;border:none;color:#4b5563;cursor:pointer}
  .search-bar button:hover{color:var(--text-1st)}
  .search-bar .submit{color:transparent;display:none}
  .search-bar .search-area-close-button{border-left:1px solid var(--text-2st);padding-left:6px;line-height:20px}
  .recent-searches{margin:10px}
  .recent-searches-header{display:flex;justify-content:space-between;align-items:center;color:#374151;font-weight:500;margin-bottom:8px}
  html.dark .recent-searches-header{color:#b3bccb}
  .recent-searches-header button{background:none;border:none;color:var(--text-1st);cursor:pointer}
  .recent-searches-header button:hover{color:var(--text-1st)}
  .recent-searches ul{list-style:none;padding:0 5px;margin:0}
  .recent-searches li{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .recent-searches li:last-child{margin-bottom:0}
  .recent-searches li span{color:var(--text-2st)}
  .recent-searches li button{background:none;border:none;color:var(--text-2st);cursor:pointer}
  .recent-searches li button:hover{color:#000}
  .recent-searches li small{color:var(--text-4th);font-size:11px}
  .recent-searches [class^="icon-"]{font-size:90%}
  .settings{display:flex;column-gap:20px;align-items:center;color:#6b7280;font-size:12px;padding-bottom:8px;padding-inline:10px;border-bottom-width:1px}
  .settings span{letter-spacing:.3px}
  .settings span.text{display:none}
  .toggle-switch{display:flex;align-items:center;gap:8px}
  .toggle-switch input{display:none}
  .toggle-switch label{position:relative;display:inline-block;width:28px;height:16px;background-color:#d1d5db;border-radius:9999px;cursor:pointer;margin-top:1px}
  .toggle-switch label::after{content:'';position:absolute;width:12px;height:12px;background-color:white;border-radius:50%;top:1px;left:2px;transition:0.3s}
  .toggle-switch input:checked + label{background-color:#3b82f6}
  .toggle-switch input:checked + label::after{transform:translateX(12px)}
  .search-style{display:flex;align-items:center;gap:8px}

  .back-to-top{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--body-bg-color);padding:0px 0px 7px;color:var(--text-1st);outline-width:0px;position:fixed;bottom:55px;right:19px;cursor:pointer;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)}
  
  code{color:#4f46e5;letter-spacing:-.04em;font-weight:600;border-radius:.25rem;background-color:#e8e7f3b3;padding:.125rem .35rem}
  html.dark code{background-color:#312f6080;color:#bfbcf5}
  html.dark mark,html.dark .mark{color:var(--grey-100);background-color:#fff3cdc3;}
  code.n{color:#ff136b;background-color:none;padding:0}

  #hamburger{position:fixed;top:0;right:-100%;width:100%;height:100%;background-color:var(--body-bg-color);border-radius:0;box-shadow:rgba(99,99,99,0.2) 0px 1px 4px 0px;transition:right 0.3s ease-in-out,opacity 0.3s ease-in-out;z-index:105;opacity:0;visibility:hidden;display:none}
  body.open-sidebar #hamburger{right:0;opacity:1;visibility:visible}
  body.open-sidebar #header,
  body.open-sidebar #__KeEpF0rN__{filter:blur(50px) saturate(2);transform:matrix(0.96,0,0,0.96,0,75);opacity:0.8}  

  #hamburger .h-logo svg{height:1.25rem;width:auto}
  #hamburger .h-logo svg .line{stroke:var(--text-1st);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  #hamburger .h-logo svg .circle{stroke:var(--text-1st);stroke-width:2;stroke-linecap:round}
  #hamburger .h-logo sup{margin-left:2px}
  #hamburger .inner{padding:2rem}
  #hamburger .h-header{display:flex;justify-content:space-between;font-size:1.25rem}
  #hamburger .h-header-text{font-size:.825rem;color:var(--text-1st);font-weight:700;text-transform:uppercase;letter-spacing:2px;display:flex;column-gap:.5rem}
  #hamburger .h-body{margin:2rem 0}
  #hamburger .h-body .menu-title .menu{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:4px}
  #hamburger .h-body .menu-title .h-close-button svg{width:32px}
  #hamburger .h-body .menu-title svg,#hamburger .h-foot svg{fill:var(--link-color)}
  #hamburger .h-body ul,
  #hamburger .h-foot ul{margin:1rem 0 0;padding:0}
  #hamburger .h-body a{font-size:calc(1.75rem + .6vw);font-weight:600;display:flex;color:var(--text-1st)}
  #hamburger .h-body a:hover,
  #hamburger .h-foot a:hover{color:var(--link-color)}
  #hamburger .h-body ul li ul > li{margin:.15rem 0;background-color:var(--content-bg-color);padding:1rem}
  #hamburger .h-foot ul li{margin:.15rem 0;background-color:var(--content-bg-color);padding:.5rem 1rem}
  #hamburger .h-body ul li ul > li:first-child,#hamburger .h-foot ul li:first-child{border-top-left-radius:.75rem;border-top-right-radius:.75rem}
  #hamburger .h-body ul li ul > li:last-child,#hamburger .h-foot ul li:last-child{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}
  #hamburger .h-body ul li ul li ul{margin:10px 0 0 20px;padding:0;list-style:none;position:relative}
  #hamburger .h-body ul li ul li ul::before{content:"";position:absolute;top:0;left:0;width:1px;height:calc(100% - 15px);background-color:var(--border-color)}
  #hamburger .h-body ul li ul li ul li{font-size:14px;padding-left:20px;margin:5px 0;position:relative}
  #hamburger .h-body ul li ul li ul li::before{content:"";position:absolute;top:14px;left:0;width:10px;height:1px;background-color:var(--border-color)}
  #hamburger .h-foot hr{width:50px;height:1px;border:none;background-color:var(--border-color);margin:10px 0}
  #hamburger .h-foot a{color:var(--text-2st);font-size:1rem;display:flex}

  .container{width:100%}
  @media (width >= 40rem) { /* 작은 태블릿 640px .sm */
    .container{width:40rem}
  }
  @media (width >= 48rem) { /* 태블릿 768px .md */
    .container{width:48rem}
    #TableOfContents,
    #TableOfContents .tk-list.show{display:block}
    .list-ul{--list-width:310px;--list-width-desc:280px;grid-template-columns:repeat(2,1fr)}
  }  
  @media (width >= 64rem) { /* 노트북 1024px .lg */
    .container{width:64rem}
    /*
    #__KeEpF0rN__.open{grid-template-columns:var(--lside-width-1) 1fr}
    #__KeEpF0rN__.open aside{width:var(--lside-width-1)}
    */
    #tt-body-index h1.index-title{font-size:72px!important}
    .list-ul{--list-width:290px;--list-width-desc:255px;grid-template-columns:repeat(3,1fr)}
    .search-area{max-width:768px;box-shadow:0 4px 6px rgba(0,0,0,0.1);border-radius:10px;margin-top:106px}
  }
  @media (width >= 80rem) { /* 데스크톱 1280px .xl */
    .container{width:75.25rem}
    #tt-body-index h1.index-title{font-size:96px!important}
    #TableOfContents .tk-header button{display:none}
    #TableOfContents .tk-list,
    #TableOfContents .tk-footer{display:block}    
    #__KeEpF0rN__.open .article-body.xl\:flex-row-reverse{flex-direction:column!important} 
    #__KeEpF0rN__.open .article-body .xl\:w-\[300px\]{width:var(--main-width)!important}
    .list-ul{--list-width:254px;--list-width-desc:220px;grid-template-columns:repeat(4,1fr)}
  }
  @media (width >= 90rem) { /* 대형화면 1440px .xxl */    
    #tt-body-page #side-button{display:block}
    #tt-body-page #__KeEpF0rN__ #leftSide{display:flex;opacity:1}
    #__KeEpF0rN__:not(.open) .tk-Heading .tk-H2,
    #__KeEpF0rN__:not(.open) .tk-Heading .tk-H3H4{display:block}
    #__KeEpF0rN__.open .article-body.xl\:flex-row-reverse{flex-direction:row-reverse!important} 
    #__KeEpF0rN__.open .article-body .xl\:w-\[300px\]{width:var(--rside-width)!important}
  }
  @media (width >= 100rem) { /* 대형화면 1440px .xxl */
    .tk-Heading .tk-H2,.tk-Heading .tk-H3H4{display:block}  
  }
}