.btn, .input{
  --xs-comp-font-size:    13px;
  --xs-comp-padding-x:    10px;
  --xs-comp-padding-y:    4px;
  --xs-comp-border-radius:6px;
  --xs-comp-inner-gap:    4px;

  --sm-comp-font-size:    14px;
  --sm-comp-padding-x:    12px;
  --sm-comp-padding-y:    8px;
  --sm-comp-border-radius:6px;
  --sm-comp-inner-gap:    4px;

  --md-comp-font-size:    15px;
  --md-comp-padding-x:    16px;
  --md-comp-padding-y:    10px;
  --md-comp-border-radius:6px;
  --md-comp-inner-gap:    6px;

  --lg-comp-font-size:    15px;
  --lg-comp-padding-x:    18px;
  --lg-comp-padding-y:    12px;
  --lg-comp-border-radius:6px;
  --lg-comp-inner-gap:    6px;

  --xl-comp-font-size:    16px;
  --xl-comp-padding-x:    18px;
  --xl-comp-padding-y:    14px;
  --xl-comp-border-radius:6px;
  --xl-comp-inner-gap:    6px;

 /* 기본 컴포넌트 사이즈 설정 : md 사이즈와 동일 */
  --comp-font-size:    var(--md-comp-font-size);
  --comp-padding-x:    var(--md-comp-padding-x);
  --comp-padding-y:    var(--md-comp-padding-y);
  --comp-border-radius:var(--md-comp-border-radius);
  --comp-inner-gap:    var(--md-comp-inner-gap);
}
.size-xs{
  --comp-font-size:    var(--xs-comp-font-size);
  --comp-padding-x:    var(--xs-comp-padding-x);
  --comp-padding-y:    var(--xs-comp-padding-y);
  --comp-border-radius:var(--xs-comp-border-radius);
  --comp-inner-gap:    var(--xs-comp-inner-gap);
}
.size-sm{
  --comp-font-size:    var(--sm-comp-font-size);
  --comp-padding-x:    var(--sm-comp-padding-x);
  --comp-padding-y:    var(--sm-comp-padding-y);
  --comp-border-radius:var(--sm-comp-border-radius);
  --comp-inner-gap:    var(--sm-comp-inner-gap);
}
.size-md{
  --comp-font-size:    var(--md-comp-font-size);
  --comp-padding-x:    var(--md-comp-padding-x);
  --comp-padding-y:    var(--md-comp-padding-y);
  --comp-border-radius:var(--md-comp-border-radius);
  --comp-inner-gap:    var(--md-comp-inner-gap);
}
.size-lg{
  --comp-font-size:    var(--lg-comp-font-size);
  --comp-padding-x:    var(--lg-comp-padding-x);
  --comp-padding-y:    var(--lg-comp-padding-y);
  --comp-border-radius:var(--lg-comp-border-radius);
  --comp-inner-gap:    var(--lg-comp-inner-gap);
}
.size-xl{
  --comp-font-size:    var(--xl-comp-font-size);
  --comp-padding-x:    var(--xl-comp-padding-x);
  --comp-padding-y:    var(--xl-comp-padding-y);
  --comp-border-radius:var(--xl-comp-border-radius);
  --comp-inner-gap:    var(--xl-comp-inner-gap);
}

/* 반응형 사이즈 */
@media all and (min-width:576px) and (max-width:767px) {
  .size-sm-xs{
    --comp-font-size:    var(--xs-comp-font-size);
    --comp-padding-x:    var(--xs-comp-padding-x);
    --comp-padding-y:    var(--xs-comp-padding-y);
    --comp-border-radius:var(--xs-comp-border-radius);
    --comp-inner-gap:    var(--xs-comp-inner-gap);
  }
  .size-sm-sm{
    --comp-font-size:    var(--sm-comp-font-size);
    --comp-padding-x:    var(--sm-comp-padding-x);
    --comp-padding-y:    var(--sm-comp-padding-y);
    --comp-border-radius:var(--sm-comp-border-radius);
    --comp-inner-gap:    var(--sm-comp-inner-gap);
  }
  .size-sm-md{
    --comp-font-size:    var(--md-comp-font-size);
    --comp-padding-x:    var(--md-comp-padding-x);
    --comp-padding-y:    var(--md-comp-padding-y);
    --comp-border-radius:var(--md-comp-border-radius);
    --comp-inner-gap:    var(--md-comp-inner-gap);
  }
  .size-sm-lg{
    --comp-font-size:    var(--lg-comp-font-size);
    --comp-padding-x:    var(--lg-comp-padding-x);
    --comp-padding-y:    var(--lg-comp-padding-y);
    --comp-border-radius:var(--lg-comp-border-radius);
    --comp-inner-gap:    var(--lg-comp-inner-gap);
  }
  .size-sm-xl{
    --comp-font-size:    var(--xl-comp-font-size);
    --comp-padding-x:    var(--xl-comp-padding-x);
    --comp-padding-y:    var(--xl-comp-padding-y);
    --comp-border-radius:var(--xl-comp-border-radius);
    --comp-inner-gap:    var(--xl-comp-inner-gap);
  }
}

@media all and (min-width:768px) and (max-width:1069px) {
  .size-md-xs{
    --comp-font-size:    var(--xs-comp-font-size);
    --comp-padding-x:    var(--xs-comp-padding-x);
    --comp-padding-y:    var(--xs-comp-padding-y);
    --comp-border-radius:var(--xs-comp-border-radius);
    --comp-inner-gap:    var(--xs-comp-inner-gap);
  }
  .size-md-sm{
    --comp-font-size:    var(--sm-comp-font-size);
    --comp-padding-x:    var(--sm-comp-padding-x);
    --comp-padding-y:    var(--sm-comp-padding-y);
    --comp-border-radius:var(--sm-comp-border-radius);
    --comp-inner-gap:    var(--sm-comp-inner-gap);
  }
  .size-md-md{
    --comp-font-size:    var(--md-comp-font-size);
    --comp-padding-x:    var(--md-comp-padding-x);
    --comp-padding-y:    var(--md-comp-padding-y);
    --comp-border-radius:var(--md-comp-border-radius);
    --comp-inner-gap:    var(--md-comp-inner-gap);
  }
  .size-md-lg{
    --comp-font-size:    var(--lg-comp-font-size);
    --comp-padding-x:    var(--lg-comp-padding-x);
    --comp-padding-y:    var(--lg-comp-padding-y);
    --comp-border-radius:var(--lg-comp-border-radius);
    --comp-inner-gap:    var(--lg-comp-inner-gap);
  }
  .size-md-xl{
    --comp-font-size:    var(--xl-comp-font-size);
    --comp-padding-x:    var(--xl-comp-padding-x);
    --comp-padding-y:    var(--xl-comp-padding-y);
    --comp-border-radius:var(--xl-comp-border-radius);
    --comp-inner-gap:    var(--xl-comp-inner-gap);
  }
}

@media all and (min-width:1070px) and (max-width:1199px) {
  .size-lg-xs{
    --comp-font-size:    var(--xs-comp-font-size);
    --comp-padding-x:    var(--xs-comp-padding-x);
    --comp-padding-y:    var(--xs-comp-padding-y);
    --comp-border-radius:var(--xs-comp-border-radius);
    --comp-inner-gap:    var(--xs-comp-inner-gap);
  }
  .size-lg-sm{
    --comp-font-size:    var(--sm-comp-font-size);
    --comp-padding-x:    var(--sm-comp-padding-x);
    --comp-padding-y:    var(--sm-comp-padding-y);
    --comp-border-radius:var(--sm-comp-border-radius);
    --comp-inner-gap:    var(--sm-comp-inner-gap);
  }
  .size-lg-md{
    --comp-font-size:    var(--md-comp-font-size);
    --comp-padding-x:    var(--md-comp-padding-x);
    --comp-padding-y:    var(--md-comp-padding-y);
    --comp-border-radius:var(--md-comp-border-radius);
    --comp-inner-gap:    var(--md-comp-inner-gap);
  }
  .size-lg-lg{
    --comp-font-size:    var(--lg-comp-font-size);
    --comp-padding-x:    var(--lg-comp-padding-x);
    --comp-padding-y:    var(--lg-comp-padding-y);
    --comp-border-radius:var(--lg-comp-border-radius);
    --comp-inner-gap:    var(--lg-comp-inner-gap);
  }
  .size-lg-xl{
    --comp-font-size:    var(--xl-comp-font-size);
    --comp-padding-x:    var(--xl-comp-padding-x);
    --comp-padding-y:    var(--xl-comp-padding-y);
    --comp-border-radius:var(--xl-comp-border-radius);
    --comp-inner-gap:    var(--xl-comp-inner-gap);
  }
}

@media(min-width:1400px){
  .size-xl-xs{
    --comp-font-size:    var(--xs-comp-font-size);
    --comp-padding-x:    var(--xs-comp-padding-x);
    --comp-padding-y:    var(--xs-comp-padding-y);
    --comp-border-radius:var(--xs-comp-border-radius);
    --comp-inner-gap:    var(--xs-comp-inner-gap);
  }
  .size-xl-sm{
    --comp-font-size:    var(--sm-comp-font-size);
    --comp-padding-x:    var(--sm-comp-padding-x);
    --comp-padding-y:    var(--sm-comp-padding-y);
    --comp-border-radius:var(--sm-comp-border-radius);
    --comp-inner-gap:    var(--sm-comp-inner-gap);
  }
  .size-xl-md{
    --comp-font-size:    var(--md-comp-font-size);
    --comp-padding-x:    var(--md-comp-padding-x);
    --comp-padding-y:    var(--md-comp-padding-y);
    --comp-border-radius:var(--md-comp-border-radius);
    --comp-inner-gap:    var(--md-comp-inner-gap);
  }
  .sizexllg-lg{
    --comp-font-size:    var(--lg-comp-font-size);
    --comp-padding-x:    var(--lg-comp-padding-x);
    --comp-padding-y:    var(--lg-comp-padding-y);
    --comp-border-radius:var(--lg-comp-border-radius);
    --comp-inner-gap:    var(--lg-comp-inner-gap);
  }
  .size-xl-xl{
    --comp-font-size:    var(--xl-comp-font-size);
    --comp-padding-x:    var(--xl-comp-padding-x);
    --comp-padding-y:    var(--xl-comp-padding-y);
    --comp-border-radius:var(--xl-comp-border-radius);
    --comp-inner-gap:    var(--xl-comp-inner-gap);
  }
}


.btn{font-size:var(--comp-font-size); padding:var(--comp-padding-y) var(--comp-padding-x); border-radius:var(--comp-border-radius); color:var(--comp-color-text-component); background-color:var(--comp-color-bg-basic); display:inline-flex; gap:var(--comp-inner-gap); align-items:center; justify-content:center; vertical-align:middle; transition:all 0.2s ease; position:relative; overflow:hidden}
.btn:not(.form-control){text-align:center}


.style-filled:not(.color-white){background-color:var(--smt-color-primary); color:var(--white) !important}
.style-filled.color-complete   {background-color:var(--smt-color-complete)}
.style-filled.color-success    {background-color:var(--smt-color-success)}
.style-filled.color-danger     {background-color:var(--smt-color-danger)}
.style-filled.color-warning    {background-color:var(--smt-color-warning)}
.style-filled.color-info       {background-color:var(--smt-color-info)}
.style-filled.color-white      {background-color:var(--smt-color-white)}
.style-filled.color-black      {background-color:var(--smt-color-black)}

.style-lined                {box-shadow:var(--comp-border-shadow); background-color:var(--white)}
.style-lined.color-primary  {box-shadow:var(--comp-border-shadow-primary)}
.style-lined.color-complete {box-shadow:var(--comp-border-shadow-complete)}
.style-lined.color-success  {box-shadow:var(--comp-border-shadow-success)}
.style-lined.color-danger   {box-shadow:var(--comp-border-shadow-danger)}
.style-lined.color-warning  {box-shadow:var(--comp-border-shadow-warning)}
.style-lined.color-info     {box-shadow:var(--comp-border-shadow-info)}
.style-lined.color-white    {box-shadow:var(--comp-border-shadow-white)}
.style-lined.color-black    {box-shadow:var(--comp-border-shadow-black)}

.style-outline               {box-shadow:var(--comp-border-shadow); background-color:inherit}
.style-outline.color-primary {box-shadow:var(--comp-border-shadow-primary)}
.style-outline.color-complete{box-shadow:var(--comp-border-shadow-complete)}
.style-outline.color-success {box-shadow:var(--comp-border-shadow-success)}
.style-outline.color-danger  {box-shadow:var(--comp-border-shadow-danger)}
.style-outline.color-warning {box-shadow:var(--comp-border-shadow-warning)}
.style-outline.color-info    {box-shadow:var(--comp-border-shadow-info)}
.style-outline.color-white   {box-shadow:var(--comp-border-shadow-white)}
.style-outline.color-black   {box-shadow:var(--comp-border-shadow-black)}

.style-shadow{box-shadow:var(--comp-shadow); background-color:#FFF}
.style-shadow.color-primary{color:var(--smt-color-primary)}

.style-text-filled{background-color:inherit}
.style-text-white{color:var(--white)}

.style-text{background-color:inherit; padding:0}
.style-text::before{display:none}
.style-text:hover{color:var(--smt-color-primary)}

.style-primary{background-color:var(--comp-color-primary)}



/* btn hover */
.btn::before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:#001846; opacity:0; transition:all 0.2s ease}
.btn:not(.style-outline):hover::before{opacity:0.03}

.btn.style-filled::before{background-color:#fff}
.btn.style-filled:hover::before{opacity:0.1}

.btn.color-complete::before{background-color:var(--smt-color-complete)}
.btn.color-success::before {background-color:var(--smt-color-success)}
.btn.color-danger::before  {background-color:var(--smt-color-danger)}
.btn.color-warning::before {background-color:var(--smt-color-warning)}
.btn.color-info::before    {background-color:var(--smt-color-info)}

.btn:is(.color-complete, .color-success, .color-danger, .color-warning, .color-info):not(.style-outline):hover::before{opacity:0.06}

.color-primary {color:var(--smt-color-primary)}
.color-sub1    {color:var(--smt-color-sub1)}
.color-sub2    {color:var(--smt-color-sub2)}
.color-sub3    {color:var(--smt-color-sub3)}
.color-sub4    {color:var(--smt-color-sub4)}
.color-sub5    {color:var(--smt-color-sub5)}
.color-complete{color:var(--smt-color-complete)}
.color-success {color:var(--smt-color-success)}
.color-danger  {color:var(--smt-color-danger)}
.color-warning {color:var(--smt-color-warning)}
.color-info    {color:var(--smt-color-black)}
.color-white:not(.style-filled, .style-lined, .style-shadow){color:var(--smt-color-white)}

.bg-color-primary{background-color:var(--smt-color-primary)}
.bg-color-sub1   {background-color:var(--smt-color-sub1)}
.bg-color-sub2   {background-color:var(--smt-color-sub2)}
.bg-color-sub3   {background-color:var(--smt-color-sub3)}
.bg-color-sub4   {background-color:var(--smt-color-sub4)}
.bg-color-sub5   {background-color:var(--smt-color-sub5)}
.bg-color-complete{background-color:var(--smt-color-complete)}
.bg-color-success{background-color:var(--smt-color-success)}
.bg-color-danger  {background-color:var(--smt-color-danger)}
.bg-color-warning{background-color:var(--smt-color-warning)}
.bg-color-info   {background-color:var(--smt-color-info)}



/* Badge */
.badge{display:inline-block; font-size:var(--badge-font-size); padding:var(--badge-padding-y) var(--badge-padding-x); border-radius:var(--badge-border-radius); line-height:1.1}
.btn > .badge{margin-left:6px}


/* Tag */
.tag-menu{font-size:0}
.tag-menu a::before{content:'\0023'}
.tag-menu a{margin-left:2px; margin-right:2px; display:inline-block; line-height:1.2}
.tag-menu a:first-child{margin-left:0}
.tag-menu a:last-child{margin-right:0}
.tag-menu.tag-btn a,
.tag-menu.tag-btn-fill a{padding:10px; margin:3px; color:#555; display:inline-block}
.tag-menu.tag-btn a{border:1px solid #E0E0E0; border-radius:8px}
.tag-menu.tag-btn-fill a{font-size:13px; background-color:#F8F8F8; border:0; border-radius:6px}


/* Tag page */
.tag-page .tag-btn .tag-cloud-link{padding:12px 14px; margin-bottom:6px; color:#444; background-color:#F8F8F8; border:none}
.tag-page .tag-menu .post_count{color:#9A795E}

/* Alert */
.alert{padding:14px 18px}

/* Post a */
.post a{color:#3182f6}


/* Table */
table.table{width:100%; border-top:1px solid rgba(224,224,224,.7)}
table.table thead th{font-size:13px; color:#878d91; text-align:left; background-color:#f8fafb}
table.table tbody td{font-size:14px}
table.table th,
table.table td{padding:1.14285714em 0.85714286em; line-height:1.5; vertical-align:middle; border-bottom:1px solid rgba(224,224,224,.7)}
table.table-data th,
table.table-data td{padding-top:0.64285714em; padding-bottom:0.64285714em}


/* Info */
.lists .info > *:not(:first-child){margin-top:6px}
.lists .info > .btn{margin-top:8px}
.lists .list-link{z-index:1}
@media(min-width:768px){
  .lists .info > *:not(:first-child){margin-top:8px}
}
@media(min-width:1070px){
  /* .lists .info > *:not(:first-child){margin-top:10px} */
}


/* 리스트 썸네일 */
.lists .thum-img{width:100%; height:auto; padding-bottom:60%; background-size:cover; background-position:center; background-repeat:no-repeat}
.lists.thum-height-full .thum-img{height:100%}

/* 리스트 외곽 라운드 */
.list-round-4 .list-link{border-radius:4px; overflow:hidden}
.list-round-5 .list-link{border-radius:5px; overflow:hidden}
.list-round-6 .list-link{border-radius:6px; overflow:hidden}
.list-round-7 .list-link{border-radius:7px; overflow:hidden}
.list-round-8 .list-link{border-radius:8px; overflow:hidden}
.list-round-9 .list-link{border-radius:9px; overflow:hidden}
.list-round-10 .list-link{border-radius:10px; overflow:hidden}
.list-round-11 .list-link{border-radius:11px; overflow:hidden}
.list-round-12 .list-link{border-radius:12px; overflow:hidden}
.list-round-13 .list-link{border-radius:13px; overflow:hidden}
.list-round-14 .list-link{border-radius:14px; overflow:hidden}
.list-round-15 .list-link{border-radius:15px; overflow:hidden}
.list-round-16 .list-link{border-radius:16px; overflow:hidden}
.list-round-17 .list-link{border-radius:17px; overflow:hidden}
.list-round-18 .list-link{border-radius:18px; overflow:hidden}
.list-round-19 .list-link{border-radius:19px; overflow:hidden}
.list-round-20 .list-link{border-radius:20px; overflow:hidden}


/* 리스트 카드 세로형(기본) : list-card */
.list-card .list-item .info{background-color:#fff}
.list-card .list-item{display:flex; flex-direction:column; height:100%; transition:transform 300ms ease-in-out; position:relative}
.list-card .list-item::after{position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; z-index:0; content:""; transition:opacity 0.3s ease; box-shadow:10px 10px 20px 0px rgb(0 0 0 / 4%), -10px 0 20px 0px rgb(0 0 0 / 4%)}
.list-card .list-item:hover::after{opacity:1}
.list-card .list-link{height:100%; display:flex; flex-direction:column}
.list-card .thum{flex-grow:0}
.list-card .info{flex-grow:1}
.list-card .thum-img{height:100%}

/* 리스트 오버레이 */
.list-overlay .list-item,
.list-overlay .list-link{height:100%}
.list-overlay .list-link{display:flex; position:relative}
.list-overlay .thum{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%}
.list-overlay .thum::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; opacity:0.7;
  background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(60%, transparent));
  background: -webkit-linear-gradient(bottom, #000, transparent 60%);
  background: linear-gradient(to top, #000, transparent 60%)
}
.list-overlay .thum-img{height:100%; padding-bottom:inherit}
.list-overlay .info{display:flex; flex-direction:column; justify-content:flex-end; width:100%; position:relative}
.list-overlay .info > *{z-index:10; position:relative}

/* 리스트 썸네일 라운드 */
.list-thum-round-4 .thum-img{border-radius:3px; overflow:hidden}
.list-thum-round-5 .thum-img{border-radius:4px; overflow:hidden}
.list-thum-round-6 .thum-img{border-radius:5px; overflow:hidden}
.list-thum-round-7 .thum-img{border-radius:6px; overflow:hidden}
.list-thum-round-8 .thum-img{border-radius:8px; overflow:hidden}
.list-thum-round-9 .thum-img{border-radius:9px; overflow:hidden}
.list-thum-round-10 .thum-img{border-radius:10px; overflow:hidden}
.list-thum-round-11 .thum-img{border-radius:11px; overflow:hidden}
.list-thum-round-12 .thum-img{border-radius:12px; overflow:hidden}
.list-thum-round-13 .thum-img{border-radius:13px; overflow:hidden}
.list-thum-round-14 .thum-img{border-radius:14px; overflow:hidden}
.list-thum-round-15 .thum-img{border-radius:15px; overflow:hidden}
.list-thum-round-16 .thum-img{border-radius:16px; overflow:hidden}
.list-thum-round-17 .thum-img{border-radius:17px; overflow:hidden}
.list-thum-round-18 .thum-img{border-radius:18px; overflow:hidden}
.list-thum-round-19 .thum-img{border-radius:19px; overflow:hidden}
.list-thum-round-20 .thum-img{border-radius:20px; overflow:hidden}


/* 리스트 카드 라운드 */
.list-card-round .list-item::after,
.list-card-round .list-link{border-radius:8px}
.list-card-round .list-link{overflow:hidden}

/* 리스트 좌우 : list-lateral */
/* .list-lateral{flex-direction:column} */
.list-lateral .row{margin-left:inherit; margin-right:inherit}
.list-lateral .row div[class*="col"]{padding-left:0; padding-right:0}
.list-lateral .list-link{/*min-height:240px;*/ display:flex; /*align-items:center*/}
.list-lateral .info{margin-bottom:inherit; height:100%}

/* 리스트 좌우 + 카드 : list-lateral + list-card */
.list-lateral.list-card .list-link{flex-direction:row; align-items:stretch}
.list-lateral.list-card .thum,
.list-lateral.list-card .info{flex-grow:inherit}
.list-lateral.list-card .info{height:100%}

/* 리스트 좌우 + 썸네일 가로폭 고정 : list-lateral + list-fix-thum */
.list-lateral.list-fix-thum .thum{/*flex-basis:26%; max-width:30%; margin-right:15px; margin-right:15px; */ flex-shrink:0}
.list-lateral.list-fix-thum .thum-img{height:inherit}
/* 리스트 좌우 + 썸네일 가로폭 고정 : list-lateral + list-fix-thum */
.list-lateral.list-card.list-fix-thum .thum{margin-right:inherit}
.list-lateral.list-card.list-fix-thum .thum-img{height:100%}
@media(min-width:768px){
  /* .list-lateral.list-fix-thum .thum{margin-right:30px} */
}

/* 리스트 좌우 sm 사이즈 : list-lateral-sm */
@media(max-width:575px){
  .list-lateral-sm .list-link{display:flex; flex-direction:row}
  .list-lateral-sm .list-link .thum{flex-basis:31%; flex-shrink:0; margin-right:14px; display:flex; align-items:center}
  .list-lateral-sm .list-link .post-title,
  .list-lateral-sm .list-link .post-excerpt{display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical}

  /* 카드형일 경우 */
  .list-card.list-lateral-sm .list-link .thum{margin-right:inherit}
  .list-card.list-lateral-sm .list-link .thum-img{height:100%}
}

/* 리스트 테이블형 */
.list-table{border-top:1px solid #666}
.list-table .list-table-header{display:none}
.list-table .list-item:not(.list-table-header) .info,
.list-table .info .post-title > *{color:#888} /* 전체 텍스트 색상 설정 */
/* .list-table .list-item{border-bottom:1px solid #EEE} */
.list-table .list-item:not(.list-table-header):hover .post-title{text-decoration:underline}
.list-table .list-link{display:block}
.list-table .fix-width{width:42px}
.list-table .fix-width:last-child{text-align:right}
.list-table .info{display:flex; align-items:center}
.list-table .info div{margin:0; color:inherit}
.list-table .info > div:not(.flow-area){flex-shrink:0}
.list-table .info .flow-area{flex-grow:1}
.list-table .info .flow-area > .dp-ib-md{margin-left:10px; margin-top:2px}
.list-table .info .post-title + .dp-ib-md{margin-left:0}
.list-table .info .post-title{color:#222}
.list-table .info .new,
.list-table .info .reply{display:inline-block; font-weight:normal}
.list-table .info .new{font-size:10px; color:#fff; background-color:#FE4948; border-radius:2px; height:14px; width:14px; text-align:center; margin-left:2px}
.list-table .info .reply{font-size:12px}
.list-table .info .post-title > *{vertical-align:2px}
@media(max-width:767px){
  .list-table .info{padding-top:15px; padding-bottom:15px}
}
@media(min-width:768px){
  .list-table .list-table-header{display:block; border-bottom:1px solid #EEE}
  .list-table .fix-width{width:inherit}
  .list-table .fix-width:last-child{text-align:inherit}
  .list-table .list-item:not(.list-table-header):hover{background-color:#fafbfc; text-decoration:none}
  .list-table .list-item:not(.list-table-header):hover .post-title{text-decoration:none}
  .list-table .info .flow-area{display:flex; align-items:center; flex-grow:1; text-align:left}
  .list-table .info{display:flex; align-items:center; text-align:center}
  .list-table .info .flow-area > div:not(.post-title){flex-shrink:0}
  .list-table .info .flow-area > .dp-ib-md{margin-left:0; margin-top:0}
  .list-table .info .number{width:80px}
  .list-table .info .post-title{flex-grow:1; flex-shrink:1; text-align:left}
  .list-table .info .view{width:70px}
  .list-table .info .post-date{width:110px}
  .list-table .info .reading{width:60px}
}


/* 리스트 텍스트 컬러 */
.post-excerpt{color:#777}
.post-category{color:#407fe9}
.post-date,
.meta,
.views{color:#6e6e73}


/* Forms */
.form-group{position:relative}
.form-label,
.form-label-col{margin-bottom:6px; font-size:.938rem; display:inline-block; color:#4e5968}
.form-label-col{margin-bottom:inherit}
.form-control{display:block; font-size:var(--comp-font-size); width:100%; height:var(--comp-height); border-radius:var(--comp-border-radius); padding:var(--btn-padding-y) var(--comp-padding-x); outline:0; border:1px solid var(--color-border); transition:all 0.2s ease; /*box-shadow:inset 0 0 0 1px rgba(0,27,55,0.1)*/}
textarea.form-control{min-height:calc(1.5em + .75rem + 2px)}
.form-control-lg{font-size:1.063rem; padding:1rem 1.25rem}
.form-control-sm{font-size:.875rem; padding:.625rem .875rem}

/* Forms border-radius : 폼 상위에 form-br-8 클래스 추가 */
.form-br-8 .form-control{border-radius:8px}
.form-br-8 .btn{border-radius:8px}

/* disabled */
.form-control[disabled],
.form-control.disabled,
.form-control[readonly],
.form-control.readonly,
fieldset[disabled] .form-control,
.disabled .form-control{cursor:not-allowed}
.form-control[disabled],
.form-control.disabled,
fieldset[disabled] .form-control,
.disabled .form-control{color:#ced3d6; background-color:#F7F9FA; border-color:#F0F3F6}
.form-control[disabled]::placeholder,
.form-control.disabled::placeholder,
fieldset[disabled] .form-control::placeholder,
.disabled .form-control::placeholder{color:#CED3D6}

/* Forms etc */
.form-control.readonly-text{padding-left:0; padding-right:0; border:none; cursor:text}

/* Form 호버 및 활성화 디자인 */
.form-control:not([disabled]):hover{box-shadow:inset 0 0 0 1px #8FC3FF; border-color:#8FC3FF}
.form-control:not([disabled]):active,
.form-control:not([disabled]):focus{box-shadow:inset 0 0 0 1px #3082F6; border-color:#3082F6}
.form-control::placeholder,
textarea::placeholder{color:#8B95A1; transition:all 0.2s ease}

/* Form BG */
.form-bg .form-control{background-color:#F8F9FA}
.form-bg-no-border .form-control{background-color:#F8F9FA; border-color:transparent}


/* dropdown */
.dropdown{position:relative; display:inline-block}
.dropdown::before{content:''; position:absolute; display:inline-block; width:8px; height:8px; top:50%; right:18px; margin-top:-6px; border-top:1px solid #AAAFB3; border-right:1px solid #AAAFB3; transform:rotate(135deg)}
.dropdown .btn{background-color:transparent}
.dropdown select{padding-right:40px; /*height:100%*/}


/* input */
.input.radius-m input{border-radius:8px}
.input{position:relative; display:flex; align-items:center; width:100%; height:var(--comp-height); margin:0 auto; font-size:var(--comp-font-size); line-height:20px; border:none; outline:none; box-shadow:var(--comp-border-shadow); border-radius:var(--comp-border-radius); -webkit-appearance:none; -moz-appearance:none; appearance:none; overflow:hidden; transition:all 0.2s ease; gap:var(--comp-inner-gap)}
.input-field{flex-grow:1; outline:0; border:0; background:none; font-size:var(--comp-font-size); padding:var(--comp-padding-y) var(--comp-padding-x); width:100%}
.input-field::placeholder{color:#8B95A1; transition:all 0.2s ease}
/* .input-left-addon{margin:0 -8px 0 12px}
.input-right-addon{margin:0 12px 0 -8px} */
.input-left-addon,
.input-right-addon{display:flex; align-items:center; height:100%; padding:0 var(--comp-padding-x)}
.input-left-addon{padding-right:inherit}
.input-right-addon{padding-left:inherit}
input[placeholder=".input-left-addon"]{padding-left:0}
input[placeholder=".input-right-addon"]{padding-right:0}
button.input-left-addon,
button.input-right-addon{font-size:inherit}

/* Input multiline */
.input-multiline{height:inherit; overflow:auto}
.input-multiline .input-field{padding:14px 18px; overflow:auto; line-height:inherit}

/* Input BG */
.input-bg .input{background-color:var(--color-bg-gray)}
.input-bg-no-border .input{background-color:var(--color-bg-gray); box-shadow:var(--border-shadow) rgb(0 27 55 / 0); border-color:transparent}

/* Input icon */
.input .ico{color:#8B95A1}

/* Input button padding */
.input-group .btn{padding-left:14px; padding-right:14px}

/* Input border-radius 8px */
.form-br-8 .input{border-radius:8px}
.form-br-8 .btn{border-radius:8px}

/* Input hover focus */
.input:hover{box-shadow:inset 0 0 0 1px #8fc3ff; border-color:#8FC3FF}
.input.input-focus{box-shadow:inset 0 0 0 1px #3082f6; border-color:#3082F6}

/* Input sizing */
.input-lg,
.input-lg .input{height:60px; font-size:1.063rem}
.input-sm,
.input-sm .input{height:42px; font-size:.875rem}

/* Input disabled */
.input.disabled{background-color:#F7F9FA; border-color:#F0F3F6; box-shadow:none/*pointer-events:none*/}
.input.disabled:hover{border-color:#F0F3F6; box-shadow:none}
.input.disabled .input-field{cursor:not-allowed}
.input.disabled .input-field::placeholder{color:#ced3d6}

/* Input readonly */
.input.readonly{box-shadow:none; border:none}
.input.readonly .input-field{padding-left:inherit; padding-right:inherit}

/* Input file upload */
.input-field[type="file"]{position:absolute; top:0; left:0; width:0; height:0; opacity:0; padding:inherit}
.input-label-file{color:#8B95A1; cursor:pointer; width:100%; height:100%; display:flex;  align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.input-label-file > .ico{margin-right:4px}
.input.upload-name{padding-left:18px; padding-right:18px; color:#9da6b0}

/* Input group*/
.input-group{position:relative; display:flex; flex-wrap:wrap; align-items:stretch; width:100%}
.input-group > .input{flex:1 1 auto; width:1%; min-width:0}

/* Input-group 내부 요소들 간격(마지막 요소가 아닐 경우 margin) */
.input-group > *:not(:last-child){margin-right:4px}

/* Input group no margin : 인풋 상위의 .input-group + .input-mg-no 클래스 추가 */
.input-group.input-mg-no > *{margin-right:inherit}
.input-group.input-mg-no > .form-control{z-index:1}
.input-group.input-mg-no > *:first-child,
.input-group.input-mg-no > *:first-child > .btn{border-top-right-radius:0; border-bottom-right-radius:0}
.input-group.input-mg-no > *:last-child,
.input-group.input-mg-no > *:last-child > .btn{border-top-left-radius:0; border-bottom-left-radius:0}
.input-group.input-mg-no > :not(:first-child):not(:last-child){border-radius:0}
.input-group.input-mg-no > *:not(:first-child){margin-left:-1px}



/* Tabs */
.tabs .tab-menu{display:flex; overflow-x:auto}
.tabs .tab-menu .tab-item{cursor:pointer; padding:18px 16px; line-height:1.1; position:relative; box-shadow:inset 0 -1px rgba(0,0,0,.15)}
.tabs .tab-menu .tab-item:hover{background-color:rgba(0,0,0,0.025)}
.tabs .tab-menu .tab-item.current::before{content:''; width:100%; height:2px; bottom:0; left:0; position:absolute; background-color:rgba(0,0,0,0.5)}
.tabs .tab-content{display:none; margin-top:24px; margin-bottom:24px}
.tabs .tab-content.current{display:inherit}

.tabs.color-primary .tab-menu .tab-item:hover,
.tabs.color-primary .tab-menu .tab-item.current          {color:var(--color-primary)}
.tabs.color-primary .tab-menu .tab-item.current::before  {background-color:var(--color-primary)}
.tabs.color-complete .tab-menu .tab-item:hover,
.tabs.color-complete .tab-menu .tab-item.current         {color:var(--color-complete)}
.tabs.color-complete .tab-menu .tab-item.current::before {background-color:var(--color-complete)}
.tabs.color-success .tab-menu .tab-item:hover,
.tabs.color-success .tab-menu .tab-item.current          {color:var(--color-success)}
.tabs.color-success .tab-menu .tab-item.current::before  {background-color:var(--color-success)}
.tabs.color-danger .tab-menu .tab-item:hover,
.tabs.color-danger .tab-menu .tab-item.current           {color:var(--color-danger)}
.tabs.color-danger .tab-menu .tab-item.current::before   {background-color:var(--color-danger)}
.tabs.color-warning .tab-menu .tab-item:hover,
.tabs.color-warning .tab-menu .tab-item.current           {color:var(--color-warning)}
.tabs.color-warning .tab-menu .tab-item.current::before   {background-color:var(--color-warning)}
.tabs.color-warning .tab-menu .tab-item:hover,
.tabs.color-warning .tab-menu .tab-item.current          {color:#f9c600}
.tabs.color-warning .tab-menu .tab-item.current::before  {background-color:#ffd945}

.tabs:not([class^="color-"]) .tab-menu .tab-item,
.tabs:not([class^="color-"]) .tab-content{color:initial}

.tabs.tabs-text .tab-item{padding:6px 0; margin-left:14px; margin-right:14px; box-shadow:none}
.tabs.tabs-text .tab-item:hover{background-color:transparent}
.tabs.tabs-text .tab-item:first-child{margin-left:0}
.tabs.tabs-text .tab-item:last-child{margin-right:0}


/* Pagination */
.pagination .page-numbers{display:inline-block; padding:9px 16px; border-radius:6px}
.pagination .page-numbers:hover{background-color:rgba(2,32,71,0.05)}
.pagination .page-numbers.current{color:#FFF; background-color:#222}
.pagination .page-arrow{padding-left:5px; padding-right:5px}

/* Pagination round */
.pagination.br-100p .page-numbers{border-radius:100px}

/* Pagination color theme */
.pagination.color-primary .page-numbers:hover:not(.current) {color:var(--color-primary)}
.pagination.color-primary .page-numbers.current             {background-color:var(--color-primary)}
.pagination.color-complete .page-numbers:hover:not(.current){color:var(--color-complete)}
.pagination.color-complete .page-numbers.current            {background-color:var(--color-complete)}
.pagination.color-success .page-numbers:hover:not(.current) {color:var(--color-success)}
.pagination.color-success .page-numbers.current             {background-color:var(--color-success)}
.pagination.color-danger .page-numbers:hover:not(.current)  {color:var(--color-danger)}
.pagination.color-danger .page-numbers.current              {background-color:var(--color-danger)}
.pagination.color-warning .page-numbers:hover:not(.current) {color:var(--color-warning)}
.pagination.color-warning .page-numbers.current             {background-color:var(--color-warning)}
.pagination:not([class^="color-"]) .page-numbers:not(.current){color:initial}


/* Check Box */
.form-check{margin-top:5px; margin-bottom:5px}
.form-check input{display:none}
.form-check .form-check-label{display:flex; align-items:center; cursor:pointer; -webkit-user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
.form-check .form-check-label > span{display:inline-block; vertical-align:middle; transform:translate3d(0, 0, 0)}
.form-check .form-check-label .check-ico{position:relative; width:22px; height:22px; border-radius:50%; transform:scale(1); vertical-align:middle; border:2px solid #d1d6db; transition:all 0.2s ease}
.form-check .form-check-input[type=checkbox] + .form-check-label .check-ico{border-radius:6px}
.form-check .form-check-label .check-ico svg{position:absolute; z-index:1; width:12px; height:9px; top:50%; left:50%; margin-top:-4px; margin-left:-6px; fill:none; stroke:white; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16px; stroke-dashoffset:16px; transition:all 0.3s ease; transition-delay:0.1s; transform:translate3d(0, 0, 0)}
.form-check .form-check-label .check-ico:before{content:""; width:100%; height:100%; background-color:var(--color-primary); display:block; transform:scale(0); opacity:1; border-radius:50%; transition-delay:0.2s}
.form-check .form-check-label .cb-label{margin-left:12px}
.form-check .form-check-label .cb-label:after{content:""; position:absolute; bottom:0px; left:0; height:1px; width:100%; background-color:var(--color-primary); transform-origin:0 0; transform:scaleX(0)}
.form-check .form-check-label:hover .check-ico{border-color:#3182F6; background-color:#e8f3ff}
.form-check .form-check-input:checked + .form-check-label .check-ico {flex-shrink:0; border-color:var(--color-primary); background-color:var(--color-primary); animation:checkbox-ani 0.6s ease}
.form-check .form-check-input:checked + .form-check-label .check-ico svg{stroke-dashoffset:0}
.form-check .form-check-input:checked + .form-check-label .check-ico:before{transform:scale(2.2); opacity:0; transition:all 0.6s ease}
.form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-primary); transition:all 0.3s ease}
.form-check .form-check-input:checked + .form-check-label .cb-label:after{transform:scaleX(1); transition:all 0.3s ease}
.form-check-inline{display:inline-block; margin-right:24px}

/* Disabled */
.form-check .form-check-input:disabled + .form-check-label{opacity:0.5; cursor:not-allowed}
.form-check .form-check-input:disabled:not([checked]) + .form-check-label:hover .check-ico{border-color:#d1d6db; background-color:transparent}

/* Check Switches */
.form-switch .form-check-label{position:relative; display:block; width:52px; height:28px; cursor:pointer; -webkit-tap-highlight-color:transparent; transform:translate3d(0, 0, 0)}
.form-switch .form-check-label:before{content:''; position:relative; top:0; left:0; width:100%; height:100%; display:block; background:#E8E9EB; border-radius:50px; transition:background 0.2s ease}
.form-switch .form-check-label .pin{position:absolute; top:50%; left:2px; margin-top:-12px; width:24px; height:24px; display:block; transition:all 0.2s ease}
.form-switch .form-check-label .pin::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:white; border-radius:50%; box-shadow:0 3px 8px rgba(154, 153, 153, 0.5)}
.form-switch .form-check-label .pin::before{content:''; position:absolute; display:block; width:46px; height:46px; top:50%; left:50%; margin-top:-23px; margin-left:-23px; background-color:var(--color-primary); border-radius:50%; transform:scale(0); opacity:1; pointer-events:none}
.form-switch .form-check-input:checked + .form-check-label::before{background-color:var(--color-primary)}
.form-switch .form-check-input:checked + .form-check-label .pin{transform:translateX(100%); transition:all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease}
.form-switch .form-check-input:checked + .form-check-label .pin::after{box-shadow:0 3px 8px rgba(79, 46, 220, 0.2)}
.form-switch .form-check-input:checked + .form-check-label .pin::before{transform:scale(1); opacity:0; transition:all 0.4s ease}


/* dialogs */
.test{position:fixed; top:0; left:0; right:0; bottom:0; display:none; justify-content:center; align-items:center; z-index:110; background-color:rgba(0,0,0,.4)}

/* alert */
.alert-popup{max-width:320px; background-color:var(--color-white); border-radius:20px; box-shadow:2px 4px 12px rgba(0,0,0,.08); overflow:hidden}
.alert-popup .content{padding:32px 30px; text-align:center}
.alert-popup .content .ico{display:inline-block; line-height:1}
.alert-popup .content .title{line-height:1.4}
.alert-popup .content .desc{color:var(--gray-600)}
.alert-popup .btn{display:flex; width:100%; background-color:var(--color-white); border-top:1px solid var(--color-border); line-height:1.2; --comp-height:50px; --comp-border-radius:0}
.alert-popup .btn.style-filled{background-color:var(--color-primary); border-top:none}
.alert-popup.horizontal .btns{display:flex}
.alert-popup.horizontal .btn:last-child{border-left:1px solid var(--color-border); margin-left:0}

/* modal */
.modal{position:relative; max-width:380px; padding:40px 32px 30px; background-color:var(--color-white); border-radius:20px; box-shadow:2px 4px 12px rgba(0,0,0,.08); overflow:hidden}
.modal .btn-close{position:absolute; top:20px; right:20px; width:34px; height:34px; padding:0; background-color:transparent}
.modal .content{text-align:center; margin-bottom:24px}
.modal .content .desc{color:var(--gray-600)}
.modal .content .thum{margin-top:24px}
.modal .content .thum-img{width:100%; height:auto; padding-bottom:60%; background-size:cover; background-position:center; background-repeat:no-repeat}
.modal .btn{width:100%; --comp-height:50px; --comp-border-radius:10px}