/* ============================
   styles.css — 통합 버전
   (Intro + Home/Kitty 통합)
============================ */

/* ========= Variables & Reset ========== */
:root{
  --pink-1: #fff0f6;
  --pink-2: #ffe6f0;
  --accent: #ff4f8b;
  --white-soft: rgba(255,255,255,0.96);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* ====== Body (single source of truth) ====== */
body {
  margin: 0;
  font-family: "Jua", "Segoe UI", system-ui, -apple-system, "Noto Sans KR", sans-serif;
  background: linear-gradient(180deg, var(--pink-1), var(--pink-2));
  color: #333;
  -webkit-font-smoothing: antialiased;
}

/* Intro-only background (applied when intro is active) */
body.intro-active {
  background: linear-gradient(135deg, #ffeef7, #ffd9ec);
}

/* ========= Header / Nav ========= */
.site-header, .main-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,190,220,0.7);
}

.logo { color: var(--accent); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; }

.nav, .main-nav, .top-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-btn, .nav-link, .top-nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px dashed rgba(255,120,160,0.45);
  color: #b04a75;
  background: rgba(255,255,255,0.85);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.nav-btn.active, .nav-link.active, .top-nav a.active {
  color: var(--accent);
  border-color: rgba(255,80,140,0.7);
}

/* ========= Intro Screen ========= */
#intro-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

#intro-screen.hide { opacity: 0; pointer-events: none; }

.intro-inner {
  position: relative;
  width: min(92%, 1000px);
  height: min(65vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Intro header / skip */
.intro-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem; }
.intro-logo { font-size:1.2rem; letter-spacing:0.08em; text-transform:uppercase; color:#ff2f7d; }
.skip-btn{
  border:none; border-radius:999px; padding:0.3rem 0.9rem; font-size:0.8rem; cursor:pointer;
  background: rgba(255,255,255,0.9); color:#ff2f7d; font-weight:700;
}

/* intro dividers */
.intro-divider { height:2px; background: rgba(255,255,255,0.95); margin:0.4rem 0; }

/* intro main: text + mascot */
.intro-main { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:0.4rem; }
.intro-text-block { flex:1.4; text-align:left; padding-right:1rem; }
.intro-text { font-weight:700; }
.intro-line1 { margin:0 0 .4rem; font-size:1.6rem; letter-spacing:0.12em; text-transform:uppercase; color:#ff7baa; }
.intro-line2 { margin:0; font-size:3.1rem; letter-spacing:0.04em; color:#ff347f; text-shadow:0 4px 10px rgba(255,80,150,0.35); }

/* cursor */
.cursor { display:inline-block; width:.6ch; margin-left:.05em; animation: blink 0.8s step-end infinite; color:#ff89b8; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* mascot */
.intro-mascot { flex:1; display:flex; justify-content:center; align-items:center; }
.mascot-img { max-width:180px; height:auto; image-rendering:pixelated; filter: drop-shadow(0 6px 12px rgba(255,120,170,0.55)); }

/* intro nav hint and sparkles */
.intro-nav-hint { margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.6rem; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,0.92); }
.intro-decor { position:absolute; inset:0; pointer-events:none; }
.sparkle { position:absolute; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.9); box-shadow:0 0 6px rgba(255,255,255,0.9),0 0 14px rgba(255,150,200,0.7); animation:twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{transform:translateY(0); opacity:.7} 50%{transform:translateY(-6px); opacity:1} }

/* ========= Home / Kitty / Particles ========= */

/* support both naming variants: .home-area and .home-hero */
.home-area, .home-hero {
  position: relative;
  min-height: calc(100vh - 64px);
  overflow: hidden;
  z-index: 0;
}

/* particles canvas variants */
#home-particles, .particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* main grid wrappers (two flavors supported) */
.page-inner, .home-grid {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 36px auto;
  padding: 20px;
  display: grid;
  gap: 28px;
  align-items: start;
}

/* choose default template grid if not using .home-grid */
.page-inner { grid-template-columns: 1.6fr 420px; }
.home-grid { grid-template-columns: 1fr 560px 300px; max-width:1200px; padding:0 20px; }

/* left panel / home-left */
.left-panel, .home-left { display:flex; align-items:center; justify-content:center; min-height: 380px; }

/* KITTY frame (left) */
.frame {
  width: 100%;
  border-radius: 12px;
  padding: 22px;
  border: 8px dashed rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center;
}
.kitty-wrap { display:flex; align-items:center; justify-content:center; width:100%; }
.kitty-white-box { background: var(--white-soft); padding:18px; border-radius:14px; box-shadow: 0 18px 50px rgba(0,0,0,0.06); }

/* kitty sizes (two variants) */
.kitty { width:900px; max-width:100%; height:auto; image-rendering:pixelated; border-radius:10px; display:block; }
.kitty-large { max-width:520px; width:100%; height:auto; image-rendering:pixelated; display:block; }

/* right sidebar / lab */
.right-panel, .home-right { display:flex; align-items:flex-start; justify-content:center; }
.sidebar, .lab-sidebar { width:100%; }

.dotted-frame-outer {
  border-radius:14px;
  padding:12px;
  border:4px dashed rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.02);
  min-height: 560px;
  display:flex; align-items:flex-start; justify-content:center;
}

.lab-card {
  width:100%;
  padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background: rgba(255,255,255,0.02);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
}

/* lab image variants */
.lab-card img { width:100%; height:500px; object-fit:cover; border-radius:8px; background:#fff; padding:2px; box-shadow:0 8px 30px rgba(0,0,0,0.06); }
.home-grid .lab-card img { height:120px; } /* smaller cards in home-grid */

.lab-caption, .lab-title { color:#333; font-weight:800; margin:0; font-size:1rem; text-align:center; }

/* central kitty wrapper (home-grid center) */
.kitty-wrapper {
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0 8px 28px rgba(255,100,160,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}

/* bottom footer area */
.bottom-inner { text-align:center; padding:6px 12px; }
.bottom-text { color: #ff4f8b; font-weight:700; }

/* site-footer (fixed bottom) */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align:center;
  color: rgba(255,255,255,0.7);
  padding: 12px 28px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,190,220,0.7);
}

/* ========= Misc / Intro small details ========= */
.intro-text { font-weight:700; }
.intro-nav-hint span { opacity: 0.95; }

/* ========= TRANSITIONS for main content ========= */
#main-content { opacity: 0; transition: opacity 0.8s ease; }
#main-content.show { opacity: 1; }

/* ========= Responsive ========= */
@media (max-width: 1200px) {
  .page-inner { grid-template-columns: 1fr 360px; padding:18px; }
  .left-panel { min-height:520px; }
  .kitty { width:640px; }
  .lab-card img { height:280px; }
  .home-grid { grid-template-columns: 1fr 480px; }
}

@media (max-width: 980px) {
  .home-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap:18px; padding:12px; }
  .home-left { display:none; }
  .home-right { order:3; }
  .home-center { order:2; }
  .kitty-large { max-width:420px; }
}

@media (max-width: 900px) {
  .page-inner { grid-template-columns: 1fr; }
  .left-panel { order:1; min-height:420px; }
  .right-panel { order:2; margin-top:18px; width:100%; }
  .kitty { width:460px; }
  .lab-card img { height:220px; }
}

@media (max-width: 520px) {
  .kitty-large { max-width:320px; }
  .lab-card img { height:90px; }
}

@media (max-width: 420px) {
  .nav { gap:6px; }
  .nav-btn { padding:6px 8px; font-size:12px; }
}