/* ============================================================
   ApplyLab Design System — Direction C (Soft Utility)
   ============================================================ */

/* ── 1. CSS 변수 ── */
:root {
  --bg:          #F2F5F8;
  --surface:     #FFFFFF;
  --ink:         #19232C;
  --muted:       #6A7682;
  --faint:       #9AA6B2;
  --line:        #EAEFF4;
  --line2:       #DFE6ED;
  --brand:       #3478F6;
  --brand-d:     #2563EB;
  --brand-soft:  #E9F1FE;
  --mint:        #E6F7F0;
  --mint-ink:    #0E9B6E;
  --sky:         #E8F1FE;
  --sky-ink:     #2E6FE0;
  --peach:       #FFF0E7;
  --peach-ink:   #D9772E;
  --lilac:       #F0ECFB;
  --lilac-ink:   #7A52D6;
  --pos:         #0E9B6E;
  --warn:        #D9772E;
  --r:           16px;
  --r-sm:        10px;
  --r-lg:        22px;
  --sh:          0 2px 10px rgba(25,35,44,.05);
  --sh2:         0 6px 20px rgba(25,35,44,.08);
  --maxw:        1040px;
}

/* ── 2. 기본 ── */
body { font-family: 'Pretendard', system-ui, -apple-system, sans-serif; }

/* ── 3. GNB ── */
header.gnb {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(242,245,248,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.gnb-in {
  max-width: 1400px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 1.25rem;
}
header.gnb .logo {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -.03em !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  flex-shrink: 0 !important;
}
header.gnb .logo b { color: var(--brand); }
header.gnb .logo-mk {
  width: 20px; height: 20px;
  background: var(--brand);
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
header.gnb .logo-mk::after {
  content: "";
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 3px;
}

/* 데스크톱 nav */
header.gnb .nav {
  display: flex !important;
  gap: 2px !important;
  font-size: 13.5px !important;
  flex: 1 !important;
  overflow-x: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: auto !important;
  top: auto !important;
}
header.gnb .nav a {
  color: var(--muted) !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: background .15s, color .15s !important;
  display: inline-block !important;
  background: transparent !important;
  font-size: 13.5px !important;
}
header.gnb .nav a:hover { background: #fff !important; color: var(--ink) !important; }
header.gnb .nav a[aria-current] {
  background: #fff !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  box-shadow: var(--sh) !important;
}
header.gnb .nav a.new { color: var(--brand) !important; font-weight: 700 !important; position: relative !important; }
header.gnb .nav a.new::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--brand);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

/* Visitor counter */
header.gnb #visitor-counter { flex-shrink: 0; }

/* 햄버거 버튼 — 기본 숨김 */
.navtog {
  display: none;
  margin-left: auto;
  width: 38px; height: 38px;
  border: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sh);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2147483647;
  position: relative;
}
html.nav-open .navtog { visibility: hidden; }
.navtog span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}

/* 드로어 — 최상위 격리, 모든 외부 CSS 영향 차단 */
.drawer {
  display: none !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  margin: 0 !important;
  background: #F2F5F8 !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;  /* 최대값 — 어떤 요소도 이길 수 없음 */
  padding: 76px 20px 20px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}
.drawer a {
  display: block !important;
  padding: 16px 18px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  color: #19232C !important;
  text-decoration: none !important;
  margin-bottom: 6px !important;
  font-family: 'Pretendard', system-ui, sans-serif !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(25,35,44,.04) !important;
  line-height: 1.4 !important;
}
.drawer a[aria-current] {
  background: #3478F6 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(52,120,246,.3) !important;
}
.drawer a.new { color: #3478F6 !important; }
.drawer a.new[aria-current] { color: #fff !important; }

/* 드로어 자체 닫기 버튼 */
.drawer-close {
  position: fixed !important;
  top: 14px !important; right: 16px !important;
  width: 40px !important; height: 40px !important;
  border: none !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(25,35,44,.1) !important;
  z-index: 2147483647 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #19232C !important;
  cursor: pointer !important;
}

/* ── nav-open 상태: 드로어 표시 ── */
html.nav-open .drawer {
  display: block !important;
}
html.nav-open .drawer-close {
  display: flex !important;
}
html.nav-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
html.nav-open .navtog span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .navtog span:nth-child(2) { opacity: 0; }
html.nav-open .navtog span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@keyframes al-slidein {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ── 4. 푸터 ── */
footer.al-footer {
  background: #E4E9EC;
  border-top: 1px solid var(--line);
  margin-top: 32px;
  font-family: 'Pretendard', system-ui, sans-serif;
}
.al-footer-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 1.25rem;
  font-size: 12px;
  color: var(--faint);
  text-align: center;
  line-height: 1.8;
}
.al-footer-in a { color: var(--muted); text-decoration: none; }

/* ── 5. 공통 컴포넌트 ── */
.al-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.page-head { padding: 20px 0 4px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.page-head p  { font-size: 14px; color: var(--muted); margin-top: 4px; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--brand); }
.sec { margin-top: 18px; }
.sec-h { display: flex; align-items: center; margin-bottom: 15px; }
.sec-h h2 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.pill {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--brand); background: var(--brand-soft);
  padding: 5px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}

/* ── 6. 히어로카드 ── */
.hero-card {
  background: linear-gradient(135deg,#3478F6,#5B93FF);
  border-radius: 22px; padding: 24px; color: #fff;
  box-shadow: 0 12px 30px rgba(52,120,246,.25);
  position: relative; overflow: hidden; margin-bottom: 14px;
}
.hero-card::after {
  content:""; position:absolute; right:-40px; top:-40px;
  width:170px; height:170px; background:rgba(255,255,255,.12); border-radius:50%;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .lbl   { font-size:13px; font-weight:600; opacity:.92; }
.hero-card .big   { font-size:clamp(36px,8vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1; margin:8px 0 2px; }
.hero-card .big small { font-size:20px; font-weight:700; opacity:.85; }
.hero-card .delta { font-size:13px; font-weight:600; opacity:.92; }
.hero-card .bar   { height:10px; background:rgba(255,255,255,.25); border-radius:6px; margin-top:18px; overflow:hidden; }
.hero-card .bar>i { display:block; height:100%; width:0; background:#fff; border-radius:6px; transition:width 1s cubic-bezier(.2,.7,.2,1); }
.hero-card .scale { display:flex; justify-content:space-between; font-size:11px; opacity:.75; margin-top:5px; }

/* ── 7. 그리드·카드 ── */
.al-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.al-sc { border-radius:var(--r); padding:16px; box-shadow:var(--sh); display:block; text-decoration:none; transition:.15s; }
.al-sc:hover { transform:translateY(-1px); box-shadow:var(--sh2); }
.al-sc .al-ic { width:32px; height:32px; border-radius:10px; background:#fff; display:grid; place-items:center; font-size:15px; font-weight:800; margin-bottom:10px; }
.al-sc .al-v  { font-size:14px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.al-sc .al-k  { font-size:12px; margin-top:3px; color:var(--muted); }
.al-c-sky   { background:var(--sky);   } .al-c-sky   .al-ic { color:var(--sky-ink);   }
.al-c-mint  { background:var(--mint);  } .al-c-mint  .al-ic { color:var(--mint-ink);  }
.al-c-lilac { background:var(--lilac); } .al-c-lilac .al-ic { color:var(--lilac-ink); }
.al-c-peach { background:var(--peach); } .al-c-peach .al-ic { color:var(--peach-ink); }
.al-card { background:var(--surface); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh); }

/* ── 8. 검색바·칩·뱃지 ── */
.searchbar { display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:var(--r); padding:13px 18px; box-shadow:var(--sh2); }
.searchbar input { border:none; outline:none; font:inherit; font-size:16px; width:100%; background:none; color:var(--ink); }
.searchbar input::placeholder { color:var(--faint); }
.al-chips { display:flex; gap:8px; flex-wrap:wrap; }
.al-chip { font-size:13px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line2); padding:7px 14px; border-radius:999px; cursor:pointer; transition:.15s; }
.al-chip:hover { border-color:var(--brand); color:var(--brand); }
.al-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.al-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:7px; }
.al-live  { background:var(--brand); color:#fff; }
.al-soon  { background:var(--peach); color:var(--peach-ink); }
.al-done  { background:var(--line);  color:var(--muted); }
.al-posb  { background:var(--mint);  color:var(--mint-ink); }

/* ── 9. 리스트 행 ── */
.al-row { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
.al-row:last-child { border-bottom:none; }
.al-rk  { width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand); font-weight:800; font-size:13px; display:grid; place-items:center; flex-shrink:0; }
.al-row.top1 .al-rk { background:var(--brand); color:#fff; }
.al-nm  { font-weight:700; font-size:14px; }
.al-rg  { font-size:12px; color:var(--faint); }
.al-meta { margin-left:auto; text-align:right; font-weight:800; font-size:15px; }
.al-meta small { display:block; font-size:11px; color:var(--faint); font-weight:600; }
.al-morebtn { display:block; text-align:center; margin-top:12px; font-size:14px; color:var(--brand); font-weight:700; background:var(--brand-soft); padding:11px; border-radius:12px; text-decoration:none; }

/* ── 10. 광고·리빌 ── */
.ad { border-radius:var(--r); border:1.5px dashed var(--line2); min-height:100px; display:grid; place-items:center; background:var(--surface); text-align:center; color:var(--faint); }
.ad-infeed { margin:14px 0; }
.reveal { opacity:0; transform:translateY(12px); transition:opacity .6s, transform .6s; }
.reveal.in { opacity:1; transform:none; }

/* ── 11. 모바일 ── */
@media (max-width: 900px) {
  header.gnb .nav { display: none !important; }
  .navtog { display: flex !important; }
  .gnb-in { padding: 0 14px; gap: 8px; }
  header.gnb #visitor-counter { display: none !important; }
  .al-grid4 { grid-template-columns: 1fr 1fr; }
  /* 기존 페이지 구 nav 요소 숨김 */
  .nav-hamburger, .nav-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}