@charset "utf-8";

/*
 *

 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation

 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Aside(sidebar)
 * 09. ETC
 * 10. Option(Color Type & List Type)
 * 11. Retina Display
 * 12. Media Screen
 *
 */

/* Web Font Load */
/* Pretendard Web CDN: 모든 weight 지원 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


/* Type Selector Reset */
body {
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  font-family: 'AppleSDGothicNeo', 'Pretendard', sans-serif;
  font-size: 1em;
  line-height: 1.25;
  color: #555;
}
html {
  overflow-y: scroll;  /* ✅ 항상 세로 스크롤 영역 확보 */
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
  display: block;
}

button, input[type=submit], input[type=reset], input[type=button] {
  overflow: visible;
  cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
  -webkit-appearance: none;
}

input, select, textarea, button {
  font-family: 'Pretendard', sans-serif;
  font-size: 100%;
  border-radius: 0;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

ul li {
  list-style: none;
}

img, fieldset {
  border: none;
  /* vertical-align: top; */
}

hr {
  display: none;
}

a, a:link {
  text-decoration: none;
  color: #555;
}

a:visited {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
  color: #222;
}

a:active {
  text-decoration: none;
}

/* Accessibility Navigation */
#acc-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 0;
}

#acc-nav a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  margin-bottom: -1px;
  text-align: center;
  font-weight: bold;
  font-size: 0.875em;
  color: #000;
  white-space: nowrap;
}

#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #000;
  color: #fff;
  z-index: 1000;
}
:root{
  --content-max: 1300px;  /* 컨텐츠 최대 폭 */
  --gutter: 24px;         /* 좌우 기본 여백 */
}
/* Layout Selector */
#header {
  border-bottom: none;
  min-height: 72px;
  z-index: 9999; 
}

#header .inner{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}
#header.fixed .inner{
  /* 고정 헤더 시에도 여백이 유지되도록 */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

#header .blog-header {
  margin-left: 0;
  padding-left: 0;      
  flex-shrink: 0;
  font-family: 'Nanum Myeongjo';
  font-weight: 700;
  font-size: 1.75em;
  line-height: 32px;
  color: #333;
  letter-spacing: -0.2px;
}

#header .blog-header .logo-wrap {
  transform: none;
  margin-left: 0;
}

#header .blog-header a {
  display: inline-block;
  height: 32px;
  text-decoration: none;
  color: #333;
  vertical-align: top;
}


#header .blog-header img {
  display: block;
  height: 28px;
  transform: none;
}
/* 유틸 레이아웃 */
#header .util {
  flex: none;
  display: flex;
  justify-content: flex-end;   /* ✅ 오른쪽 끝 정렬 */
  align-items: center;
  gap: 8px;
  position: relative;
  transform: none;
}

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

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

#header .util .search input {
  width: 32px;
  height: 32px;
  padding: 5px 15px;
  border: 0;
  background-color: transparent;
  font-size: 0.875em;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
}

#header .util .search input:focus {
  border-color: #484848;
}

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

#header .util .search button {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 10;
  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;
}

#header .util .search.on {
  width: 200px;
}

#header .util .search.on:before {
  content: none;
}

#header .util .search.on input {
  display: block;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 32px;
}

#header .util .search.on button {
  border-color: transparent;
}

#header .util .menu {
  display: none;
}

#header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#gnb {
  flex: 1;                          /* ✅ 가운데 여백 자동 확보 */
  display: flex;
  justify-content: center;         /* ✅ 내부 메뉴 가운데 정렬 */
  align-items: center;
  height: 100%;
  background: white;
}

#gnb::-webkit-scrollbar {
  display: none;
}

/* 내부 정렬 유지용 래퍼 */
#gnb .gnb-inner {
  width: 640px;           
  max-width: var(--content-max);
  display: flex;               /* ✅ 수평 정렬 */
  align-items: center;         /* ✅ 수직 중앙 정렬 */
  height: 100%;                /* ✅ GNB 높이 상속 */
  gap: 24px;                   /* ✅ 메뉴 간격 */
  padding: 0 20px;
  white-space: nowrap;
}
/* 스크롤 시 GNB 고정 및 축소 */
#gnb.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* body 보정 */
body.with-fixed-gnb {
  padding-top: 66px;
}

#gnb ul {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

#gnb ul li {
  float: left;
  padding: 0 26px;
}

#gnb ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 22px 4px 19px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s ease;
}

/* 스크롤 여부 관계없이 hover 및 current 상태에서 테마색(#ed1c24)으로 글자색 변경 */
#gnb ul li a:hover,
#gnb ul li.current a {
  color: #979797
}

/* 밑줄 효과는 제거 */
#gnb ul li.current a::after,
#gnb ul li a:hover::after,
#gnb ul li a:focus::after {
  content: none;
}
/* 햄버거메뉴 모바일 이외 환경에선 안보이게 */
.mobile-menu-button {
  display: none;
}
.mobile-gnb {
  display: none;
}
.mobile-gnb.on {
  display: block;
}
/*
#header .util .profile {
  position: relative;
  float: left;
  margin-left: 14px;
}

#header .util .profile button {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
}

#header .util .profile img {
  width: 100%;
  height: 100%;

}

#header .util .profile nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  width: 96px;
  margin: 0 0 0 -48px;
  padding-top: 12px;
}

#header .util .profile ul {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#header .util .profile ul li a {
  display: block;
  margin-top: -1px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 2.3125rem;
  color: #777;
}

#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
  background-color: #fafafa;
  color: #333;
}
*/

#container {
  position: relative;
}

#container .content-wrap{
  position: relative;                 /* pseudo 요소 기준점 확보 */
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);   
  box-sizing: border-box;
  flex: 0 1 var(--content-max);       /* 부모가 flex여도 폭 고정 */
}
#tt-body-index article#content {
  padding-top: 0 !important; /* 상단 여백 제거 */
}
#container .content-wrap:before {
  content:none !important; 
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 0px;
  height: 100%;
  margin-left: 255px;
  background-color: #eee;
}

#container .content-wrap:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#content {
  float: left;
  width: 68.518518518518519%;
  padding: 72px 0 60px;
  box-sizing: border-box;
}

#content>.inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
/* 게시글 내 태그 */
#content .tags {
  margin-bottom: 45px;
  font-size: 0;
}

#content .tags:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#content .tags h2 {
  margin-bottom: 15px;
  font-weight: 700;
  color: #000000;
  font-size: 24px;
}

/* ✅ 말풍선 스타일만 홈 화면과 동일하게 수정 */
#content .tags a {
  background-color: #fff;
  color: #222;
  padding: 4px 12px;
  font-size: 15px;
  border-radius: 20px;
  margin: 0 8px 10px 0;
  display: inline-flex;
  align-items: center;
  box-shadow: none;
  transition: all 0.3s ease;
}

#content .tags a:hover,
#content .tags a:focus {
  background-color: #333;
  color: #fff;
  border-color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}


#content .tags a:nth-of-type(n+11) {
  display: none !important;
}
/* 네임카드 숨김 */
#content [data-tistory-react-app="Namecard"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
#aside {
  float: right;
  width: 21.296296296296296%;
  padding: 75px 0 32px;
  box-sizing: border-box;
}

#aside .close,
#aside .profile {
  display: none;

}
/* ============================= */
/* ✅ 푸터 (풀블리드 배경 + 흰색 텍스트) */
/* ============================= */
#footer {
  padding: 38px 0 28px;
  border-top: none;
  background: #333;
  color: #fff;
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 100vmax #333;   /* 좌우 풀블리드 */
  clip-path: inset(0 -100vmax);
}

#footer .inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* 글자/링크 서식 그대로 + 흰색 */
#footer p {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 200;
  color: #fff;
}

#footer .order-menu a {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 0.8125em;
  vertical-align: middle;
  color: #fff;
}

#footer .order-menu a:hover,
#footer .order-menu a:focus {
  color: #ddd;
}

/* 점: 기본 표시, 첫 항목은 제거 */
#footer .order-menu a::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 12px 2px;
  background-color: #fff;
  vertical-align: middle;
}
#footer .order-menu a:first-child::before {
  content: none;
  margin: 0;
}

/* TOP 버튼: 푸터 안쪽 + 흰색 아이콘 */
#footer .page-top {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: none;
  text-indent: -999em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer .page-top::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
}
#footer .page-top:hover {
  background-color: rgba(255,255,255,.1);
}

/* 푸터 내부 마지막 요소의 바닥 여백 제거(흰 띠 방지) */
#footer .inner > :last-child { margin-bottom: 0 !important; }



#tt-body-index .main-slider {
  display: block;
}
#tt-body-index #container .content-wrap {
  padding-top: 0 !important;  /* 위쪽 패딩 제거 */
}
#tt-body-index #content {
  padding-bottom: 43px;
}

#tt-body-index .post-cover.notice {
  height: auto;
  background-color: transparent;
}

#tt-body-index .post-cover.notice h1 {
  margin: 0;
  font-size: 1.6875em;
  line-height: 1.5;
  color: #000;
}

#tt-body-index .post-cover.notice h1 a {
  color: #000;
}

#tt-body-index .post-cover.notice .meta {
  margin: 0 0 30px;
  color: rgba(0, 0, 0, 0.6);
}
/* 홈 화면 태그 */
#tt-body-index .tags {
  background-color: #ffffff;
  padding: 30px 20px;   /* ✅ 좌우 여백 추가 */
  border-radius: 16px;
  margin-top: 40px;
  text-align: center;   /* ✅ 태그들을 가운데 정렬 */
}

/* 인기 태그 (제목) */
/* 풀블리드 배경 스트립 */
.home-band {
  position: relative;
  padding: 48px 0;                     /* 위아래 여백 */
  
  /* 풀블리드 배경 */
  isolation: isolate;
  background: #f3f3f3;
  box-shadow: 0 0 0 100vmax #f3f3f3;
  clip-path: inset(0 -100vmax);
}
/* 기본은 숨김 */
.home-band { display: none; }

/* 홈(인덱스)에서만 노출 */
#tt-body-index .home-band { display: block; }
/* 내부 최대폭 정렬 */
.home-band .band-inner {
  max-width: var(--cover-max, 1240px);
  padding: 0 ;
  margin: 0 auto;
}

/* 기존 태그 박스 스타일은 그대로(흰 박스 유지) */
#tt-body-index .tags {
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 0;
  margin-top: 0;                 /* ✅ 스트립 안에선 위여백 제거 */
  text-align: center;
}

/* 제목 간격 살짝 보정 */
.tags-title {
  margin: 0 0 30px 0;
  font-weight: 700;
  font-size: 28px;
  color: #000;
  letter-spacing: -0.02em;
}

/* 태그 칩 */
#tt-body-index .tags a {
  background-color: #f3f3f3;
  color: #666;
  padding: 6px 14px;
  font-size: 16px;
  border-radius: 20px;
  margin: 0 8px 10px 0;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}
#tt-body-index .tags a:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* 모바일 버전 */
@media (max-width:767px) {
    .home-band .band-inner {
    padding: 0 12px;          /* 다른 cover와 동일한 좌우 안전 여백 */
    box-sizing: border-box;
  }

  /* 태그 박스는 내부 패딩만 유지하고, 바깥 여백/반경 정리 */
  #tt-body-index .tags {
    margin: 0;                /* band-inner 패딩으로 정렬 */
    border-radius: 0;      
    width: 100%;              /* 박스가 안전 여백 안에서만 채우도록 */
    box-sizing: border-box;
  }

  #tt-body-index .tags-title {
    margin: 10px 0 20px 8px !important;  /* ✅ 다른 cover와 동일 여백 */
    font-size: 24px !important;          /* ✅ 크기도 통일 */
    text-align: left !important;         /* ✅ 좌측 8px 기준 */
  }
  #tt-body-index .tags a {
    font-size: 12px !important;    
    padding: 1px 10px !important;    /* ✅ 높이/폭 줄이기 */
    border-radius: 14px !important;  /* ✅ 칩 둥근 정도도 맞춰 축소 */
    margin: 0 6px 8px 0 !important;  /* ✅ 간격도 살짝 줄이기 */
  }
}

/* 인기태그 글자 다른페이지에서도 보임->가리기 */
.tags-title {
  display: none;
}

/* 홈(index) 페이지에서는 보이게 */
#tt-body-index .tags-title {
  display: block;
}


#tt-body-page #container {
  padding-top: 250px;
  max-width: 800px;
  margin: 0 auto; /* 가로 중앙 정렬 */
}

#tt-body-page.post-cover-hide #container {
  padding-top: 0;
}

#tt-body-page .post-cover {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
}
/* ===== Footer CTA Banner ===== */
.c-cta-footer{
  margin: 40px 0 60px;
}
.c-cta-footer__link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.c-cta-footer__link:hover,
.c-cta-footer__link:focus {
  text-decoration:none; 
}
.c-cta-footer__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 20px;
  border-radius:16px;
  background:#f3f3f3;              
  border:1px solid #f3f3f3;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.c-cta-footer__badge {
  flex:0 0 auto;
  width:auto;
  height:auto;
  background:none;
  border-radius:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c-cta-footer__badge img {
  width:60px;
  height:auto;
  display:block;
}
.c-cta-footer__text{
  flex:1 1 auto;
  font-size:18px;
  line-height:1.4;
  color:#111;
}
.c-cta-footer__text strong{ color:#000; }
.c-cta-footer__btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  padding:12px 16px;
  border-radius:999px;
  background:#000;
  color:#fff !important;           /* ✅ 흰색 강제 */
  text-decoration:none !important; /* ✅ 밑줄 제거 */
  border:1px solid transparent;
  box-shadow:none;                 /* ✅ 기본 번짐 제거 */
  transition:transform .08s ease;  /* ✅ 이동만 */
}
.c-cta-footer__btn:hover,
.c-cta-footer__btn:focus {
  transform:translateY(-1px); /* ✅ 살짝 이동 */
  box-shadow:none;            /* ✅ 번짐 제거 */
  background:#000;            /* ✅ 배경 유지 */
  color:#fff !important;      /* ✅ hover 때도 흰색 유지 */
}
.c-cta-footer__icon{ display:inline-block; }

/* ===== Variant 분기: 버튼 색상 ===== */
/* 나스리포트 */
.c-cta-footer[data-key="나스리포트"] .c-cta-footer__btn{
  background:#ff5252;
  color:#fff !important;
}
.c-cta-footer[data-key="나스리포트"] .c-cta-footer__btn:hover,
.c-cta-footer[data-key="나스리포트"] .c-cta-footer__btn:focus{
  background:#ff5252;
  color:#fff !important;
}

/* 광고문의 */
.c-cta-footer[data-key="광고상품"] .c-cta-footer__btn{
  background:#6f42c1; 
  color:#fff !important;
}
.c-cta-footer[data-key="광고상품"] .c-cta-footer__btn:hover,
.c-cta-footer[data-key="광고상품"] .c-cta-footer__btn:focus{
  background:#6f42c1;
  color:#fff !important;
}

/* case */
.c-cta-footer[data-key="case"] .c-cta-footer__btn{
  background:#0073e6; /* 블루 */
  color:#fff !important;
}
.c-cta-footer[data-key="case"] .c-cta-footer__btn:hover,
.c-cta-footer[data-key="case"] .c-cta-footer__btn:focus{
  background:#0073e6;
  color:#fff !important;
}
@media (min-width:769px){
  .c-cta-footer__inner {
    flex-direction:row;     /* 가로 정렬 유지 */
    align-items:center;
    gap:16px;
    padding:24px 20px;      /* PC/태블릿 동일 패딩 */
  }
  .c-cta-footer__text {
    font-size:18px;         /* 기본 PC 크기 */
  }
  .c-cta-footer__badge img {
    width:60px;
  }
  .c-cta-footer__btn {
    width:auto;
    justify-content:flex-start;
    font-size:16px;
    padding:12px 16px;
  }
}
/* 태블릿만(선택) — PC와 동일 레이아웃 유지, 크기만 살짝 축소 */
@media (min-width:768px) and (max-width:1024px){
  .c-cta-footer__text { font-size:16px; }
  .c-cta-footer__badge img { width:48px; }
  .c-cta-footer__btn { font-size:15px; padding:10px 14px; }
}

/* 모바일 전용 */
@media (max-width:767.98px){
  .c-cta-footer{ margin:32px 16px 48px; }
  .c-cta-footer__inner{
    padding:18px 16px;
    gap:12px;
    flex-direction:column;   /* 세로 정렬 */
    align-items:flex-start;
  }
  .c-cta-footer__text{
    font-size:16px;
    margin-bottom:8px;
    white-space:pre-line;
  }
  .c-cta-footer__text .mobile-break{ display:block; margin-top:2px; }
  .c-cta-footer__badge img{ width:42px; }
    .c-cta-footer__btn{
    width:auto;
    justify-content:flex-start; /* 왼쪽 정렬 */
    padding:10px 14px; 
    font-size:14px;
  }
}
/* 다크모드 대비 */
.theme-dark .c-cta-footer__inner{ background:#1b1b1b; border-color:#2a2a2a; }
.theme-dark .c-cta-footer__text{ color:#f3f3f3; }

#tt-body-tag .tags { margin-top:0; }

#tt-body-tag .tags {
  margin-top: 0;
}


/* Components */
.btn, a.btn {
  display: inline-block;
  width: 100px;
  height: 36px;
  background-color: #c4c4c4;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 36px;
  color: #fff;
  vertical-align: middle;
}

.btn:hover {
  background-color: #676767;
}

.main-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--slider-h);
}
.main-slider ul {
  position: relative;    
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-slider ul li{
  position:absolute; inset:0;
  width:100%; height:100%;
  background-position:50% 50%;
  background-size:cover;
  opacity:0;
  visibility:visible;           /* 🔁 hidden 제거 */
  pointer-events:none;
  z-index:0;
  transform:translateX(0);
}
/* 보이는 슬라이드 */
.main-slider ul li.current {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* 전환 준비(들어올 슬라이드 첫 프레임: 이미 보이게 쌓아두기) */
.main-slider ul li.pre-enter {
  z-index: 2; /* current 위로 쌓기 */
}

.main-slider ul li.pre-enter.from-right {
  transform: translateX(24px);
  opacity: 0.001;
}

.main-slider ul li.pre-enter.from-left {
  transform: translateX(-24px);
  opacity: 0.001;
}

/* 들어오는/나가는 애니메이션 */
.main-slider ul li.enter {
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.main-slider ul li.current.leave.to-left {
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateX(-16px);
}

.main-slider ul li.current.leave.to-right {
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateX(16px);
}


.main-slider ul li a {
  display: table;
  width: 100%;
  height: 100%;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.15);
}

.main-slider ul li .inner {
  display: table-cell;
  vertical-align: middle;
}

.main-slider ul li .box {
  display: block;
  max-width: 910px;
  margin: 0 auto;
  padding: 0 24px 6px;
}

.main-slider ul li .text {
  display: block;
  overflow: hidden;
  max-width: 65%;
  text-overflow: ellipsis;
  font-weight: 300;
  font-size: 2.125em;
  line-height: 1.2352;
  color: rgb(0, 0, 0);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.main-slider ul li .btn {
  display: block;
  width: 118px;
  height: 35px;
  margin-top: 32px;
  border-radius: 35px;
  line-height: 35px;
  background-color: #fff;
  color: #555;
}

.main-slider ul li .btn:hover {
  background-color: #04beb8;
  color: #fff;
}

.main-slider .prev,
.main-slider .next {
  display: none;
}

.main-slider .paging {
  position: absolute;
  bottom: 20px; /* 하단에서 20px 위로 */
  right: 10%;   /* 오른쪽에서 10% 떨어진 위치 (필요에 따라 조절) */
  left: auto;   /* 기존 left 제거 */
  top: auto;    /* 기존 top 제거 */
  margin-left: 0; /* 기존 마진 제거 */
  transform: none; /* 기존 transform 제거 */
  display: flex; /* 버튼들을 가로로 나열 */
  gap: 8px;      /* 버튼 간 간격 */
  z-index: 10;
}

.main-slider .paging button {
  width: 15px;     /* 버튼 크기 조금 키움 */
  height: 15px;
  margin: 0;       /* 세로 마진 제거 */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-indent: -9999px;
  overflow: hidden;
}

.main-slider .paging .current {
  background-color: rgba(255, 255, 255, 1);
}/* 기존 점 페이징은 화면에서만 숨김 (접근성 유지) */
.main-slider .paging{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}



/* ✅ 슬라이더 높이 한번에 조절 */
:root {
  --slider-h: 440px;
}

/* (여기!) 메인 슬라이더 화살표 */
.main-slider-wrap {
  position: relative;
  left: 50%;                     /* 화면 가운데 기준 */
  transform: translateX(-50%);   /* 가운데에서 정확히 -50% 이동 */
  width: 100vw;                  /* 뷰포트 폭만큼만 */
  max-width: 100vw;              /* 100% 대신 100vw */
  margin: 0;                     /* 음수 마진 제거 */
  padding: 0;
  overflow: hidden;              /* 내부 긴 ul은 여기서 잘라냄 */
  box-sizing: border-box;
      touch-action: pan-y !important;
}
@supports (width: 100dvw) {
  .main-slider-wrap {
    width: 100dvw;
    max-width: 100dvw;
  }
}

.main-slider-wrap .nav-arrows {
  position: absolute;
  left: calc(50% + 10% - 10px);  
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.main-slider-wrap .nav-count {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #000; /* 흰색 글자 */
  line-height: 1;
}
.main-slider-wrap .nav-count b {
  font-weight: inherit; /* 부모의 font-weight를 따르도록 */
}
.main-slider-wrap .nav-count .current-index {
  margin-right: 4px; /* 현재 페이지 뒤에 여백 */
}

.main-slider-wrap .nav-count .total-count {
  margin-left: 4px; /* 전체 페이지 앞에 여백 */
}
.main-slider-wrap .nav-arrows button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111;
  border: 1px solid rgba(255, 255, 255, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  opacity: .92;
}
.main-slider-wrap .nav-arrows button:focus-visible {
  outline: none;
  background: #111;
}

.main-slider-wrap .nav-arrows button:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.main-slider-wrap .nav-arrows button:active {
  transform: translateY(0);
}

.main-slider-wrap .nav-arrows button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

.main-slider-wrap .nav-arrows .prev::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
}

.main-slider-wrap .nav-arrows .next::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='m8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='m8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/></svg>");
}


/* promotion-2 분할 슬라이드 */
.main-slider ul li.promotion-split {
  display: flex !important;
  flex-direction: row;
  height: var(--slider-h);
  padding: 0;
  background: none;
}

/* 좌측 영역: 6 */
.main-slider ul li.promotion-split > .promotion-left {
  flex: 5.5 1 0% !important;
  min-width: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin-left: 0;
  padding-left: 0;
}

/* 우측 링크 래퍼(직계 자식): 4 */
.main-slider ul li.promotion-split > .promotion-right-link {
  flex: 4.5 1 0% !important;
  display: flex;
  min-width: 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 우측 실제 내용 박스(비율 없음, 꽉 채우기) */
.promotion-right {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f3f3f3;
  background-image: none !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: none;   
}

/* 우측 텍스트 */
.promotion-right .promotion-right-text {
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;    
  color: rgb(0, 0, 0);
  z-index: 2;
}

/* 헤드라인 */
.promotion-right .promotion-headline {
  --hlh: 1.4;                     /* line-height 배수 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* 2줄까지만 */
  overflow: hidden;
  height: calc(var(--hlh) * 2em); /* 2줄 높이 고정 */
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 40px 0;             /* 🔑 타이틀과 summary 사이 간격 */
  margin-left: 0 !important;
  letter-spacing: -0.01em; 
  line-height: var(--hlh);        /* 줄 간격 */
}


/* 요약 텍스트 */
.promotion-right .promotion-summary {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(0, 0, 0);
  font-size: 18px;
  margin-top: 0;     
  margin-left: 0;
  line-height: 1.6em;
}

/* 오버레이 효과 */ 
.promotion-right::after {
  content: none;
  position: absolute;
  inset: 0;
  background: #f3f3f3;
  transition: background 0.4s ease;
  z-index: 1;
}

.promotion-right-link:hover .promotion-right::after {
  background: none;
}

/* 태블릿 */
@media screen and (min-width: 768px) and (max-width: 1080px) {
  /* 슬라이더 전체 높이 축소 */
  .main-slider {
    height: 420px; /* ↓ 550px → 420px */
  }

  .main-slider ul li.promotion-split {
    height: 420px; /* 동일하게 맞춤 */
    padding: 0;
  }

  /* 썸네일 영역도 축소된 높이에 맞춤 */
  .promotion-left {
    flex: 5;
    background-size: cover;
    background-position: center;
  }

  /* 오른쪽 텍스트 영역 */
  .promotion-right {
    flex: 5;
    background-color: #f3f3f3;
    padding: 20px 48px 20px 28px;
  }

  .promotion-right .promotion-right-text {
    top: 18%; /* 높이가 줄었으니 위치도 약간 위로 */
    left: 10%;
    max-width: 66%;
  }

  .promotion-right .promotion-headline {
    font-size: 1.8em;
     --hlh: 1.4;       
    font-weight: 700;
    margin-bottom: 40px;     
    letter-spacing: -0.02em;
  }

  .promotion-right .promotion-summary {
    -webkit-line-clamp: 3; 
    color: #000;
    font-size: 0.95em;
      margin-top: 0;   
    line-height: 1.5em;
  }

  /* 화살표 버튼 크기 */
  .main-slider-wrap .nav-arrows button {
    width: 24px;
    height: 24px;
  }

  /* 화살표 위치: 텍스트 시작점 기준 */
  .main-slider-wrap .nav-arrows {
    position: absolute;
    left: calc(50% + 10% - 10px);
    bottom: 20px; /* 전체 높이가 줄었으니 아래도 조금 위로 */
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
  }
}

/* ========== 모바일 레이아웃  ========== */
@media (max-width: 767px) {
  .main-slider-wrap {
    position: relative !important;
    display: block !important;
    margin-bottom: -1px !important;   
    background: #f3f3f3 !important;     
    overflow: hidden !important; 
  }

  .main-slider {
    position: relative !important;
    height: auto !important;
    overflow: hidden !important;
    display: block !important;
  }

  .main-slider ul {
    width:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    white-space:normal !important;
    flex-wrap:nowrap !important;   /* flex 강제 무력화 */
  }

  /* 초기 화면에서도 1번 슬라이드가 바로 보이도록 */
  .main-slider ul li { display: none !important; }
  .main-slider ul li:first-child { display: block !important; }

  /* 레이아웃/효과 잔재 무력화 */
  .main-slider ul li {
    position: relative !important;
    float: none !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;   
    width:100% !important;
    display:block !important;
  }

  .main-slider ul li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
  }

  /* 썸네일 위, 텍스트 아래 */
  .main-slider ul li.promotion-split > .promotion-left {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding-top: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
  }
  /*  아래 얇은 선/여백 제거 */
  .main-slider-wrap,
  .main-slider,
  .promotion-right {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* 배경 이음새 제거 */
  }
  .main-slider-wrap,
  .main-slider {
    overflow-x:hidden !important;
    touch-action:pan-y !important;
    overscroll-behavior-x:none !important;
  }
    .main-slider .promotion-split {
    display:block !important;
    flex:none !important;
  }
  /* 테마가 넣은 구분선/의미없는 장식 제거 */
  .main-slider-wrap::before,
  .main-slider-wrap::after,
  .main-slider::before,
  .main-slider::after {
    content: none !important;
  }
  .promotion-right {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 300px !important;
    padding: 24px 20px 56px !important;  /* 화살표 공간 확보 */
    background: #f3f3f3 !important;
    color: #000 !important;
    overflow: hidden !important; 
    z-index: 1;
  }
  .promotion-right::after { content: none !important; }

  /* 텍스트 줄수 고정 */
  .promotion-right .promotion-right-text { position: static !important; max-width: 100% !important; }
  .promotion-right .promotion-headline{
    --hlh: 1.4;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    height: calc(var(--hlh) * 2em) !important;
    line-height: var(--hlh) !important;
    font-size: 1.25em !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
  }
  .promotion-right .promotion-summary{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 1em !important;
    line-height: 1.5em !important;
    margin-top: 30px !important;
    min-height: calc(1.5em * 4) !important;   
  }

  /* 점 페이징 숨김(접근성 유지) */
  .main-slider .paging{
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* 화살표 위치 */
  .main-slider-wrap .nav-arrows{
    display: flex !important;
    position: absolute !important;
    left: 20px !important;
    bottom: 20px !important;
    gap: 8px !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }
    /* 리사이즈 시 전환 끊기용 */
  .main-slider.no-anim ul li { transition: none !important; }

  .main-slider-wrap .nav-arrows button{ width: 24px !important; height: 24px !important; }


}







/* 
버튼
.promotion-right .promotion-btn {
  display: inline-block;
  padding: 10px 24px;
  background-color: #fff;
  color: #222;
  border-radius: 30px;
  font-size: 0.95em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.promotion-right .promotion-btn:hover {
  background-color: #04beb8;
  color: #fff;
}

공통 링크 스타일
.promotion-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}
*/

.cover-thumbnail-1 h2 {
  margin-bottom: 19px;
  font-weight: 500;
  font-size: 1em;
  color: #555;
}

.cover-thumbnail-1 ul {
  display: inline-block;
  width: 103.378378378378378%;
  margin-left: -3.378378378378378%;
  margin-bottom: -40px;
  vertical-align: top;
}

.cover-thumbnail-1 ul li {
  float: left;
  width: 33.333333333333333%;
  padding-left: 3.26797385620915%;
  margin: 0 0 38px;
  box-sizing: border-box;
}

.cover-thumbnail-1 ul li a {
  display: block;
  text-decoration: none;
}

.cover-thumbnail-1 ul li a:hover .title,
.cover-thumbnail-1 ul li a:focus .title {
  text-decoration: underline;
}

.cover-thumbnail-1 ul li figure {
  display: block;
  height: 0;
  margin-bottom: 9px;
  padding-bottom: 130.434782608695652%;
  background-color: #f8f8f8;
}

.cover-thumbnail-1 ul li figure img {
  width: 100%;
  height: auto;
}

.cover-thumbnail-1 ul li .title {
  display: block;
  overflow: hidden;
  width: 95%;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.75;
}

.cover-thumbnail-1 ul li .date {
  display: block;
  font-size: 0.75em;
  color: #999;
}

.cover-thumbnail-1 .more {
  position: absolute;
  top: 4px;
  right: 0;
  font-weight: 300;
  font-size: 0.875em;
  color: #999;
}

.cover-thumbnail-2 {
  position: relative;
  overflow: visible !important;       /* 그림자 잘리지 않도록 */
  width: calc(100% + 16px);           /* 좌우 확장 */
  margin-left: -8px;
  margin-right: -8px;
  padding: 20px 0 70px;          
  border-top: 0;
  z-index: 1;

  /* 배경 */
  isolation: isolate;                 /* 자체 스택 컨텍스트 */
  background: #f3f3f3;                 /* 내부 영역 배경 */
  box-shadow: 0 0 0 100vmax #f3f3f3;    /* 바깥쪽(스크롤바 거터 포함) 배경 */
  clip-path: inset(0 -100vmax);         /* 그림자 잘림 방지 */
}
.cover-thumbnail-2 h2 {
  margin-left: 8px;        /* ✅ 카드 여백과 동일하게 정렬 */
  margin-top: 50px; 
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 28px;
  color: rgb(0, 0, 0);
  letter-spacing: -0.02em;
}

.cover-thumbnail-2 ul {
  display: block;     
  list-style: none;
  padding: 0;
}



/* li 자체를 카드형으로 */
.cover-thumbnail-2 ul li {
  max-width: 96%;
  margin: 0 auto 15px;    
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 90px;     /* 필요시 조정 */
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 0;   /* ✅ 라운드 제거 */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  transition: box-shadow 0.3s ease;
}

.cover-thumbnail-2 ul li:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);  /* 호버 시 그림자 강조 */
}

/* 숫자 영역 */
.cover-thumbnail-2 ul li .rank-num {
  font-size: 22px;
  font-weight: 600;
  color: #000000;
  margin-left: 10px;    /* 추가: 카드 테두리와 숫자 사이 여백 */
  margin-right: 10px;   /* 기존 유지: 숫자와 썸네일 사이 여백 */
  flex-shrink: 0;
  width: auto;
  display: inline;
}

/* 링크 자체를 가로 박스 형태로 */
.cover-thumbnail-2 ul li .link-box {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
}

/* 썸네일 영역 */
.cover-thumbnail-2 ul li .thumbnail-wrap {
  flex-shrink: 0;
  width: 150px;
  aspect-ratio: 16 / 9;   /* ✅ 16:9 비율 */
  border-radius: 0;       /* ✅ 라운드 제거 */
  overflow: hidden;
  margin-left: 15px;
  margin-right: 10px;
}


.cover-thumbnail-2 ul li .thumbnail-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 16:9 꽉 차게 */
  transition: filter 0.4s ease;
}

.cover-thumbnail-2 ul li:hover .thumbnail-wrap img {
  filter: grayscale(0%);          /* 호버 시 컬러 */
}

.cover-thumbnail-2 .text-wrap .post-tags {
  font-size: 17px;
  padding: 0 10px;        /* 타이틀과 좌우 시작점 맞춤 */
  color: #999;
  margin-bottom: 6px;  /* 태그와 타이틀 사이 간격 */
  display: block;
  line-height: 1.4;
}

/* 텍스트 영역 */
.cover-thumbnail-2 ul li .text-wrap {
  flex: 1;
  min-width: 0;
  display: flex;                /* ✅ 세로 정렬 */
  flex-direction: column;       /* 위아래 쌓기 */
  justify-content: center;      /* 영역 높이 중앙 배치 */
  align-self: center;           /* 카드 내에서도 중앙 */
  padding: 0;
}

.cover-thumbnail-2 ul li .text-wrap .title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.2px;
  text-decoration: none !important;
  padding-left: 10px;       /* ✅ 태그와 동일한 시작점 */
  padding-right: 10px;
}
.cover-thumbnail-2 .text-wrap .post-tags {
  font-size: 15px;
  color: #666;
  margin: 10px 0 6px 0;             /* 타이틀과 살짝 간격 */
  line-height: 1.3;
  padding-left: 10px;   
}

.cover-thumbnail-2 ul li a {
  display: block;
  text-decoration: none;
}

.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
  text-decoration: underline;
}


.cover-thumbnail-2 ul li .meta {
  display: block;
  font-size: 0.75em;
  color: #999;
}

.cover-thumbnail-2 ul li .meta span:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 8px 0 5px;
  background-color: #d2d2d2;
  vertical-align: middle;
}

.cover-thumbnail-2 ul li .meta span:first-child:before {
  content: none;
}

.cover-thumbnail-2 .more {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 12px 0 11px;
  border: 1px solid #eee;
  text-align: center;
  font-size: 0.875em;
  color: #999;
  display: none !important;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .cover-thumbnail-2 ul li .text-wrap .title {
    font-size: 1.2em !important;   /* 탭 전용 글씨 크기 */
    line-height: 1.4;
  }
}
@media (max-width:767px) {
  .cover-thumbnail-2 ul li {
    height: 76px !important;  
    padding: 8px !important;     /* ✅ 패딩 축소 */
    margin: 0 auto 10px !important; /* ✅ 카드 간 여백도 살짝 축소 */
  }
  /* 썸네일 숨김 */
  .cover-thumbnail-2 ul li .thumbnail-wrap {
    display: none !important;
  }

  /* 텍스트 영역: 공통 시작선(좌측 패딩) 부여 */
  .cover-thumbnail-2 ul li .text-wrap {
    padding-left: 10px;   /* ✅ 태그/타이틀 동일 시작점 */
    padding-right: 10px;  /* 카드 양끝 여백 균형 */
  }

  /* 태그: 크기/간격 축소 + 좌측 패딩/마진 제거(텍스트랩퍼에 맡김) */
  .cover-thumbnail-2 .text-wrap .post-tags {
    font-size: 12px !important;
    margin: 2px 0;        /* 태그 ↔ 타이틀 간격 축소 */
    padding: 0;           /* ⬅️ 내부 패딩 제거 */
  }

  /* 타이틀: 크기/간격 축소 + 좌측 패딩/마진 제거(텍스트랩퍼에 맡김) */
  .cover-thumbnail-2 ul li .text-wrap .title {
    font-size: 14.8px !important;
    line-height: 1.3;
    margin-top: 2px;      /* 기존 4px → 2px */
    padding: 0;           /* ⬅️ 내부 패딩 제거 */
  }

  /* 순위 숫자 더 작게 */
  .cover-thumbnail-2 ul li .rank-num {
    font-size: 18px !important;
    margin: 0 8px 6px 8px;   
  }

  .cover-thumbnail-2 h2 {
    margin: 10px 0 20px 8px !important;  /* 위 40px, 아래 20px, 좌측 8px */
    font-size: 24px !important;          /* ✅ cover-thumbnail-3과 동일 */
  }
}

/* ============================
   cover-thumbnail-3 : 직사각형 카드 스타일
   ============================ */
.cover-thumbnail-3 {
  width: calc(100% + 16px);
  margin: 80px -8px 0px; /* margin-top:80px, margin-left/right:-8px, margin-bottom:77px */
  position: relative;
  max-width: none;
  overflow: visible;
  align-items: unset; 
  justify-content: unset;
}

.cover-thumbnail-3 h2 {
  margin: 0 0 30px 8px;
  font-weight: 700;
  font-size: 28px;
  color: #000;
  letter-spacing: -0.02em;
}

/* 리스트 */
.cover-thumbnail-3 ul {
  flex: 1;     
  display: inline-block;
  width: 100%;  
  margin: 0;  
  padding: 0 8px;     
  background: #fff;
  vertical-align: top;
  overflow: visible;
}

.cover-thumbnail-3 ul li {
  float: left;
  width: 33.3333%;     
  min-height: 350px;
  padding: 0 12px;
  box-sizing: border-box;
  background: #fff;
  overflow: visible;
}

/* 카드 */
.cover-thumbnail-3 ul li a {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  background: #fff;
  border: 1px solid #eee;   
  border-radius: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding-bottom: 0;
  text-decoration: none !important;
}

.cover-thumbnail-3 ul li a:hover {
  background: #fff;
  z-index: 1;
}

.cover-thumbnail-3 ul li a:hover .title { text-decoration: none; }


/* 썸네일 */
.cover-thumbnail-3 ul li figure {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0 !important;
  position: relative;
}
.cover-thumbnail-3 ul li figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  transition: background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.cover-thumbnail-3 ul li figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}
/* aspect-ratio 폴백 */
@supports not (aspect-ratio: 16 / 9) {
  .cover-thumbnail-3 ul li figure { height: 0; padding-top: 56.25%; position: relative; }
  .cover-thumbnail-3 ul li figure img { position: absolute; inset: 0; }
}
/* ✅ 썸네일 전용 hover 효과 */
.cover-thumbnail-3 ul li a:hover figure img {
  transform: scale(1.05);       /* 썸네일 확대 */
}
.cover-thumbnail-3 ul li a:hover figure::after {
  background: rgba(255,255,255,0.25);  /* 밝아짐 효과 */
}

/* 제목 */
.cover-thumbnail-3 ul li .title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 25px 0 25px;  
  padding: 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none !important;

  /* ✅ 두 줄 고정 공간 확보 */
  min-height: calc(1.4em * 2); /* line-height × 2줄 */
  max-height: calc(1.4em * 2);
}

/* 태그 */
.cover-thumbnail-3 .post-tags {
  grid-column: 1 / 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 4px 12px; 
  line-height: 1.3;
  align-items: flex-start;  /* ← stretch 방지 */
  min-height: 30px;         /* 1줄 공간 예약(칩 크기는 그대로) */
}
.cover-thumbnail-3 .post-tags,
.cover-thumbnail-3 ul li .meta {
  margin-top: 20px;  
  margin-bottom: 20px;
}
.cover-thumbnail-3 .post-tags:empty {
  display: block;     /* ✅ flex 숨김 대신 block 유지 */
  visibility: hidden; /* 안 보이게만 하고 공간은 차지 */
}
.cover-thumbnail-3 .post-tags a,
.cover-thumbnail-3 .post-tags span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  color: #666;
  background: #f3f3f3;
  border: none;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}

/* 메타(날짜) */
.cover-thumbnail-3 ul li .meta {
  grid-column: 2 / 3;
  grid-row: 3;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 4px 0; 
  font-size: 13px;
  color: #999;
  text-align: right;
}
.cover-thumbnail-3 ul li .meta .date,
.cover-thumbnail-3 ul li .meta time { white-space: nowrap; }

/* 불필요 요소 숨김 */
.cover-thumbnail-3 .excerpt,
.cover-thumbnail-3 .comment { display: none !important; }

/* 슬라이드 버튼 */
.cover-thumbnail-3 button {
  position: absolute;
  top: 10px; 
  width: 24px;
  height: 24px;
  border: 1px solid #f3f3f3;
  border-radius: 50%;
  background: url(./images/ico_package.png) no-repeat 0 -50px;
  text-indent: -999em;
  outline: none;
}
.cover-thumbnail-3 .prev { right: 30px; }
.cover-thumbnail-3 .next { right: 0; background-position-x: -50px; }
.cover-thumbnail-3 button:hover,
.cover-thumbnail-3 button:focus {
  background-color: rgba(0,0,0,0.1);
  background-position-y: -74px;
}
.cover-thumbnail-3 button:active { background-color: rgba(0,0,0,0.2); }


/* 슬라이드 트랙/마스크 복구 */
.cover-thumbnail-3 { overflow: hidden !important; }      /* 마스크 복구 */
.cover-thumbnail-3 ul { position: relative !important; } /* 트랙 위치 기준 복구 */


/* 반응형 */
/* 태블릿(768~1080px): 2개만 딱 맞게, 살짝 보임 방지 */
@media (min-width:768px) and (max-width:1080px) {
  .cover-thumbnail-3 ul {
    display: block;
    width: 100%;     /* ✅ 99% → 100%로 고정 */
    margin: 0;       /* ✅ -2% 제거 */
    padding: 0 8px; 
  }
  .cover-thumbnail-3 ul::after { content:""; display:block; clear:both; } /* 안전용 */

  .cover-thumbnail-3 ul li {
    width: 50%;      /* ✅ 2열 */
    float: left;     /* (명시) */
    box-sizing: border-box; /* 패딩 포함 계산 */
  }
  /* 제목 */
  .cover-thumbnail-3 ul li .title {
    font-size: 20px;
  }

}

/* ✅ 모바일 전용 */
@media (max-width:767px) {

  /* 섹션 자체 폭 정상화 */
  .cover-thumbnail-3 {
    width: 100% !important;               /* 전역 calc(100%+16px) 제거 */
    margin: 20px 0 20px 0 !important;     /* 위/아래 여백만 */
    padding: 0 12px !important;           /* 좌우 안전 여백 */
    box-sizing: border-box;
  }

  .cover-thumbnail-3 ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0;                           /* ul 자체 좌우 패딩 제거 */
    overflow: hidden !important; 
    box-sizing: border-box;
  }

  .cover-thumbnail-3 ul li {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .cover-thumbnail-3 ul li a {
    display: block;
    margin: 0; padding: 0;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cover-thumbnail-3 ul li figure {
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .cover-thumbnail-3 ul li figure img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;           /* ← 추가 */
    height: auto !important;
  }

  .cover-thumbnail-3 ul li a {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
  }

  .cover-thumbnail-3 ul li .title,
  .cover-thumbnail-3 .post-tags,
  .cover-thumbnail-3 ul li .meta {
    padding: 0 !important;
  }

  .cover-thumbnail-3 ul li .title {
    margin: 8px 0 16px !important;
    font-size: 18px !important;
  }

  .cover-thumbnail-3 button {
    display: none !important;
  }

  .cover-thumbnail-3 ul li:nth-child(n+4) {
    display: none !important;        /* ✅ 모바일: 3개까지만 */
  }

  .cover-thumbnail-3 h2 {
    margin: 40px 0 20px 8px !important;  /* 위 40px, 아래 */
    font-size: 24px !important;
  }

  .view-all-wrapper {
    margin-top: 0;
  }
  .view-all-posts-btn {
    background: #000000 !important;
    color: #ffffff !important;
  }
  .cover-thumbnail-3 ul li a:hover figure img {
  transform: none;
  }
  .cover-thumbnail-3 ul li a:hover figure::after {
    background: none;
  }
  .cover-thumbnail-3{
    margin-top:-1px !important;    
    border-top:0 !important;
    box-shadow:none !important;
  }
  /* 최신글(cover-thumbnail-3) 섹션: 가로 제스처 차단 */
.cover-thumbnail-3,
.cover-thumbnail-3 * {
  touch-action: pan-y !important;   /* 세로 스크롤만 허용 */
}
.cover-thumbnail-3 {
  overscroll-behavior-x: none;      /* 수평 오버스크롤/바운스 금지 */
  overflow-x: hidden;               /* 혹시 모를 미세 넘침까지 차단 */
}
.cover-thumbnail-3 ul { overflow-x: hidden !important; }
}

/* 전체글 보기 버튼 */
.view-all-wrapper {
  clear: both;                 /* ✅ 카드 행 아래로 확실히 내려옴 */
  display: flex;               /* ✅ 내부 가운데 정렬용 */
  justify-content: center;     /* 가로 중앙 */
  align-items: center;         /* 세로 중앙 */
  height: auto;               /* ✅ 버튼을 담는 '영역' 높이 */
  margin: 0;
  padding: 56px 0;   
  text-align: center;
  overflow: hidden; 
}

.view-all-posts-btn {
  display: inline-block;
  min-width: 170px;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 0px;
  background: #f5f5f5;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 0;  
  line-height: 1;  
  border-radius: 30px; 
}
.view-all-posts-btn:hover {
  background: #000000;
  color: #fff;
  border-color: #000000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  text-decoration: none;
}


/* 카드 전체 컨테이너 */
.cover-thumbnail-4 {
  position: relative;
  margin-bottom: 17px;
}
.cover-thumbnail-4 h2 {
  margin-bottom: 19px;
  font-size: 1.6em;
  color: rgb(0, 0, 0);
  letter-spacing: -0.02em;
  padding-left: 20px; /* 원하는 만큼 숫자 조절 */
}

/* 카드 리스트 */
.cover-thumbnail-4 ul {
  position: relative;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  /* 카드 간 간격 자동 정렬 */
  margin-left: 1%;
  margin-right: -2%;
  width: 100%; /* 너비 고정 */
  max-width: 1200px; /* 원하는 최대 너비 */
  box-sizing: border-box;
}

/* 기본 카드 레이아웃 */
.cover-thumbnail-4 ul li {
  width: 31%;
  margin-left: 0.5%;
  margin-right: 0.5%;
  flex: 1 1 calc(33.333% - 20px);  /* 3열 레이아웃 */
  margin-bottom: 30px;
  box-sizing: border-box;
}

/* 모바일 제외 */
@media (min-width: 768px) {
  /* 카드 스타일 */
  .cover-thumbnail-4 ul li {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* 카드 호버 효과 */
  .cover-thumbnail-4 ul li:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 카드 이미지 */
  .cover-thumbnail-4 ul li figure {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 15px;
    margin-left: 2%;
  }

  /* 이미지 호버 확대 효과 */
  .cover-thumbnail-4 ul li:hover figure {
    transform: scale(1.03);
  }
}
/* ✅ 탭 화면 전용 */
@media (min-width: 768px) and (max-width: 1279px) {
  .cover-thumbnail-4 ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;   /* ✅ 콘텐츠는 좌측 기준으로 쌓임 */
    padding: 20px;
    box-sizing: border-box;
  }

  .cover-thumbnail-4 ul li figure {
    align-self: center;        /* ✅ 썸네일만 가운데 정렬 */
    margin: 0 0 15px 0;
    width: 100%;
  }

  .cover-thumbnail-4 ul li figure img {
    display: block;
    margin: 0 auto;            /* ✅ 이미지 가운데 정렬 */
    width: 100%;
    height: auto;
  }

  .cover-thumbnail-4 ul li .title {
    text-align: left;          /* ✅ 텍스트는 기존처럼 좌측 정렬 */
  }
}




/* ✅ 모바일 화면 전용 */
@media (max-width: 767px) {
  .cover-thumbnail-4 ul {
    max-width: 100% !important;
    padding: 0 10px;  /* 좌우 여백 살짝 */
  }

  .cover-thumbnail-4 ul li {
    width: 100% !important;
    flex: none !important;
    margin: 0 0 20px 0;
  }

  .cover-thumbnail-4 ul li figure {
    width: 100% !important;
    margin: 0 auto 15px auto;
  }

  .cover-thumbnail-4 ul li figure img {
    width: 100% !important;
    height: auto !important;
  }
}



/* 카드 링크 */
.cover-thumbnail-4 ul li a {
  display: block;
  text-decoration: none;
}

/* 카드 제목 */
.cover-thumbnail-4 ul li .title {
  font-size: 1.4em;
  font-weight: 600;
  color: rgb(0, 0, 0);
  letter-spacing: -0.4px;  /* ✅ 자간 줄이기 */
  margin-bottom: 8px;
  max-width: 95%;
  padding-top: 9px;
  padding-left: 5px;  /* 전체 들여쓰기 */
  text-indent: 0;      /* 첫 줄 들여쓰기 제거 */
  line-height: 1.4;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 2줄까지만 보이게 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  height: calc(1.4em * 2); /* 정확히 2줄 높이만큼 고정 */
}

/* 카드 부제목 */
.cover-thumbnail-4 ul li .excerpt {
  font-size: 0.9em;
  color: #666;
  line-height: 1.5rem;
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-left: 2%;
  display: none;
}

/* 메타 정보 */
.cover-thumbnail-4 ul li .meta {
  font-size: 0.75em;
  color: #999;
  padding-left: 8px; /* 원하는 만큼 조절 */
}
/* 댓글 수 숨기기 */
.cover-thumbnail-4 ul li .meta .comment {
  display: none;
}
/* 메타 점 스타일 */
.cover-thumbnail-4 ul li .meta span:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px;
  background-color: #ddd;
  border-radius: 50%;
}
/* 메타 점 스타일 숨기기 */
.cover-thumbnail-4 ul li .meta span:before {
  display: none;
}
/* 첫 번째 메타 점 제거 */
.cover-thumbnail-4 ul li .meta span:first-child:before {
  content: none;
}
/* 이전 다음 숨기기 */
.cover-thumbnail-4 button {
  text-indent: -9999px; /* 텍스트 숨기기 */
  overflow: hidden;     /* 혹시 넘치는 텍스트 숨김 */
  white-space: nowrap;  /* 줄바꿈 방지 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;         /* 필요하면 테두리 없애기 */
  cursor: pointer;
  width: 30px;          /* 적절한 크기 조절 */
  height: 30px;
}

.cover-list h2 {
  margin-bottom: 35px;
  padding-bottom: 19px;
  border-bottom: 1px solid #eee;
  font-weight: 500;
  font-size: 1em;
  color: #555;
}

.cover-list ul li {
  overflow: hidden;
  margin-bottom: 33px;
}

.cover-list ul li a {
  display: block;
  text-decoration: none;
}

.cover-list ul li a:hover .title,
.cover-list ul li a:focus .title {
  text-decoration: underline;
}

.cover-list ul li .title {
  display: block;
  overflow: hidden;
  max-width: 95%;
  margin-bottom: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25em;
  line-height: 1.4;
}

.cover-list ul li .excerpt {
  display: block;
  overflow: hidden;
  max-width: 95%;
  margin-bottom: 18px;
  text-overflow: ellipsis;
  font-size: 0.875em;
  line-height: 1.5rem;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cover-list ul li .date {
  display: block;
  font-size: 0.75em;
  color: #999;
}

.cover-list .more {
  position: absolute;
  top: 4px;
  right: 0;
  font-weight: 300;
  font-size: 0.875em;
  color: #999;
}
/* 이번 달, 놓치지 마세요! */
.cover-event {
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px;
  padding-top: 40px; 
  padding-bottom: 38px;
  overflow: visible;
  position: relative;
  z-index: 1;
  margin-top: 0;

  /* 배경 */
  isolation: isolate;               
  background: #f3f3f3;               
  box-shadow: 0 0 0 100vmax #f3f3f3; 
  clip-path: inset(0 -100vmax);      
}

.cover-event ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 8px;              
  margin-bottom: 40px;  
  list-style: none;
  align-items:flex-start;
}

.cover-event h2 {
  margin-left: 8px;       
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 28px;
  color: rgb(0, 0, 0);
  letter-spacing: -0.02em;
  margin-top: 0;  
}

/* 카드 전체 구조 */
.cover-event ul li {
  flex: 1 1 calc(50% - 8px);
  border-radius: 0px;
  overflow: hidden;
  background: none;
  padding: 0;
}

/* 카드 내용 */
.cover-event ul li a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 80px;
  padding: 30px 16px 14px;
  text-decoration: none;
  color: inherit;
  background-color: #ffffff;
  border-radius: 0px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

/* ✅ hover 효과 */
.cover-event ul li:hover a {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 텍스트 + 아이콘 */
.cover-event .cue-line-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0px;
}

/* 왼쪽 텍스트 (큐라인 + 자세히 보기 공통 시작점) */
.cover-event .cue-line,
.cover-event .more {
  margin-left: 30px;     
  padding-left: 0;    
  align-self: flex-start;
}

/* 큐라인 */
.cover-event .cue-line {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  word-break: keep-all;
  line-height: 1.3;
  letter-spacing: -1px;
  margin-top: 10px;
  margin-bottom: 0px;
}

/* 자세히 보기 */
.cover-event .more {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  margin-top: -10px;
  margin-bottom: 10px;
  white-space: nowrap;
  position: relative;
}

/* 오른쪽 아이콘 → 고정 */
.cover-event .cue-icon {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  margin-top: 4px;
  margin-right: 30px;
  object-fit: contain;
}
/* ✅ 태블릿 & 중간 해상도 *//* ✅ 태블릿 & 중간 해상도 (501px ~ 1000px) */
@media (min-width:721px) and (max-width:1000px){

  /* 리스트: flex → grid (2열) */
  .cover-event ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 8px;
    align-items: start;       /* 아이템 세로 늘어남 방지 */
    align-content: start;     /* 여러 행도 늘어남 방지 */
  }

  /* 카드(li) 자체는 자연 높이만 */
  .cover-event ul li{
    flex: none !important;    /* flex 기반 크기 계산 제거 */
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  /* 카드 내부(a) */
  .cover-event ul li > a{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 12px;
    gap: 6px;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 텍스트 + 아이콘 영역 */
  .cover-event .cue-line-wrap{
    display: grid;
    grid-template-columns: 1fr auto;  /* 왼쪽 텍스트, 오른쪽 아이콘 */
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    width: 100%;
    margin-bottom: 2px;
    padding: 6px 0;
  }

  /* 큐라인 */
  .cover-event .cue-line{
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;  /* 불필요한 마진 제거 */
    padding-left: 16px;
  }

  /* 자세히 보기 */
  .cover-event .more{
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding-left: 16px;
    position: static;
    display: inline-block;
    font-size: 0.8rem;
    color: #666;
  }

  /* 아이콘 */
  .cover-event .cue-icon{
    grid-column: 2;
    grid-row: 1 / span 2;   /* 텍스트 + 자세히 전체 높이 차지 */
    justify-self: end;
    align-self: center;
    width: 75px;
    height: 75px;
    margin: 0 14px 0 0;
    object-fit: contain;
    transform: translateY(2px); /* 필요시 조정 */
  }
}


/* ✅ 모바일 대응 *//* ✅ 모바일: 텍스트 좌측 기준 통일 */
@media (max-width: 720px) {
  /* 1) 카드 전체의 기준 여백(왼쪽 시작점은 이것만 사용) */
  .cover-event ul li > a {
    display: flex;
    flex-direction: column;     /* ← column 유지 */
    justify-content: center;    /* ← 세로 중앙 */
    align-items: flex-start;
    padding: 12px 10px 12px 16px !important; /* 좌측 기준 */
    gap: 8px;
    min-height: 120px;          /* ← 흰 박스 목표 높이(원하면 조정) */
    box-sizing: border-box;
  }

  /* 2) 텍스트+아이콘 랩: flex → grid (정확한 정렬) */
  .cover-event .cue-line-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: center;         /* ← 랩 내부 세로 중앙 */
  }

  /* 3) 텍스트: a의 padding-left만 따르도록 리셋 */
  .cover-event .cue-line,
  .cover-event .more {
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    text-indent: 0 !important;
  }

  .cover-event .cue-line {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 8px !important;   /* ✅ 기존 15px → 8px */
    margin-bottom: 2px !important;/* ✅ 살짝 내려서 자세히보기와 가까워짐 */
  }

  .cover-event .more {
    display: inline-block !important;
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
  }

  /* 4) 아이콘: 우측 고정 */
  .cover-event .cue-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 70px;
    height: 70px;
    margin: 0 10px 0 8px;
    object-fit: contain;
      transform: translateY(8px);
  }
    .cover-event h2 {
    margin: 10px 0 20px 8px !important;  
    font-size: 24px !important;          /* ✅ 다른 섹션과 동일 */
  }
}


/* ==============================
   POST COVER : 풀블리드 + 중앙 배치
   ============================== */

:root {
  --cover-max: 1240px;        /* 커버 내부 최대 폭 */
  --cover-gutter: 40px;       /* 좌우 여백 */
}

/* 배경을 화면 전체로 */
.post-cover {
  position: relative;
  z-index: 20;
  display: table;
  width: 100vw !important;
  height: 300px;
  background-position: 50% 50%;
  background-size: cover;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* 필요시 오버레이 */
.post-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0,0,0,.25); */
}

/* 내부 컨테이너: 세로 스택 + 하단 정렬 + 가로 중앙 */
.post-cover .inner {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 10;
  height: 100%;
  box-sizing: border-box;
  padding-left: var(--cover-gutter);
  padding-right: var(--cover-gutter);
  padding-bottom: 78px;
}

/* 텍스트 블록 공통: 폭 확장 + 중앙 배치 */
.post-cover .category,
.post-cover h1,
.post-cover .meta {
  width: 100%;
  max-width: var(--cover-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 카테고리 */
.post-cover .category {
  display: block;
  margin: 0 auto 13px !important;
  font-size: 0.875em;
  color: #333;
}
/* 링크도 부모 정렬 따르게 */
.post-cover .category a,
.post-cover .meta a {
  text-align: inherit;
}
/* 제목 */
.post-cover h1 {
  margin: 0 auto;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2352;
  color: #000000;
  word-break: keep-all;
  /* 한 줄 고정 원하면 아래 3줄 주석 해제
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

/* 링크 색상 복구(흰색 강제 방지) */
.post-cover a {
  text-decoration: none;
  color: inherit !important;
}

/* 메타 */
.post-cover .meta {
  display: block;
  margin: 34px auto 0 !important;
  font-size: 0.875em;
  color: rgba(0,0,0,.6);
}

.post-cover .meta a {
  color: inherit !important;
}

.post-cover .meta a:before,
.post-cover .meta span:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 8px 0 4px;
  background-color: rgba(0,0,0,.4) !important;
  vertical-align: middle;
}

.post-cover .meta span:first-child:before {
  content: none;
}


/* 카테고리 + 메타 한 줄 */
/* 한 줄 래퍼 */
/* ✅ 래퍼 자체는 h1과 동일 폭/중앙 */
.post-cover .category-meta-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:var(--cover-max);
  margin:0 auto 13px;
  text-align:center;
  white-space:nowrap;
  color:#666;
  font-weight:400;
}

/* ✅ 래퍼 안의 category/meta를 '블록 100%'에서 완전히 해제 */
.post-cover .category-meta-wrap .category,
.post-cover .category-meta-wrap .meta,
.post-cover .category-meta-wrap a.category{
  display:inline-flex !important;
  align-items:center;
  gap:8px;

  width:auto !important;        /* ← 핵심: 100% 제거 */
  max-width:none !important;    /* ← 핵심: 상위 max-width 상속 제거 */
  margin:0 !important;
  padding:0 !important;
  text-align:inherit !important;
  font-size:.875em;
  line-height:1.6;
  color:inherit;
}

/* 카테고리와 메타 사이 구분자: 세로 바 */
.post-cover .category-meta-wrap .category::after {
  content: "|";                 /* 세로 바 */
  display: inline-block;
  margin: 0 4px;
  color: rgba(0, 0, 0, 0.4);     /* 색상 톤 다운 */
  font-weight: 400;
}
.post-cover .category-meta-wrap .meta{ font-weight:400; }
.post-cover .category-meta-wrap .meta span:first-child::before{ content:none !important; }

/* (선택) 모바일에선 줄바꿈 허용 */
@media (max-width:480px){
  .post-cover .category-meta-wrap{ flex-wrap:wrap; row-gap:6px; white-space:normal; }
  .post-cover .category-meta-wrap .category::after{ display:none; }
}


/* 반응형 (선택) */
@media (max-width: 1080px) {
  :root {
    --cover-max: 92vw;
    --cover-gutter: 32px;
  }
  .post-cover h1 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  :root {
    --cover-gutter: 24px;
  }
  .post-cover {
    height: 300px;
  }
    .post-cover h1 {
    font-size: 26px;
    font-weight: 700 !important;
  }
  .post-cover h1,
  .post-cover h1 a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;   /* ellipsis 제거 */
    display: block !important;         /* line-clamp용 -webkit-box 무력화 */
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    word-break: keep-all;              /* 한국어 단어단위 줄바꿈 */
    line-height: 1.35;
  }

  /* 혹시 스킨이 가상요소로 '…'를 붙이는 경우 방지 */
  .post-cover h1::after,
  .post-cover h1 a::after {
    content: none !important;
  }
}

.post-header {
  padding-top: 4px;

}

.post-header h1 {
  font-size: 1.6em;
  color:#000000;
  line-height: 1.375;
}
.post-header em {
  display: none !important;
}
#tt-body-archive .post-header span:before {
  content: "'";
}

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

#tt-body-tag .post-header span:before {
  content: "#";
}

#tt-body-search .post-header span:before {
  content: "'";
}

#tt-body-search .post-header span:after {
  content: "'의 검색결과";
}
/* ====== 검색 결과 페이지 전용 ====== */

/* 기본은 숨김 */
.search-hero {
  display: none;
}

/* /search 페이지에서만 노출 *//* ========= /search 페이지 히어로: 위치/타이포/버튼 리파인 ========= */
/* ===== /search 전용: 히어로 영역 ===== */

.search-hero { display: none; }                   /* 기본 숨김 */
#tt-body-search .search-hero {                    /* /search 에서만 노출 */
  display: block;
  padding: 44px 0 12px;
  background: #fff;
}
#tt-body-search .search-hero-inner {
  max-width: var(--content-max, 1080px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

/* 타이포 */
#tt-body-search .search-hero h2 {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.2px;
  color: #111;
}
#tt-body-search .search-hero p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #737373;
  margin: 0 0 30px;     
}
#tt-body-search .search-hero-form {
  margin-top: 10px;        /* 검색바 위에 여유 */
}
/* 검색바 */
#tt-body-search .search-hero-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 54px;
  max-width: 600px;          
  margin: 0 auto;
  border: 1px solid #e9e9e9;
  border-radius: 27px;          /* ✅ 다시 라운드형 */
  padding: 0 110px 0 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: box-shadow .2s, border-color .2s;
}
#tt-body-search .search-hero-input-wrap:focus-within {
  border-color: #dcdcdc;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
#tt-body-search .search-hero-input-wrap input {
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: #111;
  padding-left: 6px;   /* ✅ 왼쪽 여백 추가 (원하는 만큼 조절, 예: 6~12px) */
}
#tt-body-search .search-hero-input-wrap input::placeholder { color: #b6b6b6; }

#tt-body-search .search-hero-clear {
  position: absolute;
  top: 50%;
  right: 58px;                  /* 검색 버튼 옆 */
  transform: translateY(-50%);
  display: none;                /* ✅ 기본 숨김 */
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}
#tt-body-search .search-hero-submit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 38px;
  width: 42px;
  border: 1px solid #e6e6e6;
  border-radius: 19px;          /* ✅ 둥글게 */
  background: #fff;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}
/* 돋보기 아이콘 (내장 SVG) */
#tt-body-search .search-hero-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='11' cy='11' r='7'/>\
    <line x1='21' y1='21' x2='16.65' y2='16.65'/>\
  </svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='11' cy='11' r='7'/>\
    <line x1='21' y1='21' x2='16.65' y2='16.65'/>\
  </svg>") center / contain no-repeat;
  background: #000;
}

/* 메타/칩 */
/* 메타: 기본 숨김 → JS가 검색 시 표시 */
#tt-body-search .search-hero-meta {
  display: none;               /* JS에서 block으로 토글 */
  margin-top: 14px;
  font-size: 20px;
  color: #666;
  font-weight: 500;
}
/* ✅ 추천 검색어 전체 감추기 */
#tt-body-search .chips-row,
#tt-body-search .chips {
  display: none !important;
}
/* 칩 행: 타이틀과 칩 덩어리 사이만 살짝 간격 */
#tt-body-search .chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;            /* "추천" ↔ 칩 덩어리 */
  row-gap: 0;
}

/* "추천" 타이틀 */
#tt-body-search .chips-title {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

/* 칩 컨테이너: 칩 사이 간격 (핵심) */
#tt-body-search .search-hero .chips,
#tt-body-search .chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;                   /* ✅ 칩들 사이 간격(원상 12px) */
  margin: 0 !important;
  padding: 0 !important;
}

/* 칩: 언더라인 링크 스타일 */
#tt-body-search .chip {
  display: inline-block;
  padding: 0 2px;  /* 글자랑 라인 사이 간격 최소화 */
  border: none;    /* 기존 보더 제거 */
  background: linear-gradient(to top, #ccc 1px, transparent 1px);
  color: #666;
  font-size: 18px;
  line-height: 1.6;
  text-decoration: none; /* 기본 밑줄 제거 */
  transition: background 0.2s ease, color 0.2s ease;
}
#tt-body-search .chip:hover {
  background: linear-gradient(to top, #111 2px, transparent 2px);
  color: #111;
}

#tt-body-search .chips .chip + .chip {
  margin-left: 0 !important;
}

/* 결과 하이라이트(원하면 유지) */
mark.search-hit {
  background: #fff3a0;
  padding: 0 2px;
  border-radius: 2px;
}

/* “의 검색결과” / 기본 안내 블록: 기본은 숨김 */
#tt-body-search .post-header { display: none; }
#tt-body-search .not-found   { display: none; }

/* 포커스/호버 상태 */
#tt-body-search .search-hero-input-wrap:focus-within { border-color: #000; }
#tt-body-search .search-hero-submit:hover { background: #f7f7f7; }

@media (max-width: 640px) {
  #tt-body-search .search-hero-input-wrap {
    max-width: 100%;           /* 모바일은 화면폭 사용 */
    height: 50px;
  }
}

/* 기본: 추천글은 항상 보이도록 */
.search-recommend { display: block; }

/* 검색결과가 나올 때는 숨김 */
#tt-body-search.has-query .search-recommend {
  display: none !important;
}

/* 추천글 섹션 */
.search-recommend {
  margin-top: 40px;
}

.search-recommend .recommend-title {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 20px;
  color: #111;
}

/* 리스트 기본 정렬 */
.search-recommend .recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 카드 재활용 */
.search-recommend .recommend-list .post-item {
  flex: 1 1 calc(33.333% - 20px);
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.search-recommend .recommend-list .post-item:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

.search-recommend .post-item .thumb{
  width: 100%;
  height: 220px;                /* ← 기존 160px 정도였다면 220px로 상향 */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin: 0 0 12px 0;
}
.search-recommend .recommend-list .post-info {
  padding: 16px;
}

.search-recommend .recommend-list .title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111;
}

.search-recommend .recommend-list .excerpt {
  font-size: 14px;
  color: #666;
  margin: 0;
}


.post-header h1 em {
  margin-left: 7px;
  font-style: normal;
  color: #04beb8;
}
.post-item {
  float: left;
  width: 32%;              /* 기존 31% → 조금 더 넓힘 */
  margin: 2% 0 2% 2%;  /* 기존 3.37% → 2%로 간격 축소 */
  background: #fff;
  border-radius: 0px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.post-item:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}

/* 호버 시 카드 자체는 움직이지 않음 */
.post-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #aaa;
  text-decoration: none;
}

.post-item a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0; 
}

/* 좌우 여백 */
.post-item .title,
.post-item .excerpt,
.post-item .meta,
.post-item .post-tags  {
  padding: 0 20px;
}

.post-item .title { margin-top: 15px; }       /* 썸네일과 간격 */
.post-item .meta { padding-bottom: 25px; }    /* 하단 여백 */
.post-item a:hover .title,
.post-item a:focus .title {
  text-decoration: none;
}

/* ===================== */
/* ✅ 썸네일 (16:9 비율) */
/* ===================== */
.post-item .thum {
  position: relative;
  display: block;
  width: 100%;                /* 카드 폭에 맞춤 */
  aspect-ratio: 16 / 9;       /* ✅ 16:9 유지 */
  background-color: #f8f8f8;
  overflow: hidden;
}

.post-item .thum img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 프레임 꽉 채우기 */
}


.post-item .thum::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background-color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.post-item:hover .thum img {
  transform: scale(1.05);
}

.post-item:hover .thum::after {
  background: rgba(255, 255, 255, 0.25); /* 밝은 레이어 */
}

/* ===================== */
/* ✅ 제목: 2줄 제한     */ 
/* ===================== */
.post-item .title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8em; /* 1.4(line-height) * 2줄 */
}

/* ===================== */
/* ✅ 본문 미리보기 3줄  */
/* ===================== */
.post-item .excerpt {
  font-size: 0.875em;
  line-height: 1.6;
  color: #555;
  margin-top: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 4.8em; /* 1.6(line-height) * 3줄 */
}

/* ===================== */
/* ✅ 태그 영역          */
/* ===================== */
.post-item .post-tags {
  min-height: 24px;
  margin-bottom: 10px;
  margin-left: -4px;  
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ===================== */
/* ✅ 메타 영역          */
/* ===================== */
.post-item .meta {
  font-size: 0.75em;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-item .meta span:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  border-radius: 50%;
  vertical-align: middle;
}

.post-item .meta span:first-child:before {
  content: none;
}

/* 보호글 아이콘 */
.post-item.protected .thum:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 47px;
  margin: -24px 0 0 -17px;
  background: url(./images/ico_package.png) no-repeat 0 -120px;
  background-size: 120px auto;
}
/* === Tablet: 2열 카드 레이아웃 === */
/* (필요하면 max-width를 1024px로 바꿔도 OK) */
@media (min-width: 768px) and (max-width: 1080px) {

  /* 1) 카드 폭을 2열에 맞춤 (좌우 간격 2% 유지) */
  .post-item {
    width: calc((100% - 2%) / 2);  /* = 49% */
    margin: 2% 0 2% 2%;            /* 상하좌우 모두 2%, 왼쪽 열만 0 처리 */
  }

  /* 2) 기존 3열 규칙 무효화 */
  .post-item:nth-child(3n+1) {
    margin-left: 2%;               /* 임시로 원복 후 아래 2열 규칙으로 덮어씀 */
    clear: none;
  }

  /* 3) 2열 규칙: 새 행의 첫 카드(1,3,5,...)는 왼쪽 여백 0 + 줄바꿈 */
  .post-item:nth-child(2n+1) {
    margin-left: 0;
    clear: both;
  }
}


/* 모바일 대응: 1열 */
@media screen and (max-width: 767px) {
  .post-item {
    width: 100% !important;
    margin-left: 0 !important;
    clear: none !important;
  }
}

.not-found {
  display: block;
  width: 100%;
  margin-bottom: 35px;
}

.not-found li {
  position: relative;
  padding-left: 10px;
  font-size: 0.9375em;
  line-height: 2;
  color: #999;
}

.not-found li:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #999;
}

.not-found .tag,
.not-found .category,
.not-found .archive {
  display: none;
}

#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;
}

.pagination {
  margin-top: 30px;
  margin-bottom: 60px;
  text-align: center;
}

.pagination a {
  display: inline-block;
  margin: 0 12px;
  font-size: 0.875em;
  line-height: 1.5rem;
  vertical-align: top;
  color: #999;
}

.pagination .selected {
  color: #333;
}

.pagination .prev,
.pagination .next {
  width: 22px;
  height: 22px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: url(./images/ico_package.png) no-repeat 0 -50px;
  text-indent: -999em;
}

.pagination .next {
  background-position-x: -50px;
}

.pagination .view-more {
  display: block;
  margin: 0;
  padding: 12px 0 11px;
  border: 1px solid #eee;
  text-align: center;
  font-size: 0.875em;
  color: #999;
}

.tags {
  margin-bottom: 45px;
  font-size: 0;
}

.tags:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.tags h2 {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
}

.tags a {
  display: inline-block;
  margin: 0 8px 12px 0;
  padding: 0 17px;
  border: 1px solid #eee;
  border-radius: 32px;
  font-size: 14px;
  line-height: 30px;
  vertical-align: middle;
  color: #555;
}

.tags a:hover,
.tags a:focus {
  color: #333;
}

.page-nav {
  margin: 52px 0 60px 0;
  padding: 23px 0 20px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.page-nav a {
  display: block;
  overflow: hidden;
  padding-left: 58px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 2.125rem;
  color: #555;
}

.page-nav a:hover,
.page-nav a:focus {
  color: #333;
}

.page-nav a strong {
  float: left;
  width: 58px;
  margin-left: -58px;
  font-weight: 400;
  color: #999;
}

.page-nav a strong:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  margin: 0 8px;
  background: url(./images/ico_package.png) no-repeat -150px -50px;
  vertical-align: middle;
}
/* 관련글 */
/* ============================ */
/* 관련글 (related-articles)  */
/* ============================ */
.related-articles {
  margin-bottom: 55px;   /* ✅ 기존 하단 여백 유지 */
}

.related-articles h2 {
  margin-bottom: 15px;   /* ✅ 기존 여백 유지 */
  font-weight: 700;
  color: #000000;
  font-size: 24px;    
}

.related-articles ul {
  display: inline-block;
  width: 101.6216216216%;   /* ✅ 기존 폭 유지 */
  margin-left: -1.6216216216%;
  vertical-align: top;
}

.related-articles ul li {
  float: left;
  width: 33.333%;   /* ✅ 한 줄에 3개 */
  padding-left: 1.6216216216%;
  box-sizing: border-box;
  display: none;     /* 기본 숨김 */
}
.related-articles ul li:nth-child(-n+3) {
  display: block;    /* 1~3번째까지만 보임 */
}


/* 카드 */
.related-articles ul li a {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  background: #fff;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0;
  text-decoration: none !important;
  color: #000;
}

.related-articles ul li a:hover {
  background: #fff;
  z-index: 1;
}
.related-articles ul li a:hover .title { text-decoration: none; }

/* 썸네일 */
.related-articles ul li figure {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0 !important;
  position: relative;
}
.related-articles ul li figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.3s ease;
}
.related-articles ul li a:hover figure img {
  transform: scale(1.05);  /* ✅ hover 확대 효과 */
}

/* 제목 */
.related-articles ul li .title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #000000;
  letter-spacing: -0.02em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none !important;

  min-height: calc(1.4em * 2); /* ✅ 두 줄 고정 */
  max-height: calc(1.4em * 2);
}
@media (max-width: 767px) {
  .related-articles ul {
    width: 100% !important;
    margin-left: 0 !important;
    display: block;
  }
  .related-articles ul li .title {
    margin-top: 2px; 
    font-size: 18px;     
    line-height: 1.45;
    min-height: calc(1.45em * 2);
    max-height: calc(1.45em * 2);
  }
  .related-articles ul li {
    float: none;
    width: 100% !important;      /* 양옆 꽉 차게 */
    padding-left: 0 !important;  /* 좌측 패딩 제거 */
    margin-bottom: 20px;         /* 카드 간격 */
    box-sizing: border-box;
  }

  .related-articles ul li a {
    border-radius: 0;            /* 좌우 모서리 둥근 거 없애려면 */
  }
}



/* Entry Content */
.entry-content h1 {
  clear: both;
  margin: 29px 0 22px;
  font-size: 1.6875em;
  line-height: 1.5;
  color: #000;
}

.entry-content h2 {
  clear: both;
  margin: 29px 0 22px;
  font-size: 1.5em;
  line-height: 1.5;
  color: #000;
}

.entry-content h3 {
  clear: both;
  margin: 29px 0 22px;
  font-size: 1.3125em;
  line-height: 1.5;
  color: #000;
}

.entry-content h4 {
  clear: both;
  margin: 29px 0 22px;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.5;
  color: #000;
}

.entry-content p {
  word-break: break-word;
}

.entry-content p img {
  max-width: 100%;
  height: auto;
}

.entry-content hr {
  display: block;
  height: 0;
  border: 0;
  border-bottom: 1px solid #000;
}

.entry-content pre {
  word-break: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.entry-content ul {
  list-style: disc;
  margin-bottom: 22px;
  padding: revert;
}

.entry-content ul li {
  position: relative;
  margin-bottom: 10px;
  list-style: inherit;
}

.entry-content ol {
  list-style: decimal inside;
  margin-bottom: 22px;
}

.entry-content ol li {
  position: relative;
  margin-bottom: 10px;
  text-indent: -15px;
  list-style: inherit;
}

.entry-content img.alignleft {
  float: left;
  margin: 0 22px 22px 0;
}

.entry-content img.aligncenter {
  display: block;
  margin: 0 auto 22px;
}

.entry-content img.alignright {
  float: right;
  margin: 0 0 22px 22px;
}

.entry-content blockquote {
  margin-bottom: 40px;
  padding: 16px 20px;
  border-left: 4px solid #e6e6e6;
}

.entry-content blockquote p {
  margin: 22px 0 0;
}

.entry-content blockquote p:first-child {
  margin-top: 0;
}

.entry-content input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e6e6e6;
  font-size: 0.875em;
  line-height: 1.25;
  color: #666;
  box-sizing: border-box;
  vertical-align: middle;
}

.entry-content .entry-content .protected_form {
  margin-bottom: 40px;
  padding: 120px 0 200px;
  border-bottom: 1px solid #7a583a;
  text-align: center;
}

.entry-content .entry-content .protected_form input {
  width: 200px;
  margin-bottom: 10px;
  vertical-align: top;
}

.entry-content .cap1 {
  text-align: center;
  font-size: 0.875em;
  font-style: italic;
}

.entry-content .iframe-wrap {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.entry-content .iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.entry-content .protected_form {
  display: block;
  width: 100%;
  padding: 98px 0 120px;
  text-align: center;
}

.entry-content .protected_form h2 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 1.625em;
  line-height: 2.125rem;
  color: #555;
}

.entry-content .protected_form p {
  margin-bottom: 34px;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.75;
  color: #999;
}

.entry-content .protected_form input {
  width: 183px;
  padding: 0 23px;
  border: 1px solid #eee;
  font-size: 0.9125em;
  line-height: 2.125rem;
}

.entry-content .protected_form input:focus {
  border-color: #484848;
}

.entry-content .protected_form .btn {
  margin-left: 5px;
}

/* Comment */
.comments {
  margin-bottom: 60px;
}

.comments h2 {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 1em;
}

.comments h2 .count {
  margin-left: 4px;
  color: #04beb8;
}

.comment-list {
  margin-bottom: 60px;
  border-top: 1px solid #eee;
}

.comment-list ul li {
  display: inline-block;
  width: 100%;
  padding: 32px 0 28px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  box-sizing: border-box;
}

.comment-list .tt_more_preview_comments_wrap {
  padding: 0;
  border: 0;
}

.comment-list .tt_more_preview_comments_text {
  display: block;
  margin: -1px 0 0;
  padding: 12px 0 11px;
  border: 1px solid #eee;
  text-align: center;
  font-size: 0.875em;
  color: #999;
}

.comment-list .tt_more_preview_comments_text:hover {
  text-decoration: underline;
}

.comment-list ul li .author-meta {
  position: relative;
  margin-bottom: 7px;
  padding: 2px 0 0 60px;
  font-size: 0.8125em;
  color: #999;
}

.comment-list ul li .author-meta a {
  color: #999;
}

.comment-list ul li .author-meta a:before,
.comment-list ul li .author-meta span:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 7px 0 5px;
  background-color: #e3e3e3;
  vertical-align: middle;
}

.comment-list ul li .author-meta .nickname {
  font-weight: 700;
  color: #555;
}

.comment-list ul li .author-meta .nickname a {
  color: #555;
}

.comment-list ul li .author-meta .avatar {
  float: left;
  width: 46px;
  margin: -2px 0 0 -60px;
  border: 1px solid #eee;
  border-radius: 50%;
}

.comment-list ul li .author-meta .control {
  position: absolute;
  top: 0;
  right: -9px;
  border-bottom: 0;
}

.comment-list ul li .author-meta .control button {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(./images/ico_package.png) no-repeat -141px 5px;
  text-indent: -999em;
}

.comment-list ul li .author-meta .control .link {
  display: none;
  position: absolute;
  top: 100%;
  left: -65px;
  width: 70px;
  text-align: center;
}

.comment-list ul li .author-meta .control .link a {
  display: block;
  margin-top: -1px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 1.5rem;
  color: #333;
}

.comment-list ul li .author-meta .control .link a:focus,
.comment-list ul li .author-meta .control .link a:hover {
  background-color: #fafafa;
  color: #222;
}

.comment-list ul li .author-meta .nickname:before,
.comment-list ul li .author-meta .nickname a:before,
.comment-list ul li .author-meta .control:before,
.comment-list ul li .author-meta .control a:before {
  content: none;
}

.comment-list ul li p {
  max-width: 85%;
  padding: 0 0 0 60px;
  font-size: 0.875em;
  line-height: 1.3125rem;
  color: #777;
  box-sizing: border-box;
}

.comment-list ul li .reply {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: #999;
}

.comment-list ul li ul {
  margin: 28px 0 -32px 0;
  padding: 26px 0 21px;
  border-top: 1px solid #eee;
  background-color: #fafafa;
}

.comment-list ul li ul li {
  padding: 14px 0 15px 60px;
  border-bottom: 0;
}

.comment-list ul li ul li .author-meta {
  margin-bottom: 8px;
}

.comment-list ul li ul li .author-meta .control {
  right: 15px;
}

.comment-list ul li ul li .author-meta .avatar {
  width: 42px;
}

.comment-list ul li ul li p {
  max-width: 80%;
}

.comment-list ul li ul .tt_more_preview_comments_wrap {
  display: block;
}

.comment-list ul li ul .tt_more_preview_comments_text {
  margin-bottom: 16px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.comment-list ul li ul .tt_more_preview_comments_text:first-child {
  margin-top: -24px;
  padding: 12px 0 11px;
}

.comment-form {
  position: relative;
  margin-bottom: 60px;
}

.comment-form .field {
  overflow: hidden;
  margin-bottom: -1px;
  border: 1px solid #eee;
}

.comment-form .field input[type=text],
.comment-form .field input[type=password] {
  float: left;
  width: 50%;
  padding: 12px 16px;
  border: 0;
  border-left: 1px solid #eee;
  font-size: 0.875em;
  color: #777;
  box-sizing: border-box;
}

.comment-form .field input:first-child {
  border-left: 0;
}

.comment-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 16px 100px 16px 16px;
  border: 1px solid #eee;
  font-size: 0.875em;
  color: #777;
  box-sizing: border-box;
  resize: none;
}

.comment-form input::-webkit-input-placeholder,
.comment-form textarea::-webkit-input-placeholder {
  color: #999;
}

.comment-form .secret {
  position: absolute;
  left: 0;
  bottom: 8px;
}

.comment-form .secret input {
  display: none;
}

.comment-form .secret label {
  display: inline-block;
  font-size: 0.8125em;
  line-height: 1.25rem;
  color: #666;
  outline: none;
  cursor: pointer;
}

.comment-form .secret label:before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 18px;
  margin-right: 12px;
  border: 1px solid #e1e1e1;
  vertical-align: top;
  background-color: #fff;
}

.comment-form .secret input[type=checkbox]:checked+label:before {
  background: url(./images/ico_package.png) no-repeat -47px 4px;
}

.comment-form .submit {
  text-align: right;
}

.comment-form .submit button {
  background-color: #333;
  color: #fff;
}

.comment-form .submit button:hover,
.comment-form .submit button:focus {
  background-color: #04beb8;
}

/* Aside(sidebar) */
.sidebar h2 {
  margin-bottom: 7px;
  font-weight: 500;
  font-size: 0.875em;
  color: #555;
}

.sidebar ul li {
  padding: 4px 0 5px;
  font-size: 0.8125em;
  line-height: 1.25rem;
  color: #777;
}

.sidebar ul li a {
  color: #777;
}

.sidebar ul li a:hover {
  color: #333;
}

.sidebar .sidebar-2 {
  margin-top: 38px;
  padding-top: 46px;
  border-top: 1px solid #eee;
}

.sidebar .category {
  margin-bottom: 36px;
}

.sidebar .category ul li {
  padding: 0;
  font-size: 0.875em;
  font-weight: 600;
}

.sidebar .category ul li a {
  color: #555;
}

.sidebar .category ul li a:hover {
  color: #333;
}

.sidebar .category ul li ul {
  padding-top: 8px;
}

.sidebar .category ul li ul li {
  padding: 6px 0 7px;
  font-weight: 400;
  font-size: 1em;
}

.sidebar .category ul li ul li ul {
  overflow: hidden;
  margin-bottom: -4px;
  padding-top: 6px;
}

.sidebar .category ul li ul li ul li {
  position: relative;
  padding: 3px 0 3px 9px;
  /* border-left: 2px solid #eee; */
  font-size: 0.8125rem;
}

.sidebar .category ul li ul li ul li:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #eee;
}

.sidebar .category ul li ul li ul li:first-child:before {
  top: 7px;
  bottom: auto;
}

.sidebar .category ul li ul li ul li a {
  color: #999;
}

.sidebar .notice {
  margin-bottom: 37px;
}

.sidebar .recent-comment {
  margin-bottom: 36px;
}

.sidebar .recent-comment ul li a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar .post-list {
  margin-bottom: 46px;
}

.sidebar .post-list h2 {
  margin-bottom: 12px;
}

.sidebar .post-list ul li {
  overflow: hidden;
  margin-bottom: 18px;
  padding: 0;
}

.sidebar .post-list ul li img {
  float: right;
  width: 58px;
  height: 58px;
  margin: 2px 0 0 20px;
}

.sidebar .post-list ul li a {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.sidebar .post-list ul li a:hover .title {
  text-decoration: underline;
}

.sidebar .post-list ul li .title {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sidebar .post-list ul li .date {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1;
}

.sidebar .social-list {
  margin-bottom: 46px;
}

.sidebar .social-list h2 {
  margin-bottom: 18px;
}

.sidebar .social-list .tab-list {
  overflow: hidden;
  width: 100%;
}

.sidebar .social-list ul li {
  margin-bottom: 15px;
  padding: 0 0 0 48px;
}

.sidebar .social-list ul li a {
  display: block;
  text-decoration: none;
}

.sidebar .social-list ul li a:hover .text {
  text-decoration: underline;
}

.sidebar .social-list ul li .avatar {
  float: left;
  overflow: hidden;
  width: 40px;
  height: 40px;
  margin-left: -48px;
  border-radius: 50%;
}

.sidebar .social-list ul li .title {
  display: block;
}

.sidebar .social-list ul li .date {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #777;
}

#aside .tags {
  margin: 0 0 41px;
  padding: 0;
  font-size: 1em;
}

#aside .tags h2 {
  margin-bottom: 8px;
  font-size: 0.875em;
}

#aside .tags a {
  float: none;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  font-size: 0.8125em;
  line-height: 2;
  color: #555;
}

#aside .tags a:after {
  content: ", ";
}

#aside .tags a:last-child:after {
  content: none;
}

#aside .tags a:hover,
#aside .tags a:focus {
  color: #333;
}

.sidebar .count {
  margin-bottom: 46px;
}

.sidebar .count h2 {
  margin-bottom: 3px;
}

.sidebar .count h2:before {
  content: "";
  display: block;
  width: 17px;
  height: 1px;
  margin-bottom: 18px;
  background-color: #555;
}

.sidebar .count p {
  margin-bottom: 6px;
  font-size: 0.8125em;
  color: #777;
}

.sidebar .count .total {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.875em;
  color: #555;
}

.sidebar .social-channel {
  margin-bottom: 48px;
}

.sidebar .social-channel ul {
  overflow: hidden;
  width: 100%;
}

.sidebar .social-channel ul li {
  float: left;
  margin-left: 10px;
  padding: 0;
}

.sidebar .social-channel ul li:first-child {
  margin-left: 0;
}

.sidebar .social-channel ul li a {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid #eee;
  border-radius: 50%;
  text-indent: -999em;
  background: url(./images/ico_package.png) no-repeat 0 -100px;
}

.sidebar .social-channel ul li.youtube a {
  background-position-x: -50px;
}

.sidebar .social-channel ul li.instagram a {
  background-position-x: -100px;
}

.sidebar .social-channel ul li.twitter a {
  background-position-x: -150px;
}

.sidebar .social-channel ul li a:focus,
.sidebar .social-channel ul li a:hover {
  background-color: #757575;
  background-position-y: -150px;
}

.sidebar .tab-ui h2 a {
  color: #999;
}

.sidebar .tab-ui h2 a.current {
  color: #555;
}

.sidebar .tab-ui h2 a:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  margin: 0 10px;
  vertical-align: middle;
  background: url(./images/ico_package.png) no-repeat -100px -50px;
}

.sidebar .tab-ui h2 a:first-child:before {
  content: none;
}

/* ETC */
#dimmed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.mobile-menu {
  overflow: hidden;
  height: 100%;
}

.slide-wrap {
  overflow: hidden;
}

/* Overwrite */
#content .another_category {
  margin: 60px 0 57px !important;
  padding: 16px 20px 14px;
}

#content .another_category h4 {
  margin: 0 0 13px !important;
  ;
  padding: 0 !important;
  border-bottom: 0 !important;
  font-size: 0.875em !important;
}

#content .another_category table {
  margin: 0 !important;
  border: 0;
}

#content .another_category th {
  padding: 2px 0 !important;
  font-size: 0.875rem !important;
}

#content .another_category th a.current {
  text-decoration: underline !important;
  font-weight: 400;
  color: #333 !important;
  border: 0 !important;
}

#content .another_category td {
  padding: 2px 0 !important;
  border: 0;
  font-size: 0.75rem !important;
}
/* 카테고리의 다른 글 숨김 */
#content .another_category {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#content .another_category::before,
#content .another_category::after {
  display: none !important;
}


.absent_post:before {
  content: "죄송합니다만 \A글을 찾지 못했습니다.";
  display: block;
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 1.75em;
  line-height: 1.285714285714286;
  color: #555;
  white-space: pre;
}

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

/* Option(Color Type & List Type) */
.layout-aside-left #content {
  float: right;
}

.layout-aside-left #aside {
  float: left;
  margin-left: 0;
  padding: 80px 0;
}

.layout-aside-left #container .content-wrap:before {
  margin-left: -256px;
}

.list-type-vertical .post-item {
  margin-bottom: 38px;
}

.list-type-vertical .post-item .thum {
  margin-bottom: 3px;
  padding-bottom: 130.434782608695652%;
}

.list-type-vertical .post-item .thum img {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
}

.list-type-vertical .post-item .title {
  margin-bottom: 5px;
}

.list-type-vertical .post-item .excerpt,
.list-type-vertical .post-item .meta .comment {
  display: none;
}

.list-type-vertical .post-item .meta span:before {
  content: none;
}

.list-type-thumbnail .post-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.list-type-thumbnail .post-header h1 {
  margin-bottom: 0;
}

.list-type-thumbnail .post-item {
  float: none;
  overflow: hidden;
  width: 100%;
  margin: 0 0 28px;
}

.list-type-thumbnail .post-item .thum {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.list-type-thumbnail .post-item .thum img {
  float: right;
  width: 126px;
  height: auto;
  margin-left: 57px;
  border: 1px solid #f1f1f1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
}

.list-type-thumbnail .post-item.protected .thum {
  float: right;
  width: 126px;
  height: 166px;
  margin-left: 57px;
  border: 1px solid #f1f1f1;
  background-color: #f8f8f8;
}

.list-type-thumbnail .post-item .title {
  max-width: 95%;
  margin-bottom: 12px;
  padding-top: 7px;
  font-size: 1.25em;
}

.list-type-thumbnail .post-item .excerpt {
  overflow: hidden;
  height: 3.75rem;
  margin-bottom: 20px;
  font-size: 0.875em;
  line-height: 1.25rem;
}

.list-type-thumbnail .post-item .meta .comment {
  display: none;
}

.list-type-thumbnail .post-item .meta span:before {
  content: none;
}

.list-type-text .post-header {
  margin-bottom: 38px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.list-type-text .post-header h1 {
  margin-bottom: 0;
}

.list-type-text .post-item {
  float: none;
  overflow: hidden;
  width: 100%;
  margin: 0 0 35px;
}

.list-type-text .post-item .thum {
  display: none;
}

.list-type-text .post-item .title {
  max-width: 96%;
  margin-bottom: 10px;
  padding-top: 0;
  font-size: 1em;
}

.list-type-text .post-item .excerpt {
  max-width: 96%;
  margin-bottom: 20px;
  font-size: 0.875em;
  line-height: 1.25rem;
}

.list-type-text .post-item .meta .comment {
  display: none;
}

.list-type-text .post-item .meta span:before {
  content: none;
}

.list-type-text .pagination {
  margin-top: 36px;
}

/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {

  #header .util .search:before,
  #header .util .search button,
  #footer .page-top,
  .cover-thumbnail-3 button,
  .cover-thumbnail-4 button,
  .page-nav a strong:after,
  .entry-content .protected_form h2:before,
  .comment-list ul li .author-meta .control button,
  .comment-form .secret input[type=checkbox]:checked+label:before,
  .sidebar .social-channel ul li a,
  .sidebar .tab-ui h2 a:before {
    background-image: url(./images/ico_package_2x.png);
    background-size: 200px auto;
  }

  .post-item.protected .thum:before {
    background-image: url(./images/ico_package_2x.png);
    background-size: 120px auto;
  }
}

/* PC에선 햄버거 버튼 숨김, 모바일에서만 보이게 */
@media (min-width:1081px) {
  .mobile-menu-button { display: none; }
}
@media (max-width:1080px) {
  .mobile-menu-button { display: flex; }
}
/* 미디어쿼리: 태블릿 (768–1080px) */
@media screen and (min-width: 768px) and (max-width: 1080px) {

  /* 헤더 구조: PC와 동일한 좌측 시작선 */
  #header .blog-header,
  #footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  #header .inner {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    height: 72px;
    padding: 0 24px; /* container와 동일 여백 */
    gap: 20px;
  }
  #header .blog-header {
    order: 1;
    width: auto;
    margin: 0;
    display: block;
    justify-content: flex-start !important;
  }

  /* GNB/유틸 숨김 */
  #header .util,
  #gnb {
    display: none !important;
  }

  /* 햄버거 버튼 */
  .mobile-menu-button {
    display: flex !important;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 28px;
    height: 20px;
    z-index: 9000;

    background: none;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 0;
    pointer-events: auto;

    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
  }
  .mobile-menu-button span {
    display: block;
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 2px;
    box-sizing: border-box;
    position: static;
    float: none;
  }

  /* 모바일 메뉴 오버레이 */
  .mobile-gnb {
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
    position: fixed;
    inset: 0; /* top, right, bottom, left: 0 */
    background-color: #000;
    z-index: 100000;
    padding: 80px 24px 24px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  /* JS 방식 열림 */
  .mobile-gnb.on {
    display: block;
    opacity: 1;
  }
  /* CSS-only 체크박스 방식 열림 */
  .nav-toggle:checked ~ .mobile-gnb {
    display: block;
    opacity: 1;
  }

  /* 닫기 버튼 */
  .mobile-gnb-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    z-index: 100001;
  }

  /* 메뉴 리스트 */
  .mobile-gnb ul {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
  }
  .mobile-gnb ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mobile-gnb li a {
    display: block;
    padding: 16px 20px;
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.06em;
    text-decoration: none;
    transition: color .2s ease, font-weight .2s ease;
    background-color: transparent;
  }
  .mobile-gnb li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
  }

  /* 태블릿 유틸 영역 */
  .mobile-gnb .mobile-util{
    margin-top:24px;
    padding-left:24px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* 한 줄 전체가 클릭 가능 (아이콘 + 텍스트) */
  /* 한 줄 전체 클릭 영역(아이콘+라벨) */
  .mobile-gnb .mobile-util .btn-util{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:40px;
    text-decoration:none;
    color:#e0e0e0;
    /* 원형 테두리는 이제 a가 아니라 아이콘 span으로 이동 */
    border:0;
    padding:0;
  }

  /* 아이콘 원: 크기/테두리/가운데 정렬 고정 */
  .mobile-gnb .mobile-util .btn-util .ico-search,
  .mobile-gnb .mobile-util .btn-util .ico-home{
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    flex:0 0 40px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:20px 20px;
  }

  /* 라벨 */
  .mobile-gnb .mobile-util .btn-util .label{
    font-size:14px;
    letter-spacing:-0.2px;
    white-space:nowrap;
    color:#e0e0e0;
  }

  /* ✅ 아이콘 소스: URL 인코딩된 SVG (단일 라인, 파싱 안전) */
  .mobile-gnb .mobile-util .btn-util .ico-search{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  }
  .mobile-gnb .mobile-util .btn-util .ico-home{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 9.5L12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z'/%3E%3C/svg%3E");
  }


  #container .content-wrap:before {
    left: 72.7%;
    margin-left: 0;
  }

  .layout-aside-left #container .content-wrap:before {
    left: 27.3%;
    margin-left: 0;
  }

  .main-slider .paging {
    left: auto;
    right: 20px;
    margin-left: 0;
  }

  .cover-event ul li .title {
    -webkit-line-clamp: 1;
  }

  .post-cover {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width:767px) {
  /* 로고 */
  #header .blog-header {
    margin: 0 !important;                /* ✅ 중앙 정렬 방지 */
    padding-left: 0 !important;
    transform: none !important;
    left: 0 !important;
    display: flex !important;
    align-items: center;
  }

  #header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 로고 왼쪽 / 버튼 오른쪽 */
    padding: 0 16px;
    height: 64px;
    position: relative;
    text-align: left !important; 
  }
  #header .logo-wrap {
    margin: 0 !important;
  }
  #header .blog-header a {
    display: inline-block;
    margin: 0 !important;
  }
  #header .blog-header img {
    display: block;
    height: 25px;
  }
  #header .util {
    display: none; /* 모바일에선 숨기거나 별도 처리 */
    top: 0;
    right: 0;
    width: 100%;
    padding: 24px 68px 24px 24px;
    box-sizing: border-box;
  }

  #header .util .search {
    float: right;
  }

  #header .util .search.on {
    z-index: 20;
    width: 100%;
  }

  #header .util .search.on input {
    float: right;
    width: 100%;
  }

  #header .util .profile {
    display: none;
  }

  #header .util .menu {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 300;
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    border-radius: 50%;
    text-indent: -999em;
    outline: none;
  }

  #header .util .menu span,
  #header .util .menu:before,
  #header .util .menu:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1px;
    margin: 0 0 0 -8px;
    background-color: #7f7f7f;
    transition: transform .5s;
    -webkit-transition: transform .5s;
  }

  #header .util .menu:before {
    margin-top: -6px;
  }

  #header .util .menu:after {
    margin-top: 6px;
  }
  /*모바일 전용 햄버거 버튼 */
.mobile-menu-button {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;          /* 막대 전체 폭 */
  height: 18px;         /* 막대 3개가 들어갈 총 높이 */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 9000;
}
.mobile-menu-button span {
  display: block;
  width: 100%;          /* 폭을 부모와 동일하게 */
  height: 3px;          /* 막대 두께 */
  background-color: #333;
  border-radius: 2px;
}


/* ✅ 모바일 전체 오버레이 메뉴 */
.mobile-gnb {
  display: none;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000; /* 검정 바탕 */
  padding: 80px 24px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  transition: opacity .25s ease;
  opacity: 0;
}

/* 펼쳤을 때 */
.mobile-gnb.on {
  display: block;
  opacity: 1;
}

/* 닫기 버튼 */
.mobile-gnb-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff; /* 흰색 */
  z-index: 100001;
}

/* 메뉴 리스트 */
.mobile-gnb ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.mobile-gnb ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* 메뉴 항목 */
.mobile-gnb li a {
  position: relative;
  display: block;
  padding: 16px 20px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.06em;
  text-decoration: none;
  transition: color .2s ease, font-weight .2s ease;
  border-bottom: none;
  background-color: transparent;
}

.mobile-gnb li a::after {
  content: none !important;
  position: absolute;
  bottom: 12px;
  left: 16px;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: width .3s ease;
}

/* 호버 효과 */
.mobile-gnb li a:hover {
  background-color: rgba(255, 255, 255, 0.08);  /* 밝아지는 효과 */
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.mobile-gnb li a:hover::after {
  width: calc(100% - 32px);
}

/* 모바일 유틸 영역 */
  /* 태블릿 유틸 영역 */
  .mobile-gnb .mobile-util{
    margin-top:24px;
    padding-left:24px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* 한 줄 전체가 클릭 가능 (아이콘 + 텍스트) */
  /* 한 줄 전체 클릭 영역(아이콘+라벨) */
  .mobile-gnb .mobile-util .btn-util{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:40px;
    text-decoration:none;
    color:#e0e0e0;
    /* 원형 테두리는 이제 a가 아니라 아이콘 span으로 이동 */
    border:0;
    padding:0;
  }

  /* 아이콘 원: 크기/테두리/가운데 정렬 고정 */
  .mobile-gnb .mobile-util .btn-util .ico-search,
  .mobile-gnb .mobile-util .btn-util .ico-home{
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    flex:0 0 40px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:20px 20px;
  }

  /* 라벨 */
  .mobile-gnb .mobile-util .btn-util .label{
    font-size:14px;
    letter-spacing:-0.2px;
    white-space:nowrap;
    color:#e0e0e0;
  }

  /* ✅ 아이콘 소스: URL 인코딩된 SVG (단일 라인, 파싱 안전) */
  .mobile-gnb .mobile-util .btn-util .ico-search{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  }
  .mobile-gnb .mobile-util .btn-util .ico-home{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 9.5L12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z'/%3E%3C/svg%3E");
  }


  /* Hover/Foucs 상태(선택사항) */
  .mobile-gnb .mobile-util a.btn-util:hover,
  .mobile-gnb .mobile-util a.btn-util:focus {
    border-color: rgba(255,255,255,0.35);
    outline: none;
  }
  /* GNB 숨김 */
  #gnb {
    display: none !important;
  }

  /* 오버레이 열릴 때 스크롤 잠금 */
  body.menu-open {
    overflow: hidden;
  }

  /* 오버레이 열릴 때 바디 스크롤 잠금 (선택) */
  body.menu-open {
    overflow: hidden;
  }
  /* 오버레이 열리면 햄버거 버튼 숨김(닫기 X만 보이게) */
  body.menu-open #header .mobile-menu-button{
    display: none !important;         /* 미디어쿼리 규칙 제압 */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
  #gnb {
    height: 69px;
  }

  #gnb ul {
    margin-left: 0;
  }

  #gnb ul li {
    padding: 0 24px;
  }

  #gnb ul li a {
    padding: 25px 0 24px;
  }
*/
  #container .content-wrap {
    padding: 0;
  }

  #container .content-wrap:before {
    content: none;
  }

  #content {
    float: none;
    width: auto;
    padding: 34px 24px 40px;
  }

  #aside {
    position: fixed;
    top: 0;
    right: -278px;
    z-index: 400;
    float: none;
    overflow: auto;
    width: 278px;
    height: 100%;
    padding: 94px 24px 40px;
    background-color: #fff;
    box-sizing: border-box;
    transition: left .5s;
    -webkit-transition: right .5s;
  }

  #aside .close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 300;
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    border-radius: 50%;
    text-indent: -999em;
    outline: none;
  }

  #aside .close span {
    display: none;
  }

  #aside .close:before,
  #aside .close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1px;
    margin: 0 0 0 -8px;
    background-color: #7f7f7f;
  }

  #aside .close:before {
    transform: rotate(-45deg);
  }

  #aside .close:after {
    transform: rotate(45deg);
  }

  #aside .profile {
    display: block;
    position: relative;
    margin-bottom: -40px;
  }

  #aside .profile:before {
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    background-color: #f5f5f5;
  }

  #aside .profile ul {
    position: relative;
    z-index: 10;
    text-align: center;
  }

  #aside .profile ul li {
    display: inline-block;
    padding: 16px 0 18px;
    font-size: 0.875em;
    color: #555;
    vertical-align: middle;
  }

  #aside .profile ul li a {
    display: inline-block;
    vertical-align: middle;
  }

  #aside .profile ul li:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 7px;
    margin: 0 20px 0 16px;
    background: url(./images/ico_package_2x.png) -100px -50px;
    background-size: 200px auto;
    vertical-align: middle;
  }

  #aside .profile ul li:first-child:before {
    content: none;
  }

  #footer {
    padding: 32px 24px 26px;
  }

  #footer p {
    margin-bottom: 10px;
    font-size: 11px;
  }

  #footer .order-menu {
    margin-bottom: 29px;
  }

  #footer .order-menu a {
    display: block;
    margin-bottom: 0;
    line-height: 1.75rem;
  }

  #footer .order-menu a:before {
    content: none;
  }

  #tt-body-index #content {
    padding: 0;
  }

  #tt-body-index #content>.inner {
    padding: 0 24px;
  }

  #tt-body-index #content>.inner:first-child {
    padding-top: 40px;
  }

  #tt-body-index.list-type-text #content>.inner:first-child {
    padding-top: 36px;
  }

  #tt-body-index .pagination {
    margin: 0 20px 40px;
  }

  #tt-body-page #content {
    padding-left: 0;
    padding-right: 0;
  }

  #tt-body-tag .tags,
  #tt-body-guestbook #content {
    padding-left: 0;
    padding-right: 0;
  }

  #tt-body-guestbook .post-header {
    margin: 0 24px 28px;
  }

  .layout-aside-left #aside {
    padding: 80px 20px 40px;
  }

  .mobile-menu #aside {
    right: 0;
  }

  .main-slider ul li {
    height: 400px;
  }

  .main-slider ul li .inner {
    padding-bottom: 40px;
    vertical-align: bottom;
  }

  .main-slider ul li .text {
    max-width: 100%;
    font-weight: 300;
    font-size: 1.75em;
    line-height: 2.25rem;
    -webkit-line-clamp: 3;
  }

  .main-slider ul li .btn {
    margin-top: 15px;
  }

  .main-slider .paging {
    top: 40px;
    left: 0;
    right: auto;
    bottom: 20px;
    width: 100%;
    height: 8px;
    padding: 0 19px;
    text-align: left;
    box-sizing: border-box;
  }

  .main-slider .paging button {
    display: inline-block;
    margin: 0 5px;
    vertical-align: top;
  }

  .cover-thumbnail-1 {
    margin-bottom: 40px;
    padding: 36px 24px 7px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-thumbnail-1 h2 {
    font-weight: 600;
  }

  .cover-thumbnail-1 .more {
    top: 40px;
    right: 24px;
  }

  .cover-thumbnail-1 ul {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-bottom: -39px;
  }

  .cover-thumbnail-1 ul li {
    float: none;
    width: 100%;
    margin-bottom: 30px;
    padding-left: 0;
  }

  .cover-thumbnail-1 ul li .title {
    margin-bottom: 4px;
  }

  .cover-thumbnail-2 {
    width: auto;
    margin: 0;
    padding: 37px 24px 38px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-thumbnail-2 h2 {
    font-weight: 600;
  }

  .cover-thumbnail-2 ul li figure {
    width: 98px;
    margin-left: 24px;
  }

  .cover-thumbnail-2 ul li .title {
    margin-bottom: 7px;
    padding-top: 3px;
    font-size: 1.125em;
  }

  .cover-thumbnail-2 ul li .excerpt {
    margin-bottom: 9px;
  }

  .cover-thumbnail-3 {
    width: auto;
    margin: 0;
    padding: 37px 24px 15px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-thumbnail-3 h2 {
    font-weight: 600;
    margin-bottom: 30px;
  }

  .cover-thumbnail-3 .prev {
    top: 37px;
    right: 54px;
  }

  .cover-thumbnail-3 .next {
    top: 37px;
    right: 24px;
  }

  .cover-thumbnail-3 ul {
    display: block;
    width: auto;
    margin-left: -16px;
  }

  .cover-thumbnail-3 ul li {
    width: 50%;
    padding-left: 16px;
    box-sizing: border-box;
  }

  .cover-thumbnail-4 {
    width: auto;
    margin: 0;
    padding: 37px 24px 9px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-thumbnail-4 h2 {
    font-weight: 600;
  }

  .cover-thumbnail-4 .prev {
    top: 37px;
    right: 54px;
  }

  .cover-thumbnail-4 .next {
    top: 37px;
    right: 24px;
  }

  .cover-thumbnail-4 ul {
    width: 100%;
    margin-left: 0;
  }

  .cover-thumbnail-4 ul li {
    width: 100%;
    margin-bottom: 27px;
    padding-left: 0;
  }

  .cover-thumbnail-4 ul li figure {
    margin-bottom: 7px;
  }

  .cover-thumbnail-4 ul li .title {
    margin-bottom: 8px;
  }

  .cover-thumbnail-4 ul li .excerpt {
    margin-bottom: 12px;
  }

  .cover-list {
    width: auto;
    margin: 0;
    padding: 37px 24px 12px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-list h2 {
    margin-bottom: 28px;
    font-weight: 600;
  }

  .cover-list .more {
    top: 37px;
    right: 24px
  }

  .cover-list ul li {
    margin-bottom: 26px;
  }

  .cover-list ul li .title {
    margin-bottom: 8px;
    font-size: 1em;
  }

  .cover-list ul li .excerpt {
    margin-bottom: 9px;
    -webkit-line-clamp: 4;
  }

  .cover-event {
    width: auto;
    margin: 0;
    padding: 37px 24px 24px;
    border-top: 8px solid #f5f5f5;
  }

  .cover-event h2 {
    font-weight: 600;
  }

  .cover-event ul {
    display: block;
    width: auto;
    margin-left: 0;
  }

  .cover-event ul li {
    float: none;
    width: auto;
    margin-bottom: 16px;
    padding-left: 0;
  }

  .cover-event ul li a {
    padding-bottom: 43.382352941176471%;
  }

  .cover-event ul li .title {
    -webkit-line-clamp: 3;
  }

  .cover-event ul li .more {
    display: none;
  }

  .cover-thumbnail-1:first-child {
    border-top: 0;
  }

  .post-header {
    padding-top: 2px;
  }

  .post-item {
    float: none;
    ;
    width: auto;
    margin-left: 0;
    margin-bottom: 30px;
  }

  .post-item .thum {
    margin-bottom: 7px;
  }

  .post-item .title {
    margin-bottom: 12px;
  }

  .post-item .excerpt {
    margin-bottom: 12px;
  }

  .pagination {
    margin-bottom: 0;
  }

  .pagination a {
    margin: 0 5px;
  }

  .list-type-vertical .post-item {
    margin-bottom: 30px;
  }

  .list-type-vertical .post-item .title {
    margin-bottom: 7px;
  }

  .list-type-thumbnail .post-item .thum img {
    width: 96px;
    margin-left: 25px;
  }

  .list-type-thumbnail .post-item .title {
    margin-bottom: 9px;
    padding-top: 3px;
    font-size: 1.125em;
  }

  .list-type-thumbnail .post-item .excerpt {
    margin-bottom: 11px;
  }

  .list-type-thumbnail .post-item.protected .thum {
    width: 96px;
    height: 128px;
    margin-left: 25px;
  }

  .list-type-text .post-header {
    margin-bottom: 28px;
  }

  .list-type-text .post-item {
    margin-bottom: 26px;
  }

  .list-type-text .post-item .title {
    margin-bottom: 10px;
  }

  .list-type-text .post-item .excerpt {
    margin-bottom: 12px;
    -webkit-line-clamp: 4;
  }

  .list-type-text .pagination {
    margin-top: 30px;
  }

  .post-cover {
    padding-left: 24px;
    padding-right: 24px;
  }

  .post-cover .inner {
    padding-bottom: 38px;
    vertical-align: bottom;
  }

  .post-cover .inner>h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .post-cover .category {
    margin-bottom: 13px;
  }

  .post-cover h1 {
    font-weight: 300;
  }

  .post-cover .meta {
    margin-top: 33px;
    font-size: 0.8125em;
  }

  .entry-content {
    padding: 0 24px;
  }

  .entry-content p {
    margin-bottom: 22px;
    line-height: 1.625rem;
  }

  .entry-content figure {
    margin-top: 6px !important;
  }

  .entry-content .protected_form input {
    width: 163px;
  }

  #content .another_category {
    margin: 40px 0 37px !important;
  }

  .container_postbtn {
    margin: 35px 0 37px;
  }


  .tags {
    margin-bottom: 25px;
    padding: 0 24px;
  }

  .tags h2 {
    margin-bottom: 19px;
  }

  .page-nav {
    margin: 32px 24px 32px;
    padding: 25px 0 25px;
  }

  .page-nav a {
    line-height: 1.6875rem;
  }

  .related-articles {
    margin-bottom: 21px;
    padding: 0 24px;
  }

  .related-articles h2 {
    margin-bottom: 19px;
  }

  .related-articles ul {
    width: 103.571428571428571%;
    margin-left: -3.571428571428571%;
  }

  .related-articles ul li {
    width: 50%;
    margin-bottom: 15px;
    padding-left: 3.448275862068966%;
  }

  .related-articles ul li figure {
    margin-bottom: 9px;
  }

  .related-articles ul li .title {
    height: 2.8em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .comments {
    margin: 0;
  }

  .comments iframe {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .comments h2 {
    margin: -3px 0 -1px;
    padding: 0 24px;
  }

  .comment-list {
    margin-bottom: 32px;
    border: 0;
  }

  .comment-list>ul>.tt_more_preview_comments_wrap {
    margin-top: 21px;
    padding: 0 24px;
  }

  .comment-list ul li {
    padding: 34px 0 28px;
  }

  .comment-list ul li .author-meta {
    margin-bottom: 6px;
    padding-right: 35px;
  }

  .comment-list ul li .author-meta .avatar {
    width: 30px;
    height: 30px;
    margin-left: -42px;
  }

  .comment-list ul li .author-meta .nickname {
    font-weight: 400;
  }

  .comment-list ul li .author-meta .control {
    top: -2px;
    right: 13px;
  }

  .comment-list ul li .author-meta,
  .comment-list ul li p {
    max-width: none;
    padding: 0 66px;
  }

  .comment-list ul li ul {
    margin-top: 27px;
    padding: 19px 0 12px;
  }

  .comment-list ul li ul li {
    padding: 15px 0 16px;
  }

  .comment-list ul li ul li p {
    max-width: none;
  }

  .comment-list ul li ul li .author-meta {
    margin-bottom: 6px;
  }

  .comment-list ul li ul li .author-meta .avatar {
    width: 30px;
  }

  .comment-form {
    margin-bottom: 40px;
    padding: 0 24px;
  }

  .comment-form textarea {
    padding-right: 32px;
  }

  .comment-form .secret {
    left: 24px;
  }

  .layout-aside-left #content {
    float: none;
  }

  #tt-body-index.promotion-mobile-hide .main-slider {
    display: none;
  }

  #content .another_category th {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

@media screen and (max-width: 767px) {
  #tt-body-index .post-header {
    padding-top: 36px;
    padding-left: 24px;
  }
}

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


.tt-comment-cont .tt-box-total .tt_txt_g {
  font-size: 14px;
}

.tt-comment-cont .tt-box-total .tt_num_g {
  font-size: 14px;
  color: #777;
}

.tt-comment-cont .tt-wrap-cmt .tt-link-user {
  font-size: 14px;
}

.tt-comment-cont .tt-wrap-cmt .tt_desc {
  font-size: 14px;
  color: #555;
}

.tt-comment-cont .tt-txt-mention {
  color: #555;
}

.tt-comment-cont .tt-btn_register {
  width: 100px;
  height: 36px;
  background-color: #333;
  font-size: 14px;
  color: #fff;
  border-radius: 0;
  border-color: #333;
}

.tt-comment-cont .tt-btn_register:hover {
  background-color: #04BEB8;
  border-color: #04BEB8;
}

.tt-comment-cont .tt-btn_register:focus {
  background-color: #04BEB8;
  border-color: #04BEB8;
}

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

@media screen and (max-width: 767px) {
  .tt-comments-wrap {
    padding: 0 24px;
  }
}

/* 전체 공통 */
#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;
  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;
}

#article-view figure[data-ke-type='opengraph'] .og-desc {
  margin: 0px;
  max-width: 467px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: Pretendard;
  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, 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;
}

/* 사이드바 숨기기 */
#sidebar {
    display: none !important;
}

/* 콘텐츠 영역 확장 */
#content {
    width: 100% !important;
    max-width: none
    margin: 0 auto;
}

/* 사이드바 보더 제거 */
#sidebar {
    border: none !important;
}

/* 콘텐츠 컨테이너 테두리 제거 */
.container, #main, .content-wrapper {
    border: none !important;
}

/* 레이아웃 사이 줄 제거 */
#wrap, #content {
    border-left: none !important;
    border-right: none !important;
}
/* 카테고리 페이지에서 태그 숨기기 */
#tt-body-category .tags {
  display: none !important;
}
/* 게시글 하단 중복 태그 숨기기 */
#tt-body-page .tags:last-of-type {
  display: none;
}
/* 아티클 탭 - 모던 스타일 */
.article-tab-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px;
  margin: 40px 0 30px;
}

.article-tab {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.3px;
  position: relative;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-tab:hover {
  color: #000000;
  text-decoration: none;

}

.article-tab.active {
  color: #000;
  font-weight: 600;
}

.article-tab.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #111;
  border-radius: 1px;
}
/* 전역 태그 버블 */
.post-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.post-tags .tag {
  background-color: #f3f3f3;
  color: #666;
  font-size: 0.85em;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 12px;
} 
.profile {
  display: flex;
  align-items: center;
}

.home-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;                /* 검색 버튼과 동일 */
  padding: 0 12px;             /* 알약형 좌우 여백 */
  border: 1px solid #eee;
  border-radius: 16px;         /* 32px 높이 기준, 반 = 16px */
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  margin-left: 8px; 
}

.home-link-btn:hover,
.home-link-btn:focus,
.home-link-btn:active {
  text-decoration: none;   /* ✅ 모든 상태에서 밑줄 제거 */
}

/* 기본 스타일 (모든 화면에서 적용) */
.floating-toc {
  position: fixed;
  top: 100px;
  left: 20px;
  width: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 14px;
  z-index: 999;
  display: none !important;   /* 확실하게 숨기기 */
}

/* PC에서만 show 클래스 적용 */
@media(min-width: 1280px) {
  .floating-toc.show {
  display: block !important;  /* PC에서만 강제 표시 */
  }
}

/* TOC 내부 요소 스타일 */
.floating-toc h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.floating-toc ol {
  margin: 0;
  padding-left: 20px;
}

.floating-toc ul {
  list-style: none;
  padding-left: 0;
}

.floating-toc li {
  margin: 5px 0;
}

.floating-toc .toc-sub {
  padding-left: 15px;
}

.floating-toc a {
  color: #333;
  text-decoration: none;
}

.floating-toc a:hover {
  text-decoration: underline;
}

/* 제목 스크롤 위치 보정 */
.entry-content h2,
.entry-content h3 {
  scroll-margin-top: 90px;
}
span.txt_like.uoc-count {
  font-size: 0 !important; /* 숫자만 안 보이게 */
}

/* 2025-08-13: post-cover가 #container를 기준으로 잡히도록
   글 보기(#tt-body-page)에서는 content-wrap의 position을 해제 */
#tt-body-page #container .content-wrap {
  position: static !important;
}
/* 2025-08-21 PC/태블릿 공통: 푸터 위 여백 제거 */
#content {
  padding-bottom: 0 !important;
}
/* 2025-08-22 게시글 내 구독하기 버튼 숨기기 */
.btn_menu_toolbar.btn_subscription {
  display: none !important;
}

/* 2025-09-04 가로스크롤 없애기 */
html, body { overflow-x: clip; max-width:100% !important; } 
body {
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
}


/* 가이드선(필요시) before(좌) after(우) 
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  width: 0;
  border-left: 1px dashed red;
  z-index: 9999;
  pointer-events: none;
}

body::before {
  left: 20px;
}

body::after {
  right: 20px;
}*/

/* 2025.09.04 모바일 환경에서 가로 스와이프 차단 */
@media (max-width:767px){
  /* 래퍼에서 가로 넘침 ‘무조건’ 차단 */
  .main-slider-wrap,
  .main-slider,
  .cover-thumbnail-3,
  .cover-thumbnail-3 ul {
    overflow: hidden !important;       /* visible !important 무력화 */
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;           /* 세로만 허용 */
    max-width: 100% !important;
  }

  /* 핵심: 트랙(ul)을 ‘가로 나열’에서 ‘세로 1장’ 구조로 강제 */
  .main-slider ul,
  .cover-thumbnail-3 ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;                /* flex/inline-block 트릭 해제 */
    white-space: normal !important;           /* nowrap 해제 */
    transform: none !important;               /* translateX/3d 이동 무효화 */
  }

  /* 각 슬라이드/카드도 화면폭 고정 + 가로 정렬 해제 */
  .main-slider ul li,
  .cover-thumbnail-3 ul li,
  .main-slider .promotion-split {             /* li에 inline style="display:flex" 상쇄 */
    display: block !important;                /* ← flex 무력화(구조적 변경) */
    width: 100% !important;
    float: none !important;
    flex: none !important;
    box-sizing: border-box;
    position: relative !important;            /* absolute 트릭 무력화 */
    left: 0 !important; right: 0 !important;  /* inline left/right 초기화 */
  }

  /* 이미지/피겨가 부모를 넘지 않도록 */
  .main-slider img,
  .cover-thumbnail-3 img,
  .main-slider figure,
  .cover-thumbnail-3 figure {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    -webkit-user-drag: none;
    user-select: none;
  }
}

/* =========================
   2025.09.04 cover-thumbnail-3 가로 스와이프 완전 차단
   ========================= */
@media (max-width:767px){

  /* 1) 섹션/트랙에서 가로 넘침 자체를 잘라냄 */
  .cover-thumbnail-3,
  .cover-thumbnail-3 ul {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;         /* 세로만 허용 */
    max-width: 100% !important;
  }
  /* 2) 트랙을 ‘가로 나열’에서 ‘세로 1장’ 구조로 강제 */
  .cover-thumbnail-3 ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;              /* inline-block/flex 트릭 제거 */
    white-space: normal !important;         /* nowrap 제거 */
    transform: none !important;             /* translateX 남아있으면 무효화 */
  }
   /*  인라인 스타일로 남은 left/right/translateX 무력화 (안전용) */
  .cover-thumbnail-3 [style*="translateX"],
  .cover-thumbnail-3 [style*="left:"],
  .cover-thumbnail-3 [style*="right:"] {
    transform:none !important; left:auto !important; right:auto !important;
  }
  
}