@charset "UTF-8";

/* ----- 가족회사 ----- */
.familyDB {}
.familyDB .list {display: flex; gap: 25px; flex-wrap: wrap;}
.familyDB .list > li {width: calc(25% - 18.75px); border-radius: 10px;box-shadow: 0px 0px 10px #30303021;padding: 25px 25px 20px;background: #fff;position: relative; display: grid; grid-template-rows: min-content max-content auto min-content;transition: 0.3s;}
.familyDB .list > li:hover {box-shadow: 0px 0px 15px #3939393d;transition: 0.3s;}
.familyDB .list > li > * {margin: 10px 0;}
.familyDB .list > li > *:first-child {margin-top: 0 !important;}
.familyDB .list > li > *:last-child {margin-bottom: 0 !important;}
.familyDB .list .img-wrap {width: 100%;height: 90px;max-width: 90px;border-radius: 43px;border: 3px solid #f1f1f1;margin-top: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.familyDB .list .img-wrap img {object-fit: contain;padding: 8px 10px; width: 100%; height: 100%;}
.familyDB .list .cate-wrap{position:absolute;width:150px;top:25px;right:25px;text-align:right; margin: 0;}
.familyDB .list .cate {position: relative;line-height: 1;display:inline-block;width: 90px;height: 28px;padding: 6px 13px 6px;border-radius: 50px;font-size: 15px; border: 1px solid;}
.familyDB .list .cate.busi {border-color: #1fad8d;color: #1fad8d;}
.familyDB .list .cate.prod {border-color: #e5685b;color: #e5685b;}
.familyDB .list .cate.tech {border-color: #1b6cca;color: #1b6cca;}
.familyDB .list .name {font-size: 24px;font-weight: bold; word-break: keep-all;}
.familyDB .list .home {display: inline-block;width: 31px;text-align: center;height: 31px;border-radius: 50px;font-size: 16px;padding: 6px 0 3px;background: #00469b;color: #fff;position: relative;top: -4px;margin-left: 5px;}
.familyDB .list .home span {border: 1px solid #ccc; padding: 3px 10px; border-radius: 50px; font-size: 15px;}
.familyDB .list .type {display: flex;flex-wrap: wrap;}
.familyDB .list .type li {border-radius: 5px;background: #edeff3;padding: 6px 9px 5px;font-size: 17px;margin-right: 7px; height: fit-content;}
.familyDB .list .type li.type-navy {background-color: #2a4aac; color: #fff;}
.familyDB .list .type li.type-blue {background-color: #2e7dd5; color: #fff;}

.familyDB .list .etc li {display:flex;font-size: 17px;margin: 8px 0;word-break: break-all; gap: 0px 10px;}
.familyDB .list .etc li strong {min-width: 70px; font-weight: 600; display: block; padding-left: 12px; position: relative;}
.familyDB .list .etc li strong::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #5b5b5b; position: absolute; top: 7px; left: 0;}

/* 가족회사 대학교 */
.family.univ {width: fit-content; border-color: #212529; color: #212529;}

/* 가족회사 등급 */
.family{display:inline-block;width: 90px;height: 28px;line-height: 15px;text-align: center;padding: 6px 13px;border-radius:50px;font-size:15px;border:1px solid;margin-bottom:7px;position:relative;box-sizing: border-box;}
.family::before{content:'';position:absolute;right: 2px;bottom: 2px; top:2px; left:2px; border-radius:50px;border:1px solid #fff;}
.family-p{border-color:#a8a8a8;color:#fff;background:#a8a8a8;}
.family-g{border-color:#bfa25e;color:#fff;background:#bfa25e;}
.family-s{border-color:#556c83;color:#fff;background:#556c83;}
.family-c{border-color:#2d2e30;color:#fff;background:#2d2e30;}

@media (max-width:1200px) {
    .familyDB .list {grid-template-columns: 1fr 1fr 1fr;}
    .familyDB .list .name {font-size: 21px;}
    .familyDB .list .home {width: 27px; height: 27px; font-size: 15px; padding: 4px 0 3px; top: -3px;}
}
@media (max-width:1024px) {
    .familyDB .list {grid-template-columns: 1fr 1fr;}
}
@media (max-width:768px) {
    .familyDB .list > li > * {margin: 8px 0;}
    .familyDB .list .etc li {flex-direction: column; margin: 10px 0;}
    /* .familyDB .list .etc p {margin-left: 3px; margin-top: 2px; font-size: 16px;} */
    .familyDB .list .etc li strong {margin-bottom: 5px;}
    .familyDB .list .cate {position: initial;text-align: center;margin: 0 auto;padding: 6px 10px 4px;}
    .family{padding: 6px 10px;height: auto;min-height: 28px;min-width: 90px;width: auto; margin-bottom: 5px;}

    .familyDB .list .cate-wrap {margin: 0;}
}
/* @media (max-width:650px) {
    .familyDB .list {grid-template-columns: 1fr;}
    .familyDB .list > li {padding: 18px 25px 15px;}
    .familyDB .list > li > * {margin: 5px auto !important;}
    .familyDB .list .cate {position: initial;text-align: center;margin: 0 auto;padding: 6px 10px 4px;}
    .familyDB .list .img-wrap {margin: 0 auto;}
    .familyDB .list .name {text-align: center;}
    .familyDB .list .etc li {text-align: center;word-break: keep-all;}
    .familyDB .list .type {justify-content: center;}
    .family{padding: 6px 10px;}

    .familyDB .list .cate-wrap {margin: 0 !important;}
} */

.history-popup {    
    position: absolute;
    top:-10px;
    left:0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);                   
    width:100%;
    height:100%;
    border-radius: 10px;box-shadow: 0px 0px 5px #2121212b;padding: 25px 25px 20px;
    display: none;  /* flex 추가 */
    flex-direction: column;
}
.history-popup * {
    color: white;
 }
.history-popup.on {
    display: flex;
}
.history-content {
    flex: 1; /* 남은 공간 모두 차지 */
    display: flex;
    flex-direction: column;
    min-height: 0; /* flex container에서 스크롤을 위해 필요 */
}
.history-list {
    flex: 1; /* 남은 공간 모두 차지 */
    overflow-y: auto;
    min-height: 0; /* flex container에서 스크롤을 위해 필요 */
    margin: 0;
    padding: 10px 0 0 0px;
    scrollbar-width: thin;  /* Firefox */
    scrollbar-color: #bbb transparent;  /* Firefox */
}
/* Chrome, Safari */
.history-list::-webkit-scrollbar {width: 5px;}
.history-list::-webkit-scrollbar-thumb {background: #bbb;border-radius: 10px;}

.history-list li {display: flex;align-items: center;font-size:16px;}

.history-list .date {
    flex-shrink: 0;  /* 날짜는 고정 크기 유지 */
    min-width: 80px;  /* 날짜 영역 최소 너비 */
    padding-right:3px;
}
.history-list .title {
    flex: 1 1 auto;  /* 남은 영역 모두 차지 */
    min-width: 0;    /* flex 아이템 말줄임을 위해 필요 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 20250909 가족회사 호버 시 상세 추가 */

.family-detail-box {opacity: 0; width: 100%; height: 100%; position: absolute; top: -10px; left: 0; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px; color: #fff; padding: 25px; transition: 0.3s ease-in-out;}
@media (min-width: 1401px) {
  .familyDB .list > li:hover .family-detail-box {opacity: 1;}
}

.family-detail-box .family-detail-tit {font-size: 24px; text-align: center; margin-bottom: 25px; font-weight: 600;}
.family-detail-box .family-detail-list dl {display: flex; gap: 10px; width: 100%; margin-bottom: 10px;}
.family-detail-box .family-detail-list dl dt {width: 110px; font-weight: 600; font-size: 17px; padding-left: 10px; position: relative;}
.family-detail-box .family-detail-list dl dt::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 7px; left: 0;}
.family-detail-box .family-detail-list dl dd {flex: 1; font-size: 17px;}

.familyDB .list .family-mbtn {display: none; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #d5d7dd; position: absolute; top: 25px; right: 25px; z-index: 1;}
.familyDB .list .family-mbtn i {color: #d5d7dd; font-size: 18px; display: flex; align-items: center; justify-content: center;}

@media (max-width: 1580px) {
    .familyDB .list > li {width: calc(33.333% - 16.666px);}
}
@media (max-width: 1400px) {
    .familyDB .list .cate-wrap {position: static; text-align: left; padding: 0; margin: 5px 0 0;}
    .familyDB .list .cate-wrap .family {margin: 0;}

    .familyDB .list .family-mbtn {display: block;}
}
@media (max-width: 1150px) {
    .familyDB .list {gap: 20px;}
    .familyDB .list > li {width: calc(50% - 10px);}
    .family-detail-box .family-detail-tit {font-size: 21px;}
}
@media (max-width: 768px) {
    .familyDB .list > li {width: 100%}
}
@media (max-width: 500px) {
    .family-detail-box .family-detail-tit {margin-bottom: 20px;}
    .family-detail-box .family-detail-list dl {flex-direction: column; gap: 4px; margin-bottom: 12px;}
}