/* ===============================
   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, 1px);
  background:var(--ico-color, #B7BDC5);
  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:25px;
  height:25px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}






/* =========================================
   SVG Icon System (24x24 viewBox ±âÁØ)
   - stroke="currentColor" ±â¹Ý
   - »ö»ó/»óÅ´ CSS·Î¸¸ Á¦¾î
   ========================================= */

/* ±âº» ¾ÆÀÌÄÜ */
.ico-svg{
  display:inline-block;
  vertical-align:-3px; /* ÅؽºÆ® ±âÁؼ± º¸Á¤ */
  color:var(--text, #3F3F3F);       /* ±âº» Åæ(ÇÊ¿ä½Ã º¯°æ) */
}

/* Åæ º¯Çü */
.ico--muted{ color:#8A93A3; }
.ico--brand{ color:#0A84FF; }
.ico--danger{ color:#D12C2C; }

.ico--muted878787{ color:#878787; }



/* ŸÀÌƲ/¹öÆ°¿¡ ¾ÆÀÌÄÜ+ÅؽºÆ® Á¶ÇÕ */
.ico-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--text, #3F3F3F);
  font-size:var(--text-size, 14px);
}

/* hover ¿¹½Ã(¿øÇϸé Ŭ·¡½º¸í¸¸ ¹Ù²ã¼­ Àç»ç¿ë) */
.ico-text:hover{
  //color:var(--text, #3F3F3F);
}