@charset "utf-8";
/********************** 
	구글 머티리얼 아이콘
  Material_fonts.css 
	2026.03.23
***********************/

/* ==========================================================================
   구글 머티리얼 아이콘 (기본/아웃라인/라운드) 및 구글 머티리얼 심볼
   ========================================================================== */

/* 구글 머티리얼 아이콘 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons.woff2") format("woff2"),
       url("../fonts/material-icons.woff") format("woff");
  font-display: block; 
}
/* 구글 머티리얼 아이콘 라운드 */
@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons-round.woff2") format("woff2"),
       url("../fonts/material-icons-round.woff") format("woff");
  font-display: block; 
}
/* 구글 머티리얼 아이콘 아웃라인 */
@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons-outlined.woff2") format("woff2"),
       url("../fonts/material-icons-outlined.woff2") format("woff2");
  font-display: block;
}

/* 구글 머티리얼 심볼 라운디드 */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  src: url("../fonts/MaterialSymbolsRounded.woff2") format("woff2");
  font-display: block;
}

/* ==========================================================================
   2. Base Classes (기본 설정)
   ========================================================================== */
/* 구글 머티리얼 아이콘 기본 설정 */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-flex;  
  align-items: center;  
  justify-content: center;
  width: 1em;              
  height: 1em;
  overflow: hidden;
  flex-shrink: 0; 
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;  
  --icon-fill: 0;
  --icon-wght: 400;
  --icon-grad: 0;
  --icon-opsz: 24;   
  font-variation-settings: 'FILL' var(--icon-fill), 'wght' var(--icon-wght), 'GRAD' var(--icon-grad), 'opsz' var(--icon-opsz);
  transition: font-variation-settings 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   3. 통합 사이즈 클래스 (Icons & Symbols 공통 사용)
   ========================================================================== */
.icon-12 { font-size: 12px; --icon-opsz: 12; }
.icon-16 { font-size: 16px; --icon-opsz: 16; }
.icon-18 { font-size: 18px; --icon-opsz: 18; }
.icon-20 { font-size: 20px; --icon-opsz: 20; }
.icon-24 { font-size: 24px; --icon-opsz: 24; }
.icon-36 { font-size: 36px; --icon-opsz: 36; }
.icon-40 { font-size: 40px; --icon-opsz: 40; }
.icon-48 { font-size: 48px; --icon-opsz: 48; }


/* ==========================================================================
   4. 색상 및 커스텀 유틸리티
   ========================================================================== */
/* Symbols 전용  */
.fill { --icon-fill: 1; }
.w100 { --icon-wght: 100; }
.w700 { --icon-wght: 700; }


/* ==========================================================================
   5. Hover Animations (Symbols 전용)
   ========================================================================== */
/* 마우스를 올리면 내부가 채워짐 */
.anim-fill:hover { --icon-fill: 1; }

/* 마우스를 올리면 더 두꺼워짐 */
.anim-thicken:hover { --icon-wght: 700; }

/* 마우스를 올리면 선이 굵어지면서 강조됨 */
.anim-grad:hover { --icon-grad: 200; }


/* 무한 반복 애니메이션 (Keyframes) */
/* 로딩 아이콘용 무한 회전 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-spin {animation: spin 2s linear infinite;}

/* 맥박이 뛰는 듯한 효과 (두께 조절) */
@keyframes pulse-wght {
  0% { font-variation-settings: 'wght' 100; }
  50% { font-variation-settings: 'wght' 700; }
  100% { font-variation-settings: 'wght' 100; }
}
.anim-pulse {animation: pulse-wght 1.5s ease-in-out infinite;}