/* Korea Culture Lab — bilingual site styles */
:root{
  --bg:#faf9f7;
  --card:#ffffff;
  --ink:#1a1a1a;
  --muted:#6b7280;
  --accent:#e84a5f;
  --accent-2:#0ea5e9;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Apple SD Gothic Neo, "Malgun Gothic", sans-serif;}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;backdrop-filter:saturate(1.8) blur(8px);background:rgba(250,249,247,.75);border-bottom:1px solid #eee;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--shadow)}
.brand h1{font-size:18px;margin:0;font-weight:800;letter-spacing:.3px}
.navlinks{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.navlinks a{padding:8px 14px;border-radius:999px;border:1px solid #ddd;background:#fff}
.lang{display:flex;gap:8px;align-items:center}
.lang a{padding:6px 10px;border-radius:999px;border:1px dashed #ccc;background:#fff}
.hero{padding:64px 24px 16px}
.hero h2{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0}
.cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.cta a{padding:12px 16px;border-radius:12px;border:1px solid #222;background:#111;color:#fff;font-weight:700}
.section-title{font-size:22px;margin:24px 0 8px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 6;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card img{width:100%;height:220px;object-fit:cover}
.card .body{padding:16px}
.card h3{margin:0 0 6px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:12px;padding:4px 8px;border-radius:999px;background:#f0f4f8;color:#0f172a;border:1px solid #e2e8f0}
.meta{font-size:13px;color:var(--muted)}
.footer{padding:32px 24px;color:#777;text-align:center}
.recipe{max-width:800px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:28px}
.recipe h1{margin-top:0}
.recipe .lead{color:#555}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.section{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px}
ul,ol{padding-left:20px}
.backlink{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.split{display:grid;grid-template-columns:1.3fr .7fr;gap:24px}
.contact{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e5e5;background:#fff}
button{padding:12px 16px;border-radius:12px;border:1px solid #222;background:#111;color:#fff;font-weight:700;cursor:pointer}
.small{font-size:13px;color:var(--muted)}
hr.sep{border:0;border-top:1px dashed #e5e7eb;margin:28px 0}

/* --- Carousel (scroll-snap) --- */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: #000;
  margin: 24px 0;
}
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.carousel-slide {
  position: relative;
  scroll-snap-align: start;
  height: 360px;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* arrows */
.carousel-nav { pointer-events: none; }
.carousel-btn {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 18px;
}
.carousel-btn:focus { outline: 2px solid #000; }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }

/* dots */
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.1);
}
.carousel-dot.active { background: #fff; }

/* responsive */
@media (max-width: 700px){
  .carousel-slide { height: 260px; }
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Ensure header can anchor the dropdown */
.header { position: sticky; top: 0; z-index: 10; }
.header .nav { position: relative; }

/* Desktop: keep existing .navlinks display */
@media (max-width: 700px) {
  .menu-toggle { display: block; }

  .navlinks {
    display: none;                 /* hidden by default */
    position: absolute;
    top: 64px;                     /* adjust if header taller/shorter */
    right: 0;
    left: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #eee;
    box-shadow: var(--shadow);
    padding: 8px 0;
    text-align: center;
  }
  .navlinks.open { display: flex; }

  .navlinks a,
  .navlinks .lang {
    padding: 12px 16px;
    border: 0;
    width: 100%;
  }
}
@media (max-width:900px){
  .card{grid-column:span 12}
  .hero h2{font-size:34px}
  .two-col,.split{grid-template-columns:1fr}
}