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

/* ═══════════════════════════════════════════════════════════
   2117 AG MD — DesignKit "Editorial" 변형 (redesign-all)
   · 무드: 문서·읽기(Notion 참조, minimal editorial) — 종이빛 아이보리 · 잉크 · vermilion
   · 타이포: Fraunces(세리프 마스트헤드/제목) + Inter(본문·UI) + JetBrains Mono(코드)
   · 이전(Console teal 다크 split)과 정반대 룩: 세리프 신문 마스트헤드 · 얇은 괘선 · 넓은 여백
   · 라이트 기본 + 다크 토글(data-theme="dark")
═══════════════════════════════════════════════════════════ */
:root {
  --paper:#FBF8F1; --surface:#FFFFFF; --surface-2:#F4EEE1; --surface-3:#EDE5D3;
  --ink:#211F1A; --ink-strong:#12100C; --muted:#6C6553; --faint:#9A927E;
  --accent:#C63F27; --accent-2:#A5311C;
  --rule:rgba(33,31,26,.15); --rule-soft:rgba(33,31,26,.08); --rule-strong:rgba(33,31,26,.32);
  --ok:#3F7D4E; --err:#C63F27;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-1:3px; --r-2:5px; --r-3:8px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t1:150ms; --t2:280ms;
  --maxw:1080px; --readw:720px;

  /* legacy compat */
  --primary:var(--accent); --grad:none; --text:var(--ink); --text-2:var(--muted);
  --bg:var(--paper); --line:var(--rule);
}
[data-theme="dark"] {
  --paper:#15130E; --surface:#1C1912; --surface-2:#241F16; --surface-3:#2C2619;
  --ink:#ECE6D6; --ink-strong:#F7F2E6; --muted:#A79E88; --faint:#726A57;
  --accent:#E86A4E; --accent-2:#F08a72;
  --rule:rgba(255,251,240,.15); --rule-soft:rgba(255,251,240,.08); --rule-strong:rgba(255,251,240,.30);
  --ok:#7FB889;
}

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

body {
  font-family:var(--sans); font-weight:400; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:0 22px 90px; overflow-x:hidden; background:var(--paper);
  transition:background var(--t2) var(--ease), color var(--t2) var(--ease);
}
::selection { background:color-mix(in srgb, var(--accent) 26%, transparent); }

/* ─── MASTHEAD ─── */
.masthead { width:100%; max-width:var(--maxw); margin-bottom:6px; }
.mast-inner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 2px 14px;
}
.mast-logo {
  font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:-0.01em;
  color:var(--ink-strong); text-decoration:none; line-height:1;
}
.mast-logo .accent { color:var(--accent); font-style:italic; }
.mast-actions { display:flex; align-items:center; gap:18px; }
.mast-nav { display:flex; align-items:center; gap:20px; }
.mast-nav a {
  font-size:0.82rem; font-weight:500; color:var(--muted); text-decoration:none;
  letter-spacing:0.01em; transition:color var(--t1) var(--ease); position:relative; padding-bottom:3px;
}
.mast-nav a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--accent);
  transition:width var(--t1) var(--ease);
}
.mast-nav a:hover { color:var(--ink-strong); }
.mast-nav a:hover::after { width:100%; }
@media (max-width:720px){ .mast-nav { display:none; } }
.mast-rule { height:0; border-top:2px solid var(--ink-strong); position:relative; }
.mast-rule::after { content:''; position:absolute; left:0; right:0; top:3px; border-top:1px solid var(--rule); }

.theme-toggle-btn {
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent; border:1px solid var(--rule);
  color:var(--muted); cursor:pointer; transition:all var(--t1) var(--ease);
}
.theme-toggle-btn:hover { border-color:var(--accent); color:var(--accent); }
.theme-toggle-btn svg { width:16px; height:16px; stroke-width:1.6; }
.ic-dark { display:none; }
[data-theme="dark"] .ic-light { display:none; }
[data-theme="dark"] .ic-dark { display:inline-flex; }

.lang-select {
  font-family:var(--sans); font-size:0.78rem; font-weight:500; color:var(--muted);
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-1);
  padding:6px 8px; cursor:pointer; outline:none; transition:border-color var(--t1) var(--ease); max-width:112px;
}
.lang-select:hover, .lang-select:focus { border-color:var(--accent); color:var(--ink-strong); }
.lang-select option { color:#211F1A; background:#fff; }
@media (max-width:420px){ .lang-select { max-width:84px; } }

/* ─── HERO ─── */
.hero { width:100%; max-width:var(--readw); margin:40px 0 4px; text-align:center; }
.eyebrow {
  font-family:var(--mono); font-size:0.68rem; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.hero h1 {
  font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem, 6vw, 3.4rem);
  line-height:1.08; letter-spacing:-0.02em; color:var(--ink-strong); margin-bottom:18px;
}
.hero h1 .grad { color:var(--accent); font-style:italic; }
.hero .lede {
  font-size:1.02rem; font-weight:300; color:var(--muted); line-height:1.7;
  max-width:540px; margin:0 auto; word-break:keep-all;
}

/* ─── MODE TABS ─── */
.mode-tabs {
  display:inline-flex; gap:0; margin:32px auto 0; border-bottom:1px solid var(--rule);
}
.mode-btn {
  font-family:var(--serif); font-size:1rem; font-weight:500; color:var(--muted);
  background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:10px 20px; cursor:pointer; transition:color var(--t1) var(--ease); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.mode-btn svg { width:15px; height:15px; stroke-width:1.6; }
.mode-btn.is-active { color:var(--ink-strong); border-bottom-color:var(--accent); }
.mode-btn:hover { color:var(--ink-strong); }
@media (max-width:440px){ .mode-btn { padding:10px 13px; font-size:0.9rem; } .mode-btn svg{ display:none; } }

/* ─── DESK (editor + output) ─── */
.desk {
  width:100%; max-width:var(--maxw); margin-top:22px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:860px){ .desk { grid-template-columns:1fr; gap:16px; } }

.sheet {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--rule); border-top:2px solid var(--ink-strong);
}
.sheet-editor:focus-within { border-color:var(--rule); border-top-color:var(--accent); }
.sheet-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--rule-soft); min-height:46px;
}
.dateline {
  font-family:var(--mono); font-size:0.66rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--faint);
}
.fmt-bar { display:flex; gap:2px; flex-wrap:wrap; }
.fmt {
  width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-1); background:transparent; border:1px solid transparent;
  color:var(--muted); cursor:pointer; transition:all var(--t1) var(--ease);
}
.fmt:hover { border-color:var(--rule); background:var(--surface-2); color:var(--accent); }
.fmt svg { width:15px; height:15px; stroke-width:1.7; }
@media (max-width:400px){ .fmt { width:26px; height:26px; } }

.editor {
  width:100%; min-height:360px; flex:1; resize:vertical;
  font-family:var(--mono); font-size:0.9rem; line-height:1.75; color:var(--ink-strong);
  background:transparent; border:none; outline:none; padding:18px; direction:ltr; text-align:left;
}
.editor::placeholder { color:var(--faint); }

.out-tabs { display:flex; gap:2px; }
.out-tab {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.68rem; font-weight:500; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--faint);
  background:transparent; border:1px solid transparent; border-radius:var(--r-1);
  padding:6px 10px; cursor:pointer; transition:all var(--t1) var(--ease);
}
.out-tab svg { width:13px; height:13px; stroke-width:1.8; }
.out-tab.is-active { color:var(--accent); border-color:var(--rule); background:var(--surface-2); }
.out-actions { display:flex; gap:6px; }
.oa-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:0.74rem; font-weight:500; color:var(--muted);
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-1);
  padding:6px 10px; cursor:pointer; transition:all var(--t1) var(--ease);
}
.oa-btn:hover { border-color:var(--accent); color:var(--accent); }
.oa-btn svg { width:13px; height:13px; stroke-width:1.8; }
@media (max-width:400px){ .oa-btn span { display:none; } }

.out-body { position:relative; flex:1; min-height:360px; }
[data-panel] { display:none; }
[data-panel].is-shown { display:block; }
.preview { width:100%; height:100%; min-height:360px; overflow:auto; padding:22px 24px; background:var(--surface); }
.code-out {
  width:100%; height:100%; min-height:360px; resize:vertical;
  font-family:var(--mono); font-size:0.84rem; line-height:1.65; color:var(--ink-strong);
  background:var(--surface-2); border:none; outline:none; padding:18px; direction:ltr; text-align:left;
}
.preview-empty { color:var(--faint); font-style:italic; font-family:var(--serif); }

/* ─── MARKDOWN PREVIEW / ARTICLE BODY ─── */
.markdown-body { direction:ltr; text-align:left; color:var(--ink); line-height:1.72; font-size:0.96rem; word-wrap:break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  font-family:var(--serif); color:var(--ink-strong); font-weight:600; line-height:1.25; letter-spacing:-0.01em; margin:1.5em 0 0.55em;
}
.markdown-body h1 { font-size:1.7em; }
.markdown-body h2 { font-size:1.38em; padding-bottom:0.2em; border-bottom:1px solid var(--rule); }
.markdown-body h3 { font-size:1.16em; }
.markdown-body > *:first-child { margin-top:0; }
.markdown-body p { margin:0 0 1em; }
.markdown-body a { color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.markdown-body a:hover { border-bottom-color:var(--accent); }
.markdown-body strong { color:var(--ink-strong); font-weight:600; }
.markdown-body em { font-style:italic; }
.markdown-body ul, .markdown-body ol { margin:0 0 1em; padding-left:1.5em; }
.markdown-body li { margin:0.3em 0; }
.markdown-body blockquote {
  margin:0 0 1em; padding:0.5em 1.1em; color:var(--muted); font-family:var(--serif); font-style:italic;
  border-left:3px solid var(--accent); background:var(--surface-2);
}
.markdown-body blockquote p { margin:0.3em 0; }
.markdown-body code { font-family:var(--mono); font-size:0.85em; color:var(--accent-2); background:var(--surface-2); padding:0.14em 0.4em; border-radius:var(--r-1); }
[data-theme="dark"] .markdown-body code { color:var(--accent); }
.markdown-body pre { margin:0 0 1em; padding:14px 16px; overflow:auto; background:var(--surface-2); border:1px solid var(--rule-soft); border-radius:var(--r-2); }
.markdown-body pre code { background:transparent; padding:0; color:var(--ink-strong); font-size:0.85em; }
.markdown-body table { border-collapse:collapse; margin:0 0 1em; width:100%; font-size:0.9em; }
.markdown-body th, .markdown-body td { border:1px solid var(--rule); padding:7px 11px; text-align:left; }
.markdown-body th { background:var(--surface-2); font-weight:600; color:var(--ink-strong); }
.markdown-body hr { border:none; border-top:1px solid var(--rule); margin:1.6em 0; }
.markdown-body img { max-width:100%; height:auto; }
.markdown-body input[type=checkbox] { margin-right:0.5em; accent-color:var(--accent); }
.markdown-body ul:has(input[type=checkbox]) { list-style:none; padding-left:0.2em; }

/* ─── DESKBAR (stats + actions) ─── */
.deskbar {
  width:100%; max-width:var(--maxw); margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:12px 4px; border-top:1px solid var(--rule);
}
.stats { display:flex; gap:22px; font-size:0.78rem; color:var(--faint); font-family:var(--mono); }
.stats b { color:var(--accent); font-weight:500; }
.tool-actions { display:flex; gap:8px; flex-wrap:wrap; }
.tb-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:0.78rem; font-weight:500; color:var(--muted);
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-1);
  padding:8px 13px; cursor:pointer; transition:all var(--t1) var(--ease);
}
.tb-btn:hover { border-color:var(--accent); color:var(--accent); }
.tb-btn svg { width:14px; height:14px; stroke-width:1.6; }

/* ─── QUICKLINKS (explore cards → cheatsheet/guides/about) ─── */
.quicklinks {
  width:100%; max-width:var(--maxw); margin-top:52px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
@media (max-width:720px){ .quicklinks { grid-template-columns:1fr; } }
.ql-card {
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--rule); border-top:2px solid var(--ink-strong);
  padding:20px 20px 22px; transition:transform var(--t2) var(--ease-out), border-color var(--t1) var(--ease);
}
.ql-card:hover { transform:translateY(-3px); border-top-color:var(--accent); }
.ql-kicker { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); }
.ql-title { font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--ink-strong); margin:8px 0 6px; }
.ql-desc { font-size:0.85rem; color:var(--muted); line-height:1.6; word-break:keep-all; }
.ql-more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:0.78rem; font-weight:500; color:var(--accent); }
.ql-more svg { width:14px; height:14px; stroke-width:1.8; }

/* ─── TOAST ─── */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink-strong); color:var(--paper);
  font-size:0.84rem; font-weight:500; padding:11px 20px; border-radius:var(--r-2);
  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; color:var(--accent); }

/* ─── DOC (about / contact / guide article) ─── */
.doc { width:100%; max-width:var(--readw); margin:34px 0; }
.doc h1 { font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.5rem); font-weight:600; color:var(--ink-strong); letter-spacing:-0.02em; line-height:1.14; margin-bottom:10px; }
.doc .doc-sub { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.doc .lede { font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--muted); line-height:1.6; margin:6px 0 30px; word-break:keep-all; }
.doc h2 { font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--ink-strong); margin:34px 0 12px; padding-bottom:0.25em; border-bottom:1px solid var(--rule); }
.doc p { font-size:1rem; font-weight:300; color:var(--ink); line-height:1.85; margin-bottom:16px; word-break:keep-all; }
.doc ul { list-style:none; margin:0 0 16px; padding:0; }
.doc li { position:relative; padding-left:22px; font-size:1rem; font-weight:300; color:var(--ink); line-height:1.85; margin-bottom:4px; }
.doc li::before { content:''; position:absolute; left:2px; top:0.8em; width:8px; height:1.5px; background:var(--accent); }
.doc a { color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.doc a:hover { border-bottom-color:var(--accent); }
.doc .article-body > p:first-of-type::first-letter {
  font-family:var(--serif); float:left; font-size:3.1rem; line-height:0.82; font-weight:600;
  padding:6px 10px 0 0; color:var(--accent);
}
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:500; color:var(--muted); text-decoration:none; margin-bottom:16px; }
.back-link:hover { color:var(--accent); }
.back-link svg { width:14px; height:14px; stroke-width:1.7; }

/* FAQ (on about page) */
.faq-item { border-bottom:1px solid var(--rule); padding:18px 2px; }
.faq-q { font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--ink-strong); margin-bottom:8px; word-break:keep-all; }
.faq-a { font-size:0.94rem; font-weight:300; color:var(--muted); line-height:1.8; word-break:keep-all; }

/* ─── CHEATSHEET HUB (syntax dictionary grid) ─── */
.hub { width:100%; max-width:var(--maxw); margin:34px 0; }
.hub-head { text-align:center; max-width:var(--readw); margin:0 auto 30px; }
.hub-head h1 { font-family:var(--serif); font-size:clamp(2rem,4.5vw,2.9rem); font-weight:600; color:var(--ink-strong); letter-spacing:-0.02em; margin-bottom:12px; }
.hub-head p { font-size:0.98rem; font-weight:300; color:var(--muted); line-height:1.7; word-break:keep-all; }
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:820px){ .card-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .card-grid { grid-template-columns:1fr; } }
.syn-card {
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--rule); padding:18px 18px 20px;
  transition:transform var(--t2) var(--ease-out), border-color var(--t1) var(--ease);
}
.syn-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.syn-card__name { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink-strong); margin-bottom:6px; }
.syn-card__code { font-family:var(--mono); font-size:0.76rem; color:var(--accent); background:var(--surface-2); padding:3px 7px; border-radius:var(--r-1); display:inline-block; margin-bottom:10px; direction:ltr; }
.syn-card__blurb { font-size:0.85rem; font-weight:300; color:var(--muted); line-height:1.6; word-break:keep-all; }

/* ─── SYNTAX DETAIL PAGE ─── */
.syn { width:100%; max-width:var(--readw); margin:34px 0; }
.syn h1 { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.4rem); font-weight:600; color:var(--ink-strong); letter-spacing:-0.02em; margin-bottom:12px; }
.syn .blurb { font-size:1.02rem; font-weight:300; color:var(--ink); line-height:1.8; margin-bottom:26px; word-break:keep-all; }
.example { border:1px solid var(--rule); margin-bottom:16px; background:var(--surface); }
.example__label { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); padding:9px 14px; border-bottom:1px solid var(--rule-soft); }
.example__code { margin:0; padding:14px 16px; overflow:auto; font-family:var(--mono); font-size:0.84rem; line-height:1.6; color:var(--ink-strong); white-space:pre; direction:ltr; }
.example__render { padding:16px 18px; }
.example.is-preview { border-top:2px solid var(--accent); }
.tipbox {
  display:flex; gap:10px; align-items:flex-start; margin:22px 0;
  padding:14px 16px; background:var(--surface-2); border-left:3px solid var(--accent);
}
.tipbox svg { width:16px; height:16px; stroke-width:1.7; color:var(--accent); flex-shrink:0; margin-top:2px; }
.tipbox__label { font-weight:600; color:var(--ink-strong); }
.tipbox p { font-size:0.9rem; color:var(--muted); line-height:1.65; margin:0; word-break:keep-all; }
.tipbox b { color:var(--ink-strong); font-weight:600; }
.syn-cta { display:inline-flex; align-items:center; gap:7px; margin:6px 0 30px; font-family:var(--sans); font-size:0.86rem; font-weight:500; color:var(--paper); background:var(--accent); padding:10px 18px; border-radius:var(--r-2); text-decoration:none; transition:background var(--t1) var(--ease); }
.syn-cta:hover { background:var(--accent-2); }
.syn-cta svg { width:15px; height:15px; stroke-width:1.9; }
.related { margin-top:30px; padding-top:22px; border-top:1px solid var(--rule); }
.related__title { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.related__links { display:flex; flex-wrap:wrap; gap:8px; }
.related__links a { font-size:0.82rem; color:var(--muted); text-decoration:none; border:1px solid var(--rule); padding:6px 12px; border-radius:99px; transition:all var(--t1) var(--ease); }
.related__links a:hover { border-color:var(--accent); color:var(--accent); }

/* ─── AD ─── */
/* 사이즈별 행 분리: .ad-grid=행 세로 스택, .ad-row=같은 사이즈끼리 한 줄(컨테이너 폭이 개수 제한).
   728×90→1개/행, 250×250→2개/행, 320×50→2개/행(4개=2×2). 래퍼에 border-radius/overflow 금지. */
.ad-grid { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; margin-top:52px; }
.ad-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; }
.ad-cell { min-height:50px; }

/* ─── FOOTER ─── */
.site-footer {
  width:100%; max-width:var(--maxw); margin-top:56px; padding-top:22px;
  border-top:2px solid var(--ink-strong);
}
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:14px; }
.footer-nav a { color:var(--muted); font-size:0.8rem; text-decoration:none; transition:color var(--t1) var(--ease); }
.footer-nav a:hover { color:var(--accent); }
.footer-copy { display:block; text-align:center; font-size:0.72rem; color:var(--faint); font-family:var(--mono); letter-spacing:0.04em; }

/* ─── 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 15px 70px; }
  .mast-inner { padding:16px 0 12px; }
  .editor, .out-body, .preview, .code-out { min-height:280px; }
  .stats { gap:14px; }
}