/* =========================================================
   UFOsNW — Dark magazine theme
   ========================================================= */

:root{
  --bg: #05060a;
  --bg-2: #0a0e1a;
  --surface: rgba(255,255,255,.04);
  --surface-strong: rgba(255,255,255,.06);
  --border: rgba(226,232,240,.10);
  --text: #E2E8F0;
  --muted: #8b93a7;
  --accent: #7dd3fc;     /* cyan */
  --accent-2: #a78bfa;   /* violet */
  --accent-3: #22d3ee;   /* bright cyan */
  --neon: 0 0 6px rgba(125,211,252,.6), 0 0 14px rgba(125,211,252,.35), 0 0 24px rgba(167,139,250,.25);
  --radius: 14px;
  --container: 1200px;
  --shadow-card: 0 10px 30px rgba(0,0,0,.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Pretendard Variable','Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo','Noto Sans KR', sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(125,211,252,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  min-height:100dvh;
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--text); text-decoration:none; transition: color .2s ease; }
a:hover{ color:var(--accent); }
button{ font-family:inherit; }

h1,h2,h3,h4{ color:var(--text); line-height:1.25; letter-spacing:-.01em; margin:0 0 .6em; }
h1{ font-size: clamp(2rem, 4vw + .8rem, 3.25rem); font-weight:700; }
h2{ font-size: clamp(1.5rem, 2.2vw + .6rem, 2.2rem); font-weight:600; }
h3{ font-size: clamp(1.2rem, 1.2vw + .6rem, 1.5rem); font-weight:600; }
p{ margin:0 0 1em; }
hr{ border:0; border-top:1px solid var(--border); margin:2rem 0; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 1.25rem; }

/* ---------- Particle canvas ---------- */
#ufo-stars{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: transparent;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(5,6,10,.55);
  border-bottom:1px solid var(--border);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:2rem; letter-spacing:.02em; }
.brand .name{ color:#E2E8F0; }
.primary-nav{ display:flex; align-items:center; gap:1.4rem; }
.primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.primary-nav a{ color:var(--muted); font-weight:500; font-size:.95rem; }
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color:var(--text); }

.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  color:var(--text); padding:.5rem; border-radius:10px; cursor:pointer;
}
@media (max-width: 860px){
  .primary-nav ul{
    position:absolute; right:1rem; top:70px;
    flex-direction:column; gap:.25rem;
    background: rgba(10,14,26,.95); backdrop-filter: blur(12px);
    border:1px solid var(--border); border-radius:12px; padding:.6rem;
    min-width:220px; display:none;
  }
  .primary-nav.open ul{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:.4rem; }
  .primary-nav a{ display:block; padding:.55rem .7rem; border-radius:8px; }
  .primary-nav a:hover{ background:rgba(255,255,255,.04); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px;
  padding:0 1.25rem;
  text-align:center;
  line-height:1;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.45);
  background: linear-gradient(135deg, rgba(125,211,252,.08), rgba(167,139,250,.08));
  color:var(--text); font-weight:600; letter-spacing:.02em;
  cursor:pointer; position:relative;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn > i, .btn > svg{ display:block; flex-shrink:0; line-height:0; }
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--neon);
  border-color: rgba(125,211,252,.85);
  color:var(--text);
}
.btn--solid{
  background: linear-gradient(135deg, #7dd3fc, #a78bfa);
  color:#0a0e1a; border-color: transparent;
}
.btn--ghost{ background:transparent; }

/* ---------- Glass card ---------- */
.glass{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-card);
  padding:1.5rem;
}
.glass--hover{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.glass--hover:hover{
  transform: translateY(-3px);
  border-color: rgba(125,211,252,.4);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(125,211,252,.25);
}

/* ---------- Hero ---------- */
.hero{
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  text-align:center;
}
.hero h1{
  background: linear-gradient(90deg, #E2E8F0 0%, #7dd3fc 50%, #a78bfa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ color:var(--muted); font-size:clamp(1rem,1vw + .6rem,1.2rem); max-width:720px; margin:0 auto 2rem; }
.hero .cta{ display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }

/* ---------- Magazine grid ---------- */
.magazine{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(12, 1fr);
  margin: 3rem 0;
}
.magazine .card{ grid-column: span 4; }
.magazine .card--wide{ grid-column: span 8; }
.magazine .card--full{ grid-column: span 12; }
@media (max-width: 900px){
  .magazine .card,.magazine .card--wide,.magazine .card--full{ grid-column: span 12; }
}

.card .thumb{
  aspect-ratio: 16/9; border-radius: 10px; overflow:hidden;
  background: linear-gradient(135deg, #0a0e1a, #1a1f36);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .thumb .icon{ color: var(--accent); opacity:.8; }
.card .meta{ color:var(--muted); font-size:.85rem; display:flex; gap:.6rem; align-items:center; margin-bottom:.4rem; }
.card h3{ margin:0 0 .5rem; }
.card p{ color:var(--muted); font-size:.95rem; }

/* ---------- Section heading ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin: 2rem 0 1rem; border-bottom:1px solid var(--border); padding-bottom:.6rem;
}
.section-head h2{ margin:0; font-size:1.4rem; }
.section-head .more{ color:var(--accent); font-size:.9rem; }

/* ---------- Article / content ---------- */
.page-wrap{ padding: 2rem 0 4rem; }
.content{ max-width: 1000px; margin: 0 auto; }
.content .entry-meta{ color:var(--muted); font-size:.9rem; margin-bottom:1.5rem; display:flex; gap:.8rem; align-items:center; }
.content img{ border-radius:10px; border:1px solid var(--border); }
.content blockquote{
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0; padding: .6rem 1.2rem;
  background: rgba(125,211,252,.05); color:var(--text);
  border-radius: 0 10px 10px 0;
}
.content ul, .content ol{ padding-left:1.2rem; }
.content code{ background:rgba(255,255,255,.06); padding:.2rem .4rem; border-radius:6px; font-size:.9em; }
.content pre{ background:#0a0e1a; border:1px solid var(--border); padding:1rem; border-radius:10px; overflow:auto; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], textarea, select{
  width:100%; padding:.75rem .9rem; border-radius:10px; color:var(--text);
  background: rgba(255,255,255,.03); border:1px solid var(--border);
  font-family:inherit; font-size:1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(125,211,252,.18);
}
label{ display:block; color:var(--muted); font-size:.9rem; margin:.9rem 0 .35rem; }
.form-row{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.wpcf7-form p{ margin:0 0 .9rem; }
.wpcf7-submit{ cursor:pointer; }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  padding: 2rem 0 1.5rem;
  color:var(--muted); font-size:.9rem;
}
.site-footer .cols{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2rem; }
@media (max-width: 720px){
  .site-footer .cols{ grid-template-columns: 1fr 1fr; gap:1.25rem 1.5rem; }
  .site-footer .cols > section:first-child{ grid-column: 1 / -1; }
}
.site-footer h4{ color:var(--text); font-size:1rem; margin-bottom:.5rem; }
.site-footer .site-name{ font-size:1.8rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }

/* ---------- Pagination ---------- */
.pagination{ margin: 2rem 0; display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; }
.pagination a, .pagination .current{
  display:inline-flex; padding:.5rem .85rem; border-radius:10px;
  border:1px solid var(--border); color:var(--text); font-size:.9rem;
}
.pagination .current{ background: rgba(125,211,252,.15); border-color: rgba(125,211,252,.5); }
.pagination a:hover{ border-color: var(--accent); color:var(--text); }

/* ---------- 404 ---------- */
.e404{ text-align:center; padding: 5rem 0; }
.e404 .big{ font-size: clamp(5rem, 20vw, 10rem); font-weight:800; line-height:1;
  background: linear-gradient(90deg,#7dd3fc,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 60px rgba(125,211,252,.2);
  letter-spacing:-.04em; margin-bottom:1rem;
}

/* ---------- Utilities ---------- */
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.25rem; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; }
@media (max-width: 900px){ .grid-2,.grid-3{ grid-template-columns: 1fr; } }
.badge{ display:inline-flex; padding:.2rem .55rem; border-radius:999px; background:rgba(125,211,252,.12); color:var(--accent); font-size:.75rem; letter-spacing:.04em; }
.text-muted{ color:var(--muted); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  #ufo-stars{ display:none; }
}