
/* bottom sheet */
  .bottomSheet-container { position: fixed; inset: 0; display: flex; justify-content: flex-end; align-items: stretch; flex-direction: column; z-index: 300; }
  .bottomSheet-container .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; }
  .bottomSheet { position: fixed; left: 0; bottom: 0; right: 0; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; z-index: 10; max-height: 100%; overflow: hidden;  }
  .bottomSheet { background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.11); transform: translate3d(0, 100%, 0)}
  .bs_head { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05); -webkit-transition: all 0.3s; }
  .bs_head.scrollDown { box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); }
  .bs_title { width: 100%; margin:0px; padding: 10px 4px; font-size: 17px; font-weight: 700; text-align:center;  }
  .bs_dragable { display: flex; justify-content: center; align-items: center; padding: 14px 0; }
  .bs_dragable:before { content: ""; width: 54px; height: 4px; border-radius: 4px;  background: #F0F0F0; }
  .bs_header { display: flex; justify-content: flex-start; align-items: center; padding: 10px 20px 0; flex-wrap: wrap; }
  .bs_header:after { content: ""; display: block; width: 100%; height: 1px;  margin-top: 18px; background: #F1F3F5; }
  .bs_alert { margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 22px; color: #1A1A1A; }
  .bs_content { /*padding: 18px 20px 30px;*/ flex-grow: 1; overflow-y: auto; }
  .bs_content::-webkit-scrollbar { width: 15px; border-radius: 8px; border: 2px solid #fff; }
  .bs_content::-webkit-scrollbar-thumb { background: #E4E5ED; border-radius: 10px; border: 5px solid #fff; }
  .bs_content .tit { display: flex; justify-content: flex-start; align-items: center; }
  .bs_content .tit h1 { font-size: 14px; font-weight: 300; color: #404040; }
  .bs_btn_area { display: flex; justify-content: center; align-items: stretch; gap: 10px; padding: 10px 20px; }
  .bs_btn_area .btn { display: flex; justify-content: center; align-items: center; height: 48px; flex: 1; background: #fff; border: 1px solid #B0B0B0;; border-radius: 5px; }
  .bs_btn_area .btn img { margin-right: 7px; }
  .bs_btn_area .btn span { font-size: 16px; font-weight: 600; color: #404040; }

  /* bottom sheet active */
  .bottomSheet-container,
  .bottomSheet:not(.not-selectable) { -webkit-transition: all 0.3s; }
  .bottomSheet-container[aria-hidden="true"],
  .bottomSheet-container .overlay[aria-hidden="true"]  { visibility: hidden; pointer-events: none; opacity: 0; }
  .bottomSheet-container[aria-hidden="false"] .bottomSheet { transform: translate3d(0,0,0); }
  .bs_head[aria-hidden="true"] { display: none; }

  /* bottom sheet search */
  /*.bottomSheet .search-input { padding-bottom: 18px; border-bottom: 1px solid #F1F3F5; }*/
  .bs_title + .search-input { margin-top: 18px; }

  /* botthom sheet option  */
  .selector-wrap { padding: 0px 20px 50px; }
  .select-option { font-size: 16px; color: #1A1A1A; font-weight: 400; padding:0px; margin:0px; }
  .select-option li {  display: flex;  /* justify-content: flex-start; */ justify-content: center; align-items: center; height: 52px; }
  .select-option li:not(.hide) + li { /* border-top: 1px solid #F1F3F5; */ }
  .select-option li.hide { display: none}
  .select-option .option { gap: 14px; padding-left: 4px; }
  .select-option .option.selected { position:relative; /* background:#f4f4f4; font-weight: 700; */  }	/* 선택된 select */
  
.select-option .option.selected::after{
  content: "✓";
  position:absolute;
  right: 20px;             /* before 원 안에 위치 */
  top: 50%;
  transform: translateY(-55%)  scaleX(1.4);
  font-size: 16px;
  font-weight: 800;
  color: #73EDA3;
}

  .select-option .option .icon { font-size: 20px; }
  .select-option .option .icon-24 { font-size: 24px; }
  .select-option .option.disabled { pointer-events: none; opacity: 0.5; }
  
  .select-option li a { color:#000; }  /* 이 게시글.. 등의 링크형 연결 위해 */  
  
  .select-option.sheet_col2 { 
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2열 */
		gap: 8px;                                         /* 항목 사이 간격 */
		list-style: none;
		margin: 0;
		padding: 0;
		
  }
  
  .select-option.sheet_left li { justify-content:left; padding-left:10px; }
  .select-option.sheet_right li { justify-content:right; padding-right:10px;  }  

  
  .selector-group { margin-top: 28px; }
  .selector-group  + .selector-group  { margin-top: 40px; }
  .select-group-tit { font-size: 14px; font-weight: 500; color: #868A8C; margin-bottom: 10px; line-height: 1.3em; }
  .select-group-option { font-size: 14px; font-weight: 600; color: #222; line-height: 24px; }
  .select-group-option .option { padding: 4px 0; line-height: 24px; }
  
  /* radio 형 */
  .select-option li .option input[type=radio] { display:none; }
  .select-option li.checked { background:#f4f4f4; font-weight: 700; }  
  


  /* 가입 유도 */
  .sigin-induce { display: flex; justify-content: flex-start; align-items: center; margin-top: 22px; }
  .sigin-induce .text { font-size: 14px; font-weight: 500; color: #5E5E5E; }
  .sigin-induce .link { margin-left: auto; margin-right: 0; font-size: 14px; font-weight: 700; color: var(--color-primary); }

  .signup-induce { padding: 18px 20px 30px; }
  .signup-induce .tit { padding: 12px; font-size: 18px; font-weight:700; color: #1A1A1A; justify-content: center; text-align: center; margin-bottom: 4px; }
  .signup-induce .alert { font-size: 12px; font-weight: 500; color: #333; margin-bottom: 24px; text-align: center; }
  .signup-induce .alert a { color: var(--color-primary-200); }
  .singup-list { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; gap: 8px; }
  .singup-list a { display: flex; justify-content: center; align-items: center; position: relative; border: 1px solid #E3E5E8; border-radius: 4px; height: 40px;}
  .singup-list a span { color: #5E5E5E; font-size: 15px; font-weight: 600;  }
  .singup-list a .icon { position: absolute; left: 0; top: 0; font-size: 22px; margin: 9px 12px; }
  .singup-list-lg a span { font-size: 16px; }
  .singup-list-lg a .icon { font-size: 24px; margin: 13px; }



/* BS 상단 타이틀 */
.bottomSheet .bs_title{
  display:flex;
  align-items:center;
  justify-content: left; /* 가로(주축) */
  padding-left:30px;
  font-size:20px;
  margin-bottom:15px;
  
}

.bottomSheet .bs_title_text{
  padding-left:30px;
  justify-content:left;  
}

.bottomSheet .bs_title_count{
  font-size: 17px;
  color:#9a9a9a;
  padding-right:25px;
  justify-content:right;
}


