/* trigger */
.selbox__trigger{
	display:flex;
	align-items:center;
	justify-content:space-between;

	width: 100%;
	height: 35px;
	border-radius: 18px;
	border: 1px solid #C0C0C0;
	background:#fff;
	box-sizing: border-box;
	cursor:pointer;

	padding: 0 14px;
	font-size: 15px;
}

/* ±âº» »óÅ placeholder »ö : #757575 */
.selbox__text{
  color:#757575;
}

/* ¼±ÅÃµÈ »óÅ */
.selbox__trigger.is-selected{
	border-color: var(--trg-border, #C0C0C0);
}
.selbox__trigger.is-selected .selbox__text{
  color:var(--trg-color, #3F3F3F);
}


/* arrow */
.selbox__arrow{
  width:8px;
  height:8px;
  border-right:1px solid #666;
  border-bottom:1px solid #666;
  transform:rotate(45deg);
}
.selbox__arrow2{
  width:8px;
  height:15px;
  border-right:2px solid #666;
  border-bottom:2px solid #666;
  transform:rotate(45deg);
}
/* trigger */


/* dim */
.b-sheet-dim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);/* ÁøÇÏ°Ô */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  z-index: 9998;
}

/* ÄÁÅ×ÀÌ³Ê */
.b-sheet{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;/* ¹ÙÅÒ½ÃÆ®°¡ ¾ø´Â °Íó·³ µ¿ÀÛ : º¸ÀÌÁö¸¸, ¸¸Áú ¼ö´Â ¾ø´Ù */
  z-index: 9999;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* ÆгΠ*/
.b-sheet__panel{
  width: 100%;
  max-height: 85vh;/* ´õ ³ô°Ô 90~95 */
  background: #fff;
  border-radius: 16px 16px 0 0;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.25,.8,.25,1);/* ¿Ã¶ó¿À´Â ¼Óµµ */
  will-change: transform;
}

/* ³»ºÎ */
.b-sheet__header{
  display: flex;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid #eee;
}
.b-sheet__title{
  font-size:17px;
}

.b-sheet__body{
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.b-sheet__footer{
  padding: 12px 14px;
  border-top: 1px solid #eee;
}

/* ¿­¸² »óÅ */
body.b-sheet-open{
  overflow: hidden;
}
body.b-sheet-open .b-sheet{
  pointer-events: auto;
}
body.b-sheet-open .b-sheet-dim{
  opacity: 1;
  visibility: visible;
}
body.b-sheet-open .b-sheet__panel{
  transform: translateY(0);
}
/* ½ÃÆ® ¿ÀÇ »óŸé È­»ìÇ¥ ȸÀü */
body.b-sheet-open .selbox__arrow{
  transform: rotate(-135deg); /* ¡ã ´À³¦ */
}


/* (¼±ÅÃ) À§¿¡ ¼ÕÀâÀÌ ¹Ù */
.b-sheet__handle{
  width: 44px; height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  margin: 10px auto 0;
}