/* ============================================
   부비 (HWON) Design System
   Fresh Mint #2AC1BC · Deep Teal #20A6A2
   Mint Cream #F0FAF8 · Deep Forest #0D2A29
   Pretendard 300/500 · 후광 링 시그니처
   ============================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");

:root{
  --mint:#2AC1BC; --teal:#20A6A2; --cream:#FFFFFF; --forest:#1B4D48;
  --sub:#5A7B78; --line:#DCEEEC; --card:#FFFFFF; --glow:rgba(42,193,188,.35);
  --deep:#22635D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
  background:var(--cream); color:var(--forest);
  line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}

/* ---------- Header : 라이트 · 글로시 버블 링 ---------- */
.site-header{
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-size:0;letter-spacing:-.02em}
.logo::before{
  content:""; width:24px; height:24px; border-radius:50%; flex:0 0 24px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg,#8FE9E4 0%, #2AC1BC 55%, #1B918D 100%);
  -webkit-mask:radial-gradient(circle, transparent 0 5.5px, #000 6px);
          mask:radial-gradient(circle, transparent 0 5.5px, #000 6px);
  box-shadow:0 2px 8px rgba(42,193,188,.35);
}
.logo::after{
  content:"부비"; font-size:1.22rem; font-weight:500; color:var(--forest); letter-spacing:-.01em;
}
.site-header nav{display:flex;gap:20px;font-size:.9rem;font-weight:400;color:var(--sub)}
.site-header nav a:hover{color:var(--teal)}

/* ---------- Hero : 다크 · 네온 발광 링 ---------- */
.hero{
  background:
    radial-gradient(ellipse 70% 90% at 50% -10%, rgba(42,193,188,.16), transparent 60%),
    linear-gradient(175deg,#0D2A29 0%, #10312F 60%, #133A37 100%);
  color:#EAF7F6; text-align:center; padding:74px 22px 84px; position:relative; overflow:hidden;
}
.hero .ring{
  width:64px;height:64px;margin:0 auto 30px;border-radius:50%;position:relative;
  background:linear-gradient(180deg,#9FF0EB,#2AC1BC);
  -webkit-mask:radial-gradient(circle, transparent 0 17px, #000 17.5px);
          mask:radial-gradient(circle, transparent 0 17px, #000 17.5px);
  filter:drop-shadow(0 0 14px rgba(42,193,188,.85)) drop-shadow(0 0 44px rgba(42,193,188,.45));
}
.hero h1{
  font-size:2.1rem; font-weight:400; letter-spacing:-.03em; line-height:1.3; margin-bottom:14px;
}
.hero h1 .em{font-weight:600; color:#7FE8E3}
.hero p{color:#9FC4C1; font-size:1rem; font-weight:400; letter-spacing:-.01em}
.hero .tag{
  display:inline-block; margin-bottom:26px; font-size:.72rem; letter-spacing:.42em;
  color:#6FB9B5; font-weight:500; text-transform:uppercase;
}

/* ---------- Sections & Cards ---------- */
main{padding:46px 0 70px}
main h2, .sec-title{
  font-size:1.3rem; font-weight:500; letter-spacing:-.02em; margin:44px 0 18px; color:var(--forest);
  display:flex; align-items:center; gap:10px;
}
main h2::before, .sec-title::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,#8FE9E4,#20A6A2);
  box-shadow:0 0 8px var(--glow);
}
main > .wrap > section:first-of-type h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px;
  display:block; transition:.18s ease;
}
.card:hover{transform:translateY(-3px); border-color:#B5E4E1; box-shadow:0 14px 34px rgba(32,166,162,.14)}
.card h3{font-size:1.02rem; font-weight:500; letter-spacing:-.015em; margin-bottom:7px; line-height:1.45}
.card p{font-size:.87rem; color:var(--sub); font-weight:400; line-height:1.6}

/* ---------- Article ---------- */
article.post{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:38px 34px;
}
article.post .breadcrumb{font-size:.83rem; color:var(--sub); margin-bottom:18px}
article.post .breadcrumb a{color:var(--teal)}
article.post h1{font-size:1.55rem; font-weight:500; letter-spacing:-.025em; line-height:1.4; margin-bottom:8px}
article.post .meta{font-size:.84rem; color:var(--sub); font-weight:300; margin-bottom:26px}
article.post h2{
  font-size:1.14rem; font-weight:500; letter-spacing:-.015em; margin:32px 0 12px; padding-left:14px;
  position:relative; display:block;
}
article.post h2::before{
  content:""; position:absolute; left:0; top:.35em; width:5px; height:5px; border-radius:50%;
  background:var(--mint); box-shadow:0 0 7px var(--glow); margin:0;
}
article.post p{margin-bottom:15px; font-size:.95rem; font-weight:400}
article.post ul,article.post ol{margin:0 0 16px 22px; font-size:.95rem}
article.post li{margin-bottom:7px}
article.post table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:.88rem}
article.post th{background:var(--forest);color:#DFF5F3;padding:10px 8px;font-weight:500}
article.post td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
article.post strong{font-weight:600}
.notice{
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px; font-size:.84rem; color:var(--sub); margin-top:28px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--forest); color:#7FA5A2; padding:38px 0; font-size:.84rem; font-weight:300;
  text-align:center; margin-top:30px;
}
.site-footer a{color:#B9DCD9; margin:0 6px}
.site-footer p{margin-bottom:8px}
.site-footer .wrap p:last-child{margin-bottom:0; color:#5D8683}

@media(max-width:620px){
  .hero h1{font-size:1.55rem}
  .site-header nav{display:none}
  article.post{padding:28px 20px}
}

/* ---------- Hero Intro : 링 드로잉 → 플래시 → 호흡 글로우 ---------- */
.hero .ring-stage{width:76px;height:76px;margin:0 auto 30px;position:relative}
.hero svg.ring-draw{width:76px;height:76px;transform:rotate(-90deg)}
.hero svg.ring-draw circle.track{fill:none;stroke:rgba(42,193,188,.12);stroke-width:12}
.hero svg.ring-draw circle.arc{
  fill:none;stroke:url(#hwGrad);stroke-width:12;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:hwDraw 1.15s cubic-bezier(.65,0,.35,1) .25s forwards;
}
.hero .ring-stage{
  filter:drop-shadow(0 0 10px rgba(42,193,188,.55));
  animation:hwFlash .7s ease-out 1.35s, hwBreathe 3.6s ease-in-out 2.1s infinite;
}
@keyframes hwDraw{to{stroke-dashoffset:0}}
@keyframes hwFlash{
  0%{filter:drop-shadow(0 0 10px rgba(42,193,188,.55))}
  38%{filter:drop-shadow(0 0 26px rgba(42,193,188,1)) drop-shadow(0 0 70px rgba(42,193,188,.75)) brightness(1.35)}
  100%{filter:drop-shadow(0 0 14px rgba(42,193,188,.7))}
}
@keyframes hwBreathe{
  0%,100%{filter:drop-shadow(0 0 12px rgba(42,193,188,.6))}
  50%{filter:drop-shadow(0 0 24px rgba(42,193,188,.95)) drop-shadow(0 0 50px rgba(42,193,188,.4))}
}
.hero .tag{opacity:0;letter-spacing:.15em;animation:hwTag 1s ease .15s forwards}
@keyframes hwTag{to{opacity:1;letter-spacing:.42em}}
.hero h1{opacity:0;transform:translateY(16px);animation:hwRise .8s cubic-bezier(.22,1,.36,1) 1.25s forwards}
.hero p{opacity:0;transform:translateY(12px);animation:hwRise .8s cubic-bezier(.22,1,.36,1) 1.5s forwards}
@keyframes hwRise{to{opacity:1;transform:translateY(0)}}
.hero h1 .em{position:relative;display:inline-block}
.hero h1 .em::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#7FE8E3,transparent);
  transform:scaleX(0);animation:hwUnderline .6s ease 2s forwards;
}
@keyframes hwUnderline{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .hero svg.ring-draw circle.arc{animation:none;stroke-dashoffset:0}
  .hero .ring-stage,.hero .tag,.hero h1,.hero p,.hero h1 .em::after{animation:none;opacity:1;transform:none;letter-spacing:.42em}
  .hero h1,.hero p{letter-spacing:normal}
}

/* ============================================
   상단 배너 캐러셀 — 흰 배경 · 5장 · 자동/스와이프
   ============================================ */
.hwCar{position:relative;max-width:1160px;margin:20px auto 6px;border-radius:28px;overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(27,77,72,.10)}
.hwCarView{overflow:hidden}
.hwCarTrack{display:flex;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform;cursor:grab}
.hwCarTrack:active{cursor:grabbing}
.hwSlide{flex:0 0 100%;box-sizing:border-box;padding:54px 30px 60px;text-align:center;
  background:#fff;position:relative;user-select:none}
.hwSlide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% -8%, rgba(42,193,188,.10), transparent 62%)}
.hwSlideIco{font-size:2.6rem;margin-bottom:16px;line-height:1;
  filter:drop-shadow(0 6px 14px rgba(42,193,188,.28))}
.hwSlideRing{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(180deg,#9FF0EB,#2AC1BC);
  -webkit-mask:radial-gradient(circle, transparent 0 16px, #000 16.5px);
          mask:radial-gradient(circle, transparent 0 16px, #000 16.5px);
  filter:drop-shadow(0 4px 14px rgba(42,193,188,.55))}
.hwSlideTag{display:inline-block;margin-bottom:14px;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:var(--teal);background:#E7F8F6;border:1px solid #C7EEEA;
  padding:5px 13px;border-radius:999px}
.hwSlide h1{font-size:2rem;font-weight:500;letter-spacing:-.03em;line-height:1.28;
  color:var(--forest);margin-bottom:12px}
.hwSlide h1 .em{font-weight:700;background:linear-gradient(120deg,#20A6A2,#2AC1BC);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hwSlide p{color:var(--sub);font-size:1rem;line-height:1.65;margin-bottom:22px}
.hwSlideBtn{display:inline-block;padding:12px 24px;border-radius:999px;font-size:.94rem;font-weight:600;
  color:#fff;background:linear-gradient(180deg,#33CCC7,#20A6A2);
  box-shadow:0 8px 20px rgba(42,193,188,.34);transition:transform .16s,box-shadow .16s}
.hwSlideBtn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(42,193,188,.45)}
.hwCarArw{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--teal);font-size:1.5rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(27,77,72,.12);transition:.15s;z-index:3}
.hwCarArw:hover{background:#fff;color:var(--forest);transform:translateY(-50%) scale(1.08)}
.hwCarArw.prev{left:14px} .hwCarArw.next{right:14px}
.hwCarDots{position:absolute;bottom:16px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3}
.hwCarDot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:#CDE7E4;transition:.2s}
.hwCarDot.on{width:22px;border-radius:5px;background:linear-gradient(90deg,#33CCC7,#20A6A2)}
@media(max-width:1200px){.hwCar{margin-left:16px;margin-right:16px}}
@media(max-width:720px){
  .hwCar{border-radius:22px;margin:12px 12px 4px}
  .hwSlide{padding:42px 20px 52px}
  .hwSlide h1{font-size:1.5rem}
  .hwSlide p{font-size:.92rem}
  .hwCarArw{width:34px;height:34px;font-size:1.3rem}
  .hwCarArw.prev{left:8px}.hwCarArw.next{right:8px}
}

/* ============================================
   실시간 뉴스 큐레이션
   ============================================ */
#news{margin-top:6px}
.newsChips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 16px}
.newsChip{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:.85rem;font-weight:500;color:var(--sub);cursor:pointer;font-family:inherit;transition:.15s}
.newsChip:hover{border-color:#B5E4E1;color:var(--teal)}
.newsChip.on{background:linear-gradient(180deg,#33CCC7,#20A6A2);color:#fff;border-color:transparent;
  font-weight:600;box-shadow:0 4px 12px rgba(42,193,188,.28)}
.newsList{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 20px}
@media(max-width:680px){.newsList{grid-template-columns:1fr;padding:10px 16px}}
.newsItem{display:flex;align-items:flex-start;gap:12px;padding:12px 2px;
  border-bottom:1px solid #EDF6F5;transition:.14s}
.newsItem:hover .newsTit{color:var(--teal)}
.newsRank{flex:0 0 22px;font-size:1rem;font-weight:700;color:var(--mint);line-height:1.5;text-align:center}
.newsBody{display:flex;flex-direction:column;gap:3px;min-width:0}
.newsTit{font-size:.93rem;font-weight:500;color:var(--forest);line-height:1.45;letter-spacing:-.01em;
  transition:color .14s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.newsMeta{font-size:.76rem;color:#8AA6A3;font-weight:400}
.newsFoot{margin-top:9px;font-size:.76rem;color:#93AEAB;text-align:right;padding-right:4px}
.newsSkel{height:44px;margin:12px 2px;border-radius:8px;
  background:linear-gradient(90deg,#F0F8F7 25%,#E6F4F2 37%,#F0F8F7 63%);
  background-size:400% 100%;animation:newsShimmer 1.3s ease infinite}
@keyframes newsShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.newsErr{grid-column:1/-1;padding:22px 4px;text-align:center;color:var(--sub);font-size:.9rem}