/* 연구실 아코디언 목록 (lab_research 스킨 전용) ********************************* * 내용 : https://ee.yonsei.ac.kr/ee/research/lab.do * 아코디언 모션은 졸업요건(#gradReq .gr-fold)과 같은 grid-template-rows 0fr↔1fr 방식. * 높이를 미리 계산하지 않아서 영상이 들어가도 딱 맞게 열린다. ============================================================================== */ #bo_list.lab-research{ --lb-pt:#2a6de6; --lb-dk:#1b3b86; --lb-line:#e6e8ee; position:relative;margin:0 auto;font-family:var(--font-family1);word-break:keep-all; } /* ---------- 분야 탭 + 검색 ---------- */ #bo_list.lab-research .rs-filter{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin:0 0 30px;} #bo_list.lab-research .rs-tabs{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0;} #bo_list.lab-research .rs-tabs button{display:inline-flex;align-items:center;gap:7px;padding: 12px 20px;border:1px solid #dde2ea;border-radius:999px;background:#fff;color:#4d525c;font-family:inherit;font-size: 19px;font-weight:600;letter-spacing:-.5px;line-height:1;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;} #bo_list.lab-research .rs-tabs button:hover{border-color:var(--lb-pt);color:var(--lb-pt);} #bo_list.lab-research .rs-tabs button.on{border-color:var(--lb-dk);background:var(--lb-dk);color:#fff;} #bo_list.lab-research .rs-tabs button em{font-style:normal;font-family:var(--font-family2);font-size:15px;font-weight:700;color:#98a0ae;} #bo_list.lab-research .rs-tabs button.on em{color:rgba(255,255,255,.72);} #bo_list.lab-research .rs-tabs button i{font-size:17px;font-weight:normal;} #bo_list.lab-research .rs-search{position:relative;flex:0 0 auto;width:340px;} #bo_list.lab-research .rs-search input{width:100%;height: 46px;padding:0 42px;border:1px solid #dde2ea;border-radius:999px;background:#fff;color:#222;font-family:inherit;font-size: 17px;letter-spacing:-.5px;box-sizing:border-box;transition:border-color .2s ease;} #bo_list.lab-research .rs-search input:focus{outline:none;border-color:var(--lb-pt);} #bo_list.lab-research .rs-search input::placeholder{color:#a3a9b5;} #bo_list.lab-research .rs-search > i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#98a0ae;font-size:19px;font-weight:normal;pointer-events:none;} #bo_list.lab-research .rs-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:#eef1f5;color:#666;cursor:pointer;} #bo_list.lab-research .rs-search-clear[hidden]{display:none;} /* display:flex 가 hidden 속성을 이겨버리므로 따로 막는다 */ #bo_list.lab-research .rs-search-clear:hover{background:#dde2ea;color:#222;} #bo_list.lab-research .rs-search-clear i{font-size:16px;font-weight:normal;} #bo_list.lab-research .rs-count{margin:0 0 14px;padding-left:4px;color:#7a8090;font-size: 18px;font-weight: 600;letter-spacing:-.5px;} #bo_list.lab-research .rs-count b{color:var(--lb-dk);font-family:var(--font-family2);font-size:18px;font-weight:700;} /* ---------- 목록 ---------- */ #bo_list.lab-research .rs-acc{margin:0;padding:0;list-style:none;border-top:2px solid #222;} #bo_list.lab-research .rs-acc > li{border-bottom:1px solid var(--lb-line);} #bo_list.lab-research .rs-q{display:flex;align-items:center;gap:20px;width:100%;padding:22px 16px;border:0;background:transparent;color:inherit;font-family:inherit;text-align:left;cursor:pointer;transition:background .2s ease;} #bo_list.lab-research .rs-q:hover{background:#f6f8fb;} #bo_list.lab-research .rs-acc > li.on .rs-q{background:#f6f8fb;} #bo_list.lab-research .rs-q .no{flex:0 0 auto;width:34px;color:#a3a9b5;font-family:var(--font-family2);font-size:16px;font-weight:600;text-align: center;} #bo_list.lab-research .rs-q .name{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;color:#1a1c20;font-size: 24px;font-weight: 700;line-height:1.4;letter-spacing:-.7px;} #bo_list.lab-research .rs-acc > li.on .rs-q .name{color:var(--lb-dk);} #bo_list.lab-research .rs-vid{flex:0 0 auto;color:#e0403a;font-size:19px;font-weight:normal;} /* 교수명 : 이름만 두면 행(88px)이 비어 보여서, 연구분야 페이지(sub3_1_*)와 같은 사진을 앞에 붙인다. 사진 파일은 이메일 아이디로 찾고(lab_common.php 의 lab_prof_photo), 없으면 성을 넣은 원으로 대체한다. */ #bo_list.lab-research .rs-q .prof{flex:0 0 auto;display:flex;align-items:center;gap:12px;width:260px;color:#4d525c;font-size:17px;font-weight:600;letter-spacing:-.5px;} #bo_list.lab-research .rs-q .prof .pic{flex:0 0 auto;overflow:hidden;width:48px;height:48px;border-radius:50%;background:#e7ecf3;} #bo_list.lab-research .rs-q .prof .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;} /* 원본이 400x560 세로형이라 위쪽을 잡아야 얼굴이 가운데 온다 */ #bo_list.lab-research .rs-q .prof .pic.no-photo{display:flex;align-items:center;justify-content:center;color:#8794aa;font-family:var(--font-family2);font-size:20px;font-weight:700;line-height:1;} #bo_list.lab-research .rs-q .prof .nm{min-width:0;} #bo_list.lab-research .rs-q .prof em{display:block;margin-top:3px;font-family:var(--font-family2);font-size:15px;font-style:normal;font-weight:500;color:#98a0ae;} #bo_list.lab-research .rs-q .room{flex:0 0 auto;width:110px;color:#4d525c;font-size:17px;font-weight:500;letter-spacing:-.3px;text-align:center;} #bo_list.lab-research .rs-q .tel{flex:0 0 auto;width:80px;color:#4d525c;font-size:17px;font-weight:500;font-family:var(--font-family2);text-align:center;} #bo_list.lab-research .rs-q .room i, #bo_list.lab-research .rs-q .tel i{font-style:normal;color:#b6bcc7;} #bo_list.lab-research .rs-ar{flex:0 0 auto;width:24px;text-align:center;color:#98a0ae;font-size:24px;font-weight:normal;transition:transform .35s cubic-bezier(.16,1,.3,1),color .2s ease;} #bo_list.lab-research .rs-acc > li.on .rs-ar{transform:rotate(180deg);color:var(--lb-dk);} /* ---------- 펼침 ---------- */ #bo_list.lab-research .rs-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);} #bo_list.lab-research .rs-acc > li.on .rs-fold{grid-template-rows:1fr;} #bo_list.lab-research .rs-fold-in{overflow:hidden;min-height:0;} /* 배경 없이 연구실명 열에 맞춰 들여쓴다(16 패딩 + 34 NO열 + 20 간격 = 70). 정보가 왼쪽, 영상이 오른쪽 끝. 영상 없는 연구실도 왼쪽이 차 있어 허전하지 않다. */ #bo_list.lab-research .rs-body{display:flex;align-items:flex-start;justify-content:space-between;gap:50px;margin:0;padding:26px 16px 36px 70px;} #bo_list.lab-research .rs-movie{flex:0 0 auto;order:2;position:relative;width:392px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000;} #bo_list.lab-research .rs-movie .rs-play{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;} #bo_list.lab-research .rs-movie .rs-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease;} #bo_list.lab-research .rs-movie .rs-play:hover img{transform:scale(1.05);opacity:.82;} #bo_list.lab-research .rs-movie .rs-play i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:rgba(224,64,58,.94);color:#fff;font-size:34px;font-weight:normal;padding-left:4px;box-sizing:border-box;transition:transform .3s cubic-bezier(.16,1,.3,1);} #bo_list.lab-research .rs-movie .rs-play:hover i{transform:translate(-50%,-50%) scale(1.08);} #bo_list.lab-research .rs-movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} #bo_list.lab-research .rs-meta{flex:1 1 auto;order:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;} #bo_list.lab-research .rs-meta dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;width:100%;margin:0;} #bo_list.lab-research .rs-meta dt{color:#8a90a0;font-size:16px;font-weight:500;letter-spacing:-.3px;white-space:nowrap;} #bo_list.lab-research .rs-meta dd{margin:0;color:#34322E;font-size:16px;font-weight:500;letter-spacing:-.3px;overflow-wrap:anywhere;} #bo_list.lab-research .rs-meta dd b{color:#1a1c20;font-weight:700;} #bo_list.lab-research .rs-meta dd em{font-family:var(--font-family2);font-style:normal;color:#98a0ae;} #bo_list.lab-research .rs-meta dd a{color:#34322E;text-decoration:none;} #bo_list.lab-research .rs-meta dd a:hover{color:var(--lb-pt);text-decoration:underline;} #bo_list.lab-research .rs-badges{display:flex;flex-wrap:wrap;gap:6px;} #bo_list.lab-research .rs-badges span{display:inline-block;padding:5px 12px;border-radius:999px;background:#e4ebf8;color:var(--lb-dk);font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:1.3;} #bo_list.lab-research .rs-site{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:13px 24px;border-radius:999px;background:var(--lb-dk);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.5px;line-height:1;text-decoration:none;transition:background .25s cubic-bezier(.16,1,.3,1);} #bo_list.lab-research .rs-site:hover{background:var(--lb-pt);} #bo_list.lab-research .rs-site i{font-size:17px;font-weight:normal;} #bo_list.lab-research .rs-empty{margin:60px 0;padding:0;color:#8a90a0;font-size:18px;text-align:center;letter-spacing:-.5px;} @media (max-width:1280px){ #bo_list.lab-research .rs-filter{flex-direction:column;gap:16px;} #bo_list.lab-research .rs-search{width:100%;} #bo_list.lab-research .rs-q .prof{width:214px;} #bo_list.lab-research .rs-movie{width:320px;} #bo_list.lab-research .rs-body{gap:30px;} } @media (max-width:980px){ /* 좁아지면 호실 · 교내는 접힌 내용에서만 보여준다 */ #bo_list.lab-research .rs-q .room, #bo_list.lab-research .rs-q .tel{display:none;} #bo_list.lab-research .rs-q .prof{width:158px;gap:10px;font-size:16px;} #bo_list.lab-research .rs-q .prof em{display:none;} #bo_list.lab-research .rs-q .prof .pic{width:40px;height:40px;} #bo_list.lab-research .rs-q .prof .pic.no-photo{font-size:17px;} #bo_list.lab-research .rs-body{flex-direction:column;align-items:stretch;gap:26px;} /* 세로로 쌓일 땐 flex-start 가 폭을 내용만큼 줄여버린다 */ #bo_list.lab-research .rs-movie{width:100%;max-width:520px;} } @media (max-width:767px){ #bo_list.lab-research .rs-tabs button{padding:9px 14px;font-size:16px;} #bo_list.lab-research .rs-search input{height:44px;} #bo_list.lab-research .rs-q{gap:12px;padding:18px 8px;} #bo_list.lab-research .rs-q .no{display:none;} #bo_list.lab-research .rs-q .name{flex-direction:row;font-size:17px;} /* 아주 좁아지면 이름 자리가 모자라 사진만 남긴다(이름은 펼친 내용에 그대로 있다) */ #bo_list.lab-research .rs-q .prof{width:auto;flex:0 0 auto;gap:0;font-size:16px;} #bo_list.lab-research .rs-q .prof .nm{display:none;} #bo_list.lab-research .rs-q .prof .pic{width:38px;height:38px;} #bo_list.lab-research .rs-ar{font-size:22px;} #bo_list.lab-research .rs-body{padding:20px 8px 28px;gap:22px;} #bo_list.lab-research .rs-meta dl{grid-template-columns:1fr;gap:4px;} #bo_list.lab-research .rs-meta dt{margin-top:12px;font-size:16px;} #bo_list.lab-research .rs-meta dt:first-child{margin-top:0;} #bo_list.lab-research .rs-site{width:100%;justify-content:center;margin-top:20px;} #bo_list.lab-research .rs-movie .rs-play i{width:52px;height:52px;font-size:28px;} } @media (prefers-reduced-motion:reduce){ #bo_list.lab-research .rs-fold, #bo_list.lab-research .rs-ar, #bo_list.lab-research .rs-movie .rs-play img, #bo_list.lab-research .rs-movie .rs-play i{transition:none !important;} } /* ---------- 상단 바 · 컬럼 머리글 ---------- */ #bo_list.lab-research .rs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;} #bo_list.lab-research .rs-adm{display:flex;align-items:center;gap:8px;} /* 머리글은 .rs-q 와 같은 flex 규칙을 써야 아래 줄과 세로가 맞는다 */ #bo_list.lab-research .rs-head{display:flex;align-items:center;gap:20px;padding:24px 15px;border-top:2px solid #222;border-bottom:1px solid var(--lb-line);background:#fafbfc;color:#5a616e;font-size:17px;text-align:center;font-weight:600;letter-spacing:-.3px;} #bo_list.lab-research .rs-head .no{flex:0 0 auto;width:34px;font-family:var(--font-family2);text-align: center;} #bo_list.lab-research .rs-head .name{flex:1 1 auto;min-width:0;} #bo_list.lab-research .rs-head .prof{flex:0 0 auto;width:260px;} #bo_list.lab-research .rs-head .room{flex:0 0 auto;width:110px;} #bo_list.lab-research .rs-head .tel{flex:0 0 auto;width:80px;} #bo_list.lab-research .rs-head .ar{flex:0 0 auto;width:24px;} #bo_list.lab-research .rs-acc{border-top:0;} /* 머리글이 위 선을 그리므로 중복 제거 */ /* ---------- 펼친 내용 안의 본문 · 링크 ---------- */ #bo_list.lab-research .rs-desc{margin-top:18px;color:#4d525c;font-size:16px;line-height:1.8;letter-spacing:-.5px;} #bo_list.lab-research .rs-desc p{margin:0 0 10px;} #bo_list.lab-research .rs-desc img{max-width:100%;height:auto;} #bo_list.lab-research .rs-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;} #bo_list.lab-research .rs-links .rs-site{margin-top:0;} #bo_list.lab-research .rs-more{display:inline-flex;align-items:center;padding:13px 22px;border:1px solid #cfd6e2;border-radius:999px;background:#fff;color:#4d525c;font-size:16px;font-weight:600;letter-spacing:-.5px;line-height:1;text-decoration:none;transition:border-color .2s ease,color .2s ease;} #bo_list.lab-research .rs-more:hover{border-color:var(--lb-pt);color:var(--lb-pt);} @media (max-width:1280px){ #bo_list.lab-research .rs-head .prof{width:214px;} } @media (max-width:980px){ #bo_list.lab-research .rs-head .room, #bo_list.lab-research .rs-head .tel{display:none;} #bo_list.lab-research .rs-head .prof{width:158px;} } @media (max-width:767px){ #bo_list.lab-research .rs-bar{flex-direction:column;align-items:stretch;} #bo_list.lab-research .rs-head{gap:12px;padding:12px 8px;font-size:15px;} #bo_list.lab-research .rs-head .no{display:none;} #bo_list.lab-research .rs-head .prof{display:none;} /* 이 폭에서는 행에도 사진만 남으므로 머리글 라벨을 뺀다 */ #bo_list.lab-research .rs-links{flex-direction:column;align-items:stretch;} #bo_list.lab-research .rs-more{justify-content:center;} } /* ---------- 상세보기(view)의 연구실 정보 블록 ---------- */ #bo_v.lab-basic .rv-info{display:flex;align-items:flex-start;gap:34px;margin:0 0 30px;padding:28px 32px;border-radius:14px;background:#f6f6f9;} #bo_v.lab-basic .rv-movie{flex:0 0 auto;position:relative;width:392px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000;} #bo_v.lab-basic .rv-movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} #bo_v.lab-basic .rv-info dl{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0;} #bo_v.lab-basic .rv-info dt{color:#8a90a0;font-size:16px;font-weight:500;letter-spacing:-.3px;white-space:nowrap;} #bo_v.lab-basic .rv-info dd{margin:0;color:#34322E;font-size:16px;font-weight:500;letter-spacing:-.3px;overflow-wrap:anywhere;} #bo_v.lab-basic .rv-info dd a{color:#34322E;text-decoration:none;} #bo_v.lab-basic .rv-info dd a:hover{color:#2a6de6;text-decoration:underline;} @media (max-width:980px){ #bo_v.lab-basic .rv-info{flex-direction:column;gap:22px;padding:22px 20px;} #bo_v.lab-basic .rv-movie{width:100%;max-width:520px;} } @media (max-width:767px){ #bo_v.lab-basic .rv-info dl{grid-template-columns:1fr;gap:4px;} #bo_v.lab-basic .rv-info dt{margin-top:12px;} #bo_v.lab-basic .rv-info dt:first-child{margin-top:0;} } /* 등록된 글이 아직 없는 분류도 게시판 설정에 있으면 그대로 보여준다(설정이 먹었는지 확인 가능) */ #bo_list.lab-research .rs-tabs button.zero{border-style:dashed;color:#98a0ae;} #bo_list.lab-research .rs-tabs button.zero em{color:#c2c8d2;} #bo_list.lab-research .rs-hint{margin:0 0 18px;padding:14px 18px;border:1px dashed #cfd6e2;border-radius:10px;background:#fafbfc;color:#5a616e;font-size:15px;line-height:1.7;letter-spacing:-.3px;} #bo_list.lab-research .rs-hint b{color:#1b3b86;} #bo_list.lab-research .rs-hint code{padding:2px 6px;border-radius:4px;background:#eef1f5;font-family:Consolas,monospace;font-size:14px;} /* ---------- 관리자 : 목록 앞 체크박스 + 선택삭제 ---------- */ #bo_list.lab-research .rs-head.is-chk .chk{flex:0 0 auto;width:20px;} #bo_list.lab-research .rs-head.is-chk .chk input{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--lb-dk);vertical-align:middle;} #bo_list.lab-research .rs-acc > li.is-chk{display:flex;flex-wrap:wrap;align-items:flex-start;} #bo_list.lab-research .rs-acc > li.is-chk .rs-chk{flex:0 0 auto;width:20px;margin-left:15px;padding-top:30px;cursor:pointer;} #bo_list.lab-research .rs-acc > li.is-chk .rs-chk input{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--lb-dk);} #bo_list.lab-research .rs-acc > li.is-chk > .rs-q{flex:1 1 auto;width:auto;min-width:0;padding-left:20px;} #bo_list.lab-research .rs-acc > li.is-chk > .rs-fold{flex:0 0 100%;} /* 체크박스 위에 마우스를 올려도 행 전체가 밝아지도록 (버튼 hover 와 같은 느낌) */ #bo_list.lab-research .rs-acc > li.is-chk:hover{background:#f6f8fb;} #bo_list.lab-research .rs-selbtns{display:flex;justify-content:flex-end;gap:5px;margin-top:20px;} #bo_list.lab-research .rs-selbtns .lab-selbtn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;border:1px solid #dde2ea;border-radius:999px;background:#fff;color:#4d525c;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1;cursor:pointer;transition:border-color .2s ease,color .2s ease;} #bo_list.lab-research .rs-selbtns .lab-selbtn:hover{border-color:var(--lb-dk);color:var(--lb-dk);} #bo_list.lab-research .rs-selbtns .lab-selbtn i{font-size:17px;font-weight:normal;} @media (max-width:767px){ #bo_list.lab-research .rs-head.is-chk .chk{display:none;} #bo_list.lab-research .rs-acc > li.is-chk .rs-chk{margin-left:8px;padding-top:24px;} #bo_list.lab-research .rs-acc > li.is-chk > .rs-q{padding-left:12px;} #bo_list.lab-research .rs-selbtns{flex-wrap:wrap;} }