:root { color-scheme: light; --ink:#172238; --muted:#617087; --line:#e2e8f1; --blue:#285bec; }
    * { box-sizing:border-box; }
    body { margin:0; background:#f4f7fc; color:var(--ink); font-family:Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:16px; line-height:1.55; }
    a { color:inherit; text-decoration:none; }
    .site-header { background:#101827; color:white; }
    .header-inner, main, footer { max-width:1160px; margin:auto; padding-left:24px; padding-right:24px; }
    .header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .brand { display:inline-flex; align-items:center; gap:12px; font-size:21px; font-weight:900; letter-spacing:.02em; white-space:nowrap; }
    .brand-mark { display:grid; grid-template-columns:repeat(2,7px); gap:4px; padding:11px; border-radius:12px; background:#285bec; }
    .brand-mark i { width:7px; height:7px; border-radius:2px; background:white; }
    .brand-mark i:nth-child(2) { background:#8df2d6; }
    .brand-mark i:nth-child(3) { background:#ffd36c; }
    .header-note { color:#b9c5da; font-size:14px; }
    main { padding-top:32px; padding-bottom:72px; }
    .eyebrow { margin:0 0 8px; font-size:13px; color:var(--blue); font-weight:800; letter-spacing:.14em; }
    h1 { margin:0; font-size:clamp(30px,5vw,46px); line-height:1.25; letter-spacing:-.06em; }
    .intro { margin:12px 0 24px; color:var(--muted); }
    .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
    h2 { margin:0; font-size:20px; letter-spacing:-.04em; }
    .count { color:var(--muted); font-size:14px; }
    main > section + section { margin-top:36px; }
    .new-tools .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .new-tools .tool { border-color:#b7c8f7; background:linear-gradient(135deg,#fff,#eef3ff); }
    .new-tools .tool-name { font-size:21px; }
    .new-badge { display:inline-block; margin-bottom:8px; padding:2px 7px; border-radius:5px; background:#285bec; color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em; }
    .featured .tool { border-color:#ccd8f5; }
    .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
    .tool { display:flex; align-items:flex-start; gap:16px; min-height:150px; padding:24px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 4px 18px rgba(31,52,88,.035); transition:transform .18s,box-shadow .18s,border-color .18s; }
    .tool:hover { transform:translateY(-3px); border-color:#aebef6; box-shadow:0 12px 28px rgba(31,52,88,.1); }
    .tool:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
    .icon { display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:14px; font-size:24px; background:var(--tile); }
    .tool-copy { min-width:0; flex:1; }
    .tool-name { display:block; font-size:17px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
    .tool-desc { display:block; margin-top:9px; color:var(--muted); font-size:14px; }
    .tool-open { display:block; margin-top:12px; color:var(--blue); font-size:13px; font-weight:800; }
    footer { padding-top:22px; padding-bottom:30px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
    @media(max-width:920px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media(max-width:620px) { .header-inner { min-height:68px; } .header-note { display:none; } main { padding-top:36px; padding-bottom:48px; } .grid, .new-tools .grid { grid-template-columns:1fr; gap:12px; } .tool { min-height:0; padding:20px; } .intro { margin-bottom:27px; } }
    @media(prefers-reduced-motion:reduce) { .tool { transition:none; } }
  

    html { scroll-behavior:smooth; scroll-padding-top:24px; }
    .category-nav { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 30px; }
    .category-nav a { padding:10px 15px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:700; }
    .category-nav a:hover,.category-nav a:focus-visible { color:var(--blue); border-color:var(--blue); }
    .featured .tool { border-color:#bcccf5; background:linear-gradient(135deg,#fff,#f2f6ff); }
    .section-note { color:var(--muted); font-size:14px; margin:7px 0 18px; }
    .section-head { flex-wrap:wrap; }
    .tool-section { scroll-margin-top:24px; }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
  
.tool-favicon { display:block; width:36px; height:36px; object-fit:contain; border-radius:9px; }
.site-nav{display:flex;gap:12px;flex-wrap:wrap;margin:0;padding:14px 0;font-size:14px;font-weight:700}.site-nav a{padding:5px 0}.site-nav a:hover{color:#8df2d6}.page-nav{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.page-nav a,.article-link{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:700;color:var(--blue)}.breadcrumbs{font-size:13px;color:var(--muted);margin:0 0 22px}.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}.article{max-width:880px}.article h2{margin:28px 0 12px}.article h3{margin:20px 0 8px}.article p,.article li{line-height:1.85}.article a:not(.tool){color:var(--blue);text-decoration:underline;text-underline-offset:3px}.article ul,.article ol{padding-left:24px}.guide-card{display:block;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}.guide-card h2{font-size:19px;margin:0 0 10px}.guide-card p{color:var(--muted);margin:0}.text-links{display:flex;flex-wrap:wrap;gap:12px}.text-links a{color:var(--blue);text-decoration:underline}.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}details{padding:18px 0;border-bottom:1px solid var(--line)}summary{font-weight:800;cursor:pointer}summary:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.meta-note{color:var(--muted);font-size:14px}.section-intro{color:var(--muted);max-width:850px;line-height:1.8;margin:12px 0 24px}main>section+section{margin-top:36px}.header-inner{flex-wrap:wrap}.site-header .header-inner{padding-top:12px;padding-bottom:12px}.article .grid{margin-top:18px}.guide-index .grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:620px){.guide-index .grid{grid-template-columns:1fr}.site-nav{gap:14px;padding:4px 0}.header-inner{gap:4px}}