:root{
    --bg:#0a0e14; --fg:#e6edf3; --muted:#8b949e; --line:#232a35;
    --accent:#58a6ff; --accent2:#a371f7; --accent3:#3fb950;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--fg);min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif;
    line-height:1.6;overflow-x:hidden;position:relative}

  /* 은은한 배경 그라데이션 오브 */
  body::before,body::after{content:"";position:fixed;border-radius:50%;
    filter:blur(90px);opacity:.22;z-index:0;pointer-events:none}
  body::before{width:520px;height:520px;background:var(--accent);
    top:-160px;left:-120px;animation:float1 18s ease-in-out infinite}
  body::after{width:460px;height:460px;background:var(--accent2);
    bottom:-160px;right:-120px;animation:float2 22s ease-in-out infinite}
  @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
  @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}

  .wrap{max-width:920px;margin:0 auto;padding:0 1.25rem 4rem;position:relative;z-index:1}

  /* 히어로 */
  .hero{text-align:center;padding:4.5rem 0 2.5rem}
  .logo{width:72px;height:72px;margin:0 auto 1.2rem;display:block;
    filter:drop-shadow(0 0 20px rgba(88,166,255,.5));animation:pulse 4s ease-in-out infinite}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  .hero h1{font-size:2.8rem;margin:0 0 .6rem;letter-spacing:-.03em;font-weight:800;
    background:linear-gradient(120deg,#fff 20%,var(--accent) 60%,var(--accent2));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero .tagline{color:var(--muted);font-size:1.1rem;margin:0 auto;max-width:520px}
  .badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
  .badge{font-size:.78rem;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:.25rem .8rem;background:rgba(255,255,255,.02)}
  .badge b{color:var(--accent3)}

  /* 도구 그리드 */
  .grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:1rem}
  .tool{position:relative;display:block;border-radius:16px;padding:1.6rem;
    text-decoration:none;color:var(--fg);overflow:hidden;
    background:rgba(22,27,34,.6);backdrop-filter:blur(12px);
    border:1px solid var(--line);transition:transform .2s,border-color .2s,box-shadow .2s;
    opacity:0;animation:rise .6s ease forwards}
  .tool:nth-child(1){animation-delay:.05s} .tool:nth-child(2){animation-delay:.13s}
  .tool:nth-child(3){animation-delay:.21s} .tool:nth-child(4){animation-delay:.29s}
  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  .tool::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
    background:linear-gradient(135deg,var(--tc,var(--accent)),transparent 55%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s}
  .tool:hover{transform:translateY(-6px);border-color:transparent;
    box-shadow:0 16px 40px -12px var(--tc,rgba(88,166,255,.4))}
  .tool:hover::before{opacity:1}
  .tool:hover .ico{transform:scale(1.12) rotate(-4deg)}
  .ico{font-size:2.2rem;margin-bottom:.8rem;display:inline-block;transition:transform .25s}
  .tool h3{margin:0 0 .4rem;font-size:1.2rem;font-weight:700}
  .tool p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
  .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1rem}
  .tag{font-size:.72rem;color:var(--tc,var(--accent));border:1px solid var(--line);
    border-radius:999px;padding:.15rem .65rem;background:rgba(255,255,255,.02)}
  .arrow{position:absolute;top:1.6rem;right:1.6rem;color:var(--muted);
    font-size:1.1rem;transition:transform .2s,color .2s}
  .tool:hover .arrow{transform:translate(3px,-3px);color:var(--tc,var(--accent))}

  /* 색상 테마 */
  .t-pii{--tc:#58a6ff} .t-hdr{--tc:#3fb950} .t-link{--tc:#d29922} .t-chat{--tc:#a371f7}

  .foot{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
    color:var(--muted);font-size:.85rem;text-align:center}
  .foot a{color:var(--accent);text-decoration:none}
  .foot a:hover{text-decoration:underline}
  .privacy{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.6rem;
    font-size:.85rem;color:var(--accent3)}

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important}
    .tool{opacity:1}
  }
  @media (max-width:560px){.hero h1{font-size:2.1rem}.hero{padding:3rem 0 2rem}}