/* easydev 공통 스타일 — 별도로 만들어진 ASCII 페이지를 사이트 결에 맞춘다.
   원본 CSS 뒤에 실려 색·폰트·모서리만 덮어쓴다. 구조는 건드리지 않는다. */
:root{
  --bg:#050d0b; --panel:#0b1a16; --mint:#3ddc97; --yellow:#ffd640;
  --ink:#f4f8f2; --dim:#8b9d96;
  color-scheme:dark;
  color:var(--ink);
  background:var(--bg);
  font-family:"Apple SD Gothic Neo",Pretendard,AppleGothic,system-ui,sans-serif;
}
body{background:var(--bg);color:var(--ink)}

/* 상단으로 돌아가는 길 — 다른 페이지와 같은 아이콘 */
#goHome{position:fixed;top:calc(12px + env(safe-area-inset-top));left:14px;z-index:60;
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--ink);
  border:2px solid rgba(244,248,242,.32);background:rgba(5,13,11,.6);backdrop-filter:blur(6px)}
#goHome:hover{border-color:var(--mint)}

#easydev-home{position:fixed;top:14px;left:16px;z-index:50;display:inline-flex;align-items:center;
  gap:6px;padding:8px 14px;border-radius:12px;text-decoration:none;font-weight:800;font-size:13px;
  color:var(--ink);border:2px solid rgba(244,248,242,.3);background:rgba(5,13,11,.6);
  backdrop-filter:blur(6px)}
#easydev-home:hover{border-color:var(--mint)}

main{max-width:720px;margin:0 auto;padding:74px 20px 60px}
header .eyebrow{color:var(--mint);font-weight:900;letter-spacing:.08em;font-size:12px}
h1{font-weight:900;line-height:1.25;font-size:clamp(26px,6.4vw,40px)}
.intro,.drop-note,.status,.range-labels{color:var(--dim);font-weight:700}

.drop-zone{border:2px dashed rgba(61,220,151,.4);border-radius:18px;background:var(--panel);
  padding:34px 20px}
.drop-zone:hover{border-color:var(--mint);background:rgba(61,220,151,.08)}
.drop-title{font-weight:900}

.controls{background:var(--panel);border:2px solid rgba(61,220,151,.2);border-radius:16px;padding:18px}
input[type=range]{accent-color:var(--mint)}
output{color:var(--yellow);font-weight:900}

.tabs button{font-family:inherit;font-weight:900;border-radius:12px;padding:10px 18px;
  border:2px solid rgba(244,248,242,.22);background:transparent;color:var(--ink)}
.tabs button[aria-selected=true]{border-color:var(--mint);background:rgba(61,220,151,.16)}

.text-preview,pre{background:#040a08;border-radius:14px;border:1px solid rgba(61,220,151,.18)}
pre{color:var(--mint)}

button:not(.tabs button){font-family:inherit;font-weight:900;border-radius:14px;
  border:2px solid var(--mint);background:rgba(61,220,151,.16);color:var(--ink);padding:13px 22px}
button:not(.tabs button):hover{background:rgba(61,220,151,.3)}

/* 원본은 grid + place-items 로 세 요소를 한 칸에 겹쳐 놓고 음수 마진으로 밀어냈다.
   좁은 화면에서 제목이 두 줄이 되면 그 보정이 무너져 글자가 겹친다. */
.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.drop-zone .drop-note{margin-top:0}