:root{
  --bg:#0d1117; --surface:#161b22; --surface-2:#1c2230; --line:#2a3140;
  --ink:#e6edf3; --muted:#9aa7b4; --faint:#6b7785;
  --accent:#3ddc97; --accent-deep:#27b07a; --accent-soft:rgba(61,220,151,.14);
  --ok:#3ddc97; --warn:#e3b341; --err:#f47067;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --sb-w:264px;
}
/* ===== 3-way theme (Light/Dark/System) — base :root above = native DARK. Opposite (light) WCAG-aware auto-generated (contrast-solving ink/accent vs worst-case surface). ===== */
:root[data-theme="light"]{
  --bg: #f4f5f6;
  --surface: #f5f6f7;
  --surface-2: #f7f7f8;
  --line: rgba(0,0,0,0.10);
  --ink: #35546f;
  --muted: #5f6f80;
  --faint: #7f8a98;
  --accent: #167b4f;
  --accent-deep: #1b7b55;
  --accent-soft: #167b4f;
  --ok: #167b4f;
  --warn: #896614;
  --err: #d51c0f;
}











*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.55;
}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ── topbar ─────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:1rem;height:54px;padding:0 1rem;
  border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:.5rem}
.brand .prompt{color:var(--accent);font-family:var(--mono);font-weight:700;font-size:1.15rem;line-height:1}
.brand .wordmark{font-family:var(--mono);font-weight:700;letter-spacing:.16em;font-size:1rem}
.brand .ko{color:var(--muted);font-size:.82rem;letter-spacing:.04em}
.offline-badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.74rem;color:var(--accent);font-family:var(--mono);letter-spacing:.02em;
  border:1px solid var(--accent-soft);background:var(--accent-soft);border-radius:999px;padding:.3rem .7rem;
}
.offline-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.sidebar-toggle{display:none;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.4rem .7rem;font-size:.85rem;cursor:pointer}

/* ── layout ─────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:calc(100vh - 54px)}

/* ── sidebar ────────────────────────────────────────── */
.sidebar{border-right:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;position:sticky;top:54px;height:calc(100vh - 54px);overflow:hidden}
.search-wrap{position:relative;padding:.85rem .85rem .6rem}
.search-ico{position:absolute;left:1.35rem;top:50%;transform:translateY(-30%);color:var(--faint);font-size:1rem;pointer-events:none}
.search{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.55rem .7rem .55rem 1.9rem;font-family:var(--mono);font-size:.85rem;outline:none;
  transition:border-color .15s,box-shadow .15s}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tool-list{flex:1;overflow-y:auto;padding:.2rem .55rem 1rem}
.group-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:.9rem .6rem .4rem}
.tool-item{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:transparent;color:var(--muted);
  text-align:left;cursor:pointer;border-radius:8px;padding:.5rem .6rem;font-size:.9rem;position:relative;
  border-left:2px solid transparent;transition:background .12s,color .12s}
.tool-item:hover{background:var(--surface-2);color:var(--ink)}
.tool-item.active{background:var(--accent-soft);color:var(--ink);border-left-color:var(--accent)}
.tool-item .ti-ico{font-family:var(--mono);width:1.4rem;text-align:center;color:var(--accent);font-size:.95rem;flex:0 0 auto}
.tool-item.active .ti-ico{color:var(--accent)}
.tool-item .ti-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-item .ti-star{opacity:.45;color:var(--faint);font-size:.9rem;transition:opacity .12s,color .12s;padding:0 .1rem}
.tool-item:hover .ti-star,.tool-item .ti-star.on{opacity:1}
.tool-item .ti-star.on{color:var(--warn)}
.tool-item .ti-star:hover{color:var(--warn)}
.empty-list{color:var(--faint);font-size:.85rem;padding:1rem .6rem;font-family:var(--mono)}
.sidebar-foot{border-top:1px solid var(--line);padding:.7rem .85rem}
.home-link{color:var(--muted);font-size:.82rem;font-family:var(--mono)}
.home-link:hover{color:var(--accent)}

/* ── work area ──────────────────────────────────────── */
.work{padding:1.6rem 1.4rem 4rem;overflow-x:hidden}
.view{display:none;max-width:920px;margin:0 auto}
.view.active{display:block;animation:rise .12s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── home / hero ────────────────────────────────────── */
.hero{padding:1.4rem 0}
.hero h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;line-height:1.25;margin:0 0 .8rem;letter-spacing:-.01em}
.hero h1 .accent{color:var(--accent)}
.hero-sub{color:var(--muted);max-width:42rem;line-height:1.8;margin:0 0 1.4rem;font-size:.96rem}
.hero-sub b{color:var(--ink)}
.detect-box{margin:0 0 1.4rem}
.detect-result{margin-top:.7rem;min-height:1.4rem}
.detect-hint{color:var(--faint);font-family:var(--mono);font-size:.82rem}
.detect-matches{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.detect-matches .lead{color:var(--muted);font-size:.85rem;margin-right:.1rem}
.detect-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.82rem;
  color:var(--bg);background:var(--accent);border:0;border-radius:999px;padding:.35rem .8rem;cursor:pointer;
  font-weight:600;transition:transform .1s,box-shadow .15s}
.detect-chip:hover{box-shadow:0 0 18px var(--accent-soft);transform:translateY(-1px)}
.detect-chip.alt{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-weight:500}
.detect-chip.alt:hover{border-color:var(--accent)}
.hero-quick{margin-top:1.8rem}
.quick-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.6rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.qchip{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;cursor:pointer;
  transition:color .12s,border-color .12s}
.qchip:hover{color:var(--ink);border-color:var(--accent)}
.qchip .qi{font-family:var(--mono);color:var(--accent)}

/* ── panel ──────────────────────────────────────────── */
.panel{animation:rise .12s ease both}
.panel-head{margin-bottom:1.2rem}
.panel-head h2{display:flex;align-items:center;gap:.55rem;font-size:1.2rem;font-weight:600;margin:0 0 .3rem}
.panel-head h2 .ph-ico{font-family:var(--mono);color:var(--accent)}
.panel-head .desc{color:var(--muted);font-size:.9rem;margin:0;line-height:1.7}
.note{color:var(--warn);font-family:var(--mono);font-size:.76rem;margin-top:.4rem;display:flex;gap:.4rem;align-items:flex-start}
.note::before{content:"⚠";flex:0 0 auto}

.field{margin-bottom:1.1rem}
.field-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem}
.field-label .count{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--faint)}

.code-area{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:.85rem .9rem;font-family:var(--mono);font-size:.9rem;line-height:1.7;
  outline:none;resize:vertical;min-height:120px;transition:border-color .15s,box-shadow .15s;tab-size:2}
.code-area::placeholder{color:var(--faint)}
.code-area:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.code-area.out{background:var(--bg);min-height:120px;white-space:pre-wrap;word-break:break-word;overflow:auto;margin:0}
.code-area.out.err{color:var(--err);border-color:rgba(244,112,103,.5)}
.code-area.small{min-height:0;resize:none;height:auto}
textarea.code-area{display:block}

/* option row */
.opt-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.seg{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:thin;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.seg button{background:transparent;border:0;color:var(--muted);font-size:.82rem;padding:.35rem .8rem;border-radius:6px;cursor:pointer;font-family:var(--mono)}
.seg button.on{background:var(--accent);color:var(--bg);font-weight:600}
.toggle{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.83rem;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .track{width:34px;height:18px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:background .15s,border-color .15s}
.toggle .track::after{content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:transform .15s,background .15s}
.toggle input:checked+.track{background:var(--accent-soft);border-color:var(--accent)}
.toggle input:checked+.track::after{transform:translateX(16px);background:var(--accent)}
.toggle:hover{color:var(--ink)}
.sel{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:.35rem .6rem;font-family:var(--mono);font-size:.82rem;outline:none;cursor:pointer}
.sel:focus{border-color:var(--accent)}
.num-in{width:5rem;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:.35rem .55rem;font-family:var(--mono);font-size:.85rem;outline:none}
.num-in:focus{border-color:var(--accent)}
.flag-toggles{display:inline-flex;gap:.35rem;flex-wrap:wrap}
.flag{font-family:var(--mono);font-size:.8rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;padding:.3rem .55rem;cursor:pointer;min-width:2.2rem;text-align:center}
.flag.on{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;
  cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:transform .09s,background .12s,border-color .12s}
.btn:hover{border-color:var(--accent);color:var(--ink)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:600}
.btn.primary:hover{box-shadow:0 0 18px var(--accent-soft)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.btn .ico{font-family:var(--mono)}

/* result meta cards */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.5rem .9rem;font-family:var(--mono);font-size:.86rem;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.kv .k{color:var(--faint)}
.kv .v{color:var(--ink);word-break:break-all}
.kv .v.accent{color:var(--accent)}

/* color swatch */
.swatch-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.swatch{width:84px;height:84px;border-radius:12px;border:1px solid var(--line);flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.color-fields{display:grid;gap:.7rem;flex:1;min-width:200px}
.cf{display:flex;align-items:center;gap:.6rem}
.cf label{font-family:var(--mono);font-size:.74rem;color:var(--faint);width:2.6rem;text-transform:uppercase}
.cf input{flex:1;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:.45rem .6rem;font-family:var(--mono);font-size:.86rem;outline:none}
.cf input:focus{border-color:var(--accent)}

/* regex highlight */
.hl-box{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.85rem .9rem;
  font-family:var(--mono);font-size:.88rem;line-height:1.8;white-space:pre-wrap;word-break:break-word;min-height:80px;max-height:340px;overflow:auto}
.hl-box mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 1px;
  box-shadow:inset 0 -1px 0 var(--accent)}
.match-meta{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:.6rem}
.match-meta b{color:var(--accent)}
.groups{margin-top:.6rem;display:grid;gap:.35rem}
.grp{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.grp b{color:var(--ink)}

/* diff */
.diff-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.diff-out{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;
  font-family:var(--mono);font-size:.85rem;line-height:1.7;overflow:auto;max-height:380px}
.diff-line{white-space:pre-wrap;word-break:break-word;padding:0 .25rem;border-radius:3px}
.diff-line.add{background:rgba(61,220,151,.14);color:var(--ink)}
.diff-line.del{background:rgba(244,112,103,.14);color:var(--ink)}
.diff-line.same{color:var(--muted)}
.diff-line .mk{color:var(--faint);user-select:none}

/* uuid list */
.gen-list{font-family:var(--mono);font-size:.88rem;line-height:2;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:.8rem 1rem;word-break:break-all}
.gen-list div{display:flex;gap:.6rem;align-items:center}
.gen-list .ln{color:var(--faint);user-select:none;flex:0 0 auto}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);z-index:40;
  background:var(--surface);border:1px solid var(--accent);color:var(--accent);padding:.6rem 1.1rem;border-radius:999px;
  font-family:var(--mono);font-size:.85rem;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
  box-shadow:0 8px 28px rgba(0,0,0,.45)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* scrollbars */
.tool-list::-webkit-scrollbar,.code-area::-webkit-scrollbar,.hl-box::-webkit-scrollbar,.diff-out::-webkit-scrollbar{width:10px;height:10px}
.tool-list::-webkit-scrollbar-thumb,.code-area::-webkit-scrollbar-thumb,.hl-box::-webkit-scrollbar-thumb,.diff-out::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:content-box}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;top:54px;left:0;width:min(86vw,320px);height:calc(100vh - 54px);z-index:30;
    transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .sidebar-toggle{display:inline-block}
  .offline-badge{display:none}
  .work{padding:1.2rem 1rem 4rem}
  .diff-cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand .ko{display:none}
  .hero h1{font-size:1.5rem}
}
.scrim{position:fixed;inset:54px 0 0;background:rgba(0,0,0,.5);z-index:25;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}
@media (min-width:861px){.scrim{display:none}}

/* ── HTTP status grid ─────────────────────────────────── */
.http-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.55rem;margin-top:.4rem}
.http-card{display:flex;flex-direction:column;gap:.15rem;background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:8px;padding:.55rem .7rem}
.http-card.c1{border-left-color:#58a6ff}
.http-card.c2{border-left-color:var(--ok)}
.http-card.c3{border-left-color:var(--warn)}
.http-card.c4{border-left-color:#f0883e}
.http-card.c5{border-left-color:var(--err)}
.http-code{font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--ink)}
.http-desc{font-size:.8rem;color:var(--muted);line-height:1.4}

/* ── Markdown preview ─────────────────────────────────── */
.md-preview{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;
  min-height:160px;line-height:1.7;overflow:auto;max-height:560px}
.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4{margin:.8rem 0 .4rem;line-height:1.3}
.md-preview h1{font-size:1.4rem}.md-preview h2{font-size:1.2rem}.md-preview h3{font-size:1.05rem}
.md-preview p{margin:.5rem 0;color:var(--ink)}
.md-preview a{color:var(--accent);text-decoration:underline}
.md-preview code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);padding:.1rem .35rem;border-radius:4px;color:var(--accent)}
.md-preview pre{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;overflow:auto;margin:.6rem 0}
.md-preview pre code{background:transparent;padding:0;color:var(--ink)}
.md-preview ul,.md-preview ol{margin:.5rem 0 .5rem 1.4rem}
.md-preview ul{list-style:disc}.md-preview ol{list-style:decimal}
.md-preview li{margin:.2rem 0}
.md-preview blockquote{border-left:3px solid var(--accent);margin:.6rem 0;padding:.2rem .8rem;color:var(--muted)}
.md-preview blockquote p{margin:.2rem 0}
.md-preview hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
.md-preview strong{color:var(--ink)} .md-preview em{color:var(--ink)}

/* ── Gradient builder ─────────────────────────────────── */
.gradient-swatch{width:100%;height:120px;border-radius:12px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.gradient-stops{display:grid;gap:.5rem}
.gstop{display:flex;align-items:center;gap:.6rem}
.gstop input[type=color]{width:42px;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;padding:2px;cursor:pointer}
.gstop input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.gstop .btn.ghost{padding:.35rem .55rem;font-size:.85rem;color:var(--err)}

/* ── Contrast checker ─────────────────────────────────── */
.contrast-pickers{display:grid;gap:.5rem;flex:1;min-width:240px}
.contrast-pickers .cf{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.6rem}
.contrast-pickers input[type=color]{width:42px;height:32px;border:1px solid var(--line);border-radius:8px;background:transparent;padding:2px;cursor:pointer}
.contrast-pickers input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.contrast-ratio{display:grid;gap:.7rem}
.cratio{font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--accent)}
.cgrid{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-family:var(--mono);font-size:.85rem;align-items:center}
.cgrid>div:nth-child(odd){color:var(--faint)}
.cb{display:inline-block;padding:.15rem .55rem;border-radius:6px;font-size:.78rem;font-weight:600;margin-right:.3rem}
.cb.ok{background:var(--accent-soft);color:var(--accent);border:1px solid transparent}
.cb.fail{background:rgba(244,112,103,.12);color:var(--err);border:1px solid transparent}

/* i18n language switcher — 다크 토큰 테마이므로 런타임 기본값을 앱 팔레트로 덮어쓴다. */
.topbar .i18n-switch{
  --i18n-switch-bg:rgba(255,255,255,.05);
  --i18n-switch-border:var(--line);
  --i18n-switch-fg:var(--ink);
  --i18n-switch-active-bg:var(--accent-soft);
  --i18n-switch-active-fg:var(--accent);
  --i18n-switch-menu-bg:var(--surface-2);
  --i18n-switch-menu-border:var(--line);
  --i18n-switch-shadow:0 8px 24px rgba(0,0,0,.5);
}
@media (max-width:860px){ .topbar .i18n-switch{ --i18n-switch-bg:transparent; --i18n-switch-border:transparent; } }

/* ===== AdSense 슬롯 — 라이브(client 설정) 또는 로컬 프리뷰(플레이스홀더)일 때만 노출 =====
   money-lab 패턴 복제. devkit 토큰(--muted/--line/--ink) 사용, .ad-* 클래스는 devkit 본래 클래스와 충돌 없음. */
.ad-slot { display: none; margin: 22px 0; }
.ad-slot.is-live, .ad-slot.is-preview { display: block; }
.ad-label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .7; margin-bottom: 4px; text-align: center; }
.ad-ph { display: none; align-items: center; justify-content: center; min-height: 90px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--muted); font-size: 12px; opacity: .6; text-align: center; }
.ad-slot.is-preview .ad-ph { display: flex; }
.ad-slot.is-preview .adsbygoogle { display: none !important; }
.ad-slot.is-live .ad-ph { display: none; }