/* ========================================================================
   뚝딱툴즈 — 공통 디자인 시스템 (site.css)
   브랜드명 변경 시: 각 .html의 "뚝딱툴즈" 텍스트 + 이 파일 상단만 수정
   ======================================================================== */
/* 다국어: 중국어 렌더용 CJK 폰트 폴백 (웹폰트 없이 시스템 폰트 사용 → 오프라인·본토 대응) */
html[lang^="zh"] body{ font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Malgun Gothic',system-ui,sans-serif; }
/* 언어 스위처 */
.lang-sw{ display:flex; gap:2px; margin-left:8px; align-items:center; }
.lang-sw a{ padding:5px 8px; border-radius:7px; font-size:12px; font-weight:700; color:var(--dim); border:1px solid transparent; text-decoration:none; }
.lang-sw a:hover{ color:var(--txt); background:var(--panel2); }
.lang-sw a.on{ color:var(--acc2); border-color:var(--line2); background:var(--panel2); }
@media(max-width:640px){ .lang-sw a{ padding:4px 6px; font-size:11px; } }
:root{
  --bg:#0a0e16; --bg2:#0d1420; --panel:#111a28; --panel2:#16202e;
  --line:#243149; --line2:#2a3a52;
  --txt:#e6edf7; --mut:#8c98ac; --dim:#5f6d82;
  --acc:#36a3ff; --acc2:#5fd8ff; --gold:#f4c542; --pink:#ff6b9d; --green:#4ade80;
  --grad:linear-gradient(135deg,#36a3ff,#5fd8ff);
  --grad-gold:linear-gradient(135deg,#f4c542,#ffb347);
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --radius:16px; --maxw:1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.65 'Pretendard','Malgun Gothic','맑은 고딕',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- 공통 상단 네비게이션 ---------- */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(10,14,22,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.site-nav .inner{max-width:var(--maxw);margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:22px;}
.site-nav .brand{font-weight:800;font-size:18px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;}
.site-nav .brand .logo{width:26px;height:26px;border-radius:8px;background:var(--grad);
  display:grid;place-items:center;font-size:15px;}
.site-nav .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-nav .links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.site-nav .links a{padding:7px 13px;border-radius:9px;color:var(--mut);font-size:14px;font-weight:600;transition:.15s;}
.site-nav .links a:hover{color:var(--txt);background:var(--panel2);}
.site-nav .links a.on{color:var(--txt);background:var(--panel2);}
.site-nav .home-btn{padding:7px 13px;border-radius:9px;border:1px solid var(--line2);color:var(--mut);font-size:13px;font-weight:600;}
.site-nav .home-btn:hover{border-color:var(--acc);color:var(--txt);}
@media(max-width:640px){.site-nav .inner{gap:12px;padding:10px 14px;}.site-nav .links a{padding:6px 9px;font-size:13px;}}

/* ---------- 히어로 ---------- */
.hero{position:relative;overflow:hidden;padding:76px 0 60px;text-align:center;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 60% at 50% 0%,rgba(54,163,255,.18),transparent 70%),
             radial-gradient(40% 40% at 80% 20%,rgba(244,197,66,.10),transparent 70%);}
.hero .wrap{position:relative;z-index:1;}
.hero .badge{display:inline-block;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;
  color:var(--acc2);font-size:13px;font-weight:600;margin-bottom:22px;background:var(--panel);}
.hero h1{font-size:clamp(30px,5.5vw,52px);line-height:1.15;margin:0 0 18px;font-weight:800;letter-spacing:-1px;}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.sub{font-size:clamp(15px,2.2vw,19px);color:var(--mut);max-width:640px;margin:0 auto 32px;}
.hero .cta{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn-lg{padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;border:1px solid var(--line2);
  color:var(--txt);background:var(--panel2);transition:.15s;cursor:pointer;}
.btn-lg:hover{border-color:var(--acc);transform:translateY(-1px);}
.btn-lg.primary{background:var(--grad);border:none;color:#04121f;}
.hero .trust{margin-top:26px;color:var(--dim);font-size:13px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.hero .trust b{color:var(--mut);}

/* ---------- 도구 카드 그리드 ---------- */
.tools{padding:40px 0 20px;}
.tools h2.section{font-size:14px;color:var(--acc2);text-align:center;letter-spacing:1px;text-transform:uppercase;margin:0 0 6px;}
.tools h3.section{font-size:clamp(22px,3.5vw,30px);text-align:center;margin:0 0 40px;font-weight:800;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;}
.card{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s;overflow:hidden;
  display:flex;flex-direction:column;min-height:230px;}
.card:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--shadow);}
.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;margin-bottom:16px;}
.card.c1 .ic{background:linear-gradient(135deg,#36a3ff33,#36a3ff11);border:1px solid #36a3ff44;}
.card.c2 .ic{background:linear-gradient(135deg,#ff6b9d33,#ff6b9d11);border:1px solid #ff6b9d44;}
.card.c3 .ic{background:linear-gradient(135deg,#4ade8033,#4ade8011);border:1px solid #4ade8044;}
.card.c4 .ic{background:linear-gradient(135deg,#f4c54233,#f4c54211);border:1px solid #f4c54244;}
.card h4{font-size:19px;margin:0 0 8px;font-weight:700;}
.card p{color:var(--mut);font-size:14px;margin:0 0 18px;flex:1;}
.card .go{align-self:flex-start;padding:9px 16px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--line2);font-weight:600;font-size:14px;color:var(--txt);transition:.15s;}
.card:hover .go{background:var(--grad);border:none;color:#04121f;}
.card .soon{align-self:flex-start;padding:9px 16px;border-radius:10px;border:1px dashed var(--line2);
  color:var(--dim);font-weight:600;font-size:14px;}
.card .tag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.card .tag.hot{background:#ff6b9d22;color:var(--pink);border:1px solid #ff6b9d44;}
.card .tag.new{background:#4ade8022;color:var(--green);border:1px solid #4ade8044;}

/* ---------- 특징 섹션 ---------- */
.feat{padding:56px 0;}
.feat .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.feat .f{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);}
.feat .f .ic{font-size:24px;margin-bottom:10px;}
.feat .f h4{margin:0 0 6px;font-size:16px;}
.feat .f p{margin:0;color:var(--mut);font-size:14px;}

/* ---------- 콘텐츠(가이드/약관 등) ---------- */
.doc{padding:44px 0 60px;max-width:820px;}
.doc h1{font-size:clamp(26px,4vw,36px);margin:0 0 8px;font-weight:800;}
.doc .updated{color:var(--dim);font-size:13px;margin-bottom:30px;}
.doc h2{font-size:20px;margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--line);}
.doc h3{font-size:16px;margin:22px 0 8px;color:var(--acc2);}
.doc p,.doc li{color:var(--txt);opacity:.9;}
.doc ul{padding-left:20px;}.doc li{margin:6px 0;}
.doc a{color:var(--acc);}.doc a:hover{text-decoration:underline;}
.doc code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:13px;}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;}
.doc th,.doc td{border:1px solid var(--line);padding:8px 12px;text-align:left;}
.doc th{background:var(--panel2);}

/* ---------- 광고 슬롯(애드센스 자리) ---------- */
.ad-slot{max-width:var(--maxw);margin:26px auto;padding:0 20px;text-align:center;}
.ad-slot .ph{border:1px dashed var(--line2);border-radius:12px;padding:18px;color:var(--dim);font-size:12px;background:var(--bg2);}

/* ---------- 푸터 ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:40px;padding:40px 0 60px;color:var(--mut);}
.site-foot .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;margin-bottom:26px;}
.site-foot .brand{font-weight:800;font-size:16px;}
.site-foot .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap;}
.site-foot nav a{color:var(--mut);font-size:14px;}
.site-foot nav a:hover{color:var(--txt);}
.site-foot .fine{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:18px;}