/* ===== Eurex trade — 지표분석 (notrade) : design tokens ===== */
:root{
  --bg:#050608; --bg-2:#0b0d11; --bg-grad:radial-gradient(120% 80% at 50% -10%, #10141b 0%, #070809 55%, #050608 100%);
  --surface:#14171c; --surface-2:#1b1f26; --surface-3:#23272f;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#F2F4F6; --text-dim:#A8ACB3; --text-mute:#6B7078;
  --gold:#C9A44A; --gold-bright:#E8C15A;
  --gold-grad:linear-gradient(135deg,#B8862F,#E8C15A 55%,#FFC900);
  --navy:#1E3A5F; --blue:#3b82f6; --blue-bright:#4d9dff;
  --up:#f6465d; --down:#4d9dff;             /* 상승 red / 하락 blue (KR) */
  --card-grad:linear-gradient(150deg,#2c2f36 0%,#1c1f25 42%,#141619 72%,#0a0b0d 100%);
  --radius:16px; --radius-lg:20px;
  --tabbar-h:64px; --topbar-h:56px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --maxw:520px;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#eef1f5; --bg-2:#e7ebf1; --bg-grad:radial-gradient(120% 80% at 50% -10%,#ffffff 0%,#eef1f5 60%);
  --surface:#ffffff; --surface-2:#f4f6f9; --surface-3:#e9edf2;
  --line:rgba(20,25,33,.10); --line-2:rgba(20,25,33,.16);
  --text:#161a20; --text-dim:#4b5563; --text-mute:#8a93a0;
  --card-grad:linear-gradient(150deg,#ffffff 0%,#f4f6f9 60%,#eef1f5 100%);
  --shadow:0 10px 24px rgba(20,30,50,.10);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.tabnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
::-webkit-scrollbar{width:0;height:0}

/* app shell centered like a phone on wide screens */
#app{max-width:var(--maxw);margin:0 auto;min-height:100dvh;background:var(--bg);background-image:var(--bg-grad);position:relative;overflow-x:hidden;box-shadow:0 0 60px rgba(0,0,0,.5)}
.screen{display:none;flex-direction:column;min-height:100dvh}
.screen.active{display:flex}
.up{color:var(--up)!important}.down{color:var(--down)!important}
.hidden{display:none!important}

/* ===== Top bar ===== */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:var(--topbar-h);
  padding:0 12px;background:rgba(6,7,9,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
[data-theme="light"] .topbar{background:rgba(255,255,255,.86)}
.topbar .brand{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0}
.topbar .brand img{height:26px;width:auto}
.tb-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--surface);color:var(--text-dim);font-size:13.5px;font-weight:600;white-space:nowrap}
.tb-btn:active{transform:scale(.96)}
.tb-btn.icon{padding:0;width:40px;justify-content:center}
.tb-btn .ico{width:19px;height:19px}
.tb-btn.bell .ico{color:var(--gold)}
.tb-btn.logout{color:var(--text-dim)}

/* ===== Bottom tab bar ===== */
.tabbar{position:sticky;bottom:0;z-index:40;display:flex;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:rgba(6,7,9,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
[data-theme="light"] .tabbar{background:rgba(255,255,255,.94)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--text-mute);font-size:11px;font-weight:600}
.tabbar button .ico{width:23px;height:23px}
.tabbar button.active{color:var(--blue-bright)}
.tabbar button:active{transform:scale(.94)}

/* ===== Content ===== */
.content{flex:1;padding:14px 14px 22px;display:flex;flex-direction:column;gap:14px}
.page-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:2px 2px 0}
.page-sub{color:var(--text-mute);font-size:13px;margin:-6px 2px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card.grad{background:var(--card-grad)}
.muted{color:var(--text-mute)}.dim{color:var(--text-dim)}
.hair{height:1px;background:var(--line);margin:2px 0}

/* segmented pills */
.seg{display:flex;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px}
.seg button{flex:1;height:42px;border-radius:9px;font-weight:700;font-size:15px;color:var(--text-dim)}
.seg button.active{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.35)}

.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip{flex:0 0 auto;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--text-dim);font-weight:700;font-size:13.5px}
.chip.active{border-color:transparent;background:var(--gold-grad);color:#1a1408}
.chip:active{transform:scale(.96)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;font-weight:800;font-size:16px;width:100%}
.btn.gold{background:var(--gold-grad);color:#1a1408;box-shadow:0 6px 18px rgba(200,160,70,.28)}
.btn.blue{background:var(--blue);color:#fff}
.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2)}
.btn.outline{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn:active{transform:scale(.985)}
.btn.sm{height:42px;font-size:14px;border-radius:11px;width:auto;padding:0 16px}

/* ===== Symbol header (home) ===== */
.symhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px;padding:6px 4px 2px}
.symhead .name{font-size:19px;font-weight:800;letter-spacing:-.3px}
.symhead .code{font-size:12.5px;color:var(--text-mute);font-weight:700}
.symhead .price{font-size:26px;font-weight:800;margin-left:auto}
.symhead .chg{font-size:15px;font-weight:800}

/* tradingview containers */
.tvbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tvbox.chart{height:52vh;min-height:340px}
.tv-fill,.tvbox .tradingview-widget-container,.tvbox .tradingview-widget-container__widget{height:100%;width:100%}
.section-h{display:flex;align-items:center;gap:8px;margin:4px 2px 0}
.section-h h3{font-size:16px;font-weight:800;margin:0}
.section-h .tag{font-size:11px;font-weight:800;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 8px}
.section-h .spacer{margin-left:auto}
.ta-box{height:420px}

/* signal summary card */
.signal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.signal .cell{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 6px}
.signal .cell .k{font-size:12px;color:var(--text-mute);font-weight:700}
.signal .cell .v{font-size:18px;font-weight:800;margin-top:3px}

/* ===== Market / stock list ===== */
.qlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.qhead,.qrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:14px 16px}
.qhead{color:var(--text-mute);font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.qhead .r{text-align:right}
.qrow{border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:none}
.qrow:active{background:var(--surface-2)}
.qrow .nm{font-weight:800;font-size:15.5px}
.qrow .cd{font-size:12px;color:var(--text-mute);font-weight:700;margin-top:2px}
.qrow .px{text-align:right;font-weight:800;font-size:16px}
.qrow .rt{text-align:right;font-weight:800;font-size:15px;min-width:74px}

/* ===== Economic calendar (fallback list) ===== */
.eco-row{display:grid;grid-template-columns:56px 74px 1fr;gap:10px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.eco-time{font-weight:800;color:var(--text-dim)}
.eco-cur{display:flex;align-items:center;gap:7px;font-weight:800}
.eco-cur .flag{font-size:17px}
.eco-day{font-weight:800;font-size:15px;padding:14px 4px 6px}
.eco-evt{font-size:14.5px}
.eco-imp{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px}
.imp-3{background:var(--up)}.imp-2{background:var(--gold)}.imp-1{background:var(--text-mute)}

/* ===== Chat (고객센터) ===== */
.chat{display:flex;flex-direction:column;gap:10px;padding:8px 2px;flex:1}
.msg{max-width:80%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.msg.them{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-top-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:5px}
.msg .t{display:block;font-size:11px;opacity:.6;margin-top:5px}
.chatbar{display:flex;gap:8px;padding:10px 2px 2px;margin-top:auto}
.chatbar input{flex:1;height:46px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);color:var(--text);padding:0 14px;font-size:15px}

/* ===== Forms / inputs ===== */
.field{margin-top:14px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--text-dim);margin-bottom:7px}
.field label .req{color:var(--up)}
.input{width:100%;height:52px;border-radius:13px;background:var(--surface);border:1px solid var(--line-2);
  color:var(--text);padding:0 15px;font-size:16px}
.input::placeholder{color:var(--text-mute)}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23A8ACB3' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.row2{display:flex;gap:10px}.row2 .input{flex:1}

/* ===== Login ===== */
#login{background:var(--bg);background-image:var(--bg-grad)}
.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 22px 10px}
.login-logo{position:relative;display:flex;justify-content:center;margin-bottom:26px}
.login-logo::before{content:"";position:absolute;inset:-40px -10px;background:radial-gradient(circle at 50% 45%,rgba(201,164,74,.16),transparent 62%);filter:blur(4px)}
.login-logo img{height:118px;width:auto;position:relative;z-index:1}
.login-card{width:100%;background:var(--card-grad);border:1px solid var(--line-2);border-radius:22px;padding:26px 22px;box-shadow:var(--shadow)}
.login-card h1{text-align:center;font-size:40px;font-weight:300;letter-spacing:10px;margin:2px 0 18px;color:#fff}
[data-theme="light"] .login-card h1{color:#101418}
.login-card .divider{height:1px;background:var(--line-2);margin:0 0 20px}
.lg-input{display:flex;align-items:center;gap:12px;height:56px;background:rgba(0,0,0,.28);border:1px solid var(--line-2);
  border-radius:14px;padding:0 16px;margin-bottom:14px}
[data-theme="light"] .lg-input{background:rgba(0,0,0,.03)}
.lg-input .ico{width:22px;height:22px;flex:0 0 auto}
.lg-input input{flex:1;background:none;border:none;color:var(--text);font-size:17px;outline:none}
.lg-input input::placeholder{color:var(--text-mute)}
.lg-checks{display:flex;gap:22px;margin:6px 2px 18px}
.lg-checks label{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--text-dim);font-weight:600}
.lg-checks input{width:20px;height:20px;accent-color:var(--gold)}
.login-err{color:var(--up);text-align:center;font-weight:700;font-size:14.5px;min-height:20px;margin:14px 0 4px}
.login-join{text-align:center;font-size:15px;color:var(--text-dim);font-weight:600;margin-top:6px}
.login-join b{color:var(--gold);font-weight:800;margin-left:6px}
.ticker{border-top:1px solid var(--line);background:rgba(6,7,9,.9);overflow:hidden;white-space:nowrap}
.ticker .track{display:inline-flex;gap:34px;padding:11px 16px;animation:tick 32s linear infinite}
.ticker .it{font-size:13.5px;font-weight:700;color:var(--text-dim)}
.ticker .it b{color:var(--text);margin:0 6px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Notices ===== */
.notice-row{display:flex;align-items:center;gap:10px;padding:15px 4px;border-bottom:1px solid var(--line)}
.notice-row .date{font-size:12.5px;color:var(--text-mute);font-weight:700;width:88px;flex:0 0 auto}
.badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.badge.urgent{background:rgba(246,70,93,.16);color:var(--up)}
.badge.normal{background:rgba(120,130,145,.2);color:var(--text-dim)}
.badge.gold{background:rgba(201,164,74,.16);color:var(--gold)}
.notice-row .ttl{font-weight:700;font-size:14.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* account rows */
.kv{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-dim);font-weight:600}
.kv .v{font-weight:800}
.toggle{position:relative;width:48px;height:28px;border-radius:999px;background:var(--surface-3);transition:.2s;flex:0 0 auto}
.toggle.on{background:var(--blue)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on::after{left:23px}

/* ===== Modals / sheets ===== */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center}
.overlay.active{display:flex}
.sheet{width:100%;max-width:var(--maxw);background:var(--surface);border-top-left-radius:22px;border-top-right-radius:22px;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));max-height:82vh;overflow:auto;animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .grip{width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:6px auto 12px}
.sheet-item{display:flex;align-items:center;gap:16px;padding:16px 6px;font-size:17px;font-weight:700;border-bottom:1px solid var(--line)}
.sheet-item:last-child{border-bottom:none}
.sheet-item .ico{width:24px;height:24px;color:var(--text-dim)}
.sheet-item:active{background:var(--surface-2)}

/* center modal (notice popup) */
.overlay.center{align-items:center;padding:22px}
.modal{width:100%;max-width:440px;background:#fff;color:#1a1d21;border-radius:22px;padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:pop .25s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.modal .m-kicker{color:var(--blue);font-weight:800;letter-spacing:2px;font-size:14px}
.modal .m-meta{display:flex;align-items:center;gap:12px;margin:14px 0 6px}
.modal .m-badge{background:#5b6472;color:#fff;font-weight:800;font-size:13px;padding:5px 14px;border-radius:999px}
.modal .m-date{color:#8a93a0;font-weight:700}
.modal .m-title{font-size:34px;font-weight:800;color:#c7ccd3;margin:8px 0 16px}
.modal .m-body{color:#3a4150;font-size:16px;line-height:1.7}
.modal .m-body+.m-body{margin-top:14px}
.modal .btn{margin-top:22px;border:2px solid var(--gold)}

/* search overlay */
.overlay.top{align-items:stretch}
.search-panel{width:100%;max-width:var(--maxw);margin:0 auto;background:var(--bg);display:flex;flex-direction:column}
.search-top{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.search-top input{flex:1;height:46px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);color:var(--text);padding:0 14px;font-size:16px}
.search-results{overflow:auto;padding:6px 8px 20px}
.sr-item{display:flex;align-items:center;gap:12px;padding:14px 10px;border-bottom:1px solid var(--line)}
.sr-item:active{background:var(--surface-2)}
.sr-item .nm{font-weight:800}
.sr-item .cd{font-size:12px;color:var(--text-mute);font-weight:700}
.sr-item .cat{margin-left:auto;font-size:11px;font-weight:800;color:var(--text-mute);border:1px solid var(--line-2);padding:3px 8px;border-radius:999px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:rgba(20,23,28,.96);color:#fff;border:1px solid var(--line-2);padding:11px 18px;border-radius:12px;
  font-size:14px;font-weight:600;z-index:80;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:90vw}
.toast.show{opacity:1;bottom:calc(100px + env(safe-area-inset-bottom))}

/* disclaimer */
.disclaimer{font-size:12px;color:var(--text-mute);line-height:1.6;text-align:center;padding:6px 8px 2px}
.disclaimer b{color:var(--text-dim)}

@media (max-width:380px){ .symhead .price{font-size:22px} .login-card h1{font-size:34px;letter-spacing:7px} }

/* ===== layout: pages / dark button / responsive topbar ===== */
#pages{flex:1;min-height:0;display:flex;flex-direction:column}
.page{display:none}
.page.active{display:flex;flex-direction:column;flex:1;min-height:0}
.btn.dark{background:linear-gradient(135deg,#3b3e45,#26292f 60%,#191b20);color:#fff;height:56px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.4)}
[data-theme="light"] .btn.dark{background:linear-gradient(135deg,#2b2f36,#1c1f25);color:#fff}
@media (max-width:361px){
  #tb-search span,#tb-logout span{display:none}
  .topbar{gap:6px;padding:0 10px}
  .tb-btn{padding:0 11px}
  .tb-btn.icon{width:38px}
}