:root{
  --desk:#7b8598;--win:#f4f5f7;--win2:#e9ebef;--head:#dfe3ea;--line:#b9bfc9;--line2:#d5d9e0;
  --text:#1a1d22;--muted:#5b6370;--dim:#8a919c;
  --title1:#3d6fbf;--title2:#255196;--title-in1:#a9b4c6;--title-in2:#8d99ad;
  --up:#d8231f;--down:#1b47c7;--upbg:#fbe9e8;--downbg:#e7edfb;
  --yellow:#fff2a8;--sel:#ffe27a;--accent:#2b5fb7;--ok:#1d8f5a;--warn:#c98a00;
  --font:"Nanum Gothic","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--desk);color:var(--text);font:11px/1.45 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow:hidden}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--muted)}
b{font-weight:700}
/* ===== 프레임 ===== */
.frame{display:flex;flex-direction:column;height:100vh}
.tbar{background:linear-gradient(var(--title1),var(--title2));color:#fff;display:flex;align-items:center;gap:14px;padding:3px 10px;font-size:11px}
.tbar .logo{font-weight:800;font-size:12px;letter-spacing:-.01em}.tbar .logo i{font-style:normal;color:#ffd75e}
.tbar .clock{font-weight:700}
.tbar .vs{margin-left:auto;display:flex;gap:2px}
.tbar .vs span{width:16px;height:16px;border:1px solid rgba(255,255,255,.55);border-radius:2px;display:grid;place-items:center;font-size:10px;background:rgba(255,255,255,.12)}
.tbar .vs span.on{background:#fff;color:var(--title2);font-weight:700}
.tbar .sys{display:flex;gap:4px;margin-left:8px}.tbar .sys span{width:16px;height:16px;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:10px}
.menu{background:var(--win);border-bottom:1px solid var(--line);display:flex;gap:2px;padding:2px 6px}
.menu span{padding:2px 7px;cursor:default}.menu span:hover{background:var(--head)}
.tool{background:var(--win2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:3px 6px;flex-wrap:wrap}
.tool .hb{width:20px;height:20px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;font-size:12px}
.scr{display:flex;align-items:center;gap:0;border:1px solid var(--line);background:#fff;height:22px}
.scr input{width:52px;border:0;background:var(--yellow);height:100%;padding:0 5px;font:700 12px var(--font);letter-spacing:.06em;outline:0;text-align:center}
.scr input:focus{background:var(--sel)}
.scr select,.tool select{border:0;border-left:1px solid var(--line);height:100%;font:11px var(--font);background:#fff;padding:0 4px}
.scr .go{border-left:1px solid var(--line);padding:0 7px;cursor:pointer;height:100%;display:grid;place-items:center;background:var(--head)}
.sep{width:1px;height:18px;background:var(--line)}
.qb{display:flex;gap:2px;flex-wrap:wrap}
.qb button{border:1px solid var(--line);background:linear-gradient(#fff,#e9ebef);font:11px var(--font);padding:2px 8px;cursor:pointer;height:22px}
.qb button:hover{background:#fff}.qb button:focus-visible{outline:2px solid var(--accent)}
.tool .stock{margin-left:auto;display:flex;gap:2px}
.tool .stock input{border:1px solid var(--line);height:22px;width:130px;font:11px var(--font);padding:0 6px}
.desk{flex:1;position:relative;overflow:auto;background:var(--desk);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:18px 18px}
.status{background:var(--win);border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:3px 10px;font-size:11px;overflow-x:auto;white-space:nowrap}
.status b{font-weight:700}.status .lbl{color:var(--muted);margin-right:3px}
.status .r{margin-left:auto;display:flex;gap:10px;color:var(--muted)}
.status .srcs a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line2)}
.status .srcs a:hover{color:var(--link,#1b47c7);border-bottom-style:solid}
/* 장식용(동작하지 않는) 메뉴·가상화면·시스템 버튼 */
.dead{opacity:.45;cursor:default}
/* ===== MDI 창 ===== */
.w{position:absolute;background:var(--win);border:1px solid #6a7284;box-shadow:2px 3px 10px rgba(0,0,0,.35);display:flex;flex-direction:column;resize:both;overflow:hidden;min-width:320px;min-height:180px}
.w.top{z-index:20;box-shadow:3px 5px 16px rgba(0,0,0,.45)}
.w .wt{background:linear-gradient(var(--title-in1),var(--title-in2));color:#1a2233;display:flex;align-items:center;gap:6px;padding:2px 6px;cursor:move;user-select:none;font-weight:700;font-size:11px;height:22px}
.w.top .wt{background:linear-gradient(var(--title1),var(--title2));color:#fff}
.w .wt .no{background:rgba(255,255,255,.85);color:#1f2a44;padding:0 4px;border-radius:2px;font-size:10.5px;letter-spacing:.05em}
.w .wt .x{margin-left:auto;display:flex;gap:2px}
.w .wt .x span{width:16px;height:16px;border:1px solid rgba(0,0,0,.25);background:rgba(255,255,255,.6);display:grid;place-items:center;font-size:10px;cursor:pointer;color:#1a2233}
.w .wt .x span:hover{background:#fff}
.tabs{display:flex;gap:0;background:var(--head);border-bottom:1px solid var(--line);padding:2px 4px 0;flex-wrap:wrap}
.tabs span{padding:2px 8px;border:1px solid var(--line);border-bottom:0;background:var(--win2);margin-right:-1px;cursor:pointer;font-size:10.5px}
.tabs span.on{background:#fff;font-weight:700;position:relative;top:1px}
.body{flex:1;overflow:auto;padding:4px;display:flex;flex-direction:column;gap:4px;min-height:0}
.row{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.code{background:var(--yellow);border:1px solid var(--line);padding:1px 5px;font-weight:700;width:66px;text-align:center}
.nm{font-weight:800;font-size:12px}
.tag{border:1px solid var(--line);background:#fff;padding:0 4px;font-size:10px;color:var(--muted)}
.ib{border:1px solid var(--line);background:#fff;padding:1px 5px}
.px{font-size:15px;font-weight:800}
table{border-collapse:collapse;width:100%;font-size:11px}
th{background:var(--head);border:1px solid var(--line2);padding:2px 4px;font-weight:700;text-align:center;white-space:nowrap;color:#2b3340}
td{border:1px solid var(--line2);padding:1.5px 4px;text-align:right;white-space:nowrap;background:#fff}
td:first-child{text-align:left}
tr:hover td{background:#f5f8ff}
.tw{overflow:auto;flex:1;min-height:0}
.grid{display:grid;gap:4px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}.g4{grid-template-columns:repeat(4,1fr)}
.box{border:1px solid var(--line);background:#fff;padding:3px}
.box h4{margin:0 0 3px;font-size:10.5px;color:var(--muted);font-weight:700;background:var(--head);padding:1px 4px;border:1px solid var(--line2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:1px 6px}
.kv span{color:var(--muted)}.kv b{text-align:right;font-weight:700}
/* 호가 */
.book{border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:1fr 70px 1fr;font-size:11px}
.book>div{padding:1px 4px;border-bottom:1px solid var(--line2);position:relative;height:17px;line-height:15px;white-space:nowrap}
.book .a{text-align:right;color:var(--down)}.book .b{text-align:left;color:var(--up)}
.book .p{text-align:center;font-weight:700}.book .p.ask{background:var(--downbg);color:var(--down)}.book .p.bid{background:var(--upbg);color:var(--up)}.book .p.cur{background:var(--sel);color:#000;outline:1px solid #e0b000}
.book .a i,.book .b i{position:absolute;top:2px;bottom:2px;opacity:.25}
.book .a i{right:0;background:var(--down)}.book .b i{left:0;background:var(--up)}
.book .mid{grid-column:1/4;background:var(--head);text-align:center;font-weight:700;color:#2b3340}
.pill{display:inline-block;padding:0 5px;border:1px solid;border-radius:2px;font-size:10px;font-weight:700}
.pill.ok{color:var(--ok);border-color:var(--ok);background:#e8f6ef}.pill.warn{color:var(--warn);border-color:var(--warn);background:#fff6df}.pill.crit{color:var(--up);border-color:var(--up);background:var(--upbg)}
.spark{width:100%;height:46px;display:block;background:#fff;border:1px solid var(--line2)}
.chip{border:1px solid var(--line);background:#fff;padding:1px 6px;display:inline-flex;gap:4px;align-items:center}
.chip b{color:var(--accent)}
.presets button{border:1px solid var(--line);background:linear-gradient(#fff,#e9ebef);font:11px var(--font);padding:1px 8px;cursor:pointer}
.presets button.on{background:var(--sel);border-color:#d9a900}
.lamp{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ccc;margin-right:3px;vertical-align:-1px}
.lamp.g{background:#2fbf71}.lamp.y{background:#f2c200}.lamp.r{background:#e0302c}
/* 화면번호 목록 */
.list{position:absolute;left:8px;top:8px;width:300px;z-index:30;background:#fff;border:1px solid #6a7284;box-shadow:2px 3px 10px rgba(0,0,0,.35);display:none;flex-direction:column;max-height:calc(100% - 16px)}
.list.on{display:flex}
.list .lt{background:linear-gradient(var(--title1),var(--title2));color:#fff;padding:3px 8px;font-weight:700;display:flex}
.list .lt span{margin-left:auto;cursor:pointer}
.list .lb{overflow:auto;padding:4px}
.list h5{margin:6px 4px 2px;font-size:10.5px;color:var(--muted)}
.list button{display:flex;gap:8px;width:100%;border:0;background:none;text-align:left;padding:3px 6px;font:11px var(--font);cursor:pointer}
.list button:hover{background:var(--yellow)}
.list button code{font-family:inherit;font-weight:700;color:var(--accent);width:40px}
.list button .own{margin-left:auto;font-size:10px;color:var(--dim)}
.hint{position:absolute;right:12px;bottom:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:6px 10px;font-size:11px;max-width:320px;z-index:25;color:#333}
.hint b{color:var(--accent)}
@media (max-width:760px){.w{position:relative!important;left:0!important;top:0!important;width:auto!important;height:auto!important;margin:8px}.desk{padding-bottom:20px}.hint{display:none}.tool .stock{margin-left:0}}

/* ===== 모바일 셸 (eFriend Smart) ===== */
.mshell{display:none}
body.mobile .frame{display:none}
body.mobile .mshell{display:flex;flex-direction:column;position:fixed;inset:0;background:#fff;color:#111;font-size:12px}
body.mobile.preview{background:#2b3140;overflow:auto}
body.mobile.preview .mshell{position:relative;width:390px;height:780px;margin:24px auto;border:10px solid #111;border-radius:36px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);inset:auto}
.mh{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #e3e6ea;background:#fff}
.mh .bk{font-size:16px;color:#333}.mh .tt{font-weight:800;font-size:14px;flex:1;display:flex;align-items:center;gap:6px}.mh .tt small{font-weight:400;color:#888;font-size:11px}
.mh .ic{display:flex;gap:10px;font-size:15px;color:#333}
.mscr{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#f4f5f7;border-bottom:1px solid #e3e6ea}
.mscr input{width:64px;border:1px solid #ccd;background:var(--yellow);font:700 13px var(--font);text-align:center;padding:3px;letter-spacing:.06em}
.mscr .q{flex:1;border:1px solid #ccd;background:#fff;padding:3px 8px;color:#999}
.mtabs{display:flex;overflow-x:auto;border-bottom:2px solid #e3e6ea;background:#fff;scrollbar-width:none}
.mtabs span{padding:8px 12px;white-space:nowrap;color:#666;font-weight:700;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer}
.mtabs span.on{color:var(--up);border-bottom-color:var(--up)}
.mbody{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fff}
.mbody .box,.mbody .tw{border-color:#e3e6ea}.mbody table{font-size:11.5px}.mbody .row{gap:6px}
.mtick{display:flex;gap:14px;padding:4px 10px;background:#1f3c78;color:#fff;font-size:11px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.mtick b{font-weight:700}.mtick .u{color:#ff8c8c}.mtick .d{color:#9cc2ff}
.mnav{display:grid;grid-template-columns:36px repeat(5,1fr) 44px;align-items:center;border-top:1px solid #e3e6ea;background:#fff;padding:4px 4px 8px}
.mnav button{border:0;background:none;font:10.5px var(--font);color:#555;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0;cursor:pointer;line-height:1.15}
.mnav button.on{color:var(--up);font-weight:800}
.mnav .hbg{font-size:18px;color:#333}
.mnav .blue{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5b8def,#1f3c78);margin:0 auto;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mlist{position:absolute;inset:0;background:#fff;z-index:5;display:none;flex-direction:column}
.mlist.on{display:flex}
.mlist .lb{overflow:auto;padding:6px}
.mlist button{display:flex;gap:10px;width:100%;border:0;border-bottom:1px solid #eee;background:none;text-align:left;padding:9px 8px;font:12px var(--font)}
.mlist button code{font-family:inherit;font-weight:800;color:var(--accent);width:40px}
.mlist h5{margin:8px 6px 2px;color:#888;font-size:11px}
.pvbtn{margin-left:8px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;font:11px var(--font);padding:1px 8px;cursor:pointer;border-radius:2px}
.pvbtn:hover{background:#fff;color:var(--title2)}

/* ===== 비동기 로딩 / 오류 ===== */
.loading{color:var(--muted);padding:20px;text-align:center}
.err{color:var(--up);padding:10px}
.mbody .loading{padding:28px}
.w .wt .pill{font-weight:700}
.wait{color:var(--dim)}
.box.wait h4{color:var(--dim)}
/* 모바일 셸: 카드 그리드는 세로 스택 */
.mbody .g2,.mbody .g3,.mbody .g4{grid-template-columns:1fr}

/* ===== 로그인 게이트 (eFriend Plus 접속창) ===== */
.login{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse at 50% 40%,#3f5f95 0%,#1d3260 55%,#101b36 100%);display:flex;align-items:center;justify-content:center;padding:16px}
body.in .login{display:none}
.login-box{width:380px;max-width:100%;background:#fff;border:1px solid #6a7284;box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:12px;color:#222}
.login-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:2px solid #1f3c78}
.login-head img{display:block;height:26px;width:auto}
.login-prod{font-weight:800;font-size:15px;color:#1f3c78}.login-prod i{font-style:normal;color:#e0a52b}
.login-warn{padding:9px 16px;background:#fff6e0;border-bottom:1px solid #e6d4a6;color:#8a5a00;font-size:12px;line-height:1.45;font-weight:700}
.login-form input[readonly]{background:var(--win);color:#888;cursor:default}
.login-tabs{display:flex;background:var(--head);border-bottom:1px solid var(--line)}
.login-tabs span{flex:1;text-align:center;padding:7px 0;color:#666;font-weight:700;cursor:pointer;border-right:1px solid var(--line)}
.login-tabs span:last-child{border-right:0}.login-tabs span.on{background:#fff;color:#1f3c78;border-bottom:2px solid #fff;margin-bottom:-1px}
.login-form{padding:16px 18px 10px;display:flex;flex-direction:column;gap:8px}
.login-form label{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:8px;font-weight:700;color:#444}
.login-form input[type=text],.login-form input[type=password]{border:1px solid var(--line);height:30px;padding:0 8px;font:12px var(--font);background:var(--yellow)}
.login-form input:focus{outline:2px solid var(--accent);background:#fff}
.login-opts{display:flex;gap:12px;align-items:center;font-size:11px;color:#555;margin-top:2px}
.login-opts .chk{display:flex;align-items:center;gap:4px;font-weight:400;grid-template-columns:none}
.login-link{margin-left:auto;color:var(--accent);text-decoration:underline}
.login-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.btn-login{height:34px;border:0;background:linear-gradient(#2c5db4,#1f3c78);color:#fff;font:700 13px var(--font);cursor:pointer}
.btn-guest{height:34px;border:1px solid var(--line);background:linear-gradient(#fff,#e9ebef);font:12px var(--font);cursor:pointer}
.btn-login:hover{filter:brightness(1.08)}.btn-guest:hover{background:#fff}
.login-foot{display:flex;flex-direction:column;gap:2px;padding:8px 18px 12px;border-top:1px solid var(--line2);font-size:10.5px;color:#777;background:var(--win)}
.login-note{color:#999}
@media (prefers-reduced-motion:no-preference){.login-box{animation:lg .25s ease-out}@keyframes lg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

/* 창 제목줄은 드래그 전용 — 텍스트 선택 금지 */
.wt{user-select:none}