body[data-tool="sql_formatter"] {
  --bg: #ECEFF3; --ink: #0E1726; --ink2: #475569; --mute: #64748B; --line: #D5DBE3;
  --panel: #0B1220; --panel2: #101A2C; --panel3: #16233A; --edge: #1F2D47; --code: #D6E2F5; --gut: #4B5B7A;
  --acc: #2DD4BF; --acc-ink: #04201C; --bad: #F87171; --okc: #2DD4BF;
  --k: #7DD3FC; --f: #C4B5FD; --s: #FCD34D; --n: #F9A8D4; --c: #6B7A93; --q: #86EFAC;
  --disp: "Space Grotesk", system-ui, sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); color: var(--ink); font-family: var(--body);
}
body[data-tool="xml_formatter"] {
  --bg: #F3F1EC; --ink: #1F2328; --ink2: #4D535C; --mute: #7A7F87; --line: #DDD8CE;
  --panel: #FFFFFF; --panel2: #FAF8F4; --panel3: #F1EDE5; --edge: #E4DED3; --code: #24292F; --gut: #ABA396;
  --acc: #A3215B; --acc-ink: #FFFFFF; --bad: #C2312E; --okc: #2C7A3F;
  --t: #A3215B; --a: #1F5FA8; --v: #2C7A3F; --c: #8A8F98; --d: #8A5A00; --m: #6B4FA0; --p: #9A8F80;
  --disp: "IBM Plex Sans", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); color: var(--ink); font-family: var(--body);
}
body[data-tool="sql_formatter"] .dt-nav { background: var(--panel); border-bottom: 0; }
body[data-tool="sql_formatter"] .dt-nav .navbar-brand, body[data-tool="sql_formatter"] .dt-nav .nav-link { color: #E6EEF9; }
body[data-tool="sql_formatter"] .dt-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
body[data-tool="xml_formatter"] .dt-nav { background: var(--bg); border-bottom: 1px solid var(--line); }
body[data-tool="xml_formatter"] .dt-nav .navbar-brand { color: var(--acc); }
.dt-bare { display: block; width: 100%; flex: 1; }
.cfx { max-width: 1240px; margin: 0 auto; padding: 30px 20px 64px; }
.cf-hero h1 { margin: 0; font-family: var(--disp); font-size: 50px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.cf-hero p { margin: 8px 0 0; font-size: 17px; color: var(--ink2); }
.cfx-sql .cf-hero h1::before { content: "--"; font-family: var(--mono); font-weight: 500; color: var(--acc); margin-right: 14px; font-size: .62em; vertical-align: .18em; }
.cfx-xml .cf-hero h1::before { content: "</>"; font-family: var(--mono); font-weight: 500; color: var(--acc); margin-right: 14px; font-size: .56em; vertical-align: .2em; }

.cf { margin-top: 22px; background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; }
.cfx-sql .cf { box-shadow: 0 24px 50px -20px rgba(11,18,32,.55); }
.cfx-xml .cf { box-shadow: 0 18px 40px -24px rgba(60,48,30,.35); }
.cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--panel2); border-bottom: 1px solid var(--edge); }
.cf-bar button, .cf-file { font: 500 13px/1 var(--body); }
.cf-acts { display: flex; gap: 6px; }
.cf-acts button { height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--edge); background: transparent; color: var(--code); cursor: pointer; font-weight: 600; font-size: 14px; }
.cf-acts button.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.cf-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel3); }
.cf-seg span, .cf-sel span { padding: 0 8px 0 6px; font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--gut); }
.cf-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--code); cursor: pointer; opacity: .78; }
.cf-seg button[aria-pressed="true"] { background: var(--panel); opacity: 1; box-shadow: 0 0 0 1px var(--edge); }
.cfx-sql .cf-seg button[aria-pressed="true"] { color: var(--acc); }
.cfx-xml .cf-seg button[aria-pressed="true"] { color: var(--acc); }
.cf-sel { display: inline-flex; align-items: center; height: 36px; padding: 0 4px 0 2px; border: 1px solid var(--edge); border-radius: 10px; background: var(--panel3); }
.cf-sel select { height: 30px; border: 0; background: transparent; color: var(--code); font: 600 13px var(--body); padding: 0 6px; cursor: pointer; outline: none; }
.cfx-sql .cf-sel select option { background: #101A2C; color: #E6EEF9; }
.cf-io button, .cf-io .cf-file { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px dashed var(--edge); border-radius: 7px; background: transparent; color: var(--code); font: 600 12px var(--body); cursor: pointer; opacity: .85; }
.cf-io button:hover, .cf-file:hover { opacity: 1; border-style: solid; }
.cf-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cf-file { position: relative; }

.cf-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cf-pane { min-width: 0; display: flex; flex-direction: column; }
.cf-in { border-right: 1px solid var(--edge); }
.cfx-sql .cf-in { background: #0E1727; }
.cfx-xml .cf-in { background: var(--panel2); }
.cf-ph { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--edge); font: 12px var(--body); color: var(--gut); }
.cf-ph b { font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--code); opacity: .8; }
.cf-oa { margin-left: auto; display: flex; gap: 6px; }
.cf-oa button, .cf-oa .cf-file { display: inline-flex; align-items: center; opacity: 1; border-style: solid; height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--edge); background: var(--panel3); color: var(--code); font: 600 12px var(--body); cursor: pointer; }
.cf-oa button.done { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.cf-tabs { display: inline-flex; gap: 2px; }
.cf-tabs button { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--mute); font: 600 12px var(--body); cursor: pointer; }
.cf-tabs button[aria-selected="true"] { background: var(--panel3); color: var(--acc); }

.cf-ed { position: relative; display: flex; height: 520px; font: 13px/20px var(--mono); font-variant-ligatures: none; }
.cf-gut { flex: none; min-width: 48px; margin: 0; padding: 12px 10px 12px 8px; text-align: right; color: var(--gut); font: inherit; white-space: pre; user-select: none; overflow: hidden; }
.cf-in .cf-gut { background: transparent; }
.cf-ed textarea { flex: 1; min-width: 0; margin: 0; padding: 12px 14px 12px 6px; border: 0; outline: none; resize: none; background: transparent; color: var(--code); font: inherit; white-space: pre; overflow: auto; tab-size: 2; caret-color: var(--acc); }
.cf-ed textarea::selection, .cf-code ::selection, .cf-code::selection { background: rgba(125,211,252,.28); }
.cfx-xml .cf-ed textarea::selection, .cfx-xml .cf-code ::selection { background: rgba(163,33,91,.16); }
.cf-mark { position: absolute; left: 0; right: 0; top: 0; height: 20px; background: rgba(248,113,113,.2); border-left: 3px solid var(--bad); pointer-events: none; }
.cf-scroll { overflow: auto; }
.cf-scroll .cf-gut { position: sticky; left: 0; overflow: visible; height: max-content; min-height: 100%; background: var(--panel); border-right: 1px solid var(--edge); }
.cf-code { flex: 1; margin: 0; padding: 12px 16px; color: var(--code); font: inherit; white-space: pre; tab-size: 2; min-width: max-content; }
.cf-code b { font-weight: inherit; }
.cfx-sql .cf-code .k { color: var(--k); font-weight: 600; }
.cfx-sql .cf-code .f { color: var(--f); }
.cfx-sql .cf-code .s { color: var(--s); }
.cfx-sql .cf-code .n { color: var(--n); }
.cfx-sql .cf-code .c { color: var(--c); font-style: italic; }
.cfx-sql .cf-code .q { color: var(--q); }
.cfx-xml .cf-code .t { color: var(--t); font-weight: 500; }
.cfx-xml .cf-code .a { color: var(--a); }
.cfx-xml .cf-code .v { color: var(--v); }
.cfx-xml .cf-code .c { color: var(--c); font-style: italic; }
.cfx-xml .cf-code .d { color: var(--d); }
.cfx-xml .cf-code .pi, .cfx-xml .cf-code .dt { color: var(--m); }
.cfx-xml .cf-code .p { color: var(--p); }
.cf-tree { display: none; height: 520px; overflow: auto; padding: 12px 16px; font: 13px/1.6 var(--mono); color: var(--code); }
.cf.tree .cf-out .cf-scroll { display: none; }
.cf.tree .cf-tree { display: block; }
.cf-tree details { margin-left: 14px; border-left: 1px dotted var(--edge); padding-left: 8px; }
.cf-tree > details { margin-left: 0; border-left: 0; padding-left: 0; }
.cf-tree summary { cursor: pointer; list-style: none; }
.cf-tree summary::before { content: "▾"; display: inline-block; width: 14px; color: var(--gut); }
.cf-tree details:not([open]) > summary::before { content: "▸"; }
.cf-tree .tl { margin-left: 14px; padding-left: 8px; }
.cf-tree b { color: var(--t); font-weight: 500; }
.cf-tree i { color: var(--a); font-style: normal; }
.cf-tree span, .cf-tree .tx { color: var(--v); }
.cf-cut { color: var(--mute); font-size: 12px; }
.cf-stat { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-top: 1px solid var(--edge); background: var(--panel2); font: 12.5px/1.4 var(--mono); color: var(--gut); }
.cf-stat::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gut); }
.cf-stat.ok::before { background: var(--okc); }
.cf-stat.bad { color: var(--bad); }
.cf-stat.bad::before { background: var(--bad); }
.cf-stat.busy::before { background: #F5B942; }

.cf-adwrap { margin: 30px 0 6px; }
.cf-article, .cf-faq, .cf-more { max-width: 780px; margin: 0 auto; }
.cf-article { font-size: 16.5px; line-height: 1.7; color: var(--ink2); }
.cf-article h2, .cf-faq h2, .cf-more h2 { margin: 44px 0 12px; font-family: var(--disp); font-size: 27px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.cf-article h3 { margin: 0 0 8px; font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.cf-article p, .cf-article ol, .cf-article ul { margin: 0 0 14px; }
.cf-article li { margin: 0 0 6px; }
.cf-article a, .cf-faq a { color: var(--ink); text-decoration-color: var(--acc); text-underline-offset: 3px; }
.cf-article code { padding: 1px 6px; border-radius: 5px; background: rgba(127,140,160,.14); font: 13.5px var(--mono); color: var(--ink); }
.cf-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.cf-ba pre, .cf-cmd { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); color: var(--code); font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; overflow: auto; }
.cfx-sql .cf-ba pre b.k { color: var(--k); font-weight: 600; }
.cf-ba pre b { font-weight: inherit; }
.cf-cmd { margin: 0 0 16px; white-space: pre; }
.cf-tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cf-tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.cf-tbl th, .cf-tbl td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cf-tbl th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: rgba(127,140,160,.07); }
.cf-tbl tr:last-child td { border-bottom: 0; }
.cf-src { margin-top: 26px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.cf-q { border-bottom: 1px solid var(--line); }
.cf-q summary { padding: 15px 30px 15px 0; cursor: pointer; list-style: none; position: relative; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.cf-q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 22px var(--mono); color: var(--acc); }
.cf-q[open] summary::after { content: "−"; }
.cf-q p { margin: 0 0 16px; color: var(--ink2); line-height: 1.65; }
.cf-more div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-more a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); }
.cf-more a:hover { border-color: var(--acc); }
.cf-more b { display: block; font-size: 15px; }
.cf-more span { font-size: 13.5px; color: var(--mute); }

@media (max-width: 900px) {
  .cf-panes { grid-template-columns: minmax(0, 1fr); }
  .cf-in { border-right: 0; border-bottom: 1px solid var(--edge); }
  .cf-in .cf-ed { height: 220px; }
  .cf-out .cf-ed, .cf-tree { height: 380px; }
}
@media (max-width: 560px) {
  .cfx { padding: 20px 14px 48px; }
  .cf-hero h1 { font-size: 34px; }
  .cf-hero p { font-size: 15px; }
  .cf-bar { gap: 8px; padding: 10px; }
  .cf-sel { max-width: 100%; }
  .cf-ed, .cf-tree { font-size: 12.5px; }
  .cf-in .cf-ed { height: 180px; }
  .cf-out .cf-ed, .cf-tree { height: 360px; }
  .cf-ph { flex-wrap: wrap; padding: 6px 10px; gap: 8px; }
  #cfInMeta { display: none; }
  .cf-gut { min-width: 38px; padding-right: 6px; }
  .cf-ba, .cf-more div { grid-template-columns: minmax(0, 1fr); }
  .cf-article h2, .cf-faq h2, .cf-more h2 { font-size: 23px; }
  .cf-oa button { padding: 0 9px; }
}
html[lang="ko"] body[data-tool="sql_formatter"] { --disp: "Space Grotesk", "Pretendard Variable", Pretendard, system-ui, sans-serif; --body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[lang="ko"] body[data-tool="xml_formatter"] { --disp: "IBM Plex Sans", "Pretendard Variable", Pretendard, system-ui, sans-serif; --body: "IBM Plex Sans", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html[lang="ko"] .cf-hero h1 { letter-spacing: -.03em; }
html[lang="ko"] .cf-article, html[lang="ko"] .cf-q p { word-break: keep-all; }
html[lang="ko"] .cf-seg span, html[lang="ko"] .cf-sel span, html[lang="ko"] .cf-ph b { letter-spacing: .02em; }