/* ESGBB 웹앱 공통 디자인: 어두운 요약 카드 + 흰 둥근 카드 + 아래쪽 탭 메뉴. 메인 컬러 R79 G189 B187 */
:root{--main:#4FBDBB;--main-d:#1f8f8d;--main-l:#d6f1f0;--ink:#0b0d12;--sub:#6b7480;--page:#e9edf2;--bg:#f3f5f8;--card:#fff;--line:#e8ebf0;--chip:#eef1f5;--chipink:#1c232d;--hero:#0b0d12;--yellow:#ffd93b;--warn:#b45309;--warnbg:#fff3d6;--ok:#15803d;--okbg:#e2f6e9;--bad:#c62828;--badbg:#fde8e8}
@media (prefers-color-scheme:dark){:root{--ink:#eef2f6;--sub:#9aa4b2;--page:#07090c;--bg:#0f1319;--card:#1a2029;--line:#262e3a;--chip:#252d39;--chipink:#e3e8ee;--hero:#04060a;--main-l:#1d3a3a;--main-d:#7fd6d4;--warn:#fbbf24;--warnbg:#3a2f12;--ok:#86efac;--okbg:#17321f;--bad:#fca5a5;--badbg:#3b1b1b}}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
.ctp{background:var(--bg);border-radius:14px;padding:12px;margin-top:10px}
.ctp select,.ctp input{width:100%}
.ctp .ct-new{margin-top:10px}
body{background:var(--page);color:var(--ink);font-family:"Paperlogy","Pretendard","Malgun Gothic",sans-serif;font-size:15px;line-height:1.45}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);padding:18px 14px 92px;position:relative}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.eyebrow{font-size:12px;color:var(--sub);margin-top:2px}
h1{font-size:22px;font-weight:800;margin:2px 0 12px;letter-spacing:-.3px}
.ibtn{border:0;background:var(--card);color:var(--ink);width:38px;height:38px;border-radius:12px;cursor:pointer;display:grid;place-items:center}
.ibtn svg,.nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero{background:var(--hero);color:#fff;border-radius:20px;padding:16px 18px;margin-bottom:12px}
.hero .s{font-size:12px;opacity:.8}.hero .big{font-size:38px;font-weight:800;color:var(--main);line-height:1.15;margin:4px 0}
.hero .d{font-size:12px;opacity:.85}.hero .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.card{background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:12px}
.card .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.card .ch b{font-size:15px}.card .ch span{font-size:11px;color:var(--sub)}
.li{padding:9px 0;border-bottom:1px solid var(--line)}.li:last-child{border-bottom:0}
.li .r1{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:15px}
.li .r2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 8px;font-size:12px;color:var(--sub);margin-top:2px;align-items:center}
.bar{height:6px;border-radius:3px;background:var(--main-l);margin-top:7px;overflow:hidden}.bar i{display:block;height:100%;background:var(--main);border-radius:3px}.bar.y i{background:#f5b400}
.pill{display:inline-block;font-size:11px;font-weight:700;border-radius:8px;padding:3px 8px;background:var(--chip);color:var(--chipink);white-space:nowrap}
.pill.w{background:var(--warnbg);color:var(--warn)}.pill.g{background:var(--okbg);color:var(--ok)}.pill.b{background:var(--badbg);color:var(--bad)}.pill.m{background:var(--main-l);color:var(--main-d)}.pill.y{background:var(--yellow);color:#111}
.hero .pill{background:#232833;color:#fff}.hero .pill.y{background:var(--yellow);color:#111}
.note{background:var(--main-l);border-radius:16px;padding:12px 14px;font-size:12px;color:var(--main-d);margin-bottom:12px}.note b{display:block;font-size:13px;margin-bottom:2px}
.chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.btn,button.btn{border:0;border-radius:12px;padding:9px 13px;font:inherit;font-weight:700;font-size:13px;background:var(--chip);color:var(--chipink);cursor:pointer}
.btn.p{background:var(--ink);color:var(--bg)}.btn.m{background:var(--main);color:#06302f}.btn.ghost{background:none;color:var(--sub);padding-left:0}
.btn:disabled{opacity:.4;cursor:not-allowed}
select,input{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);max-width:100%}
.tabsrow{display:flex;gap:6px;margin:2px 0 10px;overflow-x:auto;padding-bottom:2px}
.tabsrow .t{background:var(--card);border:0;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}.tabsrow .t.on{background:var(--ink);color:var(--bg)}
.tools{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.tools input{flex:1;min-width:140px}
.chart{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:6px}
.chart .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:10px;color:var(--sub)}
.chart .c i{width:100%;border-radius:4px 4px 0 0;background:var(--main-l);display:block;min-height:2px}.chart .c i.on{background:var(--main)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:flex;flex-direction:column;font-size:12px;color:var(--sub);gap:3px}
.form .full{grid-column:1/-1}
.msg{padding:11px 14px;border-radius:14px;margin-bottom:12px;background:var(--card);font-size:13px}
.msg.err{background:var(--badbg);color:var(--bad)}.msg.ok{background:var(--okbg);color:var(--ok)}
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(480px,100%);height:64px;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;z-index:10}
.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;font-size:11px;color:var(--sub);position:relative;min-width:64px;cursor:pointer}
.nav button.on{color:var(--ink);font-weight:800}
.nav .dot{position:absolute;top:-4px;right:14px;background:#e11d48;color:#fff;border-radius:999px;font-size:10px;padding:0 5px;font-weight:800}
.login{text-align:center;padding:50px 6px}.login p{margin:10px 0}
.small{font-size:12px;color:var(--sub)}
#lock{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;gap:14px}
#lock[hidden]{display:none}
.dots{display:flex;gap:14px}.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--main-d)}.dot.on{background:var(--main)}
#lockInput{position:absolute;opacity:0;width:1px}
#lockMsg{min-height:24px;color:var(--warn)}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:10px}
.key{height:60px;font:inherit;font-size:22px;font-weight:700;border:0;border-radius:14px;background:var(--card);color:var(--ink);cursor:pointer}
.key:active{background:var(--main)}