/* freemaker.dev — 공통 스타일 */

:root{
  --bg:#0D1117;
  --panel:#161B22;
  --panel-2:#1C232C;
  --line:#262C36;
  --line-2:#39404C;
  --txt:#E6EDF3;
  --txt-2:#9DA7B3;
  --txt-3:#6E7781;
  --accent:#FFB454;
  --accent-dk:#E09B3E;
  --ok:#3FB950;
  --err:#F85149;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"D2Coding",monospace;
  --sans:-apple-system,"Segoe UI","Pretendard","Malgun Gothic",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- 헤더 ---------- */
.top{
  border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.9);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:30;
}
.top-in{display:flex;align-items:center;gap:18px;height:58px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--txt)}
.brand:hover{text-decoration:none}
.brand svg{width:22px;height:22px;flex:none}
.brand span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:7px 12px;border-radius:6px;font-size:14px;font-weight:600;
  color:var(--txt-2);white-space:nowrap;
}
.nav a:hover{background:var(--panel);color:var(--txt);text-decoration:none}
.nav a[aria-current="page"]{background:var(--panel-2);color:var(--accent)}

/* ---------- 히어로 ---------- */
.hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 12px;font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.hero p{margin:0;color:var(--txt-2);font-size:17px;max-width:44ch}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.badge{
  font:600 12px var(--mono);color:var(--txt-2);
  background:var(--panel);border:1px solid var(--line);
  padding:5px 10px;border-radius:99px;
}

/* ---------- 카드 그리드 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:36px 0}
.card{
  display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:20px 18px;color:var(--txt);
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.card .ico{font-size:26px;line-height:1;display:block;margin-bottom:12px}
.card h2{margin:0 0 5px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.card p{margin:0;font-size:13.5px;color:var(--txt-2);line-height:1.5}

/* ---------- 도구 화면 ---------- */
.tool{padding:34px 0 60px}
.tool h1{margin:0 0 6px;font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.03em}
.tool .desc{margin:0 0 26px;color:var(--txt-2);font-size:15.5px}

.pane{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.pane-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.pane-h .t{font:700 12px var(--mono);letter-spacing:.06em;color:var(--txt-2)}
.pane-h .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

textarea,input[type=text],input[type=number]{
  width:100%;background:transparent;color:var(--txt);border:none;outline:none;
  font-family:var(--mono);font-size:13.5px;line-height:1.65;
  padding:14px;resize:vertical;
}
textarea{min-height:190px;display:block}
textarea::placeholder{color:var(--txt-3)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}

button{
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  background:var(--panel-2);color:var(--txt);
  border:1px solid var(--line-2);border-radius:6px;
  padding:8px 14px;cursor:pointer;transition:.13s;
}
button:hover{border-color:var(--txt-3);background:#232B35}
button.primary{background:var(--accent);color:#20160A;border-color:var(--accent)}
button.primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
button.mini{padding:5px 10px;font-size:12px}
button:active{transform:translateY(1px)}

select{
  font-family:var(--sans);font-size:13.5px;background:var(--panel-2);color:var(--txt);
  border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;cursor:pointer;
}

.status{font-family:var(--mono);font-size:12.5px;min-height:20px;margin-bottom:12px}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}
.status.muted{color:var(--txt-3)}

.out{
  font-family:var(--mono);font-size:13.5px;line-height:1.65;
  padding:14px;white-space:pre-wrap;word-break:break-all;margin:0;
  min-height:60px;color:var(--txt);
}

.kv{display:grid;grid-template-columns:130px 1fr;gap:2px 14px;font-size:14px;padding:14px}
.kv dt{font:600 12px var(--mono);color:var(--txt-3);padding-top:4px}
.kv dd{margin:0;font-family:var(--mono);font-size:13.5px;word-break:break-all;padding-top:3px}

.hint{font-size:13px;color:var(--txt-3);margin-top:6px}
kbd{
  font-family:var(--mono);font-size:11.5px;background:var(--panel-2);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:2px 6px;color:var(--txt-2);
}

/* ---------- 본문 (개인정보처리방침 등) ---------- */
.prose{padding:34px 0 60px;max-width:760px}
.prose h1{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.prose h2{font-size:19px;font-weight:700;margin:32px 0 10px;letter-spacing:-.02em}
.prose p,.prose li{color:var(--txt-2);font-size:15px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.prose .updated{font:600 12px var(--mono);color:var(--txt-3);margin-bottom:26px}

/* ---------- 푸터 ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 44px;margin-top:30px}
.foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--txt-3)}
.foot a{color:var(--txt-2)}
.foot .sp{margin-left:auto}

/* ---------- 토스트 ---------- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);
  padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.18s;z-index:60;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:700px){
  .top-in{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
  .nav{margin-left:0;width:100%}
  .kv{grid-template-columns:1fr;gap:2px}
  .hero{padding:38px 0 30px}
}