/* ============== Design Tokens ============== */
:root{
  --brand: #c99a06;         /* 메인 포인트 */
  --brand-2: #8b8dfd;       /* 보조 포인트 */
  --bg:#f6f7fb;
  --card-rgb: 255,255,255;
  --txt:#1b1c20;
  --muted:#6b7280;
  --border:#e7e9f0;

  --glass: rgba(var(--card-rgb), .6);
  --blur: 12px;

  --radius: 16px;
  --shadow: 0 8px 28px rgba(0,0,0,.08);

  --fs-hero: clamp(28px, 4vw, 44px);
  --fs-h2: clamp(20px, 2.4vw, 28px);
  --fs-h3: clamp(16px, 1.8vw, 20px);
  --fs-body: clamp(14px, 1.3vw, 16px);
  --fs-small: 13px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d13;
    --card-rgb: 18,20,28;
    --txt:#e7e9ee;
    --muted:#a3a8b3;
    --border:#232632;
    --glass: rgba(var(--card-rgb), .55);
    --shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}

/* ============== Base ============== */
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--txt); line-height:1.6;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;}
a{text-decoration:none;color:inherit}
img{display:block; max-width:100%; height:auto}

/* ============== Hero ============== */
.wb-hero{
  position:relative; isolation:isolate; overflow:hidden;

}
.wb-hero__card{
  margin:0 auto; max-width:1120px;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  background: var(--glass); border:1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow:var(--shadow); padding: clamp(20px, 3vw, 36px);
}
.kicker{display:inline-flex; gap:8px; align-items:center; font-size:var(--fs-small); color:var(--muted); margin-bottom:8px}
.kicker::before{content:""; width:8px; height:8px; border-radius:9999px; background:var(--brand)}
.hero-title{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.02em; margin:6px 0 10px}
.hero-sub{font-size:var(--fs-body); color:var(--muted)}
.hl{color:var(--brand); font-weight:700}

/* ============== Section Head / Badge ============== */
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; padding: 28px 20px 12px}
.section-title{font-size:var(--fs-h2); font-weight:700}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9999px; border:1px solid var(--border); background: rgba(255,255,255,.08); font-size:12px; color:var(--muted)}
.badge .dot{width:6px; height:6px; border-radius:9999px; background:var(--brand)}

/* ============== Timeline (1컬럼) ============== */
.timeline{
  position:relative;
  padding: 0 20px 40px 44px; /* 왼쪽 라인/도트 공간 */
}

/* 세로줄 — color-mix 대신 RGBA로 안전하게 */
.timeline::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:23px; width:2px; border-radius:2px;
  background: linear-gradient(
    to bottom,
    rgba(201,154,6,0.85) 0%,
    rgba(201,154,6,0.25) 100%
  );
  opacity:.9;
}

/* 항목 리스트 */
.tl-list{display:grid; gap:18px; max-width:1120px; margin:0 auto}
.tl-item{
  position:relative;
  padding:18px 20px;
  border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--border);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
}

/* 도트 */
.tl-item::before{
  content:"";
  position:absolute; left:-29px; top: 50%; transform: translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--brand) 60%);
  border:2px solid var(--brand);
}

/* 메타/타이틀/본문 */
.tl-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:var(--fs-small)}
.tl-meta .pill{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:9999px; border:1px solid var(--border); background: rgba(255,255,255,.06)}
.tl-title{font-weight:700; font-size:var(--fs-body)}
.tl-desc{font-size:var(--fs-body)}

/* Hover/Focus */
.tl-item:hover, .tl-item:focus-within{
  border-color: rgba(201,154,6,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-1px);
  transition:.25s ease;
}

/* note */
.note{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:var(--fs-small); padding:0 20px 24px}
.note .legend{display:inline-flex; gap:8px; align-items:center}
.note .chip{width:14px; height:14px; border-radius:3px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(201,154,6,.25), rgba(255,255,255,.4))}