@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   2107 AG Case — DesignKit "Line(kit-lineart)" 변형 리디자인
   · 무드: 미니멀·텍스트·개발자 (모노라인 + 코드 모노스페이스 강조)
   · 색: indigo (nordic/midnight 대신 개발툴 인디고로 변형)
   · 변형 포인트: 좌측 굵은 세로 라벨선 · 결과=모노 카드 그리드 · 얇은 라인
   · 라이트/다크 자체 지원(data-theme="dark")
═══════════════════════════════════════════════════════════ */
:root {
  --primary:#6366F1; --primary-dark:#4F46E5; --accent:#8B5CF6;
  --grad:linear-gradient(135deg,#6366F1,#8B5CF6);

  --bg:#FBFBFE; --surface:#FFFFFF; --surface-2:#F5F5FB;
  --text:#1E1B2E; --text-strong:#0E0B1F; --text-2:#5B5772; --text-3:#918DA8;

  --line:color-mix(in srgb, var(--text-strong) 12%, transparent);
  --line-soft:color-mix(in srgb, var(--text-strong) 7%, transparent);
  --line-strong:color-mix(in srgb, var(--text-strong) 26%, transparent);

  --ok:#10B981; --err:#EF4444;

  --r-1:9px; --r-2:11px; --r-3:13px; --r-4:16px;
  --ln:1px; --ln-2:1.5px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t1:150ms; --t2:280ms;

  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* legacy compat (client_info / user_agent) */
  --bg-card:var(--surface); --glass-border:var(--line); --glass-shadow:none;
  --accent-primary:var(--primary); --accent-gradient:var(--grad);
  --text-primary:var(--text); --text-secondary:var(--text-2); --text-muted:var(--text-3);
  --radius-md:12px; --radius-lg:16px;
}

[data-theme="dark"] {
  --primary:#818CF8; --primary-dark:#6366F1; --accent:#A78BFA;
  --grad:linear-gradient(135deg,#818CF8,#A78BFA);
  --bg:#0D0B16; --surface:#15121F; --surface-2:#1B1729;
  --text:#E4E1F0; --text-strong:#F6F4FC; --text-2:#9E99B8; --text-3:#6B6685;
  --line:color-mix(in srgb, #ffffff 12%, transparent);
  --line-soft:color-mix(in srgb, #ffffff 7%, transparent);
  --line-strong:color-mix(in srgb, #ffffff 24%, transparent);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:var(--text); min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px 80px; overflow-x:hidden;
  background:var(--bg);
  letter-spacing:-0.005em;
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease);
}

/* ─── HEADER ─── */
.site-header {
  position:sticky; top:0; z-index:50; width:100vw; margin-bottom:8px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:var(--ln) solid var(--line);
}
.site-header__inner {
  max-width:960px; margin:0 auto; height:60px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.site-header__logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-strong); font-weight:600; }
.logo-badge {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-1); background:transparent;
  border:var(--ln-2) solid var(--line-strong); color:var(--primary);
  font-family:var(--mono); font-weight:600; font-size:0.86rem; letter-spacing:-0.04em;
}
.logo-text { display:inline-flex; flex-direction:column; line-height:1.12; gap:2px; }
.logo-main { font-size:1.02rem; font-weight:600; letter-spacing:-0.02em; color:var(--text-strong); }
.logo-main .accent { color:var(--primary); }
.logo-sub { font-size:0.56rem; font-weight:500; letter-spacing:0.24em; color:var(--text-3); font-family:var(--mono); }

.header-actions { display:flex; align-items:center; gap:20px; }
.site-header__nav { display:flex; align-items:center; gap:22px; }
.site-header__nav a {
  font-size:0.85rem; font-weight:500; color:var(--text-2); text-decoration:none;
  transition:color var(--t1) var(--ease); position:relative; padding-bottom:2px;
}
.site-header__nav a::after {
  content:''; position:absolute; left:0; bottom:-1px; width:0; height:var(--ln);
  background:var(--primary); transition:width var(--t1) var(--ease);
}
.site-header__nav a:hover { color:var(--text-strong); }
.site-header__nav a:hover::after { width:100%; }
@media (max-width:560px){ .site-header__nav { display:none; } }

.theme-toggle-btn {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent; border:var(--ln) solid var(--line);
  color:var(--text-2); cursor:pointer; transition:all var(--t1) var(--ease);
}
.theme-toggle-btn:hover { border-color:var(--primary); color:var(--primary); }
.theme-toggle-btn svg { width:17px; height:17px; stroke-width:1.5; }

.lang-select {
  font-family:inherit; font-size:0.8rem; font-weight:500; color:var(--text-2);
  background:transparent; border:var(--ln) solid var(--line); border-radius:var(--r-1);
  padding:7px 9px; cursor:pointer; outline:none; transition:border-color var(--t1) var(--ease);
  max-width:110px;
}
.lang-select:hover, .lang-select:focus { border-color:var(--primary); color:var(--text-strong); }
.lang-select option { color:#1E1B2E; background:#fff; }
@media (max-width:400px){ .lang-select { max-width:78px; } }
.ic-dark { display:none; }
[data-theme="dark"] .ic-light { display:none; }
[data-theme="dark"] .ic-dark { display:inline-flex; }

/* ─── HERO (compact) ─── */
.hero { width:100%; max-width:760px; margin:46px 0 8px; text-align:center; }
.hero-tag {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:0.7rem; font-weight:500; letter-spacing:0.1em; color:var(--primary);
  border:var(--ln) solid var(--primary); border-radius:99px; padding:5px 13px; margin-bottom:20px;
}
.hero h1 {
  font-size:clamp(1.9rem, 5.4vw, 2.9rem); font-weight:600; color:var(--text-strong);
  letter-spacing:-0.04em; line-height:1.2; margin-bottom:16px;
}
.hero h1 .grad { color:var(--primary); font-weight:700; }
.hero p {
  font-size:0.98rem; font-weight:300; color:var(--text-2); line-height:1.75;
  max-width:520px; margin:0 auto; word-break:keep-all;
}

/* ─── TOOL ─── */
.tool { width:100%; max-width:960px; margin-top:34px; }

.input-card {
  background:var(--surface); border:var(--ln) solid var(--line);
  border-radius:var(--r-4); padding:6px 6px 0; margin-bottom:14px;
  transition:border-color var(--t1) var(--ease);
}
.input-card:focus-within { border-color:var(--primary); }
.input-area {
  width:100%; min-height:150px; resize:vertical;
  font-family:var(--mono); font-size:1rem; line-height:1.7; font-weight:400;
  color:var(--text-strong); background:transparent; border:none; outline:none;
  padding:18px 18px 14px;
}
.input-area::placeholder { color:var(--text-3); font-weight:400; }

.toolbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:11px 14px; border-top:var(--ln) solid var(--line-soft);
}
.stats { display:flex; gap:18px; font-size:0.8rem; color:var(--text-3); font-family:var(--mono); }
.stats b { color:var(--text-2); font-weight:600; }
.tool-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tb-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-size:0.8rem; font-weight:500; color:var(--text-2);
  background:transparent; border:var(--ln) solid var(--line); border-radius:var(--r-1);
  padding:8px 12px; cursor:pointer; transition:all var(--t1) var(--ease);
}
.tb-btn:hover { border-color:var(--primary); color:var(--primary); }
.tb-btn svg { width:14px; height:14px; stroke-width:1.6; }

/* ─── OUTPUT GRID ─── */
.out-head {
  display:flex; align-items:center; gap:16px;
  margin:26px 0 16px;
}
.out-head span {
  font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--text-3);
  letter-spacing:0.14em; text-transform:uppercase;
}
.out-head::after { content:''; flex:1; height:var(--ln); background:var(--line); }

.out-grid {
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:640px){ .out-grid { grid-template-columns:repeat(2, 1fr); } }

.case-card {
  position:relative; background:var(--surface);
  border:var(--ln) solid var(--line); border-inline-start:var(--ln-2) solid var(--line-strong);
  border-radius:var(--r-2); padding-block:14px; padding-inline-start:16px; padding-inline-end:46px;
  cursor:pointer; transition:border-color var(--t1) var(--ease), transform var(--t2) var(--ease-out);
}
.case-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.case-card:hover { border-inline-start-color:var(--primary); }
.case-card__label {
  display:block; font-family:var(--mono); font-size:0.68rem; font-weight:600;
  letter-spacing:0.06em; color:var(--primary); text-transform:uppercase; margin-bottom:7px;
}
.case-card__val {
  display:block; font-family:var(--mono); font-size:0.94rem; font-weight:500;
  color:var(--text-strong); line-height:1.55; word-break:break-all; white-space:pre-wrap;
  max-height:5.2em; overflow:auto;
  direction:ltr; text-align:left;   /* 코드 값은 언어와 무관하게 항상 LTR */
}
.case-card__label { direction:ltr; text-align:left; }
.case-card__val:empty::before { content:'—'; color:var(--text-3); }
.copy-btn {
  position:absolute; top:11px; inset-inline-end:11px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-1); background:transparent; border:var(--ln) solid var(--line);
  color:var(--text-3); cursor:pointer; transition:all var(--t1) var(--ease);
}
.case-card:hover .copy-btn { border-color:var(--primary); color:var(--primary); }
.copy-btn svg { width:14px; height:14px; stroke-width:1.7; }
.case-card.copied { border-color:var(--ok); border-left-color:var(--ok); }
.case-card.copied .copy-btn { border-color:var(--ok); color:var(--ok); }

/* ─── TOAST ─── */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text-strong); color:var(--bg);
  font-size:0.85rem; font-weight:500; padding:11px 20px; border-radius:99px;
  opacity:0; pointer-events:none; transition:all var(--t2) var(--ease-out); z-index:100;
  display:inline-flex; align-items:center; gap:8px;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:15px; height:15px; stroke-width:2; }

/* ─── FAQ ─── */
.faq { width:100%; max-width:760px; margin-top:64px; }
.faq-title {
  font-size:1.4rem; font-weight:600; color:var(--text-strong);
  letter-spacing:-0.03em; text-align:center; margin-bottom:26px;
}
.faq-item {
  border-bottom:var(--ln) solid var(--line); padding:20px 4px;
}
.faq-q { font-size:0.98rem; font-weight:600; color:var(--text-strong); margin-bottom:9px; word-break:keep-all; }
.faq-q::before { content:'Q'; font-family:var(--mono); color:var(--primary); margin-right:9px; font-weight:700; }
.faq-a { font-size:0.9rem; font-weight:300; color:var(--text-2); line-height:1.75; word-break:keep-all; }

/* ─── TRUST BAR ─── */
.trust-bar {
  width:100%; max-width:960px; margin-top:56px; padding-top:32px;
  border-top:var(--ln) solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px 40px;
}
.trust-item { display:inline-flex; align-items:center; gap:9px; font-size:0.84rem; color:var(--text-3); }
.trust-item svg { width:16px; height:16px; stroke-width:1.5; color:var(--primary); }

/* ─── AD ─── */
.ad-grid { display:grid; grid-template-columns:repeat(2, 320px); gap:12px; justify-content:center; margin-top:44px; }
.ad-cell { width:320px; min-height:50px; }
@media (max-width:720px){ .ad-grid { grid-template-columns:320px; } }

/* ─── FOOTER ─── */
.site-footer {
  width:100%; max-width:960px; margin-top:44px; padding:26px 16px;
  border-top:var(--ln) solid var(--line); text-align:center;
}
.site-footer a { color:var(--text-3); font-size:0.82rem; text-decoration:none; transition:color var(--t1) var(--ease); }
.site-footer a:hover { color:var(--primary); }
.footer-divider { color:var(--line-strong); margin:0 10px; }
.footer-copy { display:block; margin-top:12px; font-size:0.74rem; color:var(--text-3); font-family:var(--mono); }

/* ─── SIMPLE PAGES (about/contact) ─── */
.doc { width:100%; max-width:720px; margin:40px 0; }
.doc h1 { font-size:1.7rem; font-weight:600; color:var(--text-strong); letter-spacing:-0.03em; margin-bottom:10px; }
.doc .doc-sub { font-size:0.9rem; color:var(--text-3); margin-bottom:34px; }
.doc h2 { font-size:1.1rem; font-weight:600; color:var(--text-strong); margin:30px 0 12px; }
.doc p { font-size:0.94rem; font-weight:300; color:var(--text-2); line-height:1.85; margin-bottom:14px; word-break:keep-all; }
.doc ul { list-style:none; margin:0 0 14px; padding:0; }
.doc li { position:relative; padding-left:20px; font-size:0.94rem; font-weight:300; color:var(--text-2); line-height:1.85; }
.doc li::before { content:''; position:absolute; left:4px; top:0.72em; width:6px; height:6px; border:var(--ln-2) solid var(--primary); border-radius:50%; }
.doc a { color:var(--primary); text-decoration:none; }
.doc a:hover { text-decoration:underline; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:500; color:var(--text-2); text-decoration:none; margin-bottom:8px; }
.back-link:hover { color:var(--primary); }
.back-link svg { width:15px; height:15px; stroke-width:1.6; }

/* ─── ANIM ─── */
.animate-fade-in { animation:fadeIn 0.7s var(--ease-out) both; }
.animate-slide-up { animation:slideUp 0.7s var(--ease-out) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:480px){
  body { padding:0 14px 64px; }
  .hero { margin-top:34px; }
  .stats { gap:12px; }
}