/* ===============================
   ICON BASE
=============================== */
.ico{
  display:inline-block;
  position:relative;
  width:var(--ico-size, 24px);
  height:var(--ico-size, 24px);
}

.ico::before,
.ico::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--ico-len, 80%);
  height:var(--ico-thick, 2px);
  background:var(--ico-color, #222);
  border-radius:999px;
  transform-origin:center;
}


/* ===============================
1. ´Ý±â (X)

<button type=button class="btn-ico" aria-label="´Ý±â">
  <span class="ico ico-close"
        style="--ico-size:20px;--ico-thick:2px;--ico-color:#B7BDC5;"></span>
</button>
=============================== */
.ico-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.ico-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}



/* ===============================
6. + / - ¾ÆÀÌÄÜ

<button type=button class="btn-ico">
	<span class="ico ico-plus"  style="--ico-size:24px;--ico-thick:3px;--ico-color:#222;"></span>
	<span class="ico ico-minus" style="--ico-size:24px;--ico-thick:3px;--ico-color:#222;"></span>
</button>
=============================== */

.ico-plus::before{ transform:translate(-50%,-50%) rotate(0deg); }
.ico-plus::after { transform:translate(-50%,-50%) rotate(90deg); }

.ico-minus::before{ transform:translate(-50%,-50%) rotate(0deg); }
.ico-minus::after { display:none; }



/* ===============================
   ¹öÆ°¿ë (ÅÍÄ¡¿µ¿ª È®º¸)
=============================== */
.btn-ico{
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}