:root{--bg: #ffffff;--surface: #f8f9fa;--card: #ffffff;--text: #1a1a1a;--muted: #6b7280;--border: #e5e7eb;--primary: #2563eb;--primary-ink: #ffffff;--ring: rgba(37, 99, 235, .3);--shadow: 0 4px 12px rgba(0, 0, 0, .08);--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(135deg,#f0f9ff,#fff);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans KR,Arial;line-height:1.6}a{color:inherit;text-decoration:none}img{display:block}button,input{font:inherit;color:inherit;background:none;border:none;outline:none}.App{display:flex;flex-direction:column;gap:24px;min-height:100dvh}.container{width:min(1100px,92%);margin:0 auto}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:#f9fafb;transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;cursor:pointer;-webkit-user-select:none;user-select:none}.btn:hover{transform:translateY(-1px);border-color:#d1d5db;background:#f3f4f6}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);border-color:#1d4ed8;box-shadow:0 4px 12px #2563eb40}.btn-primary:hover{box-shadow:0 6px 16px #2563eb59;background:linear-gradient(180deg,#2563eb,#1d4ed8)}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eff6ff;border:1px solid var(--border);color:var(--primary);font-size:12px;font-weight:600}:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:10px}.Header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;min-height:76px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(180deg,#fffffff2,#ffffffd9);border-bottom:1px solid var(--border)}.Header>img{position:absolute;left:24px;width:48px;height:48px;border-radius:12px;border:1px solid var(--border);background:#f9fafb;object-fit:cover}.Header>h1{margin:0;font-weight:800;font-size:24px;letter-spacing:.5px;background:linear-gradient(180deg,#1a1a1a,#4b5563);-webkit-background-clip:text;background-clip:text;color:transparent}.Header>a{position:absolute;right:24px;padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);font-weight:700;border:1px solid #1d4ed8;box-shadow:0 4px 12px #2563eb40;transition:transform .12s ease,box-shadow .12s ease}.Header>a:hover{transform:translateY(-1px);box-shadow:0 6px 16px #2563eb59}.List{display:flex;flex-direction:column;gap:18px;text-align:left;padding:0 30px}.Searchbar{width:100%;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}.Searchbar>input{width:100%;padding:14px 16px;border-radius:12px;background:#f9fafb;border:1px solid var(--border);color:var(--text);text-align:left}.Searchbar>input::placeholder{color:#9ca3af}.Searchbar>input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.Searchbar>button{min-width:110px}.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.tool-item{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);transform:translateY(0);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.tool-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f;border-color:#d1d5db}.top{display:flex;flex-direction:column;gap:6px}.top h2{margin:0;font-size:18px;letter-spacing:.2px;color:var(--text)}.meta{display:flex;flex-wrap:wrap;gap:6px}.meta .badge{font-weight:600}.bottom{color:var(--muted);font-size:14px}.button{margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}.button>a,.button>.Detail{composes:btn from global}.button>a,.button>.Detail{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#f9fafb;transition:all .12s ease}.button>a:hover,.button>.Detail:hover{transform:translateY(-1px);background:#f3f4f6}.button>.Detail{background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);border-color:#1d4ed8;box-shadow:0 4px 12px #2563eb38}.button>.Detail:hover{box-shadow:0 6px 16px #2563eb52;background:linear-gradient(180deg,#2563eb,#1d4ed8)}.Searchbar>button{position:relative;overflow:hidden;cursor:pointer;padding:12px 18px;border-radius:12px;border:1px solid #1d4ed8;background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);font-weight:800;box-shadow:0 4px 12px #2563eb38;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,filter .12s ease}.Searchbar>button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #2563eb4d;border-color:#1e40af;filter:brightness(1.05)}.Searchbar>button:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb38}.Searchbar>button:focus-visible{outline:0;box-shadow:0 0 0 3px #2563eb40,0 6px 16px #2563eb4d;border-color:#2563eb}.Searchbar>button:after{content:"";position:absolute;top:-40%;left:-120%;width:45%;height:220%;background:linear-gradient(100deg,#fff0,#ffffffa6,#fff0);transform:rotate(16deg);transition:transform .6s ease,left .6s ease,opacity .3s ease;opacity:0}.Searchbar>button:hover:after{left:140%;opacity:.9}.Searchbar>button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.Home{display:flex;flex-direction:column;gap:22px;text-align:center;padding-bottom:48px}.Home>*:not(.Header){margin-top:8px}:root{--header-h: 76px}.Detail{position:relative;display:flex;flex-direction:column;align-items:stretch;padding-top:0;padding-bottom:64px}.Detail .Header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;min-height:var(--header-h);margin:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(180deg,#fffffff2,#ffffffd9);border-bottom:1px solid var(--border)}.Detail .Header>img{position:absolute;left:24px;width:48px;height:48px;border-radius:12px;border:1px solid var(--border);background:#f9fafb;object-fit:cover}.Detail .Header>h1{margin:0;font-weight:800;font-size:24px;letter-spacing:.5px;background:linear-gradient(180deg,#1a1a1a,#4b5563);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}.Detail .Header>a{position:absolute;right:24px;top:50%;transform:translateY(-50%);padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);font-weight:700;border:1px solid #1d4ed8;box-shadow:0 4px 12px #2563eb40;transition:transform .12s ease,box-shadow .12s ease}.Detail .Header>a:hover{transform:translateY(calc(-50% - 1px));box-shadow:0 6px 16px #2563eb52}.Detail>.link{position:fixed;top:0;right:110px;transform:none;z-index:70;margin:0}.Detail>.link a{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:10px;font-weight:700;background:#f9fafb;color:var(--text);border:1px solid var(--border);box-shadow:0 2px 8px #00000014;line-height:1;transition:all .12s ease}.Detail>.link a:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001f;background:#f3f4f6}@media (max-width: 640px){.Detail>.link{right:112px;top:0}}.Detail>*:not(.Header){margin-top:24px}.Detail>h1{width:min(1100px,92%);margin:10px auto 0;letter-spacing:.3px;text-align:center;color:var(--text)}.Detail p{width:min(1100px,92%);margin:0 auto;text-align:center;color:var(--text)}.Detail a[href^=http]{display:inline-flex;align-items:center;justify-content:center;width:fit-content;margin:8px auto 0;padding:10px 12px;font-size:14px;border-radius:10px;background:linear-gradient(180deg,#3b82f6,var(--primary));color:var(--primary-ink);border:1px solid #1d4ed8;box-shadow:0 4px 12px #2563eb38;font-weight:700;transition:all .12s ease}.Detail a[href^=http]:hover{box-shadow:0 6px 16px #2563eb52;transform:translateY(-1px)}.Detail a[href^=http]+.content{margin-top:24px}.content{width:min(1100px,92%);margin:8px auto 0;padding:18px 16px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--muted);white-space:pre-line;box-shadow:var(--shadow);text-align:center}