/* --- Base Styles & Variables --- */
:root{
  --bg-color-dark:#121212;
  --card-bg-dark:#1e1e1e;
  --text-color-dark:#e0e0e0;
  --accent-color-dark:#00aaff;
  --border-color-dark:#333;

  --bg-color-light:#f5f5f5;
  --card-bg-light:#ffffff;
  --text-color-light:#212121;
  --accent-color-light:#0077cc;
  --border-color-light:#e0e0e0;

  --font-main:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* --- General --- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-main);
  margin:0;
  transition:background-color .3s ease-in-out,color .3s ease-in-out;
  overflow-x:hidden;
}
body.dark-mode{ background-color:var(--bg-color-dark); color:var(--text-color-dark); }
body.light-mode{ background-color:var(--bg-color-light); color:var(--text-color-light); }

/* --- Dynamic Background --- */
#particles-js{
  position:fixed; width:100%; height:100%;
  top:0; left:0; z-index:-1;
  pointer-events:none;           /* 이벤트 차단 */
}

/* --- Main Layout --- */
.container{ max-width:1200px; margin:0 auto; padding:2rem; position:relative; z-index:1; }
header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:3rem; flex-wrap:wrap; gap:1.5rem; }
h1{ font-size:clamp(1.8rem,4vw,2.5rem); margin:0; }

.grid-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
}

/* --- Card Styles --- */
.card{
  border-radius:12px; padding:1.5rem; text-decoration:none;
  display:flex; flex-direction:column; gap:.75rem;
  transition:transform .3s ease,box-shadow .3s ease;

  /* 3D 변환 제거 */
  /* transform-style: preserve-3d; */
  /* transform: translateZ(0); */

  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
body.dark-mode .card{
  background-color:var(--card-bg-dark);
  border:1px solid var(--border-color-dark);
  color:var(--text-color-dark);
}
body.light-mode .card{
  background-color:var(--card-bg-light);
  border:1px solid var(--border-color-light);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  color:var(--text-color-light);
}
.card:hover{ transform: translateY(-10px); }   /* Z이동 제거 */
body.dark-mode .card:hover{ box-shadow:0 10px 30px rgba(0,170,255,.2); }
body.light-mode .card:hover{ box-shadow:0 10px 30px rgba(0,119,204,.2); }

.card-header{ display:flex; align-items:center; gap:1rem; }
.card-header i{
  font-size:1.8rem; width:30px; text-align:center;
  /* Safari 투명 렌더링 방지: 기본은 단색 */
  background:none;
  color: currentColor;
}
/* 필요 시 그라디언트 효과를 쓰려면 아래 클래스만 추가해 사용 */
.card-header i.gradient{
  background:linear-gradient(135deg,#888,#555);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.card-title-group{ display:flex; flex-direction:column; }
.card-title{ font-size:1.25rem; font-weight:600; margin:0; }
.card-url{ font-size:.85rem; margin:.25rem 0 0 0; opacity:.6; }
.card-description{ font-size:.95rem; line-height:1.6; flex-grow:1; }

/* --- Controls --- */
.controls{ display:flex; align-items:center; gap:1.5rem; }
.lang-switcher{ display:flex; }
.lang-switcher button{
  background:transparent; padding:.5rem 1rem; cursor:pointer;
  transition:background-color .2s,color .2s;
  border-width:1px; border-style:solid;
}
.lang-switcher button:first-child{ border-radius:8px 0 0 8px; border-right:none; }
.lang-switcher button:last-child{ border-radius:0 8px 8px 0; }

body.dark-mode .lang-switcher button{ border-color:var(--border-color-dark); color:var(--text-color-dark); }
body.light-mode .lang-switcher button{ border-color:var(--border-color-light); color:var(--text-color-light); }
body.dark-mode .lang-switcher button.active{ background-color:var(--accent-color-dark); color:#121212; border-color:var(--accent-color-dark); }
body.light-mode .lang-switcher button.active{ background-color:var(--accent-color-light); color:#fff; border-color:var(--accent-color-light); }

/* --- Theme Switch Toggle --- */
.theme-switch{ position:relative; display:inline-block; width:60px; height:34px; }
.theme-switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#444; border-radius:34px; transition:.4s; }
.slider:before{ position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; border-radius:50%; transition:.4s; }
input:checked + .slider{ background-color:var(--accent-color-light); }
input:checked + .slider:before{ transform:translateX(26px); }

/* --- Sticky Minimal Footer (keep existing style) --- */
/* 고정 풋터와 겹침 방지 */
.container{ padding-bottom: 64px; }

.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2;                     /* 카드/배경 위에 표시 */
  padding: 20px 20px;
  text-align: center;
  font-size: .9rem;
  border-top: 1px solid;
  backdrop-filter: saturate(120%) blur(2px);
}

body.dark-mode .site-footer{
  color: var(--text-color-dark);
  border-color: var(--border-color-dark);
  background: rgba(18,18,18,.7);
}

body.light-mode .site-footer{
  color: var(--text-color-light);
  border-color: var(--border-color-light);
  background: rgba(245,245,245,.75);
}


/* --- Language Switching Styles --- */
:root:lang(ko) [lang="en"]{ display:none; }
:root:lang(en) [lang="ko"]{ display:none; }