/* ===== 유리 원격 편집기 — 링클래식 테마 계승 (다크 + 앰버) ===== */
:root{
  --bg:#101118; --bg2:#171925; --card:#1b1e2b; --card2:#222636;
  --line:#2b3145; --line2:#363d55;
  --txt:#e8eaf2; --dim:#9aa2bd; --dim2:#6b7292;
  --acc:#ffb545; --acc2:#ff8a3d; --accd:#5a3a12;
  --green:#57d08a; --blue:#5aa9ff; --pink:#ff6fae; --purple:#b48bff;
  --gold:#ffcf5c; --danger:#ff6b6b;
  --r:14px; --r2:10px; --tb:56px; --side:280px;
  --shadow:0 8px 30px rgba(0,0,0,.4);
  --mono:'Cascadia Mono',Consolas,'D2Coding','Malgun Gothic',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1c2030 0%, var(--bg) 55%) fixed;
  color:var(--txt); font-family:'Segoe UI',-apple-system,'Malgun Gothic',sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
.hidden{display:none!important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--acc2)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}}

/* ---- 공통 부품 ---- */
.btn{appearance:none;border:1px solid var(--line2);background:var(--card2);color:var(--txt);
  border-radius:var(--r2);padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;
  transition:.12s;white-space:nowrap;line-height:1}
.btn:hover{background:#2a2f45;border-color:#465073}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--acc),var(--acc2));border:none;color:#3a2400;
  box-shadow:0 4px 14px rgba(255,138,61,.3)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:#ffffff0d}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.ipt{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);
  color:var(--txt);padding:11px 13px;font-size:14px;outline:none;transition:.12s}
.ipt:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(255,138,61,.15)}
.ipt.sm{padding:8px 11px;font-size:13px}
.err{color:var(--danger);font-size:13px;margin:8px 0 0;min-height:18px}
.empty{color:var(--dim2);font-size:13px;text-align:center;padding:18px}
.badge{background:var(--accd);color:var(--gold);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}
kbd{background:var(--card2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;
  padding:1px 6px;font-size:12px;font-family:var(--mono)}
code{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:12px}

/* ---- 로그인 ---- */
#login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow)}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-brand .logo{font-size:28px}
.login-brand h1{font-size:20px;margin:0;font-weight:600}
.login-brand b{color:var(--acc)}
.login-sub{color:var(--dim);font-size:13px;margin:0 0 18px}
#loginForm .ipt{margin-bottom:10px}
.login-foot{color:var(--dim2);font-size:12px;text-align:center;margin:14px 0 0}

/* ---- 상단바 ---- */
.topbar{height:var(--tb);display:flex;align-items:center;gap:12px;padding:0 14px;
  background:#141622cc;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.tb-brand{display:flex;align-items:center;gap:8px;font-size:15px}
.tb-brand .logo{font-size:20px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.chip-stat{background:var(--card2);border:1px solid var(--line2);border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--dim);white-space:nowrap}
.chip-stat b{color:var(--txt)}
.iconbtn{background:none;border:none;color:var(--txt);cursor:pointer;padding:8px;display:flex;
  flex-direction:column;gap:4px}
.iconbtn span{display:block;width:18px;height:2px;background:var(--txt);border-radius:2px}
.only-mobile{display:none}

/* ---- 레이아웃 ---- */
.layout{display:flex;height:calc(100vh - var(--tb))}
.sidebar{width:var(--side);flex:0 0 var(--side);background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;padding:14px;overflow:hidden}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.backdrop{display:none}

.side-user{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,var(--acc),var(--acc2));
  color:#3a2400;display:grid;place-items:center;font-weight:800;font-size:16px}
.su-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.su-meta b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .btn{margin-left:auto}

.side-cats{display:flex;gap:8px}
.cat-btn{flex:1;background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:var(--r2);
  padding:9px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;
  justify-content:center;transition:.12s}
.cat-btn:hover{background:var(--card2)}
.cat-btn.on{background:var(--accd);border-color:var(--acc2);color:var(--gold)}
.cat-btn b{font-size:11px;opacity:.75}

.filelist-wrap{flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.filelist{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}
.filelist li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--dim);
  display:flex;align-items:center;gap:8px;transition:.1s}
.filelist li:hover{background:#ffffff0d;color:var(--txt)}
.filelist li.on{background:var(--accd);color:var(--gold)}
.filelist li .fi{opacity:.7;font-size:12px}
.filelist li .sz{margin-left:auto;font-size:11px;color:var(--dim2)}
.filelist li .dirty{color:var(--acc2);font-weight:800}

.side-menu{display:flex;flex-direction:column;gap:6px}
.menu-btn{background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:var(--r2);
  padding:10px;font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:.12s}
.menu-btn:hover{background:var(--card2);color:var(--txt)}

/* ---- 탭 ---- */
.tabbar{display:flex;gap:4px;padding:8px 10px 0;overflow-x:auto;background:transparent;flex:0 0 auto}
.tab{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-bottom:none;border-radius:10px 10px 0 0;padding:8px 10px;font-size:12.5px;color:var(--dim);
  cursor:pointer;white-space:nowrap;max-width:230px}
.tab:hover{background:var(--card2);color:var(--txt)}
.tab.on{background:var(--bg2);color:var(--txt);border-color:var(--line2);box-shadow:inset 0 2px 0 var(--acc2)}
.tab .nm{overflow:hidden;text-overflow:ellipsis}
.tab .x{opacity:.5;border:none;background:none;color:inherit;cursor:pointer;font-size:13px;padding:0 2px}
.tab .x:hover{opacity:1;color:var(--danger)}
.tab .dot{width:7px;height:7px;border-radius:50%;background:var(--acc2);flex:0 0 auto}

/* ---- 환영 ---- */
.welcome{flex:1;display:grid;place-content:center;text-align:center;gap:6px;padding:30px;color:var(--dim)}
.wc-logo{font-size:52px}
.welcome h2{margin:6px 0 0;color:var(--txt);font-size:20px}
.wc-tips{list-style:none;margin:16px auto 0;padding:0;max-width:520px;text-align:left;display:grid;gap:8px}
.wc-tips li{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:10px 13px;font-size:13px}
.wc-tips b{color:var(--gold)}

/* ---- 편집기 ---- */
.editor-wrap{flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--bg2);border-top:1px solid var(--line2)}
.ed-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:#141622;flex:0 0 auto}
.ed-path{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;min-width:0}
.ed-path #edPath{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex:0 0 auto}
.ed-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.meta{color:var(--dim2);font-size:12px;white-space:nowrap}
/* 읽기 전용(ref/) 표식 — 고칠 수 없는 글이라는 걸 한눈에 */
.ro-tag{flex:0 0 auto;font-family:var(--ui,inherit);font-size:11px;font-weight:700;letter-spacing:.02em;
  color:#ffd8a8;background:#f59e0b1f;border:1px solid #f59e0b40;border-radius:999px;padding:2px 9px}
/* 문서 안 찾기 (읽기 전용일 때만 보인다) */
.findbox{display:flex;align-items:center;gap:6px}
.findbox .ipt{width:170px}
.findbox .meta{min-width:46px;text-align:right;font-family:var(--mono)}

.ed-body{flex:1;min-height:0;display:flex;overflow:hidden;background:#0d0e14}
/* ★white-space:pre 가 없으면 줄번호가 가로로 쭉 늘어선다★ (textContent 의 \n 이 안 먹는다).
   그 줄이 본문을 옆으로 밀어 편집 자체가 안 되던 원인이다 — 유저가 잡아 줬다. */
.gutter{flex:0 0 auto;padding:12px 8px 12px 12px;text-align:right;color:var(--dim2);
  font-family:var(--mono);font-size:13px;line-height:1.55;user-select:none;overflow:hidden;
  white-space:pre;border-right:1px solid var(--line);background:#0b0c11;min-width:52px}
.code{flex:1;min-width:0;background:transparent;border:none;outline:none;resize:none;color:var(--txt);
  font-family:var(--mono);font-size:13px;line-height:1.55;padding:12px 14px;white-space:pre;overflow:auto;tab-size:4}
/* 읽기 전용은 글자를 흐리게 하지 않는다 — 레퍼런스는 오래 읽는 글이다.
   대신 바탕을 살짝 눕히고 찾기 표시를 눈에 띄게. */
.code.ro{background:#11121a;caret-color:transparent}
.code.ro::selection{background:#f59e0b66;color:#fff}

.ed-log{flex:0 0 auto;max-height:190px;overflow-y:auto;border-top:1px solid var(--line);
  background:#0b0c11;padding:0;font-family:var(--mono);font-size:12.5px}
.ed-log:empty{display:none}
.ed-log .ln{padding:5px 14px;border-bottom:1px solid #ffffff08;color:var(--dim);white-space:pre-wrap;word-break:break-all}
.ed-log .ln.bad{color:#ffb4b4;background:#ff6b6b12}
.ed-log .ln.good{color:#bdf0d2;background:#57d08a12}
.ed-log .hd{padding:6px 14px;font-weight:700;color:var(--txt);background:var(--card);position:sticky;top:0}

/* ---- 칸맞춤 보기 (보기 전용) ----
   ★.al-row 높이는 align.js 의 ROW(34) 와 반드시 같아야 한다★ (가상 스크롤이 이 값을 쓴다) */
.align-wrap{flex:1;min-width:0;display:flex;background:#0d0e14}
.al{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.al-head{flex:0 0 auto;overflow:hidden;background:#141622;border-bottom:1px solid var(--line2)}
.al-cols{display:grid;height:30px}
.al-h{display:flex;align-items:center;padding:0 7px;font-size:11.5px;font-weight:700;color:var(--dim);
  border-right:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-h.isimg{color:var(--gold)}
.al-scroll{flex:1;min-height:0;overflow:auto;position:relative}
.al-pad{position:relative}
.al-body{position:absolute;top:0;left:0;will-change:transform}

.al-row{display:flex;align-items:center;height:34px;border-bottom:1px solid #ffffff08}
.al-row:hover{background:#ffffff08}
.al-row.note{color:var(--dim2)}
.al-row.odd{background:#ff6b6b14}
.al-rn{flex:0 0 54px;text-align:right;padding-right:10px;font-family:var(--mono);font-size:11px;
  color:var(--dim2);user-select:none}
.al-im{flex:0 0 40px;height:34px;display:grid;place-items:center;overflow:hidden}
.al-im img{max-width:32px;max-height:32px;image-rendering:pixelated}
.al-note{padding:0 8px;font-family:var(--mono);font-size:12px;white-space:pre;overflow:hidden}
.al-cells{display:grid;height:34px}
.al-c{display:flex;align-items:center;padding:0 7px;font-family:var(--mono);font-size:12px;
  border-right:1px solid #ffffff0a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-c.isimg{color:var(--gold)}
.al-c.extra{background:#ff6b6b1f;color:#ffd0d0}

/* ---- 그림 미리보기 ---- */
.pv{flex:0 0 auto;width:186px;display:flex;flex-direction:column;gap:8px;padding:12px;
  background:#0b0c11;border-right:1px solid var(--line)}
.pv-top{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold)}
.pv-top .btn{margin-left:auto;padding:3px 7px}
.pv-box{position:relative;display:grid;place-items:center;height:150px;background:
  linear-gradient(45deg,#16181f 25%,transparent 25%,transparent 75%,#16181f 75%) 0 0/16px 16px,
  linear-gradient(45deg,#16181f 25%,#101218 25%,#101218 75%,#16181f 75%) 8px 8px/16px 16px;
  border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.pv-box img{max-width:100%;max-height:100%;image-rendering:pixelated}
.pv-none{position:absolute;font-size:11.5px;color:var(--dim2);text-align:center;padding:0 10px}
.pv-ctl{display:flex;gap:5px;align-items:center}
.pv-ctl .ipt{flex:1;text-align:center;font-family:var(--mono)}
.pv-ctl .btn{padding:7px 8px}
.pv-hint{margin:0;font-size:11px;color:var(--dim2);line-height:1.4}
@media (max-width:860px){ .pv{display:none} }

/* ---- 버전 서랍 ---- */
.drawer{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:70;padding:20px}
.drawer-card{width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow)}
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-head b{font-size:15px}
.drawer-head .meta{font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-close{margin-left:auto;font-size:16px;line-height:1;padding:4px 8px}
.ed-close span{display:none}
.drawer-new{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer-new .ipt{flex:1}
.verslist{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:6px}
.verslist li{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);padding:9px 11px}
.verslist .vmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.verslist .vmeta b{font-size:13px;font-family:var(--mono);font-weight:600}
.verslist .note{font-size:12px;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verslist .sz{font-size:11px;color:var(--dim2)}

/* ---- 토스트 ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--card2);border:1px solid var(--line2);border-radius:var(--r2);padding:12px 18px;
  font-size:13.5px;box-shadow:var(--shadow);transition:.2s;z-index:80;max-width:min(92vw,560px);
  white-space:pre-wrap;line-height:1.5}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:#2f7a52;background:#16281f;color:#c9f3dc}
.toast.bad{border-color:#7a3030;background:#2a1618;color:#ffd0d0}

/* ---- 모바일 ---- */
@media (max-width:860px){
  .only-mobile{display:flex}
  .sidebar{position:fixed;left:0;top:var(--tb);bottom:0;z-index:40;transform:translateX(-100%);
    transition:.2s;box-shadow:var(--shadow)}
  .sidebar.open{transform:none}
  .backdrop{display:block;position:fixed;inset:var(--tb) 0 0;background:#0008;opacity:0;
    pointer-events:none;transition:.2s;z-index:35}
  .backdrop.on{opacity:1;pointer-events:auto}
  .tb-right .chip-stat:nth-child(1){display:none}
  .ed-actions .meta{display:none}
}