.docu-workspace-area{width:100%;padding:0}
.docu-screen-inner{width:100%}

.docu-search-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  margin-top:22px;
}

.docu-search-box input{
  height:48px;
  padding:0 17px;
  border:1px solid #d9d4cf;
  border-radius:13px;
  outline:0;
  font:inherit;
}

.docu-search-box input:focus{border-color:#ed1c24}
.docu-search-box button{min-width:88px}

.docu-category-filter{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  margin-top:18px;
  padding:16px 0;
  border-top:1px solid #e7e2dd;
  border-bottom:1px solid #e7e2dd;
}

.docu-category-filter>b{padding-top:7px}
.docu-category-filter>div{display:flex;flex-wrap:wrap;gap:7px}

.docu-category-filter button{
  padding:7px 12px;
  border:1px solid #e7e2dd;
  border-radius:999px;
  background:#fff;
  color:#555;
  cursor:pointer;
}

.docu-category-filter button.active,
.docu-category-filter button:hover{
  border-color:#ed1c24;
  background:#fff6f6;
  color:#ed1c24;
}

.docu-search-guide{
  margin:14px 0 24px;
  color:#777;
  font-size:13px;
}

.docu-result-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #e7e2dd;
}

.docu-result-header span{font-weight:700}
.docu-result-header em{color:#777;font-size:13px;font-style:normal}

.docu-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.docu-card{
  overflow:hidden;
  border:1px solid #e7e2dd;
  border-radius:10px;
  background:#fff;
  transition:.2s;
}

.docu-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.docu-card-image{
  position:relative;
  display:grid;
  height:150px;
  place-items:center;
  background:#f2f2f0;
}

.docu-card-image::before{
  content:"";
  position:absolute;
  width:82px;
  height:104px;
  border:2px solid #aaa;
  border-radius:3px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 10px,
      #d4d4d4 10px 12px
    ),
    #fff;
}

.docu-card-image span{
  position:relative;
  z-index:2;
  color:#ed1c24;
  font-size:18px;
  font-weight:900;
}

.docu-card-image em{
  position:absolute;
  right:12px;
  bottom:10px;
  color:#777;
  font-size:11px;
  font-style:normal;
}

.docu-card-body{padding:15px}
.docu-card h3{min-height:42px;margin:0;font-size:16px}
.docu-card-body>p{margin:9px 0 13px;color:#777;font-size:13px}

.docu-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:11px;
  border-top:1px solid #eee;
  color:#666;
  font-size:12px;
}

.docu-card-meta button{
  border:0;
  background:transparent;
  color:#aaa;
}

.docu-pagination{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:28px;
}

.docu-pagination button{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid #e7e2dd;
  border-radius:7px;
  background:#fff;
  cursor:pointer;
}

.docu-pagination button.active{
  border-color:#ed1c24;
  background:#ed1c24;
  color:#fff;
}

@media(max-width:1000px){
  .docu-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:700px){
  .docu-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:430px){
  .docu-card-grid{grid-template-columns:1fr}
}

/* DOCU_PACKAGE_V3_VISIBLE_FINAL */
.docu-card-image{
  height:190px!important;
  background-color:#fff!important;
  background-image:
    url("/static/docu-package-background-v3.png")!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
}


/* DOCU_CATEGORY_BOX_COLORS_01 */
.docu-card-image{
  background-image:
    linear-gradient(
      rgba(237,28,36,.08),
      rgba(237,28,36,.08)
    ),
    url("/static/docu-package-background-v3.png")!important;
  background-blend-mode:color,normal!important;
}

.docu-card-image[data-docu-visual="사업"]{
  background-image:
    linear-gradient(rgba(237,28,36,.36),rgba(237,28,36,.36)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="계약"]{
  background-image:
    linear-gradient(rgba(27,55,105,.42),rgba(27,55,105,.42)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="행정"]{
  background-image:
    linear-gradient(rgba(22,132,140,.38),rgba(22,132,140,.38)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="건설"]{
  background-image:
    linear-gradient(rgba(225,116,35,.40),rgba(225,116,35,.40)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="인사"]{
  background-image:
    linear-gradient(rgba(117,76,155,.38),rgba(117,76,155,.38)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="회계"]{
  background-image:
    linear-gradient(rgba(44,132,83,.38),rgba(44,132,83,.38)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="제안서"]{
  background-image:
    linear-gradient(rgba(42,105,180,.40),rgba(42,105,180,.40)),
    url("/static/docu-package-background-v3.png")!important;
}

.docu-card-image[data-docu-visual="보고서"]{
  background-image:
    linear-gradient(rgba(50,50,50,.20),rgba(50,50,50,.20)),
    url("/static/docu-package-background-v3.png")!important;
}