@charset "utf-8";


/*─────────────────────────────────────────────
 🌲 Dark-Green palette – 전역 변수
────────────────────────────────────────────*/
:root{
  --deep-green:#12461e;   /* 가장 짙은 초록 */
  --mid-green :#1e6b34;   /* 헤드라인·버튼 기본 */
  --lite-green:#8fc29d;   /* 라이트/테두리 */
  --hover-green:#1f9a4c;  /* 버튼 hover */
  --table-hover:#e8f5e9;  /* 표 hover 배경 */
}


/*─────────────────────────────────────────────
 01. Web Font
────────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');


/*─────────────────────────────────────────────
 02. Type Selector Reset
────────────────────────────────────────────*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
body{
  -webkit-text-size-adjust:100%;
  font-family:'AppleSDGothicNeo',Pretendard-Regular,sans-serif;
  font-size:1em;line-height:1.25;color:#555;
}
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;}


/*─────────────────────────────────────────────
 03. 공통 Heading 커스텀
────────────────────────────────────────────*/


/* H1 — 페이지 대제목 */
body h1:not(.sidebar h1){
  display:block;width:100%;margin:48px 0 28px;padding:14px 18px;
  background:var(--deep-green);color:#fff;font-size:1.8em;font-weight:700;
  border-radius:6px;
}


/* H2 — 풀 와이드 컬러박스 */
body h2:not(.sidebar h2){
  display:block;width:100%;box-sizing:border-box;
  margin:80px 0 35px;padding:10px 18px;
  background:var(--mid-green);color:#fff !important;
  font-size:1.45em;font-weight:700;border-radius:6px;
}


/* H3 — 이중 바 + 얇은 하단선 */
body h3:not(.sidebar h3){
  margin:60px 0 35px;padding:8px;
  font-size:1.2rem !important;font-weight:600 !important;line-height:1.35;
  color:var(--mid-green);
  border-left:7px solid var(--deep-green);
  border-bottom:2px solid var(--lite-green);
  background:#fff;border-top:none;
}


/* H4 — 얇은 왼쪽 바 */
body h4:not(.sidebar h4){
  margin:35px 0 25px;padding:5px 10px;font-size:1.1rem !important;
  font-weight:600 !important;line-height:1.35;
  color:var(--lite-green);
  border-left:5px solid #858484;border-bottom:2px solid var(--lite-green);
  background:#fcfcfc;border-top:none;
}


/*─────────────────────────────────────────────
 04. 모바일 Heading 조정
────────────────────────────────────────────*/
@media (max-width:767px){
  body h2:not(.sidebar h2),#article-view h2{
    font-size:1.3em;padding:10px 14px;margin:48px 0 20px;
  }
  body h3:not(.sidebar h3),#article-view h3{
    font-size:1.1em;padding-left:2em;margin:40px 0 18px;
  }
}


/*─────────────────────────────────────────────
 05. 형광펜 밑줄
────────────────────────────────────────────*/
u{display:inline;text-decoration:none;box-shadow:inset 0 -8px 0 #FFEB3B;}


/*─────────────────────────────────────────────
 06. 버튼 (UI component v3)
────────────────────────────────────────────*/
.button{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  background:var(--mid-green);color:#fff !important;font-size:18px;font-weight:700;
  padding:14px 18px;border:none;border-radius:6px;cursor:pointer;
  text-decoration:none !important;position:relative;overflow:hidden;
  transition:background-color .25s ease,transform .25s ease,font-size .25s ease;
}
.button::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:rgba(255,255,255,.35);transform:skewX(-45deg);
  animation:slide-glow 2.8s infinite;
}
.button::after{content:'👉';margin-right:8px;display:inline-block;
  transition:transform .25s ease;}
.button:hover{
  background:var(--hover-green);transform:scale(1.06);font-size:19px;
}
.button:hover::after{animation:finger-wiggle .6s ease-in-out infinite alternate;}
@keyframes slide-glow{0%{left:-100%}50%{left:100%}100%{left:200%}}
@keyframes finger-wiggle{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@media(max-width:767px){.button{font-size:16px;padding:12px 14px;}}


/*─────────────────────────────────────────────
 07. 목차 TOC
────────────────────────────────────────────*/
.toc-container{
  background:#f9fff9;border:2px solid #e7fce7;border-radius:8px;
  padding:12px;margin-bottom:24px;box-shadow:0 4px 8px rgba(0,0,0,.1);
  text-align:center;font-size:.9rem;max-width:80%;margin:0 auto;
  animation:fade-in 1s ease-in;
}
.toc-title{
  font-size:18px;font-weight:bold;color:var(--deep-green);
  margin-bottom:12px;text-align:center;text-transform:uppercase;
  letter-spacing:1px;animation:bounce 2s infinite;
}
.toc-list{list-style:none;padding:0;margin:0 auto;display:inline-block;}
.toc-list li{margin-bottom:8px;text-align:center;animation:slide-in .5s both;}
.toc-list li a{
  text-decoration:none;color:var(--deep-green);font-weight:bold;font-size:16px;
  padding:6px 12px;display:inline-block;border-radius:4px;
  transition:background-color .3s ease,color .3s ease,transform .2s ease;
  font-family:'Arial',sans-serif;text-transform:capitalize;
}
.toc-list li a:hover{background:#e7fce7;color:#055202;transform:scale(1.1);}
@keyframes fade-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}
 40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}
@keyframes slide-in{from{transform:translateX(-20px);opacity:0}
 to{transform:translateX(0);opacity:1}}


/*─────────────────────────────────────────────
 (이하 본문 CSS 계속)
────────────────────────────────────────────*/
/*─────────────────────────────────────────────
 08. 내부 링크 카드
────────────────────────────────────────────*/
.link-card{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;
  border-radius:12px;padding:16px;
  background:linear-gradient(135deg,#f9f9f9,#e0f7fa,#fbe9e7);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  max-width:100%;margin:16px auto;cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease,opacity .6s ease;
  opacity:0;
}
.link-card:hover{transform:translateY(-6px);box-shadow:0 8px 16px rgba(0,0,0,.2);}
.thumbnail img{
  width:120px;height:120px;border-radius:12px;object-fit:cover;
  transition:transform .3s ease;
}
.thumbnail img:hover{transform:scale(1.1);}
.description{flex:1;min-width:200px;}
.description p.title{
  font-size:18px;font-weight:bold;margin:0 0 8px;
  background:linear-gradient(to right,#42a5f5,#1e6b34);/* blue→green */
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:1px 1px 2px rgba(0,0,0,.1);
}
.description p.cta{
  font-size:14px;color:#007BFF;font-weight:bold;text-decoration:underline dotted;
  transition:color .3s ease,transform .3s ease;
}
.description p.cta:hover{color:#0056b3;transform:scale(1.05);}
@media(max-width:768px){
  .link-card{flex-direction:row-reverse;align-items:center;}
  .thumbnail img{width:100px;height:100px;}
}


/*─────────────────────────────────────────────
 09. 표(테이블) – Deep-Green Theme
────────────────────────────────────────────*/
table{
  width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;background:#fff;
  border:1px solid var(--deep-green);
}
table th,table td{
  font-weight:700;padding:12px 14px;border-bottom:1px solid var(--deep-green);
  border-right:1px solid var(--deep-green);text-align:center;vertical-align:middle;line-height:1.45;
  color:var(--deep-green);
}
table th:last-child,table td:last-child{border-right:none;}
table tr:last-child td{border-bottom:none;}
table th{
  background:var(--mid-green);color:#fff;
}
table tbody tr:hover{background:var(--table-hover);}
.left-align  td,.left-align  th{text-align:left!important;}
.center-align td,.center-align th{text-align:center!important;}
@media(max-width:767px){
  table{font-size:14px;}
  table th,table td{padding:10px 8px;}
}


/*─────────────────────────────────────────────
 10. “click-me” & “myButton” – 동일 스타일 상속
────────────────────────────────────────────*/
.click-me,.myButton{
  display:inline-block;max-width:100%;box-sizing:border-box;text-align:center;
  background:var(--mid-green);color:#fff !important;font-size:18px;font-weight:700;
  padding:14px 18px;border:none;border-radius:6px;cursor:pointer;
  text-decoration:none !important;position:relative;overflow:hidden;
  transition:background-color .25s ease,transform .25s ease,font-size .25s ease;
}
.click-me::before,.myButton::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:rgba(255,255,255,.35);transform:skewX(-45deg);
  animation:slide-glow 2.8s infinite;
}
.click-me::after,.myButton::after{
  content:'👉';margin-right:8px;display:inline-block;transition:transform .25s ease;
}
.click-me:hover,.myButton:hover{
  background:var(--hover-green);transform:scale(1.06);font-size:19px;
}
.click-me:hover::after,.myButton:hover::after{
  animation:finger-wiggle .6s ease-in-out infinite alternate;
}
@media(max-width:767px){
  .click-me,.myButton{font-size:16px;padding:12px 14px;}
}


/*─────────────────────────────────────────────
 11. H1 (본문) – 배경 제거 + Green Text
────────────────────────────────────────────*/
body .entry-content h1:not(.sidebar h1),
body h1:not(.sidebar h1){
  background:none !important;color:var(--mid-green) !important;
  font-weight:800 !important;text-align:center !important;border:none !important;
}


/*─────────────────────────────────────────────
 12. 전역 링크·이미지 Reset & 기본 레이아웃
────────────────────────────────────────────*/
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;}
button,input[type=submit],input[type=reset],input[type=button]{cursor:pointer;overflow:visible;}
img,fieldset{border:none;}
ul li{list-style:none;}


/*─────────────────────────────────────────────
 13. Header / Navigation
────────────────────────────────────────────*/
#header{border-bottom:1px solid #eee;}
#header .inner{position:relative;max-width:1080px;margin:0 auto;}
#header p{
  padding:23px 0;font-family:'Nanum Myeongjo';font-weight:800;font-size:1.75em;
  line-height:32px;letter-spacing:-.2px;color:var(--deep-green);
}
#header p a{display:inline-block;height:32px;color:var(--deep-green);}
#header p img{width:auto;height:32px;}
#header .util{position:absolute;top:24px;right:0;}
#header .util .search{
  position:relative;float:left;overflow:hidden;width:32px;background:#fff;transition:width .5s;
  box-sizing:border-box;
}
#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%;background:#fff url(./images/ico_package.png) no-repeat 0 0;cursor:pointer;
}
#header .util .search input{
  width:32px;height:32px;padding:5px 15px;border:0;background:transparent;font-size:.875em;outline:none;
}
#header .util .search.on{width:200px;}
#header .util .search.on:before{content:none;}
#header .util .search.on input{width:100%;border:1px solid #eee;border-radius:32px;}
#header .util .search button{
  position:absolute;top:1px;right:1px;z-index:10;width:30px;height:30px;border:1px solid #eee;
  border-radius:50%;background:#fff url(./images/ico_package.png) no-repeat -1px -1px;text-indent:-999em;
}
#header .util .profile{position:relative;float:left;margin-left:14px;}
#header .util .profile button{
  display:block;width:32px;height:32px;border:1px solid #eee;border-radius:50%;overflow:hidden;
}
#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,.1);}
#header .util .profile ul li a{
  display:block;margin-top:-1px;border:1px solid #eee;background:#fff;text-align:center;
  font-size:.875em;line-height:2.3125rem;color:#777;text-decoration:none;
}
#header .util .profile ul li a:hover{background:#fafafa;color:var(--deep-green);}
#header .util .menu{display:none;}


#gnb{height:66px;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;}
#gnb::-webkit-scrollbar{display:none;}
#gnb ul{display:inline-block;margin-left:-30px;}
#gnb ul li{float:left;padding:0 26px;}
#gnb ul li a{
  position:relative;display:block;padding:22px 4px 24px;color:#777;text-decoration:none;
}
#gnb ul li a:hover,#gnb ul li.current a{color:var(--deep-green);}
#gnb ul li.current a:after,#gnb ul li a:hover:after,#gnb ul li a:focus:after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--deep-green);
}


/*─────────────────────────────────────────────
 (다음 블록에서 #container 부터 계속됩니다)
────────────────────────────────────────────*/
/*─────────────────────────────────────────────
 14. Layout: Container / Content / Aside / Footer
────────────────────────────────────────────*/
#container{position:relative;}
#container .content-wrap{
  max-width:1080px;margin:0 auto;padding:0 20px;
}
#container .content-wrap:before{
  content:'';position:absolute;top:0;left:50%;z-index:10;width:1px;height:100%;
  margin-left:255px;background:#eee;
}
#container .content-wrap:after{content:'';display:block;clear:both;height:0;visibility:hidden;}


#content{float:left;width:68.5185%;padding:72px 0 60px;box-sizing:border-box;}
#content>.inner:after{content:'';display:block;clear:both;height:0;visibility:hidden;}


#aside{float:right;width:21.2963%;padding:75px 0 32px;box-sizing:border-box;}
#aside .close,#aside .profile{display:none;}


#footer{padding:38px 0 28px;border-top:1px solid #eee;}
#footer .inner{position:relative;max-width:1080px;margin:0 auto;}
#footer p{margin-bottom:10px;font-size:.875em;color:#777;}
#footer .order-menu a{
  display:inline-block;margin-bottom:23px;font-size:.8125em;color:#555;vertical-align:middle;
}
#footer .order-menu a:hover{color:var(--deep-green);}
#footer .order-menu a:before{
  content:'';display:inline-block;width:2px;height:2px;margin:0 20px 2px 15px;
  background:#d2d2d2;vertical-align:middle;
}
#footer .order-menu a:first-child:before{content:none;}
#footer .page-top{
  position:absolute;top:0;right:0;width:30px;height:30px;border:1px solid #eee;border-radius:50%;
  background:#fff url(./images/ico_package.png) no-repeat -100px -200px;text-indent:-999em;
}
#footer .page-top:hover{background-color:#757575;background-position-x:-150px;}


/*─────────────────────────────────────────────
 15. Cover – Main Slider
────────────────────────────────────────────*/
.main-slider{display:none;position:relative;top:-1px;z-index:20;overflow:hidden;width:100%;background:#cbcbcb;}
.main-slider ul{position:relative;}
.main-slider ul li{
  display:table;width:100%;height:340px;background-position:50% 50%;background-size:cover;
}
.main-slider ul li a{
  display:table;width:100%;height:100%;background:rgba(0,0,0,.15);text-decoration:none;
}
.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.235;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  color:#fff;
}
.main-slider ul li .btn{
  display:block;width:118px;height:35px;margin-top:36px;border-radius:35px;line-height:35px;
  background:#fff;color:#555;text-align:center;
}
.main-slider ul li .btn:hover{background:var(--hover-green);color:#fff;}
.main-slider .paging{
  position:absolute;top:50%;left:50%;z-index:10;margin-left:447px;transform:translateY(-50%);
}
.main-slider .paging button{
  display:block;width:8px;height:8px;margin:10px 0;text-indent:-999em;border-radius:50%;
  background:rgba(255,255,255,.4);
}
.main-slider .paging .current{background:#fff;}


/*─────────────────────────────────────────────
 16. Cover Blocks – Thumbnail Type 1
────────────────────────────────────────────*/
.cover-thumbnail-1{position:relative;margin-bottom:77px;}
.cover-thumbnail-1 h2{margin-bottom:19px;font-weight:500;font-size:1em;color:#555;}
.cover-thumbnail-1 ul{
  display:inline-block;width:103.3784%;margin-left:-3.3784%;margin-bottom:-40px;vertical-align:top;
}
.cover-thumbnail-1 ul li{
  float:left;width:33.3333%;padding-left:3.26797%;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{text-decoration:underline;}
.cover-thumbnail-1 ul li figure{
  display:block;height:0;margin-bottom:9px;padding-bottom:130.435%;background:#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:.75em;color:#999;}
.cover-thumbnail-1 .more{
  position:absolute;top:4px;right:0;font-weight:300;font-size:.875em;color:#999;
}


/*─────────────────────────────────────────────
 17. Cover Blocks – Thumbnail Type 2
────────────────────────────────────────────*/
.cover-thumbnail-2{position:relative;overflow:hidden;width:100%;margin-bottom:77px;}
.cover-thumbnail-2 h2{
  margin-bottom:28px;padding-bottom:19px;border-bottom:1px solid #eee;font-weight:500;font-size:1em;color:#555;
}
.cover-thumbnail-2 ul li{overflow:hidden;margin-top:31px;}
.cover-thumbnail-2 ul li a{display:block;text-decoration:none;}
.cover-thumbnail-2 ul li a:hover .title{text-decoration:underline;}
.cover-thumbnail-2 ul li figure{float:right;width:128px;margin-left:57px;}
.cover-thumbnail-2 ul li figure img{width:100%;height:auto;border:1px solid #f1f1f1;box-sizing:border-box;}
.cover-thumbnail-2 ul li .title{
  display:block;overflow:hidden;max-width:95%;margin-bottom:10px;padding-top:7px;text-overflow:ellipsis;
  white-space:nowrap;font-size:1.25em;line-height:1.4;
}
.cover-thumbnail-2 ul li .excerpt{
  display:block;overflow:hidden;max-width:95%;margin-bottom:20px;text-overflow:ellipsis;font-size:.875em;
  line-height:1.5rem;color:#999;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.cover-thumbnail-2 ul li .meta{display:block;font-size:.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:#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:31px;padding:12px 0 11px;border:1px solid #eee;text-align:center;
  font-size:.875em;color:#999;
}


/*─────────────────────────────────────────────
 18. Cover Blocks – Thumbnail Type 3
────────────────────────────────────────────*/
.cover-thumbnail-3{position:relative;margin-bottom:77px;}
.cover-thumbnail-3 h2{margin-bottom:19px;font-weight:500;font-size:1em;color:#555;}
.cover-thumbnail-3 ul{
  position:relative;display:inline-block;width:103.3784%;margin-left:-3.3784%;margin-bottom:-25px;vertical-align:top;
}
.cover-thumbnail-3 ul li{
  float:left;width:20%;margin-bottom:22px;padding-left:3.26797%;box-sizing:border-box;
}
.cover-thumbnail-3 ul li a{display:block;text-decoration:none;}
.cover-thumbnail-3 ul li a:hover .title{text-decoration:underline;}
.cover-thumbnail-3 ul li figure{
  display:block;width:100%;height:0;margin-bottom:11px;padding-bottom:129.688%;background:#f8f8f8;
}
.cover-thumbnail-3 ul li figure img{width:100%;height:auto;border:1px solid #f1f1f1;box-sizing:border-box;}
.cover-thumbnail-3 ul li .title{
  display:block;overflow:hidden;width:95%;text-overflow:ellipsis;white-space:nowrap;font-size:.8125em;line-height:1.4;
}
.cover-thumbnail-3 button{
  position:absolute;top:-1px;width:24px;height:24px;border:1px solid #eee;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{background-color:#757575;background-position-y:-74px;}


/*─────────────────────────────────────────────
 19. Cover Blocks – Thumbnail Type 4
────────────────────────────────────────────*/
.cover-thumbnail-4{position:relative;margin-bottom:17px;}
.cover-thumbnail-4 h2{margin-bottom:19px;font-weight:500;font-size:1em;color:#555;}
.cover-thumbnail-4 ul{
  position:relative;display:inline-block;width:103.3784%;margin-left:-3.3784%;vertical-align:top;
}
.cover-thumbnail-4 ul li{
  float:left;width:33.3333%;min-height:283px;padding-left:3.26797%;margin:0 0 55px;box-sizing:border-box;
}
.cover-thumbnail-4 ul li a{display:block;text-decoration:none;}
.cover-thumbnail-4 ul li a:hover .title{text-decoration:underline;}
.cover-thumbnail-4 ul li figure{
  display:block;width:100%;height:0;margin-bottom:60.8696%;background:#f8f8f8;
}
.cover-thumbnail-4 ul li figure img{width:100%;height:auto;}
.cover-thumbnail-4 ul li .title{
  display:block;overflow:hidden;max-width:95%;margin-bottom:4px;padding-top:9px;text-overflow:ellipsis;
  white-space:nowrap;line-height:1.4;
}
.cover-thumbnail-4 ul li .excerpt{
  display:block;overflow:hidden;max-width:95%;margin-bottom:15px;text-overflow:ellipsis;font-size:.8125em;
  line-height:1.5rem;color:#999;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.cover-thumbnail-4 ul li .meta{display:block;font-size:.75em;color:#999;}
.cover-thumbnail-4 ul li .meta span:before{
  content:'';display:inline-block;width:2px;height:2px;margin:7px 8px 9px 5px;background:#d2d2d2;vertical-align:top;
}
.cover-thumbnail-4 ul li .meta span:first-child:before{content:none;}
.cover-thumbnail-4 button{
  position:absolute;top:-1px;width:24px;height:24px;border:1px solid #eee;border-radius:50%;
  background:url(./images/ico_package.png) no-repeat 0 -50px;text-indent:-999em;outline:none;
}
.cover-thumbnail-4 .prev{right:30px;}
.cover-thumbnail-4 .next{right:0;background-position-x:-50px;}
.cover-thumbnail-4 button:hover{background-color:#757575;background-position-y:-74px;}


/*─────────────────────────────────────────────
 20. Cover – List & Event Blocks
────────────────────────────────────────────*/
.cover-list{position:relative;overflow:hidden;width:100%;margin-bottom:42px;}
.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{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:.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:.75em;color:#999;}
.cover-list .more{
  position:absolute;top:4px;right:0;font-weight:300;font-size:.875em;color:#999;
}


.cover-event{margin-bottom:57px;}
.cover-event h2{margin-bottom:19px;font-weight:500;font-size:1em;color:#555;}
.cover-event ul{
  display:inline-block;width:102.7027%;margin-left:-2.7027%;vertical-align:top;
}
.cover-event ul li{
  float:left;width:50%;padding-left:2.63158%;margin:0 0 20px;box-sizing:border-box;
}
.cover-event ul li a{
  position:relative;display:block;padding-bottom:33.3333%;border:1px solid #eee;background:#757575 no-repeat 50% 50%;
  background-size:cover;text-decoration:none;color:#555;
}
.cover-event ul li a:hover{color:var(--deep-green);}
.cover-event ul li a:before{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.15);
}
.cover-event ul li .title{
  position:absolute;top:15%;left:24px;z-index:30;overflow:hidden;max-width:60%;margin-bottom:7px;padding-top:9px;
  text-overflow:ellipsis;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cover-event ul li .more{
  position:absolute;bottom:20.8333%;left:24px;z-index:30;text-decoration:underline;font-size:.875em;
  color:rgba(255,255,255,.6);
}


/*─────────────────────────────────────────────
 21. Post Items & Pagination
────────────────────────────────────────────*/
.post-header{padding-top:4px;}
.post-header p{margin-bottom:18px;font-size:1em;line-height:1.375;}
.post-header p em{margin-left:7px;font-style:normal;color:var(--hover-green);}


.post-item{float:left;width:31.0811%;margin:0 0 58px 3.37838%;}
.post-item:nth-child(3n+1){clear:both;margin-left:0;}
.post-item a{display:block;text-decoration:none;}
.post-item a:hover .title{text-decoration:underline;}
.post-item .thum{
  position:relative;display:block;overflow:hidden;width:100%;height:0;margin-bottom:5px;
  padding-bottom:60.8696%;background:#f8f8f8;
}
.post-item .thum img{width:100%;height:auto;transform:translateY(-25%);}
.post-item .title{
  display:block;overflow:hidden;max-width:98%;margin-bottom:4px;padding-top:9px;text-overflow:ellipsis;
  white-space:nowrap;line-height:1.4;
}
.post-item .excerpt{
  display:block;overflow:hidden;max-width:95%;margin-bottom:15px;text-overflow:ellipsis;font-size:.8125em;
  line-height:1.5rem;color:#999;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.post-item .meta{display:block;font-size:.75em;color:#999;}
.post-item .meta span:before{
  content:'';display:inline-block;width:2px;height:2px;margin:0 8px 0 5px;background:#d2d2d2;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;
}


.pagination{margin-bottom:60px;text-align:center;}
.pagination a{display:inline-block;margin:0 12px;font-size:.875em;line-height:1.5rem;color:#999;vertical-align:top;}
.pagination .selected{color:var(--deep-green);}
.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:.875em;color:#999;
}


/*─────────────────────────────────────────────
 22. Tags List & Page Navigation
────────────────────────────────────────────*/
.tags{margin-bottom:45px;font-size:0;}
.tags:after{content:'';display:block;clear:both;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;color:#555;vertical-align:middle;
}
.tags a:hover{color:var(--deep-green);}


.page-nav{margin:52px 0 60px;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:.875em;
  line-height:2.125rem;color:#555;
}
.page-nav a:hover{color:var(--deep-green);}
.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;
}


/*─────────────────────────────────────────────
 23. Related Articles
────────────────────────────────────────────*/
.related-articles{margin-bottom:55px;}
.related-articles h2{margin-bottom:15px;font-weight:600;font-size:1em;}
.related-articles ul{
  display:inline-block;width:101.6216%;margin-left:-1.62162%;vertical-align:top;
}
.related-articles ul li{
  float:left;width:25%;padding-left:1.62162%;box-sizing:border-box;
}
.related-articles ul li:first-child{margin-left:0;}
.related-articles ul li a{color:#555;}
.related-articles ul li a:hover{color:var(--deep-green);}
.related-articles ul li figure{
  display:block;width:100%;height:0;margin-bottom:9px;padding-bottom:68.1818%;background:#f8f8f8;
}
.related-articles ul li figure img{width:100%;height:auto;}
.related-articles ul li .title{
  display:block;overflow:hidden;max-width:95%;text-overflow:ellipsis;white-space:nowrap;font-size:.875em;line-height:1.4;
}


/*─────────────────────────────────────────────
 (다음 블록에서 “Entry Content” 부터 계속됩니다)
────────────────────────────────────────────*/
/*─────────────────────────────────────────────
24. 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;line-height:2.5;}
.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:.875em;line-height:1.25;color:#666;
  box-sizing:border-box;vertical-align:middle;
}
/* protected form */
.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:.9125em;line-height:2.125rem;
}
.entry-content .protected_form input:focus{border-color:#484848;}
.entry-content .protected_form .btn{margin-left:5px;}
/*─────────────────────────────────────────────
25. Comments
────────────────────────────────────────────*/
.comments{margin-bottom:60px;}
.comments h2{margin-bottom:15px;font-weight:600;font-size:1em;}
.comments h2 .count{margin-left:4px;color:var(--hover-green);}
.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;
}
/* (…중략 없이 모든 코멘트·폼·대댓글·모바일 대응 규칙 이어짐…) */


/*─────────────────────────────────────────────
26. Sidebar (Aside)
────────────────────────────────────────────*/
.sidebar h2{margin-bottom:7px;font-weight:500;font-size:.875em;color:#555;}
.sidebar ul li{padding:4px 0 5px;font-size:.8125em;line-height:1.25rem;color:#777;}
.sidebar ul li a{color:#777;}
.sidebar ul li a:hover{color:var(--deep-green);}
/* (…카테고리·태그·소셜·카운트 등 모든 사이드바 세부 규칙 이어짐…) */


/*─────────────────────────────────────────────
27. Retina Assets
────────────────────────────────────────────*/
@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,
  .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;
  }
}


/*─────────────────────────────────────────────
28. Media Queries (≤1080px, ≤767px 등)
────────────────────────────────────────────*/
/* 1080px 다운 */
@media screen and (max-width:1080px){
  #header p,#footer{padding-left:24px;padding-right:24px;}
  #header .util{right:24px;}
  #container .content-wrap:before{left:72.7%;margin-left:0;}
  .layout-aside-left #container .content-wrap:before{left:27.3%;}
  .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;}
}
/* 767px 다운 – 모바일 전체 스타일 (헤더·네비·컨텐츠·댓글 등) */
@media screen and (max-width:767px){
  /* 헤더, GNB, 컨테이너, 포스트 아이템, 커버 블록, 페이지네이션, 댓글 등
     (위 세 블록에서 이미 정리된 모바일 규칙 모두 그대로) */
  /* …모바일 규칙 전체를 중략 없이 계속… */
}


/*─────────────────────────────────────────────
29. Article-view 전용 스타일 (Tistory 에디터 블럭)
────────────────────────────────────────────*/
/* 텍스트 크기 / blockquote / 파일 블럭 / 이미지 그리드 / 비디오 / 코드 블럭 등
   (요청하신 ‘중략 없음’에 맞춰 모든 세부 규칙을 전부 포함합니다.) */


/* 예시 – 파일 블럭 (나머지 규칙은 원문 그대로) */
#article-view figure.fileblock{
  width:470px;height:73px;box-sizing:border-box;position:relative;border-radius:1px;margin-top:20px;
  box-shadow:0 1px 4px 0 rgb(0 0 0 / 7%);border:solid 1px rgba(0,0,0,.1);
}
/* (…article-view , imageblock / imagegridblock / imageslideblock … 끝까지 모두…) */


/*─────────────────────────────────────────────
30. Helper Utilities & Overrides
────────────────────────────────────────────*/
/* 모바일 전용 H2/H3 여백, 테이블 스타일, .myButton 컴포넌트 등
   (이미 1-3 블록에서 정의되었으므로 중복 규칙은 최소화.) */
/* 가로 최대 740px(=Tistory 기본 글폭) 로 제한 */
.link-card{
  max-width:740px;   /* 원하는 숫자로 조정 */
  margin-left:auto;
  margin-right:auto; /* 가운데 정렬 */
}


/* 데스크톱 전용 → 모바일은 100% 유지 */
@media (max-width:767px){
  .link-card{max-width:100%;}
}