/* Base */
:root{
  --bg:#f5f7f6;
  --white:#fff;
  --text:#1d1f24;
  --muted:#67707a;
  --green:#00a87e;
  --green-2:#008f6a;
  --blue:#2f80ed;
  --purple:#7b61ff;
  --orange:#ff8a3d;
  --teal:#1abc9c;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Pretendard','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:var(--bg);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.lb-header{
  background:#eefaf5;
  padding:64px 0 24px;
  text-align:center;
}
.lb-header h1{
  margin:0 0 8px;
  font-size:clamp(24px,4vw,40px);
  color:var(--green-2);
  letter-spacing:.2px;
}
.lb-header p{
  margin:0;
  color:var(--muted);
  font-weight:500;
}

/* Carousel */
.carousel{
  margin:36px 0 8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}

.nav-btn{
  width:48px;height:48px;border-radius:50%;
  border:none;background:#eaf6f2;color:var(--green-2);
  display:grid;place-items:center;
  cursor:pointer;font-size:20px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease;
}
.nav-btn:hover{transform:translateY(-2px);background:#dff3ec}
.nav-btn:active{transform:translateY(0) scale(.98)}

.viewport{
  position:relative;
  height:360px;
  perspective:1200px;
  outline:none;
}

.card{
  position:absolute; inset:0;
  margin:auto;
  width:min(100%,900px);
  height:100%;
  background:var(--white);
  border-radius:24px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
  padding:28px;
  opacity:0;
  transform: translateX(30px) rotateY(-10deg) scale(.96);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
  pointer-events:none;
}
.card.active{
  opacity:1;
  transform: translateX(0) rotateY(0) scale(1);
  pointer-events:auto;
}

.avatar-wrap{
  display:grid;place-items:center;
}
.avatar-wrap img{
  width:200px;height:200px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.content{align-self:center}
.pill{
  display:inline-block;
  background:#e6f7f1;
  color:var(--green-2);
  padding:6px 12px;border-radius:999px;
  font-weight:700;font-size:14px;
}
.pill.blue{background:#e9f1ff;color:var(--blue)}
.pill.purple{background:#f0ebff;color:var(--purple)}
.pill.orange{background:#fff1e7;color:var(--orange)}
.pill.teal{background:#e8fbf7;color:var(--teal)}

h2{
  font-size:clamp(18px,2.6vw,28px);
  margin:16px 0 10px;
}
.quote{color:#243042;font-weight:600;margin:0 0 12px}
.meta{color:var(--muted);margin:0}

/* Flip animations on direction */
.card.flip-out-left{transform:translateX(-60px) rotateY(15deg) scale(.95);opacity:0}
.card.flip-in-right{transform:translateX(60px) rotateY(-15deg) scale(.95);opacity:0}
.card.flip-in-right.active{transform:translateX(0) rotateY(0) scale(1);opacity:1}
.card.flip-out-right{transform:translateX(60px) rotateY(-15deg) scale(.95);opacity:0}
.card.flip-in-left{transform:translateX(-60px) rotateY(15deg) scale(.95);opacity:0}
.card.flip-in-left.active{transform:translateX(0) rotateY(0) scale(1);opacity:1}

/* Dots */
.dots{display:flex;justify-content:center;gap:8px;margin:10px 0 0}
.dots button{
  width:10px;height:10px;border-radius:50%;border:none;
  background:#d9e5e0;cursor:pointer;transition:transform .2s ease, background .2s;
}
.dots button[aria-current="true"]{background:var(--green);transform:scale(1.3)}

/* CTA */
.cta{display:flex;justify-content:center;margin:28px 0 64px}
.btn-primary{
  display:inline-block;padding:14px 28px;border-radius:999px;
  text-decoration:none;color:#fff;background:var(--green);
  font-weight:700;box-shadow:0 10px 22px rgba(0,168,126,.25);
  transition: transform .15s ease, background .2s;
}
.btn-primary:hover{background:var(--green-2);transform:translateY(-2px)}

/* Responsive */
@media (max-width: 820px){
  .card{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    height:420px;
  }
  .avatar-wrap img{width:160px;height:160px}
}


/* Global Nav */
.global-nav {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffcc; backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #eef2f0;
}
.global-nav .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-weight: 900; letter-spacing:.3px; font-size: 20px;
  color: var(--green-2); text-decoration: none;
}
.menu{list-style:none; display:flex; gap:20px; margin:0; padding:0;}
.menu a{
  text-decoration:none; color:#334; font-weight:700; padding:10px 12px; border-radius:10px;
}
.menu a:hover{background:#f1faf6}
.menu a[aria-current="page"]{color:#0a876a; background:#e6f7f1}

.menu-toggle{display:none; width:42px; height:42px; border:none; background:#eaf6f2; border-radius:10px; cursor:pointer}
.menu-toggle span{display:block; width:22px; height:2px; background:#0a876a; margin:5px auto}
@media (max-width: 860px){
  .menu-toggle{display:block}
  .menu{
    position:absolute; left:0; right:0; top:64px; background:#fff;
    flex-direction:column; gap:0; border-bottom:1px solid #eef2f0; display:none;
  }
  .menu.open{display:flex}
  .menu li{border-top:1px solid #f3f5f4}
  .menu a{padding:16px 24px; border-radius:0}
}