.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-7bdb8c47-2c89-ea6d-8dd1-3141769d1be5 {
background-color: #FCF8F8 !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 부모 레이어 통로 개방 (그림자/테두리 잘림 방지) */
.lfr-layout-structure-item-7bdb8c47-2c89-ea6d-8dd1-3141769d1be5 .row,
.lfr-layout-structure-item-7bdb8c47-2c89-ea6d-8dd1-3141769d1be5 .col,
.lfr-layout-structure-item-7bdb8c47-2c89-ea6d-8dd1-3141769d1be5 [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card2-1 본체 설정 */
.card2-1 {
  /* [색상 수정] 연한 크림 그린(#F1F3E0) -> 맑은 혼합색(#E2E5CC) */
  background: linear-gradient(145deg, #F1F3E0, #E2E5CC) !important;
  color: #7a8ba3 !important;
  
  /* [규격] 285px 정사각형 */
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [외형] 90도 직각 + 초기 흰색 테두리 */
  border: 2px solid #ffffff !important;
  border-radius: 0px !important;

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  box-shadow: none !important;

  /* [애니메이션] 쫀득한 탄성 효과 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px + 오른쪽으로 3px 이동 (잘림 방지) */
.card2-1:hover {
  transform: translate(3px, -18px) scale(1.02) !important;
  //background: #ffffff !important;
  color: #1a4f99 !important;
  border-color: #000000 !important; /* 블랙 테두리 변환 */

  /* 진하고 입체적인 그림자 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important;
}

/* [클릭] 바닥에 쫀득하게 붙는 피드백 */
.card2-1:active {
  transform: translate(3px, -4px) scale(0.97) !important;
  border-color: #000000 !important;
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5), 
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}.lfr-layout-structure-item-712af457-1392-4aa9-d54b-adc73aca0258 {
background-color: #FBEFEF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 잘림 방지 필수) */
.lfr-layout-structure-item-712af457-1392-4aa9-d54b-adc73aca0258 .row,
.lfr-layout-structure-item-712af457-1392-4aa9-d54b-adc73aca0258 .col,
.lfr-layout-structure-item-712af457-1392-4aa9-d54b-adc73aca0258 [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card1-2 본체 설정 */
.card1-2 {
  /* [고정값] 초기 색상 및 규격 준수 */
  background: linear-gradient(145deg, #FBEFEF, #f5e6e6) !important;
  color: #7a8ba3 !important;
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [구조] 90도 직각 유지 및 초기 흰색 테두리 적용 */
  border-radius: 0px !important; 
  border: 2px solid #ffffff !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [이식] 쫀득한 탄성 애니메이션 (card1-1의 베지어 곡선) */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px 솟구침 + 검은색 테두리 + 진한 그림자 */
.card1-2:hover {
  /* 수직 이동만 적용 (오른쪽 이동 제거) */
  transform: translateY(-18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; /* 호버 시 검은색 테두리 */

  /* [이식] 더 진하고 자연스러운 그림자 농도 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 쫀득한 피드백 */
.card1-2:active {
  transform: translateY(-4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}/* 1. 부모 레이어 통로 개방 (그림자 및 리퀴드 효과 번짐 방지) */
.lfr-layout-structure-item-2c3f2ff2-8c76-d089-6ef7-c5946be5363e .row,
.lfr-layout-structure-item-2c3f2ff2-8c76-d089-6ef7-c5946be5363e .col,
.lfr-layout-structure-item-2c3f2ff2-8c76-d089-6ef7-c5946be5363e [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card3-1 본체 설정 */
.card3-1 {
  /* [규격 및 곡률 유지] */
  width: 285px !important;
  height: 310px !important;
  margin: 0 auto !important;
  border-radius: 0px !important; 
  background: linear-gradient(145deg, #FCF8F8, #f0eeee) !important;

  /* [리퀴드 글라스 핵심: 굴절 및 반사] */
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important; 
  
  /* 테두리: 기본 상태에서 흰색 테두리 2px 설정 */
  border: 2px solid rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  color: #7a8ba3 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;

  /* [강조] 리퀴드 탄성 트랜지션 */
  transition: 
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}

/* 내부 리퀴드 흐름 효과 (가상 요소) */
.card3-1::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

/* [호버] 리퀴드 글라스 특유의 부풀어오름과 빛 반사 */
.card3-1:hover {
  /* 기존 translate(3px, -18px)에서 X축을 5px로 수정하여 오른쪽으로 2px 더 이동시킴 (왼쪽 여백 확보) */
  /* 만약 '왼쪽으로' 움직여서 여백을 만들고 싶으시면 translate(1px, -18px)로 수정하면 됩니다. */
  /* 여기서는 테두리가 왼쪽 경계에 잘리는 것을 방지하기 위해 오른쪽으로 살짝 더 밀어내도록 설정했습니다. */
  transform: translate(5px, -18px) scale(1.03) !important;
  
  color: #1a4f99 !important;
  border-color: rgba(0, 0, 0, 0.1) !important; 

  /* 그림자 영역 축소 유지 */
  box-shadow: 
    10px 15px 25px rgba(120, 135, 155, 0.3), 
    -3px -3px 10px rgba(255, 255, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.5) !important;

  z-index: 9999 !important;
}

.card3-1:hover::before {
  opacity: 1;
  animation: liquid-swirl 6s linear infinite;
}

/* [클릭] 원점에서 압축되는 피드백 */
.card3-1:active {
  transform: translate(0, 0) scale(0.96) !important;
  box-shadow: 
    inset 8px 8px 16px rgba(120, 135, 155, 0.4),
    inset -8px -8px 16px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 액체 소용돌이 애니메이션 */
@keyframes liquid-swirl {
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(5%, 5%); }
  100% { transform: rotate(360deg) translate(0, 0); }
}:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-20e8ea81-46c2-ec79-d3d7-3ec6f1ae3277 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-e50a6836-9f0d-2c22-4316-0e43249d9148 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-89e1fa84-6478-9241-0ddd-049e8736d7fd {
background-color: #F5AFAF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 및 리퀴드 효과 번짐 방지) */
.lfr-layout-structure-item-89e1fa84-6478-9241-0ddd-049e8736d7fd .row,
.lfr-layout-structure-item-89e1fa84-6478-9241-0ddd-049e8736d7fd .col,
.lfr-layout-structure-item-89e1fa84-6478-9241-0ddd-049e8736d7fd [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card3-4 본체 설정 */
.card3-4 {
  /* [규격 및 곡률 유지] */
  width: 285px !important;
  height: 310px !important;
  margin: 0 auto !important;
  border-radius: 0px !important; 
  
  /* #F5AFAF 기반의 미묘하고 자연스러운 그라데이션 적용 */
  background: linear-gradient(145deg, #F5AFAF, #e89a9a) !important;

  /* [리퀴드 글라스 핵심: 굴절 및 반사] */
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important; 
  
  /* [유지] 기본 상태에서 흰색 테두리 2px 적용 */
  border: 2px solid #ffffff !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  color: #7a8ba3 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;

  /* [강조] 리퀴드 탄성 트랜지션 */
  transition: 
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}

/* 내부 리퀴드 흐름 효과 (가상 요소) */
.card3-4::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

/* [호버] 오른쪽 경계 잘림 방지를 위해 왼쪽으로 2px 미세 이동하며 솟아오름 */
.card3-4:hover {
  /* X축을 -2px로 설정하여 왼쪽으로 살짝 당겨줌으로써 우측 테두리 보호 */
  transform: translate(-2px, -18px) scale(1.03) !important;
  
  color: #1a4f99 !important;
  /* 호버 시 자연스러운 경계선으로 변화 */
  border-color: rgba(0, 0, 0, 0.1) !important; 

  /* 그림자 영역 축소 버전 유지 */
  box-shadow: 
    0px 15px 25px rgba(120, 135, 155, 0.3), 
    -3px -3px 10px rgba(255, 255, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.5) !important;

  z-index: 9999 !important;
}

.card3-4:hover::before {
  opacity: 1;
  animation: liquid-swirl 6s linear infinite;
}

/* [클릭] 원점에서 압축되는 피드백 */
.card3-4:active {
  /* 원점(0, 0)에서 눌리는 효과 */
  transform: translate(0, 0) scale(0.96) !important;
  box-shadow: 
    inset 8px 8px 16px rgba(120, 135, 155, 0.4),
    inset -8px -8px 16px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 액체 소용돌이 애니메이션 */
@keyframes liquid-swirl {
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(5%, 5%); }
  100% { transform: rotate(360deg) translate(0, 0); }
}.lfr-layout-structure-item-a2bc7f2f-67ec-1df0-8db6-7d59471a0161 {
background-color: #FBEFEF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 및 리퀴드 효과 번짐 방지) */
.lfr-layout-structure-item-a2bc7f2f-67ec-1df0-8db6-7d59471a0161 .row,
.lfr-layout-structure-item-a2bc7f2f-67ec-1df0-8db6-7d59471a0161 .col,
.lfr-layout-structure-item-a2bc7f2f-67ec-1df0-8db6-7d59471a0161 [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card3-2 본체 설정 */
.card3-2 {
  /* [규격 및 곡률 유지] */
  width: 285px !important;
  height: 310px !important;
  margin: 0 auto !important;
  border-radius: 0px !important; 
  
  /* #FBEFEF 기반의 미묘하고 자연스러운 그라데이션 적용 */
  background: linear-gradient(145deg, #FBEFEF, #f7e2e2) !important;

  /* [리퀴드 글라스 핵심: 굴절 및 반사] */
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important; 
  
  /* [수정] 기본 상태에서 흰색 테두리 2px 적용 */
  border: 2px solid #ffffff !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  color: #7a8ba3 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;

  /* [강조] 리퀴드 탄성 트랜지션 */
  transition: 
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}

/* 내부 리퀴드 흐름 효과 (가상 요소) */
.card3-2::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

/* [호버] 수직으로만 솟아오름 (중간 배치용) */
.card3-2:hover {
  /* X축 이동 없이 위로만 18px 이동 */
  transform: translate(0, -18px) scale(1.03) !important;
  
  color: #1a4f99 !important;
  /* 호버 시 자연스러운 경계선으로 변화 */
  border-color: rgba(0, 0, 0, 0.1) !important; 

  /* 그림자 영역 축소 버전 유지 */
  box-shadow: 
    0px 15px 25px rgba(120, 135, 155, 0.3), 
    -3px -3px 10px rgba(255, 255, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.5) !important;

  z-index: 9999 !important;
}

.card3-2:hover::before {
  opacity: 1;
  animation: liquid-swirl 6s linear infinite;
}

/* [클릭] 원점에서 압축되는 피드백 */
.card3-2:active {
  /* 원점(0, 0)에서 눌리는 효과 */
  transform: translate(0, 0) scale(0.96) !important;
  box-shadow: 
    inset 8px 8px 16px rgba(120, 135, 155, 0.4),
    inset -8px -8px 16px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 액체 소용돌이 애니메이션 */
@keyframes liquid-swirl {
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(5%, 5%); }
  100% { transform: rotate(360deg) translate(0, 0); }
}.lfr-layout-structure-item-c1adf1fe-8ecf-72bf-7217-bed6facc1ce8 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-62ad962d-d6e3-d690-c228-51c8fc59449f {
background-color: #F5AFAF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 및 테두리 잘림 방지 필수) */
.lfr-layout-structure-item-62ad962d-d6e3-d690-c228-51c8fc59449f .row,
.lfr-layout-structure-item-62ad962d-d6e3-d690-c228-51c8fc59449f .col,
.lfr-layout-structure-item-62ad962d-d6e3-d690-c228-51c8fc59449f [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card2-4 본체 설정 */
.card2-4 {
  /* [색상 수정] 다크 리프(#778873) -> 포레스트 짝꿍색(#697965) */
  background: linear-gradient(145deg, #778873, #697965) !important;
  color: #7a8ba3 !important;
  
  /* [규격] 285px 정사각형 고정 */
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [구조] 90도 직각 유지 및 초기 흰색 테두리 */
  border-radius: 0px !important; 
  border: 2px solid #ffffff !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [강조] 쫀득한 탄성 애니메이션 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px + 왼쪽으로 3px 이동 (잘림 방지) */
.card2-4:hover {
  /* 왼쪽으로 부드럽게 이동하여 그리드 경계면 보호 */
  transform: translate(-3px, -18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; 

  /* 진하고 입체적인 그림자 설정 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 쫀득하게 눌리는 물리 효과 */
.card2-4:active {
  transform: translate(-3px, -4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}.lfr-layout-structure-item-a58ffaed-18af-4cdd-af72-6fb91a67dfa3 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-5bcc24d9-c470-2020-29e4-885142280db4 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-15251c74-e6ef-ddd2-c1d6-fd6cc8755ebf {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-e5803a25-1944-af96-d217-2d5f7ee759bd {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-6951d08d-daf0-0421-aed5-ed35b7f00920 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-74a928fe-162b-91bf-eaf6-5d49cc329003 {
background-color: #F5AFAF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 및 테두리 잘림 방지 필수) */
.lfr-layout-structure-item-74a928fe-162b-91bf-eaf6-5d49cc329003 .row,
.lfr-layout-structure-item-74a928fe-162b-91bf-eaf6-5d49cc329003 .col,
.lfr-layout-structure-item-74a928fe-162b-91bf-eaf6-5d49cc329003 [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card1-4 본체 설정 */
.card1-4 {
  /* [고정값] card1-4 전용 딥 코랄 컬러 및 규격 준수 */
  background: linear-gradient(145deg, #F5AFAF, #e09f9f) !important;
  color: #7a8ba3 !important;
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [구조] 90도 직각 유지 및 초기 흰색 테두리 (검은색 변환 대비) */
  border-radius: 0px !important; 
  border: 2px solid #ffffff !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [강조] 쫀득한 탄성 애니메이션 이식 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px + 왼쪽으로 3px 이동 (translateX -3px) */
.card1-4:hover {
  /* 첫 번째 카드와 반대로 -3px을 주어 왼쪽으로 자연스럽게 이동 */
  transform: translate(-3px, -18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; /* 호버 시 블랙 테두리 */

  /* 진하고 입체적인 그림자 설정 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 쫀득하게 눌리는 물리 효과 */
.card1-4:active {
  /* 클릭 시에도 왼쪽 -3px 위치 유지하여 테두리 보호 */
  transform: translate(-3px, -4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}.lfr-layout-structure-item-254b6891-ad4a-5beb-1a0f-d100f2165cf6 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-0acbe1a8-21e5-1bb5-e456-0d7ef488f84a {
background-color: #F9DFDF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 및 리퀴드 효과 번짐 방지) */
.lfr-layout-structure-item-0acbe1a8-21e5-1bb5-e456-0d7ef488f84a .row,
.lfr-layout-structure-item-0acbe1a8-21e5-1bb5-e456-0d7ef488f84a .col,
.lfr-layout-structure-item-0acbe1a8-21e5-1bb5-e456-0d7ef488f84a [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card3-3 본체 설정 */
.card3-3 {
  /* [규격 및 곡률 유지] */
  width: 285px !important;
  height: 310px !important;
  margin: 0 auto !important;
  border-radius: 0px !important; 
  
  /* #F9DFDF 기반의 미묘하고 자연스러운 그라데이션 적용 */
  background: linear-gradient(145deg, #F9DFDF, #f2cccc) !important;

  /* [리퀴드 글라스 핵심: 굴절 및 반사] */
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important; 
  
  /* [유지] 기본 상태에서 흰색 테두리 2px 적용 */
  border: 2px solid #ffffff !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  color: #7a8ba3 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;

  /* [강조] 리퀴드 탄성 트랜지션 */
  transition: 
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    color 0.3s ease !important;
}

/* 내부 리퀴드 흐름 효과 (가상 요소) */
.card3-3::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

/* [호버] 수직으로만 솟아오름 (중간 배치용) */
.card3-3:hover {
  /* X축 이동 없이 위로만 18px 이동 */
  transform: translate(0, -18px) scale(1.03) !important;
  
  color: #1a4f99 !important;
  /* 호버 시 자연스러운 경계선으로 변화 */
  border-color: rgba(0, 0, 0, 0.1) !important; 

  /* 그림자 영역 축소 버전 유지 */
  box-shadow: 
    0px 15px 25px rgba(120, 135, 155, 0.3), 
    -3px -3px 10px rgba(255, 255, 255, 0.8),
    inset 0 0 15px rgba(255, 255, 255, 0.5) !important;

  z-index: 9999 !important;
}

.card3-3:hover::before {
  opacity: 1;
  animation: liquid-swirl 6s linear infinite;
}

/* [클릭] 원점에서 압축되는 피드백 */
.card3-3:active {
  /* 원점(0, 0)에서 눌리는 효과 */
  transform: translate(0, 0) scale(0.96) !important;
  box-shadow: 
    inset 8px 8px 16px rgba(120, 135, 155, 0.4),
    inset -8px -8px 16px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 액체 소용돌이 애니메이션 */
@keyframes liquid-swirl {
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(5%, 5%); }
  100% { transform: rotate(360deg) translate(0, 0); }
}.lfr-layout-structure-item-fea066b1-9858-2cfb-83ea-00dbe22c9070 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}:root {
  /* 1. 색상 전역 변수 */
  --card-bg-initial: #F2E7D5;      
  --card-bg-hover: #ffffff;        
  --card-text-initial: #7a8ba3;    
  --card-text-hover: #1a4f99;      
  
  /* 2. 그림자 색상 변수 */
  --shadow-dark: #d1d9e6;
  --shadow-light: #ffffff;
  
  /* 3. 애니메이션 속도 */
  --transition-speed: 0.35s;       
}

.card1-1 {
  /* 구조 설정 */
  background: var(--card-bg-initial) !important;
  color: var(--card-text-initial) !important;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 각진 사각형 모서리 */
  border-radius: 0px !important; 
  border: none !important;

  /* 스피어모피즘 입체감 */
  box-shadow: 
    12px 12px 25px var(--shadow-dark), 
    -12px -12px 25px var(--shadow-light);

  /* 애니메이션 설정 */
  transition: 
    transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease,
    color var(--transition-speed) ease !important;
  
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  overflow: hidden;

  /* [추가] 평상시 위치 기준점 설정 */
  position: relative !important;
  z-index: 1 !important;
}

/* 마우스 호버 시 효과 */
.card1-1:hover {
  /* 빠릿하게 튀어오름 */
  transform: translateY(-12px) scale(1.02) !important; 
  
  background: var(--card-bg-hover) !important;
  color: var(--card-text-hover) !important;

  /* 그림자를 더 선명하게 퍼뜨림 */
  box-shadow: 
    20px 25px 50px rgba(163, 177, 198, 0.6),
    -10px -10px 30px rgba(255, 255, 255, 0.8) !important;
  
  /* [핵심 추가] 호버 시 가장 맨 앞으로 오도록 설정 */
  z-index: 9999 !important; 
  position: relative !important;
}

/* 클릭했을 때 살짝 들어가는 쫀득한 피드백 */
.card1-1:active {
  transform: translateY(-4px) scale(0.97) !important;
  transition: all 0.1s ease;
  z-index: 9999 !important; /* 클릭 중에도 맨 위 유지 */
}.lfr-layout-structure-item-138a9105-96a8-67bf-7ec8-9f0fd9d903fb {
background-color: #F9DFDF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (그림자 잘림 방지 필수) */
.lfr-layout-structure-item-138a9105-96a8-67bf-7ec8-9f0fd9d903fb .row,
.lfr-layout-structure-item-138a9105-96a8-67bf-7ec8-9f0fd9d903fb .col,
.lfr-layout-structure-item-138a9105-96a8-67bf-7ec8-9f0fd9d903fb [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card1-3 본체 설정 */
.card1-3 {
  /* [고정값] card1-3 전용 컬러 및 규격 준수 */
  background: linear-gradient(145deg, #F9DFDF, #efd5d5) !important;
  color: #7a8ba3 !important;
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [구조] 90도 직각 및 초기 흰색 테두리 설정 */
  border-radius: 0px !important; 
  border: 2px solid #ffffff !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [강조] card1-1에서 검증된 쫀득한 탄성 애니메이션 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px 팝업 + 검은색 테두리 + 자연스럽고 진한 그림자 */
.card1-3:hover {
  transform: translateY(-18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; /* 호버 시 블랙 테두리로 포인트 */

  /* [강조] 깊이감이 느껴지는 자연스러운 그림자 농도 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 물리적인 깊이감이 느껴지는 인셋 섀도우 */
.card1-3:active {
  transform: translateY(-4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}/* 1. 부모 레이어 통로 개방 (그림자 잘림 방지 필수) */
.lfr-layout-structure-item-2265d3b3-da95-d719-a0b6-bcce0b24c2c4 .row,
.lfr-layout-structure-item-2265d3b3-da95-d719-a0b6-bcce0b24c2c4 .col,
.lfr-layout-structure-item-2265d3b3-da95-d719-a0b6-bcce0b24c2c4 [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card1-1 본체 설정 */
.card1-1 {
  /* [규격] 285px 정사각형 고정 */
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [색상 및 질감] 리퀴드 그라데이션 */
  background: linear-gradient(145deg, #FCF8F8, #f0eeee) !important;
  color: #7a8ba3 !important;
  
  /* [조건] 초기 흰색 테두리 + 90도 직각 */
  border: 2px solid #ffffff !important; 
  border-radius: 0px !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [강조] 쫀득한 탄성 애니메이션 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 위로 18px 솟고 + 오른쪽으로 3px 이동 (잘림 방지) */
.card1-1:hover {
  /* translateX(3px)를 추가하여 왼쪽 테두리가 그리드 안으로 들어오게 유도 */
  transform: translate(3px, -18px) scale(1.02) !important; 
  // background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; 

  /* 진하고 자연스러운 그림자 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 쫀득하게 바닥에 붙는 피드백 */
.card1-1:active {
  /* 클릭 시에도 왼쪽이 잘리지 않도록 3px 이동 유지 */
  transform: translate(3px, -4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}.lfr-layout-structure-item-0ddf0f1a-1966-d193-4796-3ceaf276b3f4 {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}.lfr-layout-structure-item-73b3c686-6114-ba73-ac75-20aba66e288b {
background-color: #FBEFEF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 (공통 설정) */
.lfr-layout-structure-item-73b3c686-6114-ba73-ac75-20aba66e288b .row,
.lfr-layout-structure-item-73b3c686-6114-ba73-ac75-20aba66e288b .col,
.lfr-layout-structure-item-73b3c686-6114-ba73-ac75-20aba66e288b [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card2-2 본체 설정 */
.card2-2 {
  /* [색상 수정] 피스타치오(#D2DCB6) -> 파스텔 그린(#C4CEA8) */
  background: linear-gradient(145deg, #D2DCB6, #C4CEA8) !important;
  color: #7a8ba3 !important;
  
  /* [규격] 285px 정사각형 */
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [구조] 90도 직각 및 초기 흰색 테두리 */
  border: 2px solid #ffffff !important;
  border-radius: 0px !important;

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  box-shadow: none !important;

  /* [강조] 쫀득한 탄성 애니메이션 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 수직으로 18px 솟구침 */
.card2-2:hover {
  transform: translateY(-18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; 

  /* 진하고 자연스러운 입체 그림자 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 물리적인 눌림 피드백 */
.card2-2:active {
  transform: translateY(-4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}/* 1. 선택된 탭(li.active)의 배경색을 남색으로 강제 적용 */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active {
    background-color: #25374E !important;
}

/* 2. 선택된 탭 내부의 버튼과 글자색을 흰색으로 고정 */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active button.nav-link,
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item.active span {
    background-color: #25374E !important;
    color: #ffffff !important;
    border: none !important;
}

/* 3. 비활성 탭 스타일 (기본 상태) */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 li.nav-item button.nav-link {
    background-color: #ffffff !important;
    color: #444444 !important;
    border: 1px solid #dee2e6 !important;
}

/* 4. 탭 전체 하단 라인 (남색으로 통일) */
.lfr-layout-structure-item-0501c5d1-c0c5-72fa-1291-1d9b3addcde3 ul.navbar-nav {
    border-bottom: 2px solid #25374E !important;
}.lfr-layout-structure-item-4c954f9e-d384-e389-568a-743aad87a13f {
background-color: #F9DFDF !important;
border-color: #FFFFFF !important;
border-style: solid; border-width: 2px !important; border-width: 2pxpx !important;
height: 285px !important;
width: 285px !important;
}
/* 1. 상위 계층 통로 개방 */
.lfr-layout-structure-item-4c954f9e-d384-e389-568a-743aad87a13f .row,
.lfr-layout-structure-item-4c954f9e-d384-e389-568a-743aad87a13f .col,
.lfr-layout-structure-item-4c954f9e-d384-e389-568a-743aad87a13f [class*="lfr-layout-structure-item-"] {
  overflow: visible !important;
}

/* 2. card2-3 본체 설정 */
.card2-3 {
  /* [색상 수정] 세이지(#A1BC98) -> 차분한 짝꿍색(#92AD89) */
  background: linear-gradient(145deg, #A1BC98, #92AD89) !important;
  color: #7a8ba3 !important;
  
  /* [규격] 285px 정사각형 */
  width: 285px !important;
  height: 285px !important;
  margin: 0 auto !important;

  /* [외형] 90도 직각 + 초기 흰색 테두리 */
  border-radius: 0px !important; 
  border: 2px solid #ffffff !important; 

  /* 배치 및 레이어 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important; 
  box-shadow: none !important;

  /* [애니메이션] 쫀득한 탄성 효과 */
  transition: 
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1.2),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    color 0.3s ease !important;
  
  cursor: pointer !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* [호버] 수직으로 18px 팝업 */
.card2-3:hover {
  transform: translateY(-18px) scale(1.02) !important; 
  background: #ffffff !important; 
  color: #1a4f99 !important;
  border-color: #000000 !important; 

  /* 깊이감 있는 입체 그림자 */
  box-shadow: 
    15px 20px 35px rgba(120, 135, 155, 0.45), 
    -10px -10px 25px rgba(255, 255, 255, 0.9) !important;
  
  z-index: 9999 !important; 
}

/* [클릭] 물리적인 눌림 피드백 */
.card2-3:active {
  transform: translateY(-4px) scale(0.97) !important;
  border-color: #000000 !important; 
  box-shadow: 
    inset 6px 6px 12px rgba(120, 135, 155, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.1s ease-out !important;
}.lfr-layout-structure-item-a5dbe05d-0e3e-d0d2-7ec9-1eaf45b6c83a {
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* 해당 p 태그에 애니메이션 입히기 */
p.mb-0 {
  display: inline-block; /* 애니메이션(scale)이 적용되려면 필수입니다 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팝! 하는 탄력 효과 */
}

/* 마우스 커서를 올렸을 때 (Hover) */
p.mb-0:hover {
  transform: scale(1.2);    /* 1.2배로 팝! 커짐 */
  color: #0a559c !important; /* 지정하신 파란색으로 변경 */
}

/* 클릭하는 순간 살짝 눌리는 효과 */
p.mb-0:active {
  transform: scale(0.95);
}