@charset "utf-8";

.project-preview {position: relative; display: -ms-grid; display: grid; grid-template-columns: 190px 1fr; grid-row-gap: 20px; grid-column-gap:4%; margin: auto;}
.project-preview::-webkit-scrollbar{-webkit-appearance:none; width: 8px; height: 8px;}
.project-preview::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(232, 232, 232, 0.5);-webkit-box-shadow: 0 0 1px rgba(232, 232, 232, 0.5)}
.project-preview::before {display: block; content: ''; position: absolute; top: 0; left: 208px; bottom: 0; width: 1px; height: 100%; background-color: #F5F5F5;}
.project-preview.no-image {grid-template-columns: 1fr; grid-column-gap: 0;}
.project-preview.no-image .project-preview-photo {display: none;}
.project-preview img {vertical-align: top;}
.project-preview-image {}
.project-preview-cont {}
.project-info-row {display: flex; align-items:normal;}
.project-info-row > .project-info-tit {width: 130px; padding: 6px 10px 6px 0; color: #2B2A29; font-size: 18px; font-weight: 600;}
.project-info-row > .project-info-detail {flex: 1; padding: 5px 0 5px 0}
.project-info-row ~ .project-info-row { margin-top: 10px; }

.badge-project {display: inline-block; height: 26px; padding: 4px 16px; border-radius: 13px; background-color: #FAFAFA; color: #505050; font-size: 14px; font-weight: normal; white-space: nowrap;}
.badge-project.badge-project-green {background-color: #EBFAEB; color: #09A05B;}
.badge-project.badge-project-blue {background-color: #EFF8FF; color: #1369EE;}
.badge-project.badge-project-gray {background-color: #FAFAFA; color: #505050;}
.badge-project.badge-project-orange {background-color: #FFF4EA; color: #FA5C03;}
.badge-project.badge-project-red {background-color: #FFF3F3; color: #FF6868;}

.project-preview-photo {}
.project-preview-photo > .item-photo {position: relative; display: flex; align-items: center; justify-content: center; width: 190px; height: 148px; padding: 9px; border: 1px solid #E9E9E9; border-radius: 8px;}
.project-preview-photo > .item-photo::before {content:""; display:block; position: absolute; top:9px; bottom:9px; left:9px; right:9px; border-radius: 6px; border: 1px dashed #E9E9E9; /*background: url(/assets/imgs/icons/icon_no_image.svg) no-repeat center center / 36px 36px;*/}
.project-preview-photo > .item-photo .img {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; width: 100%; aspect-ratio: 4 / 3;}
.project-preview-photo > .item-photo .img .img-inner {aspect-ratio: 4 / 3; overflow: hidden; display: flex; border-radius: 6px; position: absolute; top: 0; right: 0; left: 0; bottom: 0;}
.project-preview-photo > .item-photo .img .img-inner img {
    object-fit: cover; 
    width: auto; 
    height: auto; 
    max-width: none;
    max-height: none;
    object-position: initial;
}

.suggestion-list-container { border-top: 1px solid #e8e8e8; overflow: hidden; width: 100%; max-height: 310px; margin-top: 10px; padding: 10px; overflow-x:hidden; overflow-y:auto;}
.suggestion-list {width: 170px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.suggestion-item { position: relative; border-radius: 4px; cursor: pointer; width: 80px; height: 80px; overflow: hidden; }
.suggestion-item.active:before { content: ""; position: absolute; z-index: 1; top: -2px; right: -2px; bottom: -2px; left: -2px; border: 4px solid #ea4c4c; border-radius: 4px; }
.suggestion-item-img { border-radius: 2px; height: 100%; width: 100%;; overflow: hidden; text-align: center; }
.suggestion-item .spinner-loader {position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px;}

.tags-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 5px; border: 1px solid var(--color-gray-400);}
.tags-list input { flex: 1; padding: 5px; border: none; outline: none; min-height: 32px; font-size: 16px;}
.tags-list .tags-item { display: flex; align-items: center; gap: 2px; color: #333; margin: 0 3px; list-style: none; border-radius: 5px; background: #f2f2f2; padding: 4px 8px 4px 8px; border: 1px solid #e3e1e1;}
.tags-list .tags-item .delete { display: inline-block; height: 20px; width: 20px; color: #808080; font-size: 12px; cursor: pointer; border-radius: 50%; background: #dfdfdf; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5L5 19' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 19L5 5' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center;}
.putin-ahead-item {position: relative;}
.tags-count-info {margin-top: 6px;}
/* .tags-item-delete { align-self: flex-end; justify-self: end;} */
@media screen and (max-width: 767px) {
  .project-preview {
    grid-template-columns: 1fr; /* 1열로 변경하여 요소들을 아래로 배치 */
    grid-column-gap: 0;         /* 좌우 간격 제거 (필요 시) */
  }
  .project-preview::before {content: none;}
  .project-preview-photo {
    display: grid;
    grid-template-columns: auto 1fr; 
    grid-gap: 10px;
  }
  .suggestion-list-container { border-top: none; margin-top: 0; width: 100%; overflow-y: hidden; overflow-x: auto;}
  .suggestion-list { width: auto; display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; grid-auto-columns: min-content; grid-gap: 8px; grid-template-columns: none;}
  .suggestion-item { width: 60px; height: 60px;}
}

/* 슬라이더 감싸는 컨테이너 */
.cr-slider-wrap { position: absolute; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 80%; max-width: 300px; /* 원하시는 너비로 조절하세요 */ padding: 10px 0;}
/* 기본 range input 스타일 리셋 및 공통 커스텀 */
.cr-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; /* 트랙(선) 두께 */ background: var(--color-primary-50);; /* 트랙 기본 배경색 */ border-radius: 4px; outline: none; transition: background 0.2s ease; cursor: pointer;}
.cr-slider:hover { background: var(--bluegray-100);}
/* ==========================================  1. Chrome, Safari, Opera, Edge (Webkit)  ========================================== */
/* 슬라이더 손잡이 (Thumb) */
.cr-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; /* 손잡이 너비 */ height: 18px; /* 손잡이 높이 */ border-radius: 50%; background: var(--color-primary-500); /* 손잡이 색상 (포인트 컬러) */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, background-color 0.15s ease;}
/* Hover & Active 효과 */
.cr-slider::-webkit-slider-thumb:hover { transform: scale(1.15); background: var(--color-primary-600);}
.cr-slider:active::-webkit-slider-thumb { transform: scale(0.95); background: var(--color-primary-400);}
/* Focus 접근성 스타일 */
.cr-slider:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 4px;}
/* ==========================================  2. Firefox  ========================================== */
/* 슬라이더 손잡이 (Thumb) */
.cr-slider::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--color-primary-500); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, background-color 0.15s ease;}
.cr-slider::-moz-range-thumb:hover { transform: scale(1.15); background: var(--color-primary-600);}
.cr-slider:active::-moz-range-thumb { transform: scale(0.95); background: var(--color-primary-400);}
/* Firefox 채워진 트랙 영역 스타일 */
.cr-slider::-moz-range-progress { background: var(--color-primary-500); height: 6px; border-radius: 4px;}