/* ============================================
   훤AI (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");

:root{
  --mint:#2AC1BC; --teal:#20A6A2; --cream:#F0FAF8; --forest:#0D2A29;
  --sub:#547471; --line:#DCEEEC; --card:#FFFFFF; --glow:rgba(42,193,188,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"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(240,250,248,.88); 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:"훤AI"; 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:300; letter-spacing:-.03em; line-height:1.3; margin-bottom:14px;
}
.hero h1 .em{font-weight:500; color:#7FE8E3}
.hero p{color:#9FC4C1; font-size:1rem; font-weight:300; letter-spacing:-.01em}
.hero .tag{
  display:inline-block; margin-bottom:26px; font-size:.72rem; letter-spacing:.42em;
  color:#6FB9B5; font-weight:300; 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}
}