/* Home (index.html) specific styles */

/* Enhanced site title */
.site-title {
  color: #ffffff !important;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(124, 198, 255, 0.6) !important;
}

/* Enhanced site subtitle */
.site-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7) !important;
}

/* Enhanced icon buttons - 원형으로 되돌리고 네모 카드 느낌 제거 */
.icon-btn {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 50% !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 15px !important;
  min-width: auto !important;
}

.icon-btn:hover {
  background: rgba(124, 198, 255, 0.10) !important;
  border-color: #7cc6ff !important;
  box-shadow: 0 4px 15px rgba(124, 198, 255, 0.3) !important;
  transform: translateY(-3px) !important;
}

.icon-btn i {
  color: #ffffff !important;
  text-shadow: none !important;
}

.icon-btn span {
  color: #eef2ff !important;
  background: transparent !important;
  border: none !important;
  text-shadow: none !important;
}

/* Responsive adjustments */
@media screen and (max-width: 680px) {
  .site-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  }
  
  .site-subtitle {
    font-size: 1rem !important;
  }
  
  .icon-list {
    gap: 1rem !important;
  }
  
  .icon-btn {
    padding: 12px !important;
    min-width: auto !important;
  }
  
  .icon-btn i {
    font-size: 1.5rem !important;
  }
  
  .icon-btn span {
    font-size: 0.8rem !important;
  }
}

/* === Fix: main icons must be perfect circles === */
/* 원형 사이즈 변수 */
:root { --home-icon-size: 78px; }

/* 아이콘 컨테이너는 세로 스택, 배경/테두리 제거 (이전 네모/타원 원인 제거) */
.icon-btn{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  background:none !important; border:none !important; padding:0 !important;
  box-shadow:none !important; backdrop-filter:none !important; min-width:auto !important;
}

/* 실제 원형은 <i> 에만 적용 */
.icon-btn i{
  width:var(--home-icon-size);
  height:var(--home-icon-size);
  aspect-ratio:1/1;                 /* 타원 방지 */
  display:grid; place-items:center;
  border-radius:50%; box-sizing:border-box;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.40);
  color:#fff; font-size:28px; text-shadow:none !important;
  transform:none !important; padding:0;   /* 찌그러짐 방지 */
}

/* 라벨: 배경/테두리/그림자 제거 */
.icon-btn span{
  margin-top:8px; padding:0;
  background:none !important; border:none !important; text-shadow:none !important;
  color:#eef2ff !important; font-weight:800;
}

/* 소형 화면 */
@media (max-width:480px){
  :root { --home-icon-size: 68px; }
  .icon-btn i{ font-size:24px; }
}

/* === New: Main screen icon circles and spacing === */
.icon-bar { margin-top: 1.25rem; }
.icon-list { display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; }
/* 앵커는 배경/테두리 제거 – 원형은 i에만 */
.icon-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; background:transparent; border:none; padding:0;
  transition:transform .2s ease;
}
/* 정확한 원형(타원 방지) */
.icon-btn i{
  width:84px; height:84px; border:2px solid rgba(255,255,255,.85); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; line-height:1;
  margin-bottom:.25rem; /* 원형-글자 간격 더 축소 (.3rem → .25rem) */
}
.icon-btn span{ font-weight:700; font-size:.9rem; letter-spacing:.01em; }
.icon-btn:hover{ transform:translateY(-2px); }
.icon-btn:hover i{ border-color:rgba(255,255,255,0.95); }

/* 레이어/간격 보정 */
#bg, #overlay { z-index: 0; }
#main { position: relative; z-index: 1; }
.site-title { margin-bottom: .25rem; }
.site-subtitle { margin-top: 0; }
.icon-bar { margin-top: 1rem; } /* 원형과 글자 간격 약간 축소 */

/* 세로 중앙 복구 + 미세 위치 조정용 변수 */
:root { --hero-shift: 0vh; } /* +값이면 조금 아래로, -값이면 위로 */

#main {
  position: absolute;
  left: 0;
  top: calc(50% + var(--hero-shift));
  width: 100%;
  transform: translateY(-50%);
  z-index: 1;
}